☆VIVIAN CHEN

Hi, I’m Vivian
Los Angeles based Product Designer,
Available for work

About Me

Resume
LinkedIn

Fragrantica Redesign

Overview
Fragrantica is the quintessential online resource for all things related to perfumes. A site that is rich in content — data provided by opinionated users who feel passionate enough to leave their mark, endless editorials about perfumes you’ve never even heard of. Its biggest downfall: its design and user experience often leaves users overwhelmed and unable to absorb all that the website has to offer.

Research
After conducting a Heuristic Evaluation of the current website, we found 4 major pain points that may need to be addressed to improve user experience:

Organized Chaos — The homepage and perfume detail pages are visually overwhelming, with too much information presented at once. Users may struggle to find specific content, such as perfume profiles, accords, or user reviews, due to the cluttered layout. Editorial pages, in particular, are hard to read because of dense, unstructured blocks of text.
Excessive Scrolling — The homepage features 33 news articles alongside sections like new releases and trending perfumes, resulting in an extremely long scroll. This makes it difficult for users to locate relevant content quickly. A more concise layout would help streamline the browsing experience.
Disorganized Reviews — User reviews lack sorting and filtering options. Users cannot organize reviews by helpfulness, date, or rating, which makes it difficult to find the most relevant insights.
Slow Search Performance/Limited Search Filters — The current search experience is sluggish and lacks advanced filters, making it hard for users to discover perfumes based on specific criteria like scent notes, brand, or perfumer.

In addition to our evaluation, we observed frequent user feedback expressing frustration with the current website experience, particularly on mobile. Many users also voiced interest in the development of a dedicated mobile app.

Goals
Through this project, we aim to address the following:

Simplify Navigation — Improve the overall structure and flow of information so users can more easily access the content they’re looking for.

Modernize Aesthetics — Update the visual design to align with current UI/UX trends, making the platform more intuitive and appealing to a broader audience.
Enhance Data Visualization — Revamp the way data is presented, removing redundant elements and introducing clearer, more digestible visual formats to help users better understand complex fragrance profiles.

Current Fragrantica Desktop Website

Redesigned Fragrantica Desktop Website

1. Simplified and User-Focused Navigation

Before: The original navigation included many secondary pages that were redundant and overwhelming, which adds unnecessary complexity for users primarily interested in discovering or researching perfumes.
After: We streamlined the navigation to prioritize the most relevant sections for everyday users—Fragrances, Notes, News, and Forum—making exploration more intuitive and helping users get to what they care about faster.

2. Reduced Scrolling and Streamlined Content

Before: The homepage is excessively long, with dozens of articles and sidebar causing scroll fatigue.
After: We condensed content into clean, horizontal sections like “Just Released” and “Trending Scents,” reducing vertical scrolling and helping users get to relevant info faster.

3. Elevated the Visibility of Recent Reviews

Before: Reviews were hidden in a narrow sidebar with minimal context—only the perfume name, brand, and reviewer were shown. Users had to hover to preview content, which felt unintuitive and cramped, especially on smaller screens.
After: Recent reviews are given proper space as a dedicated homepage section. Each entry includes the perfume name, brand, username, and a short, readable snippet of the review, along with a “Read More” link. This new layout makes community feedback more accessible and engaging, inviting users to explore reviews more naturally without extra effort.

4. Visually Updated and More Accessible Perfume Cards

Before: The original cards had small images, centered text, and link styling that felt visually outdated.
After: Redesigned cards feature larger visuals, modern typography, and a left-aligned layout with clear hierarchy. These changes not only enhance usability and accessibility but also contribute to a more polished, contemporary visual identity across the site.

Native and Mobile Application
Based on our research, we discovered that many users access Fragrantica on their phones, especially while shopping and looking to research perfumes to inform their decision before purchasing.

To cater to this mobile use case, we also created mockups for a native mobile app, that would also work well as a mobile web design, to enhance their on-the-go experience.

Data Visualization Changes
To address the data visualization problem on the Fragrantica website, we replaced traditional bar charts with a radar chart to represent olfactory family data. The radar chart provides a holistic view of the fragrance composition, allowing users to easily see the balance and interplay of different scent notes at a glance. This visual format is particularly effective for representing complex data like olfactory profiles, as it displays multiple dimensions in a single, cohesive graphic.

By breaking up the monotony of bar charts, we believe to have enhanced the overall user experience by making it easier for users to understand and compare the unique characteristics of each perfume. This type of data visualization aids users in quickly grasping the essence of a fragrance, thus facilitating more informed decision-making and deeper engagement with the content.

Conclusion
We believe this design successfully addresses key pain points. By reducing the amount of scrolling and presenting data on important pages in a more digestible format, we have made the site more user-friendly and efficient.

The streamlined layout and improved content organization now allow users to quickly find the information they seek without feeling overwhelmed. Key details about each perfume are presented clearly, making it easier for users to understand and appreciate the nuances of different fragrances.