01 - Intro
Mattress online shopping platform
DreamLux is an online shopping platform that helps users to determine the most suitable mattress efficiently. Through this app, customers were able to compare their choices and get a better sense of what mattress best fits their need
Role
UX Designer, UX Researcher
Timeline
Feb 2023 - March 2023
Tool
Figma, Google Form, Adobe
The problem
Selecting an appropriate mattress online can be a challenging and time-consuming task. The absence of clear guidance and comprehensive understanding of different mattress types may result in customers choosing a mattress that fails to meet their specific requirements. Furthermore, with an abundance of options available, users may frequently become confused and lose track of their desired products, ultimately interfering with their purchasing decision.
Project goal
-
Provide clear and practical guidance for selecting the right mattress
-
Facilitate easy comparison of multiple mattress options
-
Offer a seamless and enjoyable shopping experience during the check-out process
-
Present a visually appealing, high-quality user interface that is well-organized
02 -UX Research
Initial thinking
To gain a deeper understanding of customers' needs and pain points when shopping for mattresses online, I conducted multiple rounds of user interviews involving a diverse range of customers.
Participant characteristic
-
25-40 yrs old who have an independent and stable income
-
Who pursue high life quality and value sleep quality
Research Method
-
Online Survey
-
In-person and virtual interview
-
Competitor analysis
Pain points
-
Need to go back and compare each desirable mattress one by one
-
Don’t know what each different mattress material stands for
-
Not knowing if the mattress will fit specific needs (back pain, stiff neck, etc.)
HMW Question
-
How might we simplify the process of comparing mattresses, understanding mattress materials, and determining if a mattress fits specific needs?
-
How might we ensure the conversion rate from just browsing to purchasing?
03 - Ideate
Initial thinking
To address the pain points that were discovered through interviews and surveys, I came up with the following feature to employ in my web design
-
Gain knowledge about mattresses: Acquire information on different mattress materials and their varying effects on sleep.
-
Facilitate product comparison: Streamline the process of comparing various mattresses to make an informed and efficient purchasing decision.
-
Get personalized mattress recommendations: Take a mattress quiz and receive tailored recommendations based on individual preferences and needs.
.jpg)
*To begin with, I created a sitemap that served as a general blueprint outlining the key features of the website.
04 - UI Design
Sketch
Using the sitemap as a guide, I created several sketches to show how users would navigate through the mattress shopping experience. These sketches covered different scenarios, such as first-time shoppers and returning customers, giving a clear picture of the entire process.
Visual Identity
A7A9E0
635B8F
F6C87E
Based on user research, customers pictured DreamLux to be soothing, high standard, and luxuriant. According to the color theory, purple has the calm stability of blue and red which is often associated with mysterious and calmness. Yellow, meanwhile, symbolize vibrant joy, and luxury.
Lo-fi wireframe
Then, I created lo-fi wireframe as the base for building prototypes. It detailedly depicted each component and layout for red route pages which facilitates the agile development processes and a smoother testing experience with end users.
Combining UXUI with Psychology
When designing a mattress shopping website, I believe in using visual cues as powerful psychology tools to enhance the user experience. By employing techniques like highlighting and negative space, I can guide users through the website seamlessly. By strategically placing these visual cues, I provide subtle traces that help users effortlessly navigate through the website, ensuring they find the information they need to make informed decisions about their mattress purchase.
Hi-fi wireframe
Issue: Too many options, feel paralyzed for making a quick and right decison
Solution: Facilitating decision-making, check items to compare their character side by side
Button pop out when checked three items. Easy to compare while shopping online
Compare the most important features side by side, make wise decision in shorter time
Provide a short quiz to give some shopping directions for first-time mattress shoppers.
Prototype
*If experiencing obscuring top banner, please refer to this prototype link
Reflection
Working on this UX design project has given me lots of insight in understanding the current UX gap lying within E-commerce business while also provide me with more practice in UX research/design processes.
When looking back on the whole website design journey, I gain a few take aways and notes for improvements:
-
Always refer back to UX research database and made design decision based on users' comments and experience
-
Do not expect to get everything first-time-right and done: bring more design ideas and solutions to the table if I have more time and conduct more research that supports further iteration
​Other works...
Groc
Donit
