Clovergodes-Half Slice-1
Clovergo-Middle Slice1
Clovergo-Half slice-3

CLOVER GO

Building a design system and improving the workflow

Creating better care
by empowering physicians

PLATFORM
iOS & Android

ROLE
UI Design, Design System

YEAR
2018

TIMELINE
2 months

A faster & scalable product

Clover Go is a mobile point of sale platform. It is an integral part of the cloud-based payment system built by Clover Network Inc. This project highlights the process of building a design system to establish consistency and structure in their app. By crafting a design system, we had a single source of truth that enabled us to build features better and faster. Most importantly, it made our design reusable and scalable.

Clover-Go-Multiple-Screens

My Role

Due to the lack of structure and consistency in the design process, my on-boarding to the project was slow and painful. With no design system, I knew that building any new feature would take me much longer than it should. Clover Go was a fast-growing product with a weak foundation. So, as my first task, I took upon the responsibility of auditing the app and establishing a concrete style guide and component library. I worked closely with the development team and the project manager to streamline the design process and unite the product.

The problems that slowed us down

There was more than one reason why Clover Go desperately needed a design system.

1. Poor versioning system & no naming conventions
The team was using Dropbox for versioning. There was, unfortunately, no master file. Every sketch file version only had the flows that were added/updated in that release. Additionally, not having a naming convention made it difficult to keep track of screens and maintain consistency between iOS & Android. 

2. Platform differences
Even though iOS and Android were designed together, both the sketch files were out of sync. It made aligning and comparing the two platforms very difficult.

3. UI inconsistencies & undefined styles
The checkbox styles, buttons, and padding varied across the app. This created a fragmented user experience by disturbing the cohesiveness of the product. With over 25+ shades of gray, 5+ shades of “Primary” green and no defined text styles, there were lots of inconsistencies.

4. Pixel imperfection
There were icons that were PNGs and measured 17x13.87px. This is a BIG NO. If the pixels are not whole numbers (multiples of 8 ideally) and the icons are not vectors, they tend to get blurry on different device resolutions. The app direly needed a cleanup.  

5. Lack of accountability
With Dropbox, there was no way to tell who made what changes to the sketch files or folders.

 

Build design system

How I built the design system

As a fast-paced and ever-growing product company, optimizing speed and efficiency in our process was crucial. Building a design system is an investment - it costs a lot in the beginning but the benefits you reap afterward are tremendous. The biggest challenge I faced was communicating the value of a design system to the client. The timelines were tight and pausing the work on new features was not an option. So, I set up a meeting with the decision makers to sell the value and gave them a preview of how a component library increases our productivity. After getting them on board, I began creating, consolidating and documenting the different UI components, patterns, and styles that were used across the app. With planned weekly goals, I recreated 150+ screens using our brand new component library. Over the course of 2 months, we were finally in a place where we had a robust design system that doubled our production speed.

Solution

To reduce the design overload caused by the abundance of redundant, non-reusable and inconsistent styles, I set out to create:

- A standard set of visual attributes (such as color, typography, and icons), which will help create a unified brand language
- An inventory of UI elements (such as buttons, cards, and modals), which will help create a robust library of components
- An efficient and accountable working methodology, which will make the process of designing faster and easier.

 

Established color scheme & text styles

Cleaning up the colors and defining our text styles used across the app was much needed. We standardized the styles across our design files. This enabled making any color or font changes across the entire application possible with just a few clicks.

 

Clover-colors-half
Clover-icons-half

Icon library

All the icons were redesigned in SVG format and in multiples of 8, so they could be scalable to use in different resolutions. 

 

Robust component library & systemic naming conventions

A library of all the UI components that made up 150+ screens was compiled and set up on sketch and uploaded to Abstract for easy reference and maintenance. Each symbol, screen, and page was renamed following standardized naming conventions. This highly helped in ensuring consistency between different platforms, collaborating with other team members, and maintaining a single source of truth for our designs. 

 

Clover-library-half

The Value

Time Saver
A UI component library saves designers from spending time on creating repetitive and redundant styles. 

Unity in Product
Standardized components used consistently creates an intuitive, predictable and easy to use app.

Faster Iterations
Working by referring to a design system allows you to put together layouts and flows quickly. This, in turn, helps the team to prototype potential solutions to gather fast feedback. 

Better Usability
The more the number of interface elements and styles, the more will be the cognitive load and weight of the app. By using a design system, we ensure that we are thoughtful of which components we are using and adding to the library.

High Quality
Having a single source of truth is very helpful in bridging the gaps between designers, developers and the QA team. The more in sync the product team is, the better is the work they can produce.

Building Accessibility
Implementing accessibility at the component level ensures that the entire product is optimized for use for all kinds of users.

The fruit of the work

Creating a design system was a successful way of not only unifying the user experience but also the product vision, design principles, process, and the brand voice. It gave Clover Go the solid foundation it needed to scale and grow rapidly. The use of a component-based structure helped bridge gaps between the design and development team and vastly improved the team's productivity. Building a design system helped Clover Go so much that the parallel teams that work on Clover's POS systems were inspired to do the same. This sparked a revolutionary design change within the company. Following that, we all started working together to build a master design system that encompasses all of Clover's products.