top of page
kd_SNB_hero_V3031119_2x_edited.jpg

UX/UI DESIGN

WEB

a fresh take

on getting

quality sleep

MY ROLE

UX/UI Designer

CLIENT

Sleep Number

SNB Overview
OVERVIEW

Sleep Number's holistic approach to engaging with its customers includes a blog that focuses on healthy ways to attain better sleep. Over the years, the blog's original design became disconnected from the brand's digital identity and was riddled with usability issues. Seeing a pertinent need for an update, the leadership team tasked me to redesign the blog.

REDESIGN

1 / 2

Image of the blog's redesigned homepage hero area.
CHALLENGE

The existing blog was outdated and lacked content hierarchy. Readers found the experience clunky, which led to a high bounce rate. To resolve these issues and ensure that the blog's redesign would provide positive user journeys, the following project goals were defined -

1

Broaden reach to new demographics

3

Provide customers with a best-in-class experience 

2

Re-engage with existing loyal customers

4

Encompass the brand’s current digital identity 

SNB Challenge
Image of a woman that represents the user persona for the blog.

MEET THE PRIMARY AUDIENCE

sara wilson

Age 
38-45yrs

Earns

$110-136k

Married
w/ 2 kids

MOTIVATIONS

She is keen on natural solutions but is curious if new technologies can improve her family's life.

CORE NEEDS

She wants the time she spends researching health solutions to be well-curated and efficient.

PAIN POINTS

She's inundated with far too many irrelevant and low-quality health solution recommendations.

APPROACH

Once project goals were defined, I began the research phase. The research focused on both short and long-term deliverables. That process produced qualitative data and ensured that my design solutions would be rooted in a user-centered strategy.

RESEARCH METHODS

Competitor

Analysis

Blog Best

Practices

Persona

Development

Information

Architecture

User

Journey

Prototype

Testing

SNB Approach
Image of 3 website screenshots of the competitor set I created.

RESEARCH & COMPETITOR ANALYSIS

To thoroughly understand the market, I researched industry-leading blogs and identified Medium, Refinery 29, and HBFIT. Using these brands as our competitor set, the team assessed their navigation, layout, and information architecture. This step defined opportunities for the blog's redesign by identifying market trends and best practices. These insights informed the bog's new site map, user flows, and designs. 

SITE MAP

Image of the Site Map for the redesigned blog.

HOMEPAGE WIREFRAME

Image of the desktop wireframe of the blog's homepage.
Image of the mobile wireframe of the blog's homepage.

CATEGORY PAGE WIREFRAME

Image of the mobile wireframe of the blog's category page.
Image of the desktop wireframe of the blog's category page.

BLOG POST WIREFRAME

Image of the desktop wireframe of the blog's post page.
Image of the mobile wireframe of the blog's post page.
Image of a user testing session for the mobile blog design prototype.

TESTER

USABILITY TESTING

Once initial designs and prototypes were created, we partnered with Straight Line Theory to conduct usability testing. The remote test included 12 participants that were tasked to review the prototypes and then provided their feedback.
 

Test results highlighted a few areas for improvement, and I used those insights to update the designs. The feedback was highly positive and validated that the blog's design approach was successful.

RESULTS

After designs were finalized, I began working with the development team to bring the blog to life. Once the development was complete, I helped conduct quality assurance testing. When that testing was finished, we successfully launched the new blog with positive results.

10x

INCREASE
IN BLOG
SUBSCRIBERS

80%

INCREASE IN
REPEAT VISITORS
RE-ENGAGED

award

CONTENTLY BEST IN CLASS BRAND AWARENESS

SNB Results
Image of mobile homepage comp for the blog.

MOBILE FIRST APPROACH

As technology has become so ingrained in our day-to-day lives, the importance of a mobile first experience has become a necessity. To align with best practices, I designed the blog's mobile layouts first, then expanded those designs to scale to larger device sizes.

UI COMPONENTS

Image of the redesigned blog's user interface components library.

VIEWPORT OPTIMIZED

Image of the redesigned blog's sweepstake post's hero area within a laptop mockup.
Image of the redesigned blog on different devices such as tablet and mobile.

FINAL DESIGN COMPS

Image of desktop homepage design for the blog.
Image of desktop category page design for the blog.
Image of design comp for a video blog post for the blog.
Image of design comp for a gallery blog post for the blog.
bottom of page