Building a Design System from the Ground Up
Mapping
Social
Introduction
By the time ArisGlobal entered its third decade, they had established themselves in Health Care Software – providing an end-to-end cognitive computing engine for the drug development process. In 2017, new leadership brought upon a period of rapid expansion and acquisition. With this growth, came entirely new products and features to add to their already large suite. Although the products had grown in volume during the transition, the design between all products was not consistent.
Role
Head of Design
Timeline
Jan 2022 - Sept 2022
Responsibilities
Product leadership + vision
Setting product definition
Expanding brand patterns
Defining design system
Launched Beta product
My Role
I joined ArisGlobal as Director of Product Design in 2019. Arisglobal has 1,200 total employees across all of its global locations. I worked as a hands-on Product Designer and managed a team of 1 Product Designer and 10 Engineers. I managed up directly with the CEO and VP of Marketing in the Miami office. I frequently made trips to our Bangalore India and European offices.
The Challenge
I sat down with key stakeholders to discuss the challenges they’ve had in the past. From their perspective, the initial business goal was to elevate and modernize the design of the product as a whole. Together, we broke that idea down into four high-level goals:
User Experience: Improve the navigation and ease of use
Performance: Improve the latency and speed
Data-Driven: Shift towards product decisions based off analytics
The Problem
ArisGlobal has a suite of 12 products total grouped into 5 separate backends. Each product worked in their own vertical within the company and there wasn’t a common style guide stretching across all of them. From the first audit, it was obvious that users would be challenged by switching mental models from one product to another. To unify the entire suite both visually and functionally, we planned to create a design system. This system would be the single source of truth across each of the teams and the company.
Various past product screenshots displaying inconsistencies
Researching the Landscape
I gathered qualitative (the why) and quantitative (the what) data by performing various research. The findings below will show the steps we took to; understand the market, the user, existing design, user goals, and user feedback.
Step 1: Analyzing the Existing Design
When auditing the existing product deeper we found that the details didn't have consistent patterns. The primary color (Blue) had many variations. The icons were pulled from free resources online without any size or usage guidelines.
(Left) Various colors of blue used for the primary action (Right) Inconsistent icons
Step 2: Understanding the Market
I did a competitive analysis to highlight the strengths and weaknesses of existing products. I wanted to explore how successful competitors and design-focused SaaS products act in the market. This gave me a solid basis for the vision of the product and potential features.
(Left) Top competitors (Right) Design focused SaaS products
Step 3: Understanding the User
I traveled to conduct in-person interviews with our users in Ridgefield, Connecticut, and Mainz, Germany. I put together user personas to outlines the ideal user in a concise and understandable way. This would help guide the design around our actual users and speak their language. This would also help familiarize new people on my team and legacy co-workers with bias.
"I wish the contrast color between fields entered had better visibility/readability."
Step 4: Conducting Quantitative Research
For the users that we weren't able to visit in-person, I worked with various team leads to conduct surveys and system usability scales. The surveys would help us validate the in-person finding. The system usability scale was graded at 48.2, which is considered an F rating. This number would be compared to our future designs to validate any made progress.
(Left) Survey (Right) System usability scale
Step 5: Roadmap and Product Planing
We made a word cloud of the top feedback we received. We then researched every statement, need, and desire from the in-person interviews and surveys compiling into an excel labeled by; Category, Project, Goal, Potential Impact, Size (Cost), Priority (ROI), and Product. We then met with key stakeholders to prioritize and plan features for the future roadmap.
Product prioritization document
Integrating Design into the Process
Working with a centralized design team was a new concept within the organization. We then worked with stakeholders to look at how we could integrate design into the development cycle, instead of treating it like a third party. Below is the new process we adapted. On the right is a flowchart I made to show each team's responsibility through the product lifecycle.
We also integrated modern tools for transparency within our process and sent out weekly global emails updating everyone on our progress. This helped put further importance on design into the company culture.
Flowchat of the new product lifecycle
Product Planning
From our research, we identified two main areas that we needed to focus on; Global navigation and Universal Wayfinding. We set the following goals for both.
Global Navigation
Navigation should be consistent across all the products and get the user where they need to go with clear, well-defined paths and decision points
Universal Wayfinding (Search and Breadcrumbs)
Users should always know their location and have an option to change their destination.
Previous ArisGlobal product headers. Consistency problems ranged from visual (logos, fonts, icons) to functional (navigation patterns)
Setting the Structure
All the products had similar patterns of navigating but the look, feel, and positions varied. We decided to explore the information architecture to set a standard pattern of navigating.
(Left) Information architecture tiers (Right) Information architecture structure
Deciding on the Look and Feel
For our initial proposal, we came up with various options and gathered feedback. Option 3 (far right) proved to be the most visually liked from our gathered user feedback.
Early explorations
“The overall look and feel of this new version is much better." - Ericka
"Colors are easier to see, and there is a dramatic improvement from past versions.” - Stanley
Building out the Design System
I started by building out components within Sketch. Later these parts would become part of the interface (i.e., colors, typography, setting the grid, etc.). This included around 200 different components such as, buttons, form elements, error and empty states, cards and many more. We bought and used icons from streamline to automate the process of building out 1,540 icons.
Guided by Atomic Design
To guide the process we closely followed Brad Frost’s Atomic design methodology composed of five distinct stages. Those five stages of atomic design are:
Atoms
Molecules
Organisms
Templates
Pages
Atoms include basic HTML tags like inputs, labels, and buttons.
Atoms
Molecules
A page header molecule is composed of a label atom, filter atom, and button atom.
Organisms
This global navigation organism is composed of a search form molecule, logo atom, and primary navigation molecule. Organisms consist of smaller molecules like primary navigation, search, utility navigation, and logos.
Templates
These templates consists of organisms and molecules applied to a layout.
Pages
The page stage replaces placeholder content with real representative content to bring the design system to life. We gathered visuals and complied into a mood board before jumping into the visual design.
Comparing with the Past
A before and after look at the progress.
Continuing the Process
After building out our design system the job wasn’t done. We continued to understand the context around the problems, exploring solutions, tested and gathered feedback and ultimately refined the product.
The Impact
Over my span of a year and a half, Year over year revenue growth increased by 14%. We doubled our client base. Productivity and collaboration increased by 1800%. We scaled up the design team to 10 and integrated it into the culture. The original business goal was accomplished and it would result in increased sales and ultimately lead to an acquisition of a majority stake from outside investors that would be used for continued growth in design and automation.
New SUS metrics: B+ (79.6). Previously F (48.2)
The client base doubled for the first time in their 30 year history.
Year over year revenue increased by ~20%
Design productivity and collaboration increased by 1,800%
Acquired by Nordic Capital for $700 million
U.S. Health-Care Software Firm ArisGlobal Sells Majority Stake to Nordic Capital
Deal values ArisGlobal at $700 million, including debt; European buyout firm Nordic Capital readies to establish first U.S. office in New York
The WALL STREET JOURNAL • June 16
Sankesh Abbhi
Sam Stein
Alvaro Gill
Ashok Katti
Manish Varma
Sharad Prakash
Aman Wasan
Vitthal Gouri
Tims Thimmanna
Wim Cypers
Ramesh Ramani
Sai Balakrishnan
Juby Rajan
Pratyusha Pallavi
NEXT
Project