i.Liv had 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.
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—not just for usability, but to support i.Liv’s growth and business development goals.
I began by auditing the existing design, identifying areas where visuals and functionality could be improved. From there, I built a design system in Figma to bring consistency across the app. This system streamlined developer handoff and laid the foundation for future feature growth.
When
2022
4 Months
Client
i.Liv is a B2B2C startup that aims to increase the number of women in leadership through cohort-based training sessions that are supported by a mobile app.
Team
A video demo of the prototype showing the flow for creating a Daily Plan.
"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.”
This productivity app helps users track how they spend their time. By creating a daily plan and assigning tasks to one of five life categories, the i.Liv app promotes mindful time management.
The updated Home and Daily Plan screens.
Launch date was around the corner when I was brought onto the project. With limited time and resources, I needed to be nimble with any recommended changes.
Improving the look and feel was the primary concern for the client. I focused on applying a modern design. Building a design system helped with creating consistency.
Though time was limited, I made it a point to build component states that aligned with touch target and color contrast standards.
Sharing this map with the Co-Founder, Head of Product helped to guide conversations and create alignment.
The final site map.
Key screens from the original design. The Home Screen, Daily Plan empty state, Add a Task Pop-up, Daily Plan filled state, and the Home Screen post-daily plan creation.
The inconsistent styles made the app feel disjointed. I wanted to establish a cohesive icon set with a uniform visual style.
The client 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.
Headline and body fonts were applied inconsistently. I aimed to define a clear structure and improve readability.
The variety of button styles lacked cohesion. I wanted to unify them under a single design for consistency.
Input fields had inconsistent heights and font stylings. My goal was to standardize them for a cleaner, more balanced design.
Bright colors and heavy styling distracted from key actions. I aimed to simplify the design to help direct focus within the interface.
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.
The button component is used frequently within the app, making it a good starting point for building the design system.
A selection of components from the final system. From left to right: Cards, Text Input, Page Header, Tab Navigation, Arrow button, Checkmark, and Toggle.
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 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.
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 Rock bottom sheet with the new components.
The Founders envisioned multiple color themes as a way for users to have a personalized experience. To create this feature, the Sapphire palette acted as guide for mapping two additional color options.
The color values of the Ruby Red and Real Teal palettes matched the values of the original Sapphire palette.
Figma's variable feature helped with quickly creating wireframes for the two additional color themes.
Key screens shown in the three app color themes.
With user feedback and each new feature, I have added and edited the design system to maintain consistency.
I am currently seeking my next impactful product design opportunity. Say hello through email or LinkedIn.
