Project Overview

Designing DermoGuide website as an online store utilizes AI to scan the user's skin, understand its needs, and suggest suitable products from eco-friendly and sustainable brands. This helps the user find the right skincare products quickly and effectively. Designing a user-centric website was the result of a student assignment of UX-land school.

Business Needs

Creating an adaptive website in which:

• Use AI to suggest personalized skincare products that fit users' needs.

• Offer eco-friendly options from different brands.

• Help users find products faster with smart suggestions.

• Build trust by recommending products that suit them.

UX/UI Designer

Role

Team

Duration

Tools

Group of 3

12 weeks part time

Figma, Photoshop, Zoom, Google Form

Our Task

While DermoGuide engages users in shopping without using AI through search or navigation, this case study shifts our focus to shopping using AI recommendations. We prioritize understanding the needs and behaviors of users with skin concerns and designing an intuitive interface for easy navigation and information discovery.

Design Process

· Survey

· Interview

· Competitive Analysis

· User Persona

· User Flow

· Site Map

· Mid Fidelity Wireframe

· Usability and Iteration

· Visual Design

· Final Wireframe

· Clickable Prototype

· Usability and Iteration

Discover

Define

Develop

Deliver

Challenge

Solution

Discover

To understand our audience and their skincare shopping habits and challenges better, we conducted an online survey. The responses from this survey are shaping our thoughts and guiding our next steps.

Survey Findings

We have learned that 61% of our audience prefers not to buy skincare products online.

They are unsure which products are right for their skin and prefer testing them in person.

We want to recreate the in-store shopping experience online to help them find the perfect products easily.

Users prioritize ratings and reviews and product quality when shopping for skincare products online. To meet their needs, we will highlight reviews prominently to make them easy to find. They are also interested in utilizing AI for personalized product.

Users trust AI recommendations more when they see positive feedback from others, clear explanations behind the suggestions, and personalized recommendations based on their skin type and concerns.

When users discover extensive details about AI-recommended products, including ingredients, usage tips, and potential interactions, along with personalized insights about their skin type and concerns, they feel more confident in relying on AI recommendations.

User Interview and Affinity Diagram

After interviewing 14 potential users and analyzing their feedback using an affinity diagram, we identified the top priorities for users.

Top Takeaways

Reviews and detailed information, like before-and-after images showing the product's impact on users' skin, are crucial for users to get accurate information about a product.

Users like to see various sizes and prices to compare and decide which product offers the best value for their money.

Users want AI to ask questions in a simple and brief manner.

We have noticed that trusted skincare bloggers have a significant influence on users' decisions to purchase skincare products.

Competitive Analysis

Through interviews and competitive analysis, we noticed that the product recommendation process on other websites is too lengthy and frustrating for users. They often do not cover all skincare concerns or recommend all the necessary products for each concern. This leads to a lot of clicking back and forth, wasting users' time.

We have decided to display various products for different concerns together, making it easier for users to find what they need without missing out and saving them time.

We concluded the information architecture of our website through competitive analysis. Additionally, we gathered insights into how AI analyzed and recommended products. We then focused on improving every aspect.

Overall Takeaway

Define

Persona

Site Map

User Flow

Solutions

Challenges

5. Users preference for seeing and testing products in person.

2. Users emphasize skincare product quality and effectiveness when shopping online, also expressing interest in utilizing AI for personalized recommendations.

6. Users like to see various sizes and prices to compare and decide which product offers the best value for their money.

7. We have noticed that trusted skincare bloggers have a significant influence on users' decisions to purchase skincare products.

We have dedicated a section on our homepage to showcase products recommended by popular bloggers.

Seeing texture pics helps users feel the product. Info on formulation and scent shows what it's made of and how it smells, making online shopping like being in a store.

1. Users prioritize ratings and reviews and detailed information, like before-and-after images showing the product's impact on users' skin.

By displaying ratings, reviews, and before-and-after images on both the product card and the product details page, users can easily see how well a product works and make smarter choices.

Since our users are interested in using AI, we have added a CTA button in hero image for AI task as well as in the navigation menu to make it easier for them to find.

To build trust in the quality of our products and showcase the variety of brands available on our website, we've included a "Brands We Work With" section on our homepage.

3. Users trust AI recommendations more when they see positive feedback from others.

Add testimonials to the home page.

Provide detailed product information including ingredients, usage Tips, clinical result and interactions to boost user confidence in AI recommendations.

4. Boost Confidence in AI Suggestions with Detailed Product Information

8. Display solutions for all skin concerns on a single page to minimize excessive clicking.

We organize solutions for each skin concern by filtering products that best fit the user's needs for that concern.

Product Card

Product Details Page

Develop

We created Mid-Fidelity wireframes to outline the design vision for desktop version of the page layouts. These wireframes underwent several rounds of iteration to refine them before the final content was developed.

Mid-Fidelity Wireframes

Home Page

Discover Skincare

Skin Assessment and Product Recommendation

Product Detail

Usability Test and Iteration

(Phase 1)

Final

During our testing of the CTA button for our AI skin analysis task, we discovered that "ASK AI" felt too artificial and digital for skincare website, considering its focus on sensitive topics like skin and its health.

We opted "Discover Your Skincare", which users found more meaningful.

1.

Additionally, "SCAN and QUIZ" didn't make sense to users.

2.

Mood Board

UI Kit

Deliver

High-Fidelity Prototype

Home Page

Skin Analyzing Task

Skin Assessment & Products Recommendation

Product Detail

Cart

Contact, Delivery & Payment Information

Place Order

Confirmation

Usability Test and Iteration

(Phase 2)

Before

After

Users find it hard to understand concerns and scores.

We added icons to enhance the UI and worked on scaling to display all skin assessment information without needing to scroll.

1

1.

1.

1

The recommendations are found confusing because products are sorted by type in different tabs, with brief explanations of the concerns they address. However, users want clearer suggestions tailored to each concern.

We are now considering different types of products that target specific concerns. For instance, for addressing dark circles, sunscreen or cleanser suggestions are unnecessary since they don't target the issue; instead, we need categories like eye cream, mask, and serum.

Users find it challenging to identify products suitable for nighttime use at a glance. We added sun and moon icons onto our product cards. Now, users can effortlessly distinguish between daytime and nighttime products.

2

3

2

4

2.

2.

3.

The explanations about concerns were not grabbing the user's attention enough to read it.

We added icons and summarized explanations for better engagement.

3.

4.

3

5.

Product card iteration

5.

Final version

Our challenge was to present essential product information like ratings and sizes in a simple and minimal way to enhance user interface, without overwhelming them with excessive text.

Normal

Hover

Open overlay by clicking on "Quick View"

We conducted an A/B test with 5 participants to know how well our sustainability values and multiple brand approach were understood.

A/B Testing

A

B

Feedback revealed that Sample B, featuring a sustainability explanation in the hero image and the title 'Brands We Work With,' effectively communicated our values.