Lune is an online-only mattress retailer that has encountered challenges while trying to achieve their business goals. After analyzing data they uncovered issues with their conversion rate. The data revealed that users who view an average of 7 items abandon the site half of the time without ever adding an item to their cart. If users do add an item to their cart, 70% of the time they abandon it early in the checkout process at the registration page. By enhancing the browsing and checkout experience I aim to greatly improve their site’s usability and in turn, increase their conversion rate.
Lune’s users have difficulty comparing multiple items and experience roadblocks early in the checkout process. Due to these difficulties, Lune has experienced a decrease in conversion. To solve these issues I had a number of goals in mind.
I conducted a competitive analysis of three major players within the online mattress market. I examined the competitor’s overall browsing experience as well as each of their checkout flows. Utilizing this method helped me consider strengths that were worth adopting and weaknesses I might avoid when implementing features, functions, and flows into my own design.
I had planned to conduct user interviews to learn more about mattress shoppers and their experiences. Unfortunately, there were difficulties finding enough participants within the timeframe for this phase of the project. To avoid falling behind I pivoted to another form of research. I decided desk research would be a suitable alternative since there already was a wealth of information and research available on many of the topics I was investigating. My research revealed some key findings.
After a thorough investigation into mattress shoppers and the problem space, I used my findings to construct a persona. I would continually reference this asset as I progressed through the design to make sure I was keeping the user in focus. Say hello to Laura.
I established my target audience and compiled enough research to have a better understanding of possible solutions that might lend themselves to improving Lune’s business goals. The next step in the process was aimed at creating an ideal user flow. I wanted to get an overview of steps a user might take to complete a purchase before starting to design specific screens.
After establishing a comprehensive flow I converted my outline to wireframes. I used the wireframes to establish structure, consistency, and visual hierarchy. This translation would help me understand how users would navigate the interface from one screen to the next.
Before moving to the next phase of the project I decided it was imperative to conduct a round of moderated usability tests. I wanted to discover issues early in the process so I could solve them before developing my wireframes into high fidelity screens. A total of six participants were recruited and asked to complete a series of tasks. There were two main objectives for these tests.
Based on the results there were a handful of improvements that needed to be implemented into the next phase of the project.
“Standard Ground Shipping” doesn’t express a timeframe. Add explicit time to clarify ETA.
Create division and add a label to distinguish express checkout options from standard checkout.
Confirm recipient’s email address by explicitly stating it.
Finance option displayed during checkout but not on product page. Adding might influence purchase.
Inability to select styles for comparison. Add checkboxes next to each option.
Hesitant to select options without knowing the price. Add cost next to text.
“Standard Ground Shipping” doesn’t express a timeframe. Add explicit time to clarify ETA.
Create division and add a label to distinguish express checkout options from standard checkout.
Confirm recipient’s email address by explicitly stating it.
Finance option displayed during checkout but not on product page. Adding might influence purchase.
Inability to select styles for comparison. Add checkboxes next to each option.
Hesitant to select options without knowing the price. Add cost next to text.
Now that I had a good foundation in place it was time to transform my wireframes into high-fidelity screens. I constructed a style guide to ensure visual consistency and cohesiveness. These screens would represent the look and feel of the final product.
I converted my high-fidelity screens into a functioning prototype but knew more testing was needed before finalizing the design. It looked and felt like the end product but I needed to make sure it functioned as intended. To assess this I conducted another round of moderated usability tests. I recruited the same number of participants(6) as I did before but this time I adjusted my objectives in hopes of uncovering new issues.
A cancel button was added to allow participants to exit the comparison feature. Denotative text was added above the checkboxes as an instructive mechanism to address the number of styles a user could select.
.png)
A footer including the company’s phone number and live chat feature was added to the checkout screens. Tests revealed users wanted a way to contact help if they had questions or were stuck progressing through the checkout flow.
A cancel button was added to allow participants to exit the comparison feature. Denotative text was added above the checkboxes as an instructive mechanism to address the number of styles a user could select.
A footer including the company’s phone number and live chat feature was added to the checkout screens. Tests revealed users wanted a way to contact help if they had questions or were stuck progressing through the checkout flow.
Having years of experience within the retail sector I thought this project might come easy but I discovered many things I had never considered while working through the process. Here’s a couple of my takeaways.
