Project
Project
Mattress.com
Mattress.com
Agency
Clearlink

Role
Senior Product Designer

Year
2017
Agency
Clearlink

Role
Senior Product Designer

Year
2017
Shopping for a mattress online is tough. It's hard to choose the one to sleep on for the next 8-15 years. So our client came to us with an idea: create a site that would help choose between all the different constructions, brands, and prices available.

They looked to us for a total solution, ranging from strategy, content, branding and development. After spending time researching, it became apparent that unbiased advice on sleep products is what users searched for most. After the client's green light, we created an MVP for it's intial launch, with tools, articles, and reviews geared to help users make their final decision. 


I worked as the single designer on the project, alongside a team of: 2 content strategists, 6 copywriters, 2 developers, an analyst, a scrum master, and a QA Tester. Together we created a build that represented our vision for the site. Unfortunately, despite both us and the client being thrilled with the result, the project was pulled last minute after a client leadership change.
Shopping for a mattress online is tough. Between all the different constructions, brands, and prices, it's hard to choose the one to sleep on for the next 8-15 years. So our client came to us with an idea: create a site that would help.

They looked to us for a total solution, ranging from strategy, content, branding and development. After spending time researching, it became apparent that unbiased advice on sleep products is what users searched for most. After the client's green light, we created a MVP for it's intial launch, with tools, articles, and reviews geared to help users make their final decision. 


I worked as the single designer on the project, alongside a team of: 2 content strategists, 6 copywriters, 2 developers, an analyst, a scrum master, and a QA Tester. Together we created a build that represented our vision for the site. Unfortunately, despite both us and the client being thrilled with the result, the project was pulled last minute after a client leadership change.
HOME copy
14_SizeLanding_lrg@2x
01

In additon to creating a great experience, high priority was given on SEO performance. Improving traffic, chances of a Google snippet, and a better search ranking was something we kept in mind with every decision.

01

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum commodo justo mollis maximus elementum.

01
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum commodo justo mollis maximus.

OBJECTIVE 01
Provide a space online to get unbiased reviews on all types of mattresses.  ...............
OBJECTIVE 01
Create a scalable modular design system to grow with the brand and user.
OBJECTIVE 04
Create an atomic styleguide based on the new brand.
OBJECTIVE 04
Establish and uphold sturdy UX patterns for data and future product creation processes.
OBJECTIVE 02
Balance a great user experience with practices that increase SEO performance.  ...............
OBJECTIVE 02
Re-imagine a traditional financial experience. ........................................
OBJECTIVE 02
Re-imagine a traditional financial UX. .........................................
OBJECTIVE 03
Research and create all the content.    
..................
OBJECTIVE 03
Research and create all the content.      
..................
OBJECTIVE 03
Balance information to reflect needs of all users and brand products. ..................
OBJECTIVE 03
Balance information to reflect needs of all users and brands. ..................
MTS_phones
02
Our strategy focused on a mid-funnel shopper seeking a reliable, clear mattress resource. Our solutions adressed 3 personas within this audience.
03
Our strategy focusus on a shopper mid-funnel seeking a reliable, clear mattress resource. Solutions adressed 3 personas within this audience.
03
Our strategy focusus on a shopper mid-funnel seeking a reliable, clear mattress resource. Solutions adressed 3 personas within this audience.
PERSONA 01
The Googler
Looking for quick answers to their mattress questions.




Optimize content to maximize SEO value
Reference common keywords to help define content and site
Feature FAQs
Blog posts serve time relevant content
Mega menu and footer for quick navigation
Search functionality

PERSONA 01
The Googler
Looking for quick answers to their mattress questions.



Optimize content and site structure to maximize SEO value

Reference common keywords to help define content and site

Feature FAQs

Blog posts serve time relevant content

Mega menu and footer for quick navigation

Search functionality
PERSONA 01
The Googler
Looking for quick answers to their mattress questions.




Optimize content and site structure to maximize SEO value

Reference common keywords to help define content and site

Feature FAQs

Blog posts serve time relevant content

Mega menu and footer for quick navigation

Search functionality
PERSONA 02
The Comparer
Interested in a few mattresses, and wants to narrow their search with comparisons.




Develop a side-by-side comparison tool
Create a system to compare features
Collect a thorough library of information on all aspects of selecting a mattress
Blog posts serve time relevant content
Compare by: customer reviews, trending, professional guides, best-selling items and construction specs

PERSONA 02
The Comparer
Interested in a few mattresses, and wants to narrow their search.



Develop a side-by-side comparison tool

Create a system to compare features

Collect a thorough library of information on all aspects of selecting a mattress

Blog posts serve time relevant content

Compare by customer reviews, trending brands, professional guides, best-selling items and specs
PERSONA 02
The Comparer
Interested in a few mattresses, and wants to narrow their search.



Develop a side-by-side comparison tool

Create a system to compare features

Collect a thorough library of information on all aspects of selecting a mattress

Blog posts serve time relevant content

Compare by customer reviews, trending brands, professional guides, best-selling items and construction
PERSONA 03
The Specifier
Has individual, specific needs for their mattress.





Feature lists for various personal needs
Include articles that help define and prioritize needs
Blog posts serve time relevant content
Mega menu and footer for quick navigation
Search functionality


 

PERSONA 03
The Specifier
Has individual, specific needs for their mattress.



Feature lists for various personal needs

Include articles that help define and prioritize these needs

Blog posts serve time relevant content

Mega menu and footer for quick navigation

Search functionality


PERSONA 03
The Specifier
Has individual, specific needs for their mattress.




Feature lists for various personal needs

Include articles that help define and prioritize these needs

Blog posts serve time relevant content

Mega menu and footer for quick navigation

Search functionality



MTS_photo_laptopbed
MTS_color
MTS_type
Colors
Brand colors were selected to invoke sleep and twilight vibes without feeling drowzy or stale—mattress research is brutal enough. The resulting palette is vibrant, energetic and playful.
Colors

Brand colors were selected to invoke sleep and twiglight vibes without feeling drowzy or stale; mattress research is brutal enough. The resulting palette is vibrant, energetic and playful.
Colors
Brand colors were selected to invoke sleep and twiglight vibes without feeling drowzy or stale; mattress research is brutal enough. The resulting palette is vibrant, energetic and playful.
Type
Guillon felt like the perfect typeface for the project; its open, rounded letters and smart quirkiness give it a warm, educational personality. It’s international style keeps it grounded and professional.
Type

Guillon felt like the perfect typeface for the project; its open, rounded letters and smart quirkiness give it a warm, educational personality. It’s international style keeps it grounded and professional.
Type
Guillon felt like the perfect typeface for the project; its open, rounded letters and smart quirkiness give it a warm, educational personality. It’s international style keeps it grounded and professional.
MTS_photo
MTS_spacing
Imagery

We didn’t have much control of the product images, but when cropped at the edges, the overall effect was exciting; it highlighted construction, texture, and depth.
Imagery

We didn’t have much control of the product images, but when cropped at the edges, the overall effect was exciting; it highlighted construction, texture, and depth.
Imagery
We didn’t have much control of the product images, but when cropped at the edges, the overall effect was exciting; it highlighted construction, texture, and depth.
Structure

The site was aimed to have interchangeable modules, so we designed a universal spacing system between titles and sections. From there, additional spacing adjustments were made within the components.
Structure

The site was aimed to be as modular, so we designed a universal spacing system between titles and sections. From there, additional spacing adjustments were made within interchangeable components.
Structure
The site was aimed to be as modular, so we designed a universal spacing system between titles and sections. From there, additional spacing adjustments were made within interchangeable components.
03
Solution
02
Solution
02
Solution
MTS_home_lrg
MTS_home_sml_1
MTS_home_sml_2
MTS_home_sml_3
04
A multitude of cards were made to package product specs and indicate an interaction. The format allows content to be easily compared, and became a driver of the experience patterns.

They were also useful in breaking up the large library of information, serving as a way to highlight and break up the text.
02
A multitude of cards were made to package product specs and indicate an interaction. The format allows content to be easily compared, and became a driver of the experience patterns.

They were also useful in breaking up the large library of information, serving as a way to highlight and break up the text.
02
A multitude of cards were made to package product specs and indicate an interaction. The format allows content to be easily compared, and became a driver of the experience patterns.
MTS_compare_lrg_1
MTS_compare_sml_1
MTS_compare_sml_2
MTS_compare_sml_3
MTS_photo_box
05
Navigation
02
Navigation
MTS_Menu_sml_1
MTS_Menu_sml_2
MTS_Menu_sml_3
MTS_Menu_lrg
MTS_Menu_2_lrg
MTS_Search_sml_1
MTS_Search_sml_3
MTS_Search_sml_2
MTS_photo_hand-2
06
Visual styles and typography was controlled and consistent throughout the experience
02
Lorem ipsum dolor sit amet consectuer adipsicing
MTS_Best_lrg_1-1
MTS_Best_sml_1
MTS_Best_sml_2
MTS_Best_sml_3
MTS_Best_lrg_1
MTS_Best_lrg_2
MTS_Blog_lrg
9_Blog_lrg Copy@1x
07
Blog pages were created to keep information current and provide additional SEO when neeeded.
MTS_article_lrg_2


01

Hey there, this is the default text for a new paragraph. 
01
Hey there, this is the default text.
MTS_article_sml_1
MTS_brand_sml_1
08

Easily tappable buttons added to a playful and mobile-centered experience.
01

Hey there, this is the default text.
01
Hey there, this is the default text.
MTS_brand_lrg
MTS_Individual_Casper_lrg
doorstep