EarnIn's Cheddar Design System

Product audit and visual exploration

We started off our process with a comprehensive audit of the existing product, delving into the organization of Figma files, the current usage of components, and identifying potential custom components that may be required. Collaborative sessions with team leads were conducted to identify pain points at the intersection of design, engineering, and product management with the goal of making hand-offs easier at every point.

Subsequently, we focused on determining how the new visual brand would integrate into the system we were about to build. Our iteration options were structured based on the extent of brand volume to be incorporated within the product. A conservative approach involved low brand volume, while a more daring stance embraced high brand volume, accentuating the dynamic combination of primary yellow and black hues to infuse the product with personality and distinctiveness. The team ultimately chose to lean in the more conservative direction while being very intentional about where to place brand moments throughout the product and ultimately achieve a larger impact through surprise and delight.

Setting up the foundations

Once we solidified the application of the new brand to their core product, progress accelerated as we captured those decisions using design tokens. As this was a multi-brand system, meticulous planning was essential for token naming conventions, global value definitions, semantic themes, and light and dark modes. While Figma has made strides with their new variables update, we encountered limitations in creating a comprehensive multi-brand system. To overcome this, we seamlessly integrated the Tokens Studio plug-in, enabling us to effectively manage and synchronize all styles with Figma and Github. This approach not only keeps styles consistently updated but also streamlines the theming process, making maintenance and creation remarkably more efficient.

Design tokens allows for easy theming

With the establishment of the default brand, seamless switching between light and dark mode became effortlessly achievable with just a couple of clicks. This pivotal setup also paves the way for swift creation of new themes and brands, facilitating dynamic variations as needed.

Leveraging our semantic token set, making two color token adjustments triggers automatic updates across all interactive states for primary and accent elements. The arduous task of adjusting colors for each individual state is now a thing of the past, streamlining the design process and enhancing efficiency considerably.

Sizing system

The typography scale is at the core of the sizing system. Utilizing both font size and line-height to create two contextual applications for components; standalone and contained elements.

Standalone elements can be displayed without the need for any other element to support it. e.g. a floating action button Contained elements are typically surrounded by div or frame with multiple elements supporting each other. e.g. a list item

Within each of these categories are a range of sizes labeled using the t-shirt system. This allows for all small elements to work together, all medium elements to work together, and so on, but still allowing for mix and matching in order to define hierarchy.

Everything came together in mathematical perfection.

Creating flexible components

Once the foundations have been established, we begin the creation of components, starting with the simplest and most atomic elements—content, buttons, icons, and avatars. We use these atomic elements to fashion more complex components such as cards, sheets, modals, and lists. This streamlines the maintenance process by minimizing the number of adjustments required to effect significant changes.

Throughout this process, we maintain a constant focus on striking the right balance between consumer user experience and ease of maintenance, recognizing that sometimes these priorities may intersect. Being mindful of the EarnIn team's relative newness to Figma, we prioritize facilitating an effortless designer experience when faced with such intersections. Occasionally, this involved adding more variants to a component, which necessitates additional maintenance for each of these variations. To alleviate this challenge, we used a base component strategy.

Moreover, during the discovery phase, we identified that implementing a card and slot strategy not only catered to their visual requirements but also dramatically simplified the creation of design views, rendering the process exceedingly easy and efficient.

Documentation and training

We always want design teams to have everything they need and feel comfortable maintaining the system on their own—although we are always here to support. We prioritize creating thorough documentation by creating tutorial videos, writing about how component usage, relining for development, showing all possible variations and properties of a component, identify areas where components are being nested, and all token applications. We also held office hours asynchronously through Slack, as well as, live workshops throughout the course of this project. This allowed us to always be in touch with the design team to address any issues or problems they may be experiencing.

How it all comes together

Our next challenge involved rebuilding their existing native apps for iOS and Android in both light and dark mode, as well as designing a v1 of a responsive web app — a net new channel for the company. The device and platform-agnostic components seamlessly transitioned to the web app, requiring only the addition of a few essential new components and variants, such as navigation and sheets. As a result of our efforts, EarnIn's product ecosystem now boasts a consistent and unified look and feel across all of their products that harmoniously aligns with their new brand identity.