Born out of a collaboration at Creative Labs, a student-led design organization at UCLA, Clearify aims to solve a common dilemma in the online skincare market: the overwhelming task of understanding and comparing product ingredients.
As part of the Clearify team at UCLA's Creative Labs, I contributed to the design system, surveys, and wireframing, ensuring a seamless and intuitive user experience for the extension.
Shoutout to the Clearify team: Raina Wan & Tiana Ly (Project Leads), Marie Godderis & Nivetha Balu (Project Managers), Nitya Khanna, Meg Yuan, Stephanie Mae Mauricio (Designers), Ashish Basetty, Lucian Li, William Wong (Engineers)
Research
In developing Clearify, we conducted an in-depth competitive analysis to understand the landscape of skincare ingredient analysis tools and products. This research was pivotal in identifying opportunities for innovation and differentiation. Our analysis spanned across both API resources and existing skincare analysis products.
API Research:
Cosmily's API: Cosmily API offers detailed analysis of ingredient lists, which helped us understand the depth of information users might expect.
CosDNA: CosDNA provides comprehensive data on skincare ingredients, emphasizing safety concerns.
SkinSort: SkinSort offers an easy-to-use widget for skincare analysis, showcasing user-friendly design.
Product Inspiration:
Skincarisma: Skincarisma offers an ingredient analyzer that is both informative and user-friendly, providing insights into how we might design Clearify's interface.
EWG's Skin Deep: EWG's database is extensive and highly regarded, especially for its focus on safety and health impacts.
INCIdecoder: Breaks down ingredient lists into terms, inspiring us to make our tool accessible to users without a scientific background.
Exploring different APIs allowed us to understand the range of features and depth of analysis available in the market.
Key Takeaways from Team Analysis:
Strengths in Competitors:
In-depth Analysis - Competitors effectively use icons and colors to simplify complex ingredient information.
User Interface - Clean and organized presentation with interactive elements for ease of use.
Personalization - Notable for skin type compatibility and highlighting specific ingredient effects.
Areas for Improvement:
Layout Optimization - Current solutions can be really text-heavy; a more streamlined layout would work.
Clarity in Ratings - Some competitors lack clear explanations for their rating systems, especially regarding high-risk ingredients.
Information Overload: Information segmentation in some tools can be overwhelming; simplification and better organization are needed.
Opportunities for Clearify:
Improved Navigation - Optimizing the user journey, like having easier navigation to the next product analysis, could enhance usability.
Increased Transparency - Providing clearer breakdowns and explanations for ingredient scores and effects.
Research
We conducted a survey targeting individuals interested in skincare and makeup shopping, receiving 22 responses, primarily from university students, to understand their behaviors and preferences.
Exploration of New Products
45.5% of respondents occasionally explore new skincare products, rating their frequency at 2 out of 5.
Skincare Concerns
Half of the respondents (50%) rated the importance of knowing skincare ingredients as 4 out of 5, suggesting it is important but not the sole factor in their decision-making.
Understanding Ingredients
The largest group (40.9%) rated their ease of understanding the impact of ingredients as a 3 out of 5, indicating a moderate level of comfort.
Skincare Concerns
The most common skincare concerns were acne-fighting (63.6% of respondents) and moisturizing (72.7%), followed by sensitivity to UV protection and sulfates, both at 63.6%.
Use of Skincare Apps
A majority have not used any apps or extensions for finding skincare products, indicating a potential market gap.
Research Habits
Many respondents rely on TikToks, YouTube videos, and friend recommendations for skincare product research.
Educational Aspect
Users show a keen interest in understanding ingredients, indicating the need for an educational component.
Ideation
In developing Clearify, we crafted a streamlined user flow to serve as the backbone of our Minimum Viable Product (MVP). This allows us to deliver a functional product to our users quickly, focusing on core features to meet their primary needs with the potential for iterative improvements based on feedback.
Design System
For Clearify, the visual language was crafted to embody security and foster confidence within the digital skincare space. Our design was guided by the goal of establishing a serene and dependable environment, where users could feel assured in their skincare choices.
Clearify's design system features a modern aesthetic, employing a soothing green color palette and clean typography to convey a sense of reliability and ease. The strategic use of space enhances readability, while the consistent UI elements promote a seamless user experience that's intuitive and welcoming.
Iterations
In the ideation phase of the Clearify case study, we developed low-fidelity wireframes to visualize and iterate on the core user journey. These wireframes serve as a blueprint for our MVP, allowing us to conceptualize the basic structure of the extension.
Iterations
In our mid-fidelity wireframes for Clearify, we honed in on establishing a cohesive visual design that enhances user experience.
Streamlined Input Process: The design features a unified input field across all wireframes, maintaining a clear and consistent visual hierarchy that simplifies the user journey from start to finish.
Minimizing User Effort: To foster an engaging user experience, we incorporated clear, actionable prompts that guide users through the ingredient analysis process, ensuring ease of use and clarity in interaction.
We engaged in an iterative design process guided by user feedback, insights from UX forms, and input from our project stakeholders, including the project leads. Here are some key features of the output screen:
Section Indicators: We've incorporated clear labels such as 'Fungal Acne Free,' 'Silicone Free,' 'Alcohol Free,' 'Paraben Free,' 'Sulfate Free,' and 'Fragrance Free' to provide users with at-a-glance confirmation of product attributes that align with their skincare goals or concerns.
Skin Type Analysis: The wireframes detail how each product interacts with different skin types, including 'Oily Skin,' 'Dry Skin,' 'Anti-aging,' and 'Sensitive Skin.' This feature allows users to quickly identify if a product is suitable for their specific skin type.
Highlights Section: Here, we showcase the positive attributes of the product, such as 'Moisturizing,' 'Anti-aging,' and 'Brightening,' helping users to recognize the potential benefits at a glance.
Iterations
In refining the final wireframe for Clearify, we conducted an internal round of usability testing, utilizing our team due to time constraints. This allowed us to quickly gather and implement feedback on the new features and changes made from the earlier iterations.
We created a small set of tasks to test the user’s ability to navigate the app and asked about overall first impressions. This first round of testing within the team was crucial in providing good insights for changes within our initial user flow. Here are our testing observations and iterative changes:
Skin Type Analysis Usability
Our team expressed that while the skin type suitability was helpful, the presentation required clearer delineation between suitable and unsuitable types, especially for quick scanning.
Highlighting Key Benefits
The 'Highlights' section needed to better showcase the positive attributes of the skincare products without overwhelming users with too much information at once.
Balanced Information Density
We made sure users could easily process the most important details without feeling overwhelmed.
Final Design
Clearify
Branding and Visual
The welcoming screen captures Clearify's essence with a minimalist logo, symbolizing the extension's purpose to clarify and simplify. The background's mesh gradient provides a contemporary touch, conveying depth and motion, which encourages users to engage with the core feature of analyzing skincare ingredients.
Input Ingredients Screen
This screen is designed with clarity in mind, providing users with straightforward input fields for both the product name and ingredient list. The goal was to minimize user effort, making the process of entering information as easy as possible.
Product Analysis Screen
The results screen offers a detailed breakdown of the product's suitability for various skin types, including indications such as 'Normal,' 'Dry,' 'Oily,' and 'Combo,' tailored to provide personalized insights at a glance.
Reflecting users' preferences, the 'Free From' section is prominently displayed, immediately informing users about the absence of certain ingredients.
The Highlights section succinctly outlines the positive effects of the product, such as 'Moisturizing' and 'Softening,' using intuitive icons and concise labels. This visualization empowers users to quickly discern the product's key benefits.
Reflection
Embarking on the Clearify project was a true test of agility and user-centric design. It taught me the importance of being adaptable, as user feedback often led us down new and unexpected paths. The biggest takeaway? Design with empathy, and be ready to pivot when user insights demand it.
With more time, I would delve deeper into enhancing the educational aspect of Clearify. A feature to evaluate and ensure the reliability of user-generated content, like reporting inaccurate ingredient lists or reviews, would maintain the integrity of our platform.
Long-term user engagement is also a priority. An idea in the pipeline is to develop a personalized ingredient learning system. This feature would introduce users to one new ingredient each day, fostering consistent user education and engagement with the extension.