iSolvRisk Inc.

Building a design system for a risk management app to ensure UI consistency, foster collaboration, and enhance efficiency between designers and developers.

Responsibilities

Design system, Product strategy
UI Design, Discovery

Team

A 2-person team consisting of myself and the Lead Engineer, with collaboration from full-stack developers and the Head Designer.

Tools

Figma, Photoshop, Illustrator, Asana, Slack, Maze

Impact

58%

Boost design consistency

Consolidate the number of component variations from 120+ to 50.

30%

Design productivity

Developed design system and established patterns streamlined productivity, reducing redundant design decisions and accelerating project timelines.

35%

Better hand offs

Improve collaboration with developers to greatly reduce the number of clarification meetings.

Background

iSolvRisk is a risk management app designed to help students make informed decisions about their everyday and long-term career choices by visualizing their options. This app helps bridge the gap between academic learning and real-world application, equipping individuals with essential decision-making skills needed for today’s dynamic workforce.

I can only show you a tiny bit of the work because of privacy stuff. As the only designer on this project, I built the design system from scratch in Figma and really made a difference—trust me on that!

Uncovering the problem and advocating for design system value

Identifying a problem

Lacked a comprehensive design system to unify the brand identity.

The absence of a design system, UI kit, or component library resulted in an inconsistent and clunky user interface.

The lack of cohesive design tools hindered the product team's productivity and efficiency.

I.Discovery - audit existing components

Conducted and documented an inventory of every UI element to gain insight into the current status of existing design elements.

Auditing existing design

The first step toward building the design system was to audit all the current UI components and break them into molecules and atoms.

Process workflow:

Uncovering a pattern of inconsistency in UI elements

I conducted a UI inventory to gain insight into the current status of our existing design elements.

I identified many inconsistencies in our design assets, highlighting the need for a more systematic approach to documenting, communicating, and setting up our design system.

Typography

Typography lacked hierarchy, with inconsistent fonts, sizes, and weights disrupting readability.

Colors

Colors were inconsistently applied, affecting brand identity and accessibility.

Components

Components lacked uniformity in styles and descriptions, making design cohesion difficult to maintain.

II.Advocacy, scoping & planning

Advocating for the value of design systems to achieve project buy-in

The product team was established solely for feature delivery, with a plan to create a design system for the product. To move forward with the project, we needed to secure buy-in from the CEO and carve out space in the tight schedule for launching the product.

I started by defining a mission to align the team toward a common goal.

Designers struggle to maintain consistency across different pages and features, leading to mismatched styles, fonts, and colors because the design system and documentation don't exist. That causes developers to be unsure about existing components, which leads to some components being created from scratch and leading to longer development cycles.

Mission statement

Empowering the product team to support current and future products by enhancing UI consistency and fostering seamless collaboration between designers and developers.

Understanding the workflow frustration

I met with our team to understand frustrations with the current workflow

I discovered a misalignment between designers and developers regarding the component source of truth.

Both disciplines were working in isolation, resulting in more interface inconsistencies

If developers are unsure of what an existing component is and what is not, they should reach out to ask. Currently, I guess that isn't happening, which is why some components are created from scratch.

"To be honest, the handoff process feels like a game of broken telephone."
- developer

III.Developing

Redefining workflow: a design reset for visual clarity

Compare old and new designs - heuristic evaluation

I revisited the designs and contrasted them with fresh ideas I developed during the unrestricted session. I created screenshots for four evaluators to perform the same task: selecting the best-matched university.

Through a structured heuristic evaluation comparing the old and newly reimagined UI, I uncovered key insights that directly influenced design decisions and improved the user experience. Here's what changed as a result:

Improved clarity of decision points

Users more easily identified key moments in the university selection journey due to refined visual hierarchy.

Stronger visual guidance through gamification

Evaluators noted increased engagement and a clearer sense of progression during the task.

Clarity over complexity

Simplified layouts and clearer groupings reduced decision fatigue and eliminated misleading UI patterns.

Higher task completion confidence

The new design introduced a visually appealing interface that maintained clarity and usability. Evaluators described the UI as “friendly,” “motivating,” and “easy to navigate.”

3 out of 4 evaluators successfully completed the task faster with fewer clarification questions compared to the old version.

IV.Design & build

Define design foundation - tokens

After tidying things up, it was time to lay the foundations of our design system.

I built a brand-new set of design foundations and tokens from the ground up.

Ensuring a clean, consistent, and scalable design system that was uninfluenced by existing or outdated components.

These tokens defined the app's core visual language, ensuring consistency across UI components and enabling easier handoff to developers. Designers could use these guidelines to create new components (as seen in the images above) and expand the design system further. Here are some foundation pages that keep the team aligned.

Process

There was a process that I followed while creating any components.

Examples

V. Project impact and learning

Results

Within 5 months of assuming my role, we successfully built the design system in Figma from the ground, leading to significant improvements in workflow efficiency and design quality. Design productivity increased, and handoff clarification meetings dropped. These enhancements played a key role in a successful design system built by:

Cohesiveness

Ensured a cohesive look and feel for the new design.

Structure

Provided a structured set of principles to guide decision-making amidst conflicting requests from the team.

Streamlined

Streamlined the design process, which was crucial for the design team.

Speed

Accelerated the design-to-market time by providing developers with a single source of truth and a set of reusable components and patterns.

Reflection

The most time-consuming part of the process was auditing the existing components, as the UI elements were not organized into a library, and there was no formal design system in place. Identifying design inconsistencies and ensuring alignment within the team during implementation proved challenging yet essential.

Initially, I believed that after collecting and categorizing the existing components, consolidating similar ones would be straightforward. However, this turned out to be a bottleneck for me. From this experience, I learned that it's crucial to start with intent rather than focusing solely on the components.

Throughout this process, I recognized the importance of a data-driven approach to design improvements and the value of strong collaboration and clear communication between design and development teams.

Other

Levi Strauss project