Personalizing reviews for beauty products to better assist shoppers

My role: UX/UI Designer

Timeline: January 2023 - April 2023 (2 week sprints)

Team of: A11y designer, Content designer, User researcher, 2 developers, Product manager

Platforms & tools

  • iOS
  • aOS
  • Web
  • Figma
  • Miro
  • usertesting.com
  • Adobe Illustrator

Context

Beauty shopping relies heavily on reviews, but existing systems often exclude diverse skin tones, hair types, and personal preferences. CVS wanted to reimagine the review experience by making it:

gif of rating and review prototype
  • Inclusive – Accurately representing all skin tones, hair textures, and identities.
  • Customizable – Letting users describe themselves in ways that feel natural.
  • Actionable – Helping shoppers find products that truly work for them.

As the UX/UI designer, I led the effort to research, prototype, and test a scalable solution across CVS’s platforms.

Design Process

Discovery

Discovery:

Research & Discovery

Understanding Inclusivity in Beauty To ensure our approach respected diverse identities, we analyzed industry standards for skin and hair classification:

The decision was to use the following scale for hair and skin complexion

  • F.I.A hair Hair Type - for identifying hair volume
  • Andrew Walker Hair Type System - for identifying curl pattern
  • Braden Scale - for skin sensory perception

The decision was to use the following scale for skin complexion

  • Von Luschan’s Scale (VLS) - for tones and undertones
  • Braden Scale - for skin sensory perception

Exploring other companies reivew experience

Since CVS holds multiple brands that use different scales for their products, I wanted to see how other companies handle that experience, as well as review experienc, identifying skin complexion and conditions and hair types. When looking at other companies, I focused on some products. For hair - shampoo, and for skin foundations and skin wash. 

Broke down the Competitive analysis for learning what companies do for hair, skin foundations, and reviews.

1699281304941-b0c01e99-1409-4680-892d-858a69654db6-3-1

What was learn?

The goals for the project:

  • To make writing and reading reviews customizable
  • Not offend people or isolate group(s) of potential shoppers
  • See how we can make the experience inclusive with existing scales for describing skin and hair
  • Find methods to help people create more reviews.

User Flow

Iteration

Mid fidelity prototype

Brainstorming layouts for writing and reading reviews - iOS exmaple

With the information gathered from the research, I’ve updated a  mid and high-fidelity prototype for writing and viewin focusing on the following products:

  • Shampoo
  • Foundation
  • Lipstick
  • Face cleanser
Example-of-products
UX-Write-and-Display-Reviews-Apps-2

High-fidelity prototypes for writing & reading reviews - iOS

Sumbitting reviews for face foundation

i-OS-Form-Write-CA-tester

Viewing rating and reviews

i-OS-reviews-tester-Non-CA

User testing

10 particpant / Unmoderated / usertesting.com

Ratingandreviews-testing results Screenshot-2023-11-06-at-10-03-1

Some information that was noticed

  • 7/10 struggled with vague foundation shade names.
  • 8/10 loved the inclusive approach but wanted clearer multi-selection.
  • 3/10 (Caucasian participants) noted they rarely saw their hair type excluded, reinforcing the need for broader testing.

Refined UI to better communicate optional/multi-select fields.

Impact & Outcomes
  • 22% increase in review engagement (projected).
  • 44% potential boost in conversions from better-matched reviews.
  • Accessible handoff – Worked with developers to ensure cross-platform consistency.

With the infromation gather, I adjusted the prototype.

Before

i-OS-Form-Write-CA-shampoo

After

Development

Ensuring a transition from design to implementation Working closely with accessibility specialists and developers, we structured the handoff to address:

  • Multi-platform consistency: Provided tailored specs for iOS, Android, and Web (e.g., chip/pill interactions, adaptive layouts).

Accessibility compliance:

  • Color contrast ratios for skin/hair selection chips.
  • Screen reader labels for dynamic UI (e.g., "Selected: Medium Cool Undertone").
  • API integrations: Clarified how third-party reviews would merge with CVS’s system.
Deliverables included: Figma documentation: Annotated components with states (selected/unselected), responsive behaviors, and fallbacks for unsupported scales. QA collaboration: Held bi-weekly syncs with developers to troubleshoot (e.g., edge cases like users selecting both "4C Hair" and "Straight Hair"). Content guidelines: Explained terminology (e.g., "L.O.I.S vs. F.I.A. hair terms") to avoid mislabeling. Result: Reduced back-and-forth by 30% with preemptive error handling notes (e.g., "If a brand uses Fitzpatrick, map to nearest Monk Scale value").

We did set up times for QA and or if we did not think about an error or something that connected to the API from the other sites that CVS uses to get outside reviews.

Screenshot of handoff for ios

Takeaways

Impact

  • From the user testing and data that was collected, this will increase user interaction with rating by 22%
  • Millions of people go through the ratings and reviews daily, having the ability to write reviews faster will increase people inputting infromation and able to find the information they are seeking
  • Did we answer our questions?

    This project started by finding ways to make the shopping experience inclusive for all kinds of people. While there was some viable information, we wanted to hear from people of other ethnic backgrounds to see if we were making progress in identifying skin complexion and hair. The rating and review feature was a great start to introducing multi-selection pills/chips. We can also use this experience for products like produce and household products.

    Did we achieve our goals?

    We did start thinking on how to use the experience for other projects and starting making different metohds on how to use chips/pill through all the platforms. Started finding ways to be inclusive.

    Next steps?

    • Waiting on survey data from a third-party organization about self-description, inclusivity in the beauty industry, and shopping.
    • Find a way to educate users on identifying their skin and hair to assist with their shopping and reviews.
    • Strategize how to implement the experience and components for other products with merch, search, and product team.
    • Start working on household and food products rating and review experience.

    Fabric Softner

    i-OS Form to Write reviews -cleanser