Project details
- Team
- Customer Reviews
- Platforms
- iOS, Android, Web
Some details are generalized. Read confidentiality note.
This case study focuses on my role and design approach. Illustrative data and reconstructed visuals are labeled where they appear.
Unifying fragmented product ratings into a single, scalable design system.
Star ratings are one of the most iconic parts of Amazon's shopping experience. But over years of rapid feature growth, those familiar yellow stars and rating numbers began following different rules across different parts of the app.
Depending on where you looked, from Search results and Product Detail Pages to Cart recommendations and Alexa modules, the rating value, star graphics, and ratings counts were styled, ordered, and formatted inconsistently. As UX Design Lead, I worked on unifying how these ratings are presented through a consistent hierarchy and reusable components for mobile and web.
Six examples from the audit
Order
PDP · value first
Legacy search · stars first
Count notation
Search grid · full count
Similar products · lowercase k
Alignment
PDP recommendation · inline
Books carousel · stacked
Shared framework
Standard
Condensed
Rating value → stars → ratings count
I mapped 21 rating examples across the shopping journey.
I audited everything from standard search grids and comparison tables to specialized contexts like Whole Foods, Rufus AI, Sponsored Cards, and Deals modules.
I grouped the examples into Discovery, Evaluation, and Deep dive to compare hierarchy, count formatting, and interaction cues. Comparison modules sit within Evaluation. Seeing all 21 examples side by side made the challenges concrete: inconsistent count formatting, conflicting text weights, varying star alignments, and mixed interaction rules.
All 21 rating examples
The same 21 examples can be viewed together or grouped by what the customer is trying to do.
Showing all 21 audit examples in one grid.
Examples organized by customer task to compare hierarchy, count presentation, and interaction cues.
- Hierarchy: What appears first, and which elements are present?
- Supporting detail: How are count notation, precision, and placement handled?
- Interaction: What does the presentation suggest someone can do next?
These examples span different products and capture dates. An individual review serves a different purpose from an aggregate product rating, so a review without a count is not an inconsistency.
I broke the rating display into three core structural elements.
The rating value communicates a precise numerical evaluation. The stars provide instant, familiar visual recognition. The ratings count establishes how much feedback supports the score.
The goal wasn't to force a rigid, one-size-fits-all badge across every screen. It was to establish a clear hierarchy, rating value, then stars, then ratings count, and define how that pattern could scale up or down based on screen space and customer intent.
- Rating value
- Communicates the numerical score.
- Stars
- Provide a familiar visual representation.
- Ratings count
- Indicates how many ratings support the score.
The core signal stays recognizable as shoppers move deeper.
Space constraints on a mobile search grid are very different from a full desktop Product Detail Page. I used progressive disclosure to keep the core signal recognizable everywhere while making details available as shoppers moved deeper into their journey.
Follow one product through different shopping contexts.
Illustrative demo
Stage 1 of 4 · Discover
Search
STANDARDThe abbreviated count gives customers a compact overview while they scan products.
Illustrative journey using sample data. The examples demonstrate presentation choices, not experiment results or proof of adoption by each team shown.
I translated the rules into reusable Figma components.
The system included Standard, Condensed, Standard with Link, and Expanded variants, supported by clear usage guidelines. I stress-tested constrained layouts with artificial sizing fixtures so the components could handle extreme values without overlapping or wrapping awkwardly.
A visual specification is incomplete if screen readers cannot navigate it smoothly. I documented a unified reading order and keyboard behavior that focuses the ratings-count link without creating redundant stops on every star.
Standard
Rating value, five stars, and a supporting count.
Condensed
A compact example using a single star.
Standard + Link
A count presented as an available action.
Expanded
Rating information with additional supporting detail.
Illustrative interface examples showing how rating information can be presented in different contexts.
Exploring layouts at different widths
Standard fits
With more available width, the Standard sample fits, including padding.
Standard overflows
With less available width, the same Standard sample overflows.
Condensed fits
With less available width, the single-star Condensed sample fits while keeping the value and count.
The sample values 4.8 and (123.4K) were created for this portfolio. They are not an actual product rating.
Illustrative sizing comparison using sample values, showing how a rating presentation fits or overflows within different allocations.
Reading order and keyboard focus
Reading order
Communicate the score once, followed by the count and the purpose of its link.
4.5 out of 5 → 44,088 ratings, link
Keyboard focus
Tab reaches the ratings-count link. The static value and stars are not separate tab stops.
Destination
The link opens customer reviews for the same product.
I documented reading order and keyboard focus separately. The stars belong to the score's description; they should not create repeated announcements or extra tab stops.
Comparing presentation choices
Hierarchy
Value first
Stars first
Value, stars, then count, compared with stars placed first. Changing the order changes how the information is read.
Count notation
Truncated display: 10.3K
Rounded display: 10.4K
The same 10,392 count shown two ways. A truncated display avoids suggesting more ratings than exist.
Text emphasis
Consistent weight
Count emphasized
Consistent text weight compared with a count emphasized on its own.
Interaction styling
Static styling
Link styling on a static count
A static count without link styling, compared with an underline that suggests an action the count does not provide.
Portfolio illustration of a design consideration; not an Amazon production specification.
I worked with engineering on constrained layouts.
I worked with engineering on constrained layouts and used those discussions to refine the components and handoff. The comparison below illustrates how a compact rating presentation can retain the score, star cue, and supporting count.
Interface example · App cards
- Star appears first
- Rating value appears second
- No ratings count
COMPACT ADAPTATION
- Rating value comes first
- Familiar star cue remains
- Supporting count is included
- Compact presentation fits the card
Both sides show the same games. Counts in the reconstruction are illustrative. The reconstructed image is a design comparison, not a test result or a release capture.
The framework also had to work across shopping contexts.
Examples of rating information in different shopping contexts. They do not establish that every team shown adopted my framework or that I designed each surrounding screen.
A reusable system needs a clear rationale.
Creating a reusable design system isn't just about handing over Figma files. It is about giving teams a clear rationale so they understand why the rules exist.
When teams understand the logic behind progressive disclosure and accessibility guidelines, they can apply the framework to new features with confidence. If I were to do this project again, I would consolidate the visual, content, and accessibility review checklists earlier to make cross-functional handoffs even smoother.