My Framer Site

.......................................................................................................

About CountOn 📋

CountOn is a health and sustainability focused startup reimagining the way consumers shop for personal care products. The platform uses generative AI to help shoppers make values-aligned decisions by summarizing insights from a customizable set of trusted experts. By extracting product details such as brand, title, and ingredient lists directly from websites, CountOn cross-references this data with guidance from selected experts to deliver clear, personalized product evaluations.

The company aims to help people shop in a way that matches their health needs, personal values, and sustainability goals. CountOn is currently focused on personal care products, with plans to expand to other categories.

UX Research & Design: CountOn 🛍️ (Internship 2024)

A redesign of an AI sustainability shopping startup's mobile and laptop interfaces

Learn More

Duration

Role

Team

Tools

Jun - Aug 2024

UI/UX Design

UX Research

Web Design

Mobile Design

Jenn

Inika

Ting-Yin

Nayoung

Sue

Me!

Figma

Notion

Zoom

Goal/Scope 🌟

To design a product analyzer experience for CountOn that helps users quickly assess whether a personal care product aligns with their health and sustainability values.

The focus was on displaying expert-backed insights in a clear, trustworthy, and user-friendly way, optimized for desktop and responsive on mobile.

Competitive Analysis 📖

We compared CountOn’s initial product analyzer with one direct competitor and three indirect competitors, all of which were skincare ingredient checkers.

Our main takeaway: While text-heavy design can look more professional and show more details, illustrations help with readability and usability.

User Research 🔎

.......................................................................................................

Low-Fidelity Wireframes ✎

Short content

Text-heavy

Illustration-heavy

Direct

Indirect

Shows information briefly

Offers short explanations for jargon

Rates by communities & creators

Separates overview from detailed ingredients list

Various icons to represent redundant information

Clear about where the ratings come from

Clear navigation & information hierarchy

Lots of visual cues & guidance (icons, colors, pictures)

Rates by community & peer-reviewed research

Very long list of ingredients & detailed explanations for each one

Heuristic Evaluation

Usability Testing

Testing Results

A teammate and I evaluated CountOn’s original interface using NN/g’s 10 usability heuristics. We used Notion to document and organize our findings.

In this phase, each person in our team recruited two participants (12 total) to conduct usability testing on CountOn’s original product analyzer.

We first started by creating a usability test plan and a screening survey for participant recruitment.

Then, we created a recruitment survey to find 12 participants. We surveyed participants on their product research and decision-making habits for personal care items.

Each team member conducted two 15 to 30-minute usability testing sessions via Zoom. Participants were asked to share their screen, complete three assigned tasks while thinking aloud, and answer a few follow-up questions.

Below are the key insights we gathered from the sessions (slideshow):

Try to think of a personal product you’ve been using. Find the website for that product and copy/paste to CountOn. Then, reflect on the product analyzer’s results.

Imagine you heard of a product from your friend and you want more information. However, you can’t use a URL this time -- try entering product details manually.

Imagine you’re shopping for a new product and are considering two different brands. Compare two similar products based on their ingredients and expert opinions.

Here are the three tasks that we asked our participants to attempt during the test:

Categorized by: Issue, Recommendation(s), Interface/Screenshot, Heuristic, Severity

Findings elaborated (slideshow)

Found 2 major violated heuristics: 2 - Match Between the System and the Real World, 6 - Recognition Rather than Recall

Task 1

Task 2

Task 3

Before meeting with our client, we shortlisted six potential design directions based on our usability testing results. These included basic redesigns of the CountOn user flows that we created in Figma.

.......................................................................................................

High-Fidelity Wireframes 💻

After meeting with our client, we prioritized four major pain points and developed finalized high-fidelity wireframes for desktop and mobile.

Created a cleaner side menu with two important options: “New Analysis” and “My Favorites”

Clear indication of which expert the user is receiving product information from

Moved the recent history section from the side menu to below the search bar to better utilize space and reduce clutter

Added a progress bar to provide users with an estimation of the time for analysis and to clearly indicate when the analysis is complete

Moved the “Continue to Analysis” button next to the progress bar to increase visibility for all screen sizes

Unclear System Status

Information Overload

Proposal A

Proposal B

Proposal A

Proposal B

View full prototypes on Figma

Proposal 1

Proposal 2

Confusing Navigation

Added a clearly separated box at the top with summaries displayed in a slideshow format, organized by expert. Users can click on an expert’s name to learn more

On mobile, users can expand to view details, including the expert’s specific scoring system

Ingredients can be sorted from most to least relevant

Added more sorting options for the product’s listed ingredients

Users can click directly on a rating to learn what it means