Fragrantica is a global online encyclopedia and community with contributors spans 29 countries, serving users with detailed scent information and reviews.
Project Over View:
Selecting the right fragrance can be challenging, and it becomes even more difficult when shopping online. We aimed to improve this process on Fragrantica by enhancing their website.
We analyzed historical data and used quantitative and qualitative research to identify three key target groups with insights into their preferences and challenges, we revamped the website, highlighting key fragrance elements, streamlining the information architecture, and fostering community interaction.
Problem
- Unclear User Personas : The website’s struggle to address its users’ specific needs leads to higher abandonment rates, signaling the need for a redesign focused on intuitive navigation.
- Complex Navigation system: Due to visitors’ difficulty finding information, the site’s complicated layout results in significant bounce rates, underscoring the need for a more user-friendly design.
- Absence of Community Features: Lack of sharing channels and knowledge exchange on the site leads to low engagement and retention, hindering users’ ability to evaluate fragrance suitability.
Proposed solutions
- Enhance Website Navigation: Revise the site to tailored to distinct user personas, leveraging data insights to meet their unique needs and preferences, thereby minimizing abandonment rates.
- Streamline User Interface: Use a storyboard-driven redesign to map out user journeys, simplifying navigation by creating intuitive menus and logical flows. Make key information easily accessible.
- Boost Community Engagement: Introduce easy-to-use features and highlight popular discussions with tools like hashtags on the homepage to foster active community participation.
My Role
UI designer
UX researcher
Team Member
Anierobi Nedum (Marketing Manager)
Kharazinajafabadi Kimiya (Product Manager)
Mohammadzeh Atabak （Programmer）
Tools and Durations
Tools:
Figma
Adobe Photoshop.
Notion
Duration：
3 Month
Deliverables
Figma Design Prototype
Website
Report
User Research Strategy
We conduct user research to identify our target audience and understand how they discover and select fragrances. Our goal is to understand the preferences, behaviors, and challenges of our users, including their motivations and reasons for engaging with and remaining active within our community. We employ a combination of quantitative methods, such as surveys to gather insights on user knowledge and trends, and qualitative methods, including interviews, to explore into social influences, past negative experiences, personal preferences, occasion-based usage (like dates and events), and personality traits. This comprehensive approach ensures our redesign meets the diverse needs of fragrance users, simplifying their experience and enhancing community engagement
Result gathered
We analyzed website history data to categorize users into three main groups: content creators (Key Opinion Leaders, KOLs), engagers, and viewers. We then conducted interviews with 11 users.
Interview Findings
Interests in Perfume scent layers: There’s a notable interest and awareness among users regarding the layers of perfume scents, reflecting a deeper engagement with fragrance composition.
Social Influence : Recommendations from friends significantly influence purchasing decisions, highlighting the importance of social interaction in fragrance selection.
Occasion-Based Preferences: Significant number of site users prefer choosing perfumes based on specific occasions, such as dates and various events, highlighting the importance of occasion-based fragrance selection.
Implication: Provide educational content and interactive tools to help users understand and explore perfume scent layers in depth, enhancing their selection process.
Implication: Incorporate social sharing, latest news, award features and latest hashtags to leverage the social aspect of fragrance discovery and purchasing.
Implication: Placing icons for occasions, season specific scene on fragrance pages helps users swiftly find suitable scents, improving navigation and user satisfaction.
Empathy Map
Top Takeaways:
- User Goals and Actions: Find the right perfume through easy site navigation and reviews, and eager to participate in a harmonious community place
- Pains and Gains: Lack of community engagement and wrong perfume choices vs. A harmonious, active community, and using detailed scent info and reviews for better choices.
- Sensory Experience: Users view trends and imagery; share and listen to perfume stories.
- User Feedback and Community: Community reviews and blogs influence perfume choices.
- Educational Content: Informative guides on fragrance selection are provided.
Personas
While both our personas, Matilda Garcia and Frank Miller, are in the market for fragrances, their underlying motivations diverge significantly.
Matilda, an experienced enthusiast, seeks to deepen her knowledge of niche perfumes and engage with like-minded individuals, while Frank, aims to learn the basics and find a signature scent with ease and support.
These personas influenced our platform’s development, with a focus on specialized content and community features for Matilda and straightforward navigation and educational materials for Frank. These variances were critical as we refined the platform’s functionality to satisfy their needs and wants.
Storyboarding
In the Fragrantica redesign, storyboarding user pathways reveals key insights: Matilda, the Content Creator, searches for perfumes by scent layers, while Frank, the Viewer, seeks the latest news and trending hashtags. Accordingly, we’ve placed notes alongside news and hashtags on our homepage to meet the primary needs of our main user groups.
Website Analyze
The Fragrantica site map indicates a convoluted structure with scattered content, leading to navigation challenges. Such as Information on scent layers is disconnected from related news and trending topics, which complicates the user’s search for comprehensive fragrance data. This layout can cause user frustration and hinder efficient access to relevant content.
The new site map presents a more organized and categorized layout, for example, it improves navigation by categorizing fragrance information into intuitive subcategories and positioning a “Community” section on the homepage for easy access, thereby facilitating quicker, more focused user engagement and content discovery.
This structure reduces the number of clicks needed to reach desired content, thereby enhancing navigational efficiency and user satisfaction.
Establishing a Design System
Typography: Poppins is used for its modern and clean lines, which are ideal for digital readability. Ubuntu Condensed offers efficient space usage for more text without compromising legibility, while Codystar adds a unique, tech-savvy touch, reflecting innovation.
Color Palette: The red captures attention and conveys passion, ideal for highlighting calls to action and special features. The light pink offers a gentle contrast, softening the overall look and making the user interface feel inviting. The deep maroon injects a sense of luxury and depth, resonating with the premium nature of fragrances.
Lo-fidelity Wireframe
Wireframe-Mobile
User Feedbacks
We did several rounds of user testing and gathered some valuable UI feedbacks , Such as changing the button size, text legibility, Style consistency.
Final Design
Lesson learned
The Fragrantica redesign deepened my understanding of user-centric design, emphasizing the importance of addressing the distinct needs of content creators, engagers, and viewers. This project highlighted the effectiveness of a tailored approach to UI/UX, guiding my future work towards even more interactive and dynamic user experiences. Going forward, I see an opportunity to bring the website to life by integrating interactive 3D elements and videos, which could offer dynamic content presentation and a more engaging sensory experience. This practical application of UI/UX principles will guide my approach to future projects for richer and more immersive user interfaces.
Lynn Liang 