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
timeline
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
Our previous toast message design was inconsistent with our style guide. The image below demonstrates the design and highlights some of the inconsistencies.
Previous Toast Message 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.
Toast Message Anatomy
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.
Toast Variants
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.
Toast Anatomy
Interaction Design
For the interaction design, the team opted for simplicity. Toast messages utilize a straightforward fade-in and fade-out, achieved via a simple opacity change shown below.
Toast Message Interaction Documentation
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.
Toast Messages Interaction In-app
Design Documentation
The design specifics and guidelines were documented in both our Figma design system and Confluence design documentation.
Figma Design System Documentation
Side Sheets
The initial concept of side sheets originated during a hackathon. I initially designed them to display AI-generated summaries alongside survey results. From their inception, they had a slow migration into the app. However, their incorporation into the ReviewTrackers app marked a paradigm shift, introducing a new interaction model and information architecture.
Traditionally, ReviewTrackers added new content on separate pages, which unintentionally inflated the user's mental model of the app. The side sheet broke that mold, paving the way for more streamlined, non-intrusive user engagement.
Side Sheet Design
Interaction design
Extensive consideration went into how the side sheet would appear with the main content. Given that the primary purpose of the side sheet was to allow users access to supplementary actions or content without disrupting their view of the main content, it was imperative to ensure that the main content stayed in view and was enabled. Unlike modals, side sheets were intended to support non-intrusive, parallel engagement.
Given this, we initially aimed for an in-line design where the main content would resize to accommodate the side sheet. In this design, all the content remained visible and allowed a user to interact with either region.
In-line Side Sheet Variant
After an initial successful implementation, the development team raised concerns about resizing pages with complex visual elements. As a result, we pivoted to an overlay design. In the overlay design, the content would remain at its original width but allow the user to scroll horizontally to reveal the content underneath. This methodology allowed the content to avoid scrunching but still allowed for parallel workflows to occur.
Overlay Side Sheet Variant
Visual Design
Taking cues from industry leaders like Google, side sheets are sectioned into title, core, and button sections. The title section houses a text element that sets context and provides a close affordance. The button section hosts a primary and/or tertiary action. Lastly, the core section is reserved for the main side sheet content and scrolls independently behind the fixed title and button sections, ensuring complete visibility.
Side Sheet Anatomy
The side sheet was designed to be flexible and scalable as different use cases arose. Sections could be added as they were needed, and the core content could be altered based on the application.
We utilized familiar elements like dark gray dividers and specific background colors in the button section to harmonize the side sheet with existing modal designs, enhancing user familiarity.
Side Sheet Dimensions
The introduction of side-sheets into the ReviewTrackers app was more than just a design update; it was a pivotal change in how we approach user engagement and information architecture. By meticulously considering both interaction and visual design aspects, we've created a solution that not only satisfies technical constraints but also enhances the user experience.