Project Vision

EarnIn is a fin-tech company reimagining the way money moves to empower every person’s potential. Their product allows users to have access to a portion of their future earnings. EarnIn was growing quickly and needed to streamline their design to engineering pipeline in order to scale practically. A recent rebranding initiative presented the opportune moment to align all design work with the new visual direction, making it the perfect time to implement a comprehensive design system. Our primary objective was to create a versatile, platform-agnostic, multi-brand design system that can be utilized throughout all facets of their operations.

Expertise

Design systems, Design operations, Product strategy, UI/UX, User Research, Brand identity and theme development, Brand strategy, Content strategy, Figma, Responsive web product, Consumer product design (UI/UX), Native mobile app design, iOS app design, Android app design

Deliverables

Device and platform-agnostic, multi-brand design system, Style Guide, Design Tokens, Component library, Pattern library, Design guideline documentation, system training sessions and recorded Loom how-to training videos, iOS and Android app Figma rebuild using new design system styles and components, zero-to-one v1 of a responsive web application, AA minimum accessibility contrast ratio compliance

Platforms

DesktopTabletMobile
DesktopMobile
DesktopTablet
Desktop
TabletMobile
Tablet
Mobile

The Challenge

EarnIn, amid rapid growth and in the midst of launching a rebrand, sought a design system that could position them for seamless scalability and visual alignment with the new brand identity. The objective was to create a flexible system capable of evolving alongside their expanding team.

At the time, EarnIn solely operated with a mobile native app, but with a web app on the roadmap, our focus was on building a versatile system that could be readily adopted by all teams at EarnIn to support light and dark modes across multiple platforms and devices.

The old logo new to the new logo and additional brand elements
Home view shown on desktop, tablet, iOS, and Android
The old logo new to the new logo and additional brand elements

The Solution

We crafted a platform-agnostic, multi-brand design system empowered by design tokens. By adopting this approach, EarnIn gained the ability to seamlessly apply the design system across native mobile and responsive web applications, as well as future product and development. This versatility granted them the flexibility to generate new themes and products as the needs arise, ensuring a dynamic and adaptable framework for their ever-evolving product offerings.

Token structure for the background color of a checkbox component

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.

Various round of design exploration for the native mobile application

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.

Showing how the tokens studio plug-in architecture is formatted but a button component
Showing how the tokens studio plug-in architecture is formatted but a button component

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.

Light and dark modes
Light and dark modes

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.

Showing how all components fit on the grid and work together
Showing how all components fit on the grid and work together

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.

Showing the atomic, molecular, and organism structure of how each component
Showing the atomic, molecular, and organism structure of how each component

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.

Collage of documentation assets
Collage of documentation assets

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.

Collage of documentation assets
Collage of documentation assets

Have a project in mind?

Let's get to work.

Submit a project