Mattress Firm - A Case Study

Mattress Firm - A Case Study

Product design for the e-commerce mattress giant

*I helped lead the UX design strategy, visual and UX interactions including extentive QA and implementation of successful product design.

A national e-commerce platform that regarded user feedback highly to create a great shopping experience on mobile and desktop. 

A national e-commerce platform that regarded user feedback highly to create a great shopping experience on mobile and desktop. 

A national e-commerce platform that regarded user feedback highly to create a great shopping experience on mobile and desktop. 

A national e-commerce platform that regarded user feedback highly to create a great shopping experience on mobile and desktop. 

devices

an inside look on 3 major projects

I led my team in the UX design strategy and implementation for our work with Mattress Firm. These projects included visualization and implementation of successful UX iterations for checkout, navigation and an in depth post-purchase audit.

an inside look on 3 projects

I led my team in the UX design strategy and implementation for our work with Mattress Firm. These projects included visualization and implementation of successful UX iterations for checkout, navigation and an in depth post-purchase audit.

1. checkout redesign

1. checkout redesign

In working with stakeholders within Mattress Firm, we noticed that cart abandonment was higher than it should be. This was also around the same time where we wanted to add in 3 different payment options on top of the regular checkout and financed checkout. We decided to tackle all of these at once for both desktop and mobile. I was the only designer on this project for the end to end 5 months duration. Below is an outline of my process:

In working with stakeholders within Mattress Firm, we noticed that cart abandonment was higher than it should be. This was also around the same time where we wanted to add in 3 different payment options on top of the regular checkout and financed checkout. We decided to tackle all of these at once for both desktop and mobile. I was the only designer on this project for the end to end 5 months duration. Below is an outline of my process:

  1. Perform a mini audit of the current checkout process. What is the current page flow like? How do the backend and frontend talk to each other? What are the capabilities and limitations of the codebase and site functionality?

  2. Understand the new payment options (Amazon Pay, Paypal, and Apple Pay). What do they need to work on a base level? Can they integrate with the backend seamlessly? How can I work with the developers simultaneously so we don't hold up the project?

  3. Parse the analytics and data on user behavior. Where exactly are customers abandoning checkout? What info can we get from customer service chats, calls, and emails about the frustrations customers have with the checkout process?

  4. Check in with stakeholders. Presenting stakeholders with findings, the rough plan, and to make sure everyone is on board with business impact and deliverables.

  5. Redesign everything. Reworking both the desktop and mobile checkout flows (they were two different code bases at the time), adding in the express payment methods, reworking how the financing option flowed, rethinking how the delivery scheduler worked and acted, adding in new delivery method choices, designing new UX features like how showcasing 'multiple shipments' would work and look, adhearing to best UX e-commerce practices, and bringing a modern look to the visual design.

  6. Launch in segments. With a project this big, we decided it was best to launch slowly in case of unforeseen bugs. We started with the redesign of the current flows with regular and finance checkout, as well as the updated delivery scheduler. Then we added Amazon Pay and PayPal one after the other (Apple Pay never got launched). And because the delivery method choices were added later in the project from business, we launched those last.

 

  1. Perform a mini audit of the current checkout process. What is the current page flow like? How do the backend and frontend talk to each other? What are the capabilities and limitations of the codebase and site functionality?

  2. Understand the new payment options (Amazon Pay, Paypal, and Apple Pay). What do they need to work on a base level? Can they integrate with the backend seamlessly? How can I work with the developers simultaneously so we don't hold up the project?

  3. Parse the analytics and data on user behavior. Where exactly are customers abandoning checkout? What info can we get from customer service chats, calls, and emails about the frustrations customers have with the checkout process?

  4. Check in with stakeholders. Presenting stakeholders with findings, the rough plan, and to make sure everyone is on board with business impact and deliverables.

  5. Redesign everything. Reworking both the desktop and mobile checkout flows (they were two different code bases at the time), adding in the express payment methods, reworking how the financing option flowed, rethinking how the delivery scheduler worked and acted, adding in new delivery method choices, designing new UX features like how showcasing 'multiple shipments' would work and look, adhearing to best UX e-commerce practices, and bringing a modern look to the visual design.

  6. Launch in segments. With a project this big, we decided it was best to launch slowly in case of unforeseen bugs. We started with the redesign of the current flows with regular and finance checkout, as well as the updated delivery scheduler. Then we added Amazon Pay and PayPal one after the other (Apple Pay never got launched). And because the delivery method choices were added later in the project from business, we launched those last.

 

  1. Perform a mini audit of the current checkout process. What is the current page flow like? How do the backend and frontend talk to each other? What are the capabilities and limitations of the codebase and site functionality?

  2. Understand the new payment options (Amazon Pay, Paypal, and Apple Pay). What do they need to work on a base level? Can they integrate with the backend seamlessly? How can I work with the developers simultaneously so we don't hold up the project?

  3. Parse the analytics and data on user behavior. Where exactly are customers abandoning checkout? What info can we get from customer service chats, calls, and emails about the frustrations customers have with the checkout process?

  4. Check in with stakeholders. Presenting stakeholders with findings, the rough plan, and to make sure everyone is on board with business impact and deliverables.

  5. Redesign everything. Reworking both the desktop and mobile checkout flows (they were two different code bases at the time), adding in the express payment methods, reworking how the financing option flowed, rethinking how the delivery scheduler worked and acted, adding in new delivery method choices, designing new UX features like how showcasing 'multiple shipments' would work and look, adhering to best UX ecommerce practices, and bringing a modern look to the visual design.

  6. Launch in segments. With a project this big, we decided it was best to launch slowly incase of unforseen bugs. We started with the redesign of the current flows with regular and finance checkout, as well as the updated delivery scheduler. Then we added Amazon Pay and PayPal one after the other (Apple Pay never got launched). And because the delivery method choices were added later in the project from business, we launched those last.

 

checkoutMOBILE

Mobile checkout after redesign

checkoutDESKTOP

Desktop checkout after redesign

2. navigation redesign

2. navigation redesign

After multiple successful UX implementation processes’ my team and the internal Mattress Firm UX team started building a Design System Library that would keep everyone aligned on everything from the basics to the intricate parts of the website. In doing this, we decided to take on a complete navigation redesign on both mobile and desktop. This redesign includes everything from information architecture to visual design.

After multiple successful UX implementation processes’ my team and the internal Mattress Firm UX team started building a Design System Library that would keep everyone aligned on everything from the basics to the intricate parts of the website. In doing this, we decided to take on a complete navigation redesign on both mobile and desktop. This redesign includes everything from information architecture to visual design.

After multiple successful UX implementation processes’ my team and the internal Mattress Firm UX team started building a Design System Library that would keep everyone aligned on everything from the basics to the intricate parts of the website. In doing this, we decided to take on a complete navigation redesign on both mobile and desktop. This redesign includes everything from information architecture to visual design.

  1. Gather data: We started by gathering analytics from click maps and heat maps of where users were most often going. My colleagues in the internal design team at Mattress Firm conducted a card sorting exercise with users. We gained huge amounts of insight from this exercise including user's mental models, what UX language was working (and what wasn't), and how the usability of the current navigation was falling short.

  2. Quick competitive analysis: It was important to get a feel for how other large name e-commerce platforms with large amounts of inventory and stores all over the nation were tackling this important problem. In order to keep the project flowing, we pulled seperate inspiration for each part of our site from different retailers including visual style, interaction functionality, and flow of pages onto a collaborative moodboard. Working remotely and digitally made it possible to come to a clear consensus on direction fast.

  3. Design and Refine: We cleaned up and simplified the header nav to be as to the point as possible.
    Visual: brought the updated style guide into play, using whitespace to bring a sense of calm and ease, font weight and color to bring hierarchy, brought the search bar to a more prominent area, and added a small sub-bar to include any secondary features.
     User Experience: We relied heavily on the card sort for taxonomy and architecture, decided to use a different interaction of the 'back' feature to navigate through the menus to lessen bouncing from page to page trying to find something, reworked the Store Finder to better match the new interaction of the navigation bar, and updated Search to bring in a more robust functionality based on e-commerce best practices.

 

  1. Gather data: We started by gathering analytics from click maps and heat maps of where users were most often going. My colleagues in the internal design team at Mattress Firm conducted a card sorting exercise with users. We gained huge amounts of insight from this exercise including user's mental models, what UX language was working (and what wasn't), and how the usability of the current navigation was falling short.

  2. Quick competitive analysis: It was important to get a feel for how other large name e-commerce platforms with large amounts of inventory and stores all over the nation were tackling this important problem. In order to keep the project flowing, we pulled seperate inspiration for each part of our site from different retailers including visual style, interaction functionality, and flow of pages onto a collaborative moodboard. Working remotely and digitally made it possible to come to a clear consensus on direction fast.

  3. Design and Refine: We cleaned up and simplified the header nav to be as to the point as possible.
    Visual: brought the updated style guide into play, using whitespace to bring a sense of calm and ease, font weight and color to bring hierarchy, brought the search bar to a more prominent area, and added a small sub-bar to include any secondary features.
     User Experience: We relied heavily on the card sort for taxonomy and architecture, decided to use a different interaction of the 'back' feature to navigate through the menus to lessen bouncing from page to page trying to find something, reworked the Store Finder to better match the new interaction of the navigation bar, and updated Search to bring in a more robust functionality based on e-commerce best practices.

 

  1. Gather data: We started by gathering analytics from click maps and heat maps of where users were most often going. My colleagues in the internal design team at Mattress Firm conducted a card sorting exercise with users. We gained huge amounts of insight from this exercise including user's mental models, what UX language was working (and what wasn't), and how the usability of the current navigation was falling short.

  2. Quick competitive analysis: It was important to get a feel for how other large name e-commerce platforms with large amounts of inventory and stores all over the nation were tackling this important problem. In order to keep the project flowing, we pulled seperate inspiration for each part of our site from different retailers including visual style, interaction functionality, and flow of pages onto a collaborative moodboard. Working remotely and digitally made it possible to come to a clear consensus on direction fast.

  3. Design and Refine: We cleaned up and simplified the header nav to be as to the point as possible.
    Visual: brought the updated style guide into play, using whitespace to bring a sense of calm and ease, font weight and color to bring hierarchy, brought the search bar to a more prominent area, and added a small sub-bar to include any secondary features.
     User Experience: we relied heavily on the card sort for taxonomy and architecture, decided to use a different interaction of the 'back' feature to navigate through the menus to lessen bouncing from page to page trying to find something, reworked the Store Finder to better match the new interaction of the navigation bar, and updated Search to bring in a more robust functionality based on e-commerce best practices.

 

  1. Gather data: We started by gathering analytics from click maps and heat maps of where users were most often going. My colleagues in the internal design team at Mattress Firm conducted a card sorting exercise with users. We gained huge amounts of insight from this exercise including user's mental models, what UX language was working (and what wasn't), and how the usability of the current navigation was falling short.

  2. Quick competitive analysis: It was important to get a feel for how other large name e-commerce platforms with large amounts of inventory and stores all over the nation were tackling this important problem. In order to keep the project flowing, we pulled seperate inspiration for each part of our site from different retailers including visual style, interaction functionality, and flow of pages onto a collaborative moodboard. Working remotely and digitally made it possible to come to a clear consensus on direction fast.

  3. Design and Refine: We cleaned up and simplified the header nav to be as to the point as possible.
    Visual: brought the updated style guide into play, using whitespace to bring a sense of calm and ease, font weight and color to bring hierarchy, brought the search bar to a more prominent area, and added a small sub-bar to include any secondary features.
     User Experience: We relied heavily on the card sort for taxonomy and architecture, decided to use a different interaction of the 'back' feature to navigate through the menus to lessen bouncing from page to page trying to find something, reworked the Store Finder to better match the new interaction of the navigation bar, and updated Search to bring in a more robust functionality based on e-commerce best practices.

 

old

Navigation before redesign

1Nav Mobile

Mobile navigation after redesign

1Nav Desktop

Desktop navigation after redesign

3. post-purchase ux audit

3. post-purchase ux audit

The UpTop UX team was asked to perform an audit of Mattress Firm’s post-purchase experience: everything that the user (customer) would experience after they clicked the “complete purchase” button in checkout for six different scenarios. Our research process used methods including persona building, competitive analysis, feedback and sentiment review, usability testing, and mystery shopping. I completed this project with one other colleague and we presented a comprehensive 52 page analysis to the VP of Digital.

The UpTop UX team was asked to perform an audit of Mattress Firm’s post-purchase experience: everything that the user (customer) would experience after they clicked the “complete purchase” button in checkout for six different scenarios. Our research process used methods including persona building, competitive analysis, feedback and sentiment review, usability testing, and mystery shopping. I completed this project with one other colleague and we presented a comprehensive 52 page analysis to the VP of Digital.

  1. Create personas. Using marketing persona's given to us by Mattress Firm we coupled those with frequent shopper demographic data and came up with six different personas that accurately represented the majority of customers. Those personas were matched up with six different buying scenarios indicated for this project. We brought each persona to life by giving a name, email address, photo and other identifying information. We applied their characteristics throughout the experience as we interacted with Mattress Firm on behalf of these personas. We acted as them as we chatted with agents online, spoke on the phone and received deliveries. Our interactions were informed by what each person would want to know, where they might be a a particular time when they had to interact or make a decision, and how they might feel in each situation. 

  2. Journey mapping. The best way to follow each persona through their story was to build a journey map for each one. Noting and keeping track of all communication via email, chat, phone calls, and in person conversations for a deep dive into each process.

  3. Summary of findings. After all was said and done for each persona's post-purchase experience we thoroughly noted all data and findings of what went well verses what didn't go well during the end-to-end process.

  4. Opportunities for improvement. It's always best to come with some sort of solution suggestion based on the problems at hand. We presented 11 different categories of areas that could be improved upon including chat issues, email issues, delivery issues, overall service design issues, and more. 

 

  1. Create personas. Using marketing persona's given to us by Mattress Firm we coupled those with frequent shopper demographic data and came up with six different personas that accurately represented the majority of customers. Those personas were matched up with six different buying scenarios indicated for this project. We brought each persona to life by giving a name, email address, photo and other identifying information. We applied their characteristics throughout the experience as we interacted with Mattress Firm on behalf of these personas. We acted as them as we chatted with agents online, spoke on the phone and received deliveries. Our interactions were informed by what each person would want to know, where they might be a a particular time when they had to interact or make a decision, and how they might feel in each situation.

  2. Journey mapping. The best way to follow each persona through their story was to build a journey map for each one. Noting and keeping track of all communication via email, chat, phone calls, and in person conversations for a deep dive into each process.

  3. Summary of findings. After all was said and done for each persona's post-purchase experience we thoroughly noted all data and findings of what went well verses what didn't go well during the end-to-end process.

  4. Opportunities for improvement. It's always best to come with some sort of solution suggestion based on the problems at hand. We presented 11 different categories of areas that could be improved upon including chat issues, email issues, delivery issues, overall service design issues, and more. 

 

journey mapping

This project is still under NDA

THE DREAM TEAM

THE DREAM TEAM

THE DREAM TEAM

Mattressfirm  |  Client

Uptop  |  UX, Visual, Dev

 

Mirror Show Management  |  Event Agency

Demodern  |  Digital Agency

KaiCon  |  Video Content

Fleishman Hillard  |  PR

Cheshire  |  AV Production

Mirror Show Management  |  Event Agency

Demodern  |  Digital Agency

KaiCon  |  Video Content

Fleishman Hillard  |  PR

Cheshire  |  AV Production

twitter
insta
linkedin
unsplash

©AbigailLynn 2017