Mattress Firm has been growing rapidly over the past year, acquiring many companies along the way and dramatically increasing their footprint making them the largest mattress retailer in the country. They have grown from a traditional brick and mortar store to a competitive e-commerce company. They hired UpTop to help “re-tool” their first attempt to an online store and improve their e-commerce presence.
I designed a Mattress Finder guided selling tool built to provide a seamless online buying experience. It is a feature that makes it easy for a customer to find the right mattress for them based on a series of steps and filtering questions.
Research, UX/UI Design, Prototype
DISCOVERY And Analyzing the data
First, I met with our user researcher to get a baseline understanding of user problems and the website's performance. Soon after, I met with our partners and client to discuss the current data and business needs. Next, I met with the team to recap, align our notes and plan for the next steps. With enough information on expectations, constraints and scope of work, we were able to get started immediately.
Creating Personas, Competitive Analysis
At this point, in order to come up with a solution, I needed to understand who the users were, what specific things they looked for, how they made purchases online and so forth. Based on the data from behavior analytics, I created user personas to help understand and align our design strategy to their target market. I also researched similar features on competitors' websites to use as a guideline to design the new type of tool that would assist in online purchases.
Generating Ideas For Deeper Level Screens
The next step was to dive deeper into the functionality of the Mattress Finder tool. I created a filtering system that narrowed down the best-suited mattress for a user based on their response to a series of questions. Therefore, I had to come up with all the questions that would help guide them through this filtering process from start to finish.
I created and reviewed wireframe concepts with the project manager and developer to discuss functionality before designing high fidelity comps.
Establishing Design Direction
After conducting more internal testing, I was able to narrow down to one layout based on the best practices. To further validate the design, I created a prototype to present to users for testing.
Reiterating The Wireframes
The crucial feedback from users enabled me to fine-tune the design and build out high fidelity comps to review .
Building the Results Page
At the core of it all, the goal of the Mattress Finder tool was to surface the ideal bed mattress the user is looking for. The results page helped give more meaning to what the customer really needed and was easy to review and understand.
After the final design was approved, I created fully annotated comps for handoff to the development team.