Refactoring SimplePractice's Iconography: From Chaos to Cohesion

The existing suite of icons lacked standardization and consistency with the design system. Recognizing the need for a refresh, I embarked on a journey to update the iconography, thereby creating a unified reference point for both designers and engineers. My role encompassed a comprehensive audit of the current platform's iconography, facilitating their replacement, and documenting the usage guidelines.

Crafting an Accessible Dark Mode Color System

Mobile design and engineering necessitate a meticulously crafted color palette for dark mode. Our present color palette is inefficient and not user-friendly. We required a robust and thoughtfully planned color palette to provide our engineers with comprehensive designs and, more importantly, to enhance the experience of our dark mode mobile users.

With the utilization of Adobe's Leonardo tool, I was able to generate an adaptive color palette based on perceptual color models.

This new color palette meets specific contrast ratios and accessibility guidelines, ensuring visually appealing and legible designs under various light conditions.

Using Figma Variables to Increase the Prototyping Speed 2X

I collaborated with Peter B. Chung, the Design System Lead, to develop the Figma variables for our new dark mode color system.

Although we had to make some alterations towards the end, we managed to successfully switch between light and dark mode with ease during our variable iteration process.

Mapping the Dropzone Component to the New Icon Library and Color Variables

In our current dropzone component, the icons used are outdated and mapped to our archived icon library instead of the updated iconography that I updated for my first project.

While mapping the dropzone to the iconography, I noticed that I did not document or create a component for the updated icon. After mapping the component to the updated icon library, I replaced the old color styles with our new color variables.

Adding a Text Property to the Modal Component for a Better Prototyping Experience

The designer workflow has been complicated because they have to manually add a text slot when using the modal component. Adding a text slot to this component would be a big improvement, and that was my task.

This component is slot-based, and I added a text property to the empty slot to solve the problem that designers were experiencing. Before updating this component, I was unaware of the "slot" method of creating components, but soon learned that it is a common practice. This component update helped me discover a new method of crafting components.

Mapping the Tab Component to Our Type Scale and Adding a New State

Our current tab component is missing the disabled and focus states, and the counter element was not mapped to our type scale.

I added the disabled state for the tab component and mapped the counter element to our type scale. The tab component was using an SF PRO font, which is not a font that we usually use.

Simplifying the Toggle Component by Reducing the Amount of Variants

The toggle component needed to be updated because there was no 1:1 between our switches and the toggle button, so interacting with the variants can give wonky results. I received suggestions that these should be separate components. For example, selecting the "Button" style and "Micro" size will revert the component to a toggle because it is missing properties at the button level. The button style of the toggle lacks two size variants that the toggle variant has. Another problem was that the toggle component had far too many variants, which made using it complex and difficult.

To make the component easier to use and reduce the number of variants, I used variants, properties, and variables.