Building a Design System for an iOS & Android Mobile App

Overview

The Problem

Inconsistent design was hurting the user experience

i.Liv partnered with a design studio to create the MVP of their mobile app, but the team wasn’t satisfied with the execution. Inconsistent styling and icon usage were the biggest pain points, though other design decisions contributed to a disjointed experience.

What's at Stake

This daily-use app needed to feel seamless

The mobile app is a core part of i.Liv’s training programs and is used by customers on a daily basis. A polished, consistent experience was critical for usability and to support i.Liv’s growth and business development goals.

My Role

I modernized the UI and built a scalable design system

I began by auditing the existing design, identifying areas where visuals and functionality could be improved. From there, I built a component library in Figma to bring consistency across the app. This system streamlined developer handoff and laid the foundation for future growth.

The Client

i.Liv

A B2B2C startup that aims to increase the number of women in leadership through professional development training sessions that are supported by a mobile app

Project Outcome

In early 2023, i.Liv launched to the Apple and Play stores

A video walkthrough of the Figma protoype showing how to create a daily plan in the iLliv app.

The updated designs were well received

"Overall the app designs have been very well received by our business advisors and end users. The designs have brought to life technical and operational ideas in a way that is intuitive and user friendly and that is all because of the design approach and design system. The developer finds developing against the designs to be super straightforward which has enabled us to meet very challenging timelines on a very tight budget.”

Idana Silver

i.Liv Co-Founder, Head of Product

Idana Silver

i.Liv Co-Founder, Head of Product

Discovery

To ensure I understood the user flows and interactions, I mapped the existing app

Sharing this map with the Co-Founder, Head of Product helped to guide conversations and create alignment.

A simplified version of the final site map showing the key screens (in purple) and tabs (in orange). Documenting this map helped me visualize how information flowed through the app.

To ensure I understood the user flows and interactions, I mapped the existing app

Sharing this map with the Co-Founder, Head of Product helped to guide conversations and create alignment.

A simplified version of the final site map showing the key screens (in purple) and tabs (in orange). Documenting this map helped me visualize how information flowed through the app.

Next, I took an inventory of the existing designs

Key screens from the original design. The Home Screen, Daily Plan empty state, and Daily Plan filled state.

Next, I took an inventory of the existing designs

Key screens from the original design. The Home Screen, Daily Plan empty state, and Daily Plan filled state.

Grouping foundations and components helped me to spot where to make design improvements

Icons

The inconsistent styles made the app feel disjointed. I wanted to establish a cohesive icon set with a uniform visual style.

Icons

The inconsistent styles made the app feel disjointed. I wanted to establish a cohesive icon set with a uniform visual style.

Color

The founders liked the navy and neutrals, but not the brighter accent colors. My goal was to refine the palette and expand its range of tints and shades.

Color

The founders liked the navy and neutrals, but not the brighter accent colors. My goal was to refine the palette and expand its range of tints and shades.

Typography

Headline and body fonts were applied inconsistently. I aimed to define a clear structure and improve readability.

Typography

Headline and body fonts were applied inconsistently. I aimed to define a clear structure and improve readability.

Button Styles

The variety of button styles lacked cohesion. I wanted to unify them under a single design for consistency.

Button Styles

The variety of button styles lacked cohesion. I wanted to unify them under a single design for consistency.

Input Variations

Input fields had inconsistent heights and font stylings. My goal was to standardize them for a cleaner, more balanced design.

Input Variations

Input fields had inconsistent heights and font stylings. My goal was to standardize them for a cleaner, more balanced design.

Card Styling

Bright colors and heavy styling distracted from key actions. I aimed to simplify the design to help direct focus within the interface.

Card Styling

Bright colors and heavy styling distracted from key actions. I aimed to simplify the design to help direct focus within the interface.

I analyzed component states and noticed inconsistencies in the task card

In conversations with the Co-Founder, Head of Product, I learned that the life category and level of effort would help users prioritize their list of tasks. For this reason, it was important to display this information on the card as it moved between states.

The task card as it moves between the three primary states.

I analyzed component states and noticed inconsistencies in the task card

The task card as it moves between the three primary states.

Building the System

I started with building the core components, improving accessibility and scalability in the process

The button component is used frequently within the app, making it a good starting point for building the design system.

I started with building the core components, improving accessibility and scalability in the process

The button component is used frequently within the app, making it a good starting point for building the design system.

To create a consistent experience, I updated the task card to maintain the same placement of information along the full user journey

By including the category and level of effort in each state of the task card, users would be better able to prioritize the order of their daily tasks.

To create a consistent experience, I updated the task card to maintain the same placement of information along the full user journey

By including the category and level of effort in each state of the task card, users would be better able to prioritize the order of their daily tasks.

I refined the palette and ensured it met color contrast standards

I kept the original color feeling but refreshed the palette, adding value ranges to the hues for greater visual depth. My process was iterative and collaborative. I created options, and sought feedback from the client until we landed on the palette shown here.

The final Sapphire color palette with color ranges.

I refined the palette and ensured it met color contrast standards

The final Sapphire color palette with color ranges.

I constructed screens with the components to evaluate them

While iterating on the designs, I regularly checked in with the Co-Founder, Head of Product for her and the team’s feedback. My goal was to create alignment and excitement around the recommended changes and ensure the designs could be implemented in time.

The Home Screen, Daily Plan, and Add a Task bottom sheet with the new components.

I constructed screens with the components to evaluate them

The Home Screen, Daily Plan, and Add a Task bottom sheet with the new components.

Ongoing Impact

Since building the initial design system, we've hit the following milestones

In early 2023, iLiv launched to the Apple and Play stores
As of March 2025, i.Liv has supported 100+ cohort participants and app users.
We designed and released 2 new features that support long-term goal creation and completion

With user feedback and each new feature, I have added and edited the design system to maintain consistency.

Contents

My Role

Product Design Lead

Information Architecture

Design System

Prototyping

The Team

Co-Founder / Head of Product

Founder

Lead Software Engineer

Duration and date

4 Months

2022

My Role

Product Design Lead

Information Architecture

Design System

Prototyping

The Team

Co-Founder / Head of Product

Founder

Lead Software Engineer

Duration and date

4 Months

2022

View more of my work

View all

A Flexible Design System that Accelerated Development of a CMS

Cut development time by 50% by architecting a new design system. I gathered client requirements and built a component library in Figma, launching the site in just three months.

Design System

Responsive Design

A Flexible Design System that Accelerated Development of a CMS

Cut development time by 50% by architecting a new design system. I gathered client requirements and built a component library in Figma, launching the site in just three months.

Design System

Responsive Design

Dashboard and E-Commerce Store for a Web3 Loyalty Rewards Program

Drove a fivefold increase in site traffic and sales by designing front-end touch points for a new rewards program in close collaboration with the Head of Product and development team.

UI Design

Responsive Design

Dashboard and E-Commerce Store for a Web3 Loyalty Rewards Program

Drove a fivefold increase in site traffic and sales by designing front-end touch points for a new rewards program in close collaboration with the Head of Product and development team.

UI Design

Responsive Design

A New Workflow to Improve Admin and Customer Experiences of Events

Improved productivity by 6% and increased event production capacity, scaling from 6 to 33 events in the first year, by conducting interviews, journey mapping, and designing optimized workflows.

Service Design

Journey Mapping