Trybe App

View Prototype

Project Overview

Project Type

Solo Academic Capstone Project

Duration

18 weeks (over 8 month PT bootcamp)

Role

UX Researcher | UX/UI Designer

Tools

Figma

Platform

iOS

During my UX Design Bootcamp at BrainStation, we were tasked with completing a capstone project over the span of 18 weeks. This project was an end-to-end UX design process that involved designing a digital solution for an identified human-centred problem.

Exploring the problem

This project began when Consumer Report posted a TikTok about carcinogens found in braiding hair. This peaked my interest because like a lot of other Black women, I have been wearing braids since I was a little girl. Braids are a often considered to be a “protective style” to avoid overmanipulation of our fragile. Unfortunately, this news adds another product targetted to the Black community that is known to include unsafe ingredients.

Secondary Research

According to Environmental Working Group (EWG), personal care products specifically marketed to Black women are more likely to expose them to toxins that increase the risk of:

Reproductive damage

Cancer

Hormone disruptions

Allergies & other adverse health effects

This is alarming considering the ratio of Black Americans make up 22% of the personal care consumer market.

13%

Black U.S. population

22%

Population of Black consumers in personal care product market

User Interviews

To start exploring solutions to this problem, I decided to conduct user interviews to answer these questions:

How important using natural products is to Black women?

How knowledgeable they are about the risks that staple products may pose on their health?

How shopping habits impact which products make it into daily beauty routines?

What would make Black women more confident in choosing personal care products with less hazardous ingredients?

How can we help Black women swap out hazardous products in their daily routines with less hazardous ones?

Themes

The user interviews uncovered 12 themes but I decided to focus on these themes as they were these topics were most prevalent in the user interviews:

Trusted Reviews + Recomendations

Ingredient Awareness + Health Conerns

I focused on these themes because users struggled to find trusted reviews that showed if a product would work for them without causing bad reactions.

To create a solution that would address these themes, I had to answer this:

How might we address the confusion and lack of trust Black women face when trying to choose safe personal care products?

Meet Patricia

Patricia

“I’m still recovering from hair loss after trying a new product that gave me an bad reaction”

60 y/o

Personal Support Worker

Toronto, ON

Behaviours

Researches products on YouTube and social media
Only trusts reviews from family & people with similar demographics
Chooses product with fewer, recognizable ingredients or makes her own

Pain Points

Limited safe options for hair and makeup
Hard to trust mainstream product reviews
Past trial & error caused severe reactions and hair loss

Goals

Find safe products without harmful ingredients
Access credible & reliable reviews to avoid trial and error
Understand ingredients and their long-term health impacts

I took a closer look at her experience when trying a new shampoo to find opportunities for solutions.

Patricia

60 y/o

Personal Support Worker

Toronto, ON

“I want to easily find beauty products with safe ingredients that actually work for me”

Touchpoints

Opportunities

Actions

Steps

Researching

Browsing

Comparing

Purchase

Trial

Deciding

Google

Amazon

Pharmacy

Beauty Supply Store

Home Bathroom

Recovering from bad reaction to shampoo
Asks friends for suggestions
Searching on Google + social media

Help Patricia find exactly what she’s looking for using various filter options

Reading online product reviews
Reading product labels in store
Looking for familiar ingredients

Help Patricia understand the purpose and safety of specific ingredients

Deciding between recommendation from familiar brand or natural brand she’s never used with familiar ingredients

Help Patricia compare products to make easier shopping decision

Purchases natural brand w/ the simpler ingredient list

Washes hair with new shampoo
Assessing how hair and skin feel after trial

Decides she likes this new product and makes it her go-to shampoo

Help Patricia log this product for future purchase and keep track of any formulation changes

I chose to focus on the researching part of Patricia’s experience to give users support from the very start of their journey.

Researching

Help Patricia find exactly what she’s looking for using various filter options

Task Flow

Before I could start create the screens, I created a task flow for a search function that uses filters, sorting and a compare feature.

Once I completed this task flow, I noticed a few issues that could negatively impact our user’s experience because:

It had way too many steps

Complicated task flow could be overwhelming to navigate, especially while shopping

Relies too much on the user to apply filters and use the compare + sort features

After gathering feedback and inspiration, I created another task flow:

I decided to streamline the task flow further to focus more on the camera scanner and quiz

With a finished task flow, it's time for the fun part!

UI Inspiration

Comparative Analysis

Finding inspiration for the UI started with a competitive analysis of 3 similar apps:

Think Dirty

Yuka

OnSkin

I then looked for inspiration for specific components like:

CTA Buttons

For product page
1. Icons for certifications on top
2. Safety ranking/best match tag at top product card
Layout for “Help Me Choose” + “Where to Buy” buttons
Search bar very clear + icon to take pictures
Option to search using camera
“Help me choose” CTA + “Where to buy” CTA

Cards + Containers

Tip to keep users from getting stuck
Clean simple card w/ tags
Sticky top nav bar so users always have access to search
Layout allows for pictures
Flash card style quiz shows 1 question at time

Screen Layouts

Create lists & save faves
Follow brands to stay up to date
Follow brands to stay up to date
Clean product layout w/ lots of white space
1. Replace heart icon w/ icon for help me choose
Home screen layout w/ clear cards to highlight categories
Amazon product scanner w/ label on how to use
History + recent searches in search screen

Simple clean icons + label but might need something bigger, text is small
Badges that are illustrated but simple so that they are clear to users but minimalist

Icons & badges

Typography & colours

Clean easy to read typography
Natural colour palette
1. Greens, creams, w/ gold & black accent

Now that I had inspiration, I could start create sketches that I turned into a mid-fidelity prototype to be used for usability testing.

Home Screen

Home, Explore, Community, Lists, Search

Profile icon, logo, search bar

Product images

Usability Testing

After 2 rounds of usability testing, I gather lots of opportunities to revise the prototype.

Round 1

Adjust sizing of logo and profile icon

Adjust layout of hair quiz to make “next” button more visible

Make larger product card for intended product that was searched in the search results

Adjust the line height of home screen section titles

Specify “Top Rated” and “New Releases” title to be more descriptive

Change “Help me choose” button to something like “Find the right product”

Product recommendations suggest complementary products (e.g., shampoos, styling products) based on the user's selected hair care item.

Make camera scanner button more intuitive

Add “Where to buy” button to the final results page

Round 2

Add more information on why a product “is a good fit”

Add pop-up with product overview that leads to specific product page

Update “List” icon in bottom nav to “Wishlist” or “Favourites”; change icon to heart or stars

Add badges to products to highlight focus (e.g. vegan, clean, etc.)

Branding

I started by brainstorming some adjectives and creating a 'More A, Than B' list to capture the feeling of the app.

Clean

Light

Sophisticated

Serene

Safe

Elegant

Tranquil

Easygoing

Faithful

Calm

Supple

Fresh

More light than heavy

More modern than rustic

More soft than hard

More simple than intricate

More smooth than rough

More open than closed

More light than dark

More feminine than masculine

And then I create a moodboard to choose a colour palette.

And creating a “More ‘A’ than ‘B’ list

These colours were chosen because the tones embodied the warm feeling and natural tone of the mood board.

FDFEF

E5B8A5

84996E

14100F

10%

30%

60%

I wanted an app name that focused on clarity, support, and confidence. It should embody softness, trust and feeling empowered. Here were some of the options:

Clara

Rooted in clarity, clean and elegant

Haven

Safe, soft, supportive

Flowa

Gentle progression, growth, and flow

Vera

Suggests truth, trust, and confidence

Ultimately, I chose to go with:

Trybe

Pronounced like “tribe”

embodies trying new things, exploration and incorporates the community aspect of the app using the word “tribe”:
a group or class of people with strong common traits, values, or interests.
a large family

To create the wordmark and app icon, I explored natural themes like leaves and trees. But I wanted to ensure that the logo represented the connection that a tribe would have. I knew I wanted each letter to connect together in some way.