Expanding ReviewTrackers Design System

At ReviewTrackers, I spearheaded efforts to evolve our design system by designing new components and outlining clear design usage through documentation.
These elements not only modernized the visual design of our app but also made strides in enriching the user experience through seamless interactions.
my contributions
Designer, Figma Liaison, and Documenter
November 2022 - present
The team
1 x Lead Product Designer (me)
3 x Product Designers

Toast Messages

In partnership with our development team, I overhauled the visual and interaction design of our in-app alerts, aka toast messages. The aim was to align the toast message with our app's established visual language and to define design guidelines that would enforce consistency across our interface.

Visual Design

As the team and I collaborated on the visual design of the toasts, we wanted to ensure that our new component would incorporate established design elements like corner radii, hover states, color application, and icon usage.
We designed the toast message component to be easy to build and scale. A toast element could have at most four elements: an icon, a text label, an action, and a close affordance. Each element sat in its own region with set padding and sizing. This structure not only made development smooth but also ensured a consistent visual design for different use cases and varying content lengths.
Another alteration we made was to make the inclusion of an icon mandatory for all toast message variants. This not only simplifies the decision-making process for designers but also enhances accessibility by providing contextual clues via both color and iconography.
Additionally, we introduced a new property into the toast message component to include an action element. This was a step forward from the previous inconsistent inclusion of actions. Previously, actions were handled with buttons, in-line texts, or icons. This property brought a new layer of consistency to how actions were handled within the toast messages.
Lastly, toast messages were given a fixed height to accommodate varying text and icon heights. The icon region was given a pre-defined width to establish a square shape and maintain visual balance. The width of the text and button regions were set to adjust dynamically based on content but maintain a consistent 16px padding on the sides—our standard "m-spacing." This structure offered both scalability and streamlined implementation.

Interaction Design

Toast messages appear 16 pixels from the top of the screen, center-aligned. If a new toast message is triggered while one is already active, the existing toast message is automatically dismissed, ensuring that two toast messages never coexist on the screen.
Toast messages appear for 4 seconds, after which they vanish automatically. Manual dismissal by the user is also an option.