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, Figjam, Maze
Category
Edtech
Timeline
5 months
Type of projects
Client
Overview
Unfortunately, due to privacy reasons, I can't show the bulk of the work that I did at iSolvRisk. For now, you'll just have to trust that I accomplished quite a lot during the more than one year I contracted there. I was a Lead UX, primarily focused on design systems and data visualization. Here are some highlights from the design system work I contributed to.
Uncovering the problem and advocating for design system value
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.
Uncovering a pattern of inconsistency in UI elements
I was assigned to perform a UI Inventory to gain a 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.
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 found that there was a lack of alignment between designers and developers as to what was the component source of truth
Both disciplines were working in isolation, resulting in more interface inconsistencies
If devs are unsure of what is versus what is not an existing component, they should be reaching out to ask. Currently, I guess that isn't happening hence, why some components are created from scratch.
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.
Redefining workflow: a design reset for visual clarity
Compare old and new designs - heuristic evaluation
I revisited designs and contrasted them with fresh ideas I developed during the unrestricted session. I created screenshots for 4 evaluators to perform the same task: selecting the best match university.
Why
01
Evaluate the visual emphasis of game-like elements, such as progress bars, rewards, and levels, in order to keep students engaged.
02
Make sure students can clearly recognize their next steps or important decision points by using color, and spacing effectively.
03
Identify oversights caused by cognitive biases.
The assessment allowed me to refine and enhance the visual hierarchy, ensuring clarity, prioritization, and user engagement by incorporating gamification elements that guide users intuitively toward making informed decisions, all while maintaining a playful and visually appealing aesthetic.
Visuals
Following the heuristic evaluation, I iterated on the design and finalized the visuals. A researcher carried out usability testing with real users to confirm the effectiveness. After agreeing upon the design, we finalized the visuals within 2–3 weeks.
Atoms and Molecules
There was a process that we followed while creating any components.
