Rio Design System - Mini Makeover — Felix Cheng

Rio Design System - Mini Makeover

Rio - the design system for Amazon’s shopping experience - launched its first set of visual changes in 2020 to a group of components. The goal was to modernize the existing interface components in the shopping app and website, thus improving customer perception of the Amazon brand and shopping service. In 2021, we continued the effort, and I collaborated on the visual updates of the remaining components in the system.

Toggle button.png

Button group.png

Pagination dots.png

Unlike other design systems, Rio was formed to update an outdated design system with an existing implementation, rather than create an entirely new one from scratch. Due to the reach that the existing components had across the Amazon store, we were constrained to incremental changes, and mostly limited to only visual elements to start (color, shape, style).

Like our first visual update, I leaned on our newly established foundational styles and applied those accordingly to ensure consistency and coherency.

Pagination button.png

Text input.png

Where I found opportunities to improve the customer experience, I proposed bigger changes and worked with engineering to give certain components a new look while still working within the constraints of the visual-only updates.

Section expander.png

All of these updates launched and continue to be used on the Amazon store. Additional updates are currently in progress, which will further improve and modernize the components in the design system.

Rio Design System Library

Caracara