Fragrantica
Context
Fragrantica.com is an online database of over 80,000 perfumes, colognes, and fragrances.
The goals of this project were to modernize Fragrantica’s user interface design, and to reimagine the website as an iPhone app, focusing on the onboarding process.
Defining the problem
Fragrantica’s website looks dated, cluttered, and overwhelming. A UI refresh would make this service more visually appealing, and easier to navigate.
Additionally, Fragrantica is only available as a website. An app designed specifically for the mobile experience will make the service more harmonious for users on the go.
Project goals:
Reimagine Fragrantica’s UI design to look more modern and streamlined
Create 1 mobile user flow for the onboarding process
Early ideation
Design system
Fragrantica’s current brand identity uses shades of red, green, and teal, which creates a cluttered, unfocused look. A bright, zesty green was selected for this UI refresh for its association with elements of the natural world.
The font used on Fragrantica feels stuffy and boring, and a lack of variation in size makes for weak visual hierarchy. Josefin Sans has more personality, and its different weights and sizes allow it to be adapted for different functions.
Design spec: Fragrance Family Button
The Fragrance Family Button is a reusable component that will be used during Fragrantica’s mobile user onboarding process. A “note” refers to a specific, singular scent found within a larger scent profile. Users will click this button to set their fragrance preferences.
Final wireframes
Clickable prototype
The final prototype provides an introduction to what the Fragrantica app could feel like. Click below to explore the prototype for yourself:
Since this project focused on learning best practices in UI design, it was an excellent opportunity to refine my Figma skills. I learned more advanced techniques such as creating reusable components, which will streamline future design work. While I didn’t conduct user research, I did consider general design principles that could improve usability, such as maintaining clear call-to-action buttons and ensuring proper text contrast for readability.
In future projects, I would like to include user research and feedback to validate my design decisions, as this would allow me to make more informed choices and refine the UI further.