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:

  1. Atoms

  1. Molecules

  1. Organisms

  1. Templates

  1. 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

TEAM

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