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 layout of the current home page and perfume pages feel quite crowded with too much information. It might be difficult for users to find the information they’re looking for, such as perfume profiles to view accords or user reviews. In editorial pages, it’s overwhelming to read due to dense blocks of text.
Long Scrollbar: There are 33 news articles on the first page, sandwiched between new releases, trending perfumes, etc. The home page should be slimmed down, so users can streamline finding the information they’re looking for.
Disorganized Reviews: Reviews cannot be sorted or filtered (helpfulness, date, rating, etc.)
Slow Search Performance/Limited Search Filters
Goals
Through this project, we aim to address the following:
Simplify Navigation: content accessibility
Modernize Aesthetics: The current website aesthetic is not intuitive to the current demographic of users, we aim to update the visual design to reflect current design trends in hopes of attracting more users as well as enhancing the current user experience.
Data Visualization Overhaul: We found that the website has remove unnecessary or redundant data for easier digestion
Redesigned Fragrantica Desktop Website
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, as 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.
High Fidelity Mock Up
Conclusion
I 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.