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
Category
Edtech
Timeline
5 months
Type of projects
Client
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 assist students in making everyday and long-term career decisions 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 and really made a difference—trust me on that!
Uncovering the problem and advocating for design system value
Identifying a problem
01
Lacked a comprehensive design system to unify the brand identity.
02
The absence of a design system, UI kit, or component library resulted in an inconsistent and clunky user interface.
03
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 then breaking them down further into molecules and atoms.
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.