DedCool Case Study
Reduce time taken for users to find a fragrance that suits them
Goal
Research and redesign based on identified pain points within the fragrance quiz flow and item to cart flow
Role
Balancing the playfulness of DedCool’s brand while remaining user-friendly
Challenge
Research
Usability evaluation of current experience
To evaluate the current experience, I began by utilizing a UX evaluation spreadsheet to see which aspects of the website need refining. From this spreadsheet, I identified the main pain points.
Confusing critical path for learning more about individual products
Redundant/time-consuming quiz questions
Visually cluttered design
Identified pain points from spreadsheet
Current fragrance details page
Unnecessary quiz questions
Design
Single track user flows
You’re new to DedCool and eager to find the perfect fragrance among their many options. Naturally, you turn to their fragrance quiz for guidance. However, halfway through, you realize the quiz is lengthy, includes unnecessary steps, and often repeats questions in different ways. By streamlining the quiz to focus on the essential questions needed to choose a new fragrance, user engagement with the quiz can be significantly increased.
Current fragrance quiz flow
Do you already have a DedCool signiature scent?
What fragrances have you worn in the past?
What kind of scents are you into?
What notes are you drawn towards?
How light or heavy do you prefer your fragrance?
Fragrance ingredient description
When do you wear your fragrance?
What is your zodiac sign?
DedCool brand description
What feeling do you want from your fragrance?
Do you want us to pick a layering pair?
Select all the places you want to smell better
Fragrance result
Proposed fragrance quiz flow
What kind of scents are you into?
What notes are you drawn towards?
How light or heavy do you prefer your fragrance?
What feeling do you want from your fragrance?
Fragrance result
You may prefer exploring fragrance options on your own rather than taking a quiz. However, when you click on a fragrance to learn more, you're taken to a page filled with radio buttons. These buttons switch the information about all the different fragrances available so all your options are presented to you, but the amount of options leaves you indecisive.
My primary goal in redesigning this flow was focused on the fragrance description page, as this is where users often encounter confusion. Additionally, since the cart on the DedCool website appears as a side pop-up, I’ve decided to remove that element from my proposed flow.
Current item to cart flow
Homepage
Fragrance description
Cart
Proposed item to cart flow
Homepage
Fragrance description
Low-fidelity frames
To begin the design process, I started by creating low-fidelity wireframes for desktop and mobile for my proposed user flows. Although the current website has the number question you are on over total (ex: 2/16), I wanted to include a progress bar to visually indicate to the user how far along they are in the process.
According to Hick’s Law, the time it takes to make a decision increases with the number and complexity of choices. For this reason, I wanted to remove the radio buttons altogether so that when clicking on one fragrance you would be directed to a page dedicated to that fragrance. From that page, you could still find other similar fragrances lower on the page.
Mid-fidelity frames
In the mid-fidelity stage, I refined and began solidifying my design ideas within Figma. During this process, I shifted some of the quiz questions from buttons to checkboxes. This gives the user the ability to select all the types of scents or feelings they want from their fragrance because it is often more than one thing. In the mobile designs, I also shifted where the search icon would be. By placing it on the right with the account and cart icons, it visually separates the hamburger menu making it easier for the user to access it.
High-fidelity frames
Applying all the things I learned from the previous stages, I created my high-fidelity wireframes. I created a design library based on some elements from the current DedCool website along with components and icons that I decided to include. I decided to keep the color palette and fonts as similar to what they currently have to make this a realistic redesign. To make this prototype highly interactive, I created various interactive components.
Professional feedback
After each step of this process, I received professional feedback to improve my designs. A lot of this feedback was design-related. Some feedback I received was to add a footer color to distinguish it from everything else, remove the circle border around the checkboxes because it makes them feel like buttons, and move the progress bar numbers outside of the bar itself.
Evaluation and results
User testing and pain points
After creating my first version of high-fidelity wireframes, I user-tested them with 3 individuals. From this, I revealed a couple of new pain points from users.
“Tin” in navigation is confusing
People don’t know what a skin/musky scent is
More info wanted about the pairs well with scents
Identified pain points
Updates from testing
To address this issue, I altered the language of a couple of different things. I replaced the “Tin” navigation bar title with “Sample tin” to help the users understand what they might be going to when clicking on the tab. Also, I switched the language of the “skin” and “musky” scent options in the quiz to say “ natural” and “earthy”. To add more information about the scents that pair well together, I included a short description below each scent to provide a general overview, and the users would be able to click the scent for a full description of that scent.
Reflection
Future plans
Moving forward, I would like to make more aspects of this prototype interactive for the user. I began doing this by making the hamburger clickable for mobile and the image carousels swipeable, but I hope to make the drop-downs clickable to show the information within each section. By making the entire prototype fully interactive, I hope to test the full interactivity of my redesigned flows.
Conclusion
Redesigning flows for this project served as an experience to work on a mainly retail website and an opportunity to work on mobile design along with desktop. Through user interviews, I learned that it is helpful to do testing after multiple stages of high fidelity to create the best, more user-friendly version of the website. This project helped me gain an understanding of how to create a design system, how to evaluate current flows, and how to take a brand aesthetic and build off of it.
