The challenge Create a collection of reusable components, guided by clear principles, that can be combined together to create simple and complex experiences.
My role Lead Product Designer - Visual design, Interaction, Wireframes, Whiteboarding.

Overview

This case study aims to show how we created a design system for GoRide at Ford. I’ll share insight into our process, product design, the tools we used to create and how we implemented the system, and also how we documented and shared the system with our team.

What is GoRide?

GoRide is an on-demand transportation service for non-emergency medical needs. The idea is to provide mobility and independence with dignity to individuals who are elderly, ill, or living with disabilities. We design and build our internal digital tools to meet our business and customer needs. ‘Llama’ is a design system created for these internal business tools.

The design system was presented to our team to the concept of building a web system in React JS, and I lead its design, creative direction, and documentation. I also collaborated with product designers Jacob Smith, Rob Wesson, and Brain Steckler.

The Problem

As the GoRide team grew, it became increasingly important to maintain a consistent style and visual language across all areas of the product. With nearly over a 5 different teams working on it, it was clear that we needed more systematic ways to guide and leverage our collective efforts.

Solution

The solution was to come up with a design system that was guided by principles and best practices. Also, to keep with documentation at each step to ensure consistency and efficiency of work.

Discovery

The first step was to review every aspect of the product and try to list all essential components on a paper, then group elements by their usages. For example, the style group could be valuable assets such as colors and fonts, and components group would include buttons, cards, tables, filters, etc.

We started out experimenting with the internal product the system would be applied to — discovering, establishing, and responsive testing the style(s) and library of components and patterns. The direction, user interface (UI), and style changed over time, which I’ve attempted to capture below to show the progression.

Sketches showing initial explorations.

Laying the foundation

This system is based mostly on the principles of atomic design. The key idea behind this methodology being small, independent - atomic - parts, can be combined into larger molecular structures.

This foundation loosely defined our typography, colors, icons, spacing, navigation and information architecture. and proved essential for guiding our work in a unified direction. Reviewing our collective work at the end of each day, we began to see patterns emerge.

It’s important to note: The design direction of this system was influenced greatly by GoRide’s digital brand guidelines..

Patterns and Components

After days of exploration, reviews and iterations, we arrived at a style we were happy with. The task now was to create an extensive suite of patterns and components, accounting for all states and scenarios — essentially creating a comprehensive UI kit for our team to use. Our system is made following the guidelines of atomic design by brad frost. Consistent UI patterns and components make a massive difference in guiding a user through a product.

  • Patterns
    Patterns refer to recurring or ever-present elements or practices throughout a product. Examples include navigation, cards, tables, empty or loading states, notifications, alerts and modals. Patterns are versatile, can contain components, and be paired together to make up a template.
  • Components
    Components refer to distinctive UI elements that are used over and over throughout a product—usually actionable, sometimes to convey meaning. A few examples include buttons, inputs, selects, toggles, avatars, and tooltips.
Tool we used

Our tool of choice for UI design is Sketch. The features that make Sketch great for product design make it especially powerful for system design. When you’re creating hundreds of editable symbols and easily applicable text styles, Sketch’s simplicity and plugin support becomes crucial.

On responsiveness

Llama is designed to be responsive. While it’s simple to build a responsive component, it’s not so simple to mockup responsively. It’s important to design web UIs that work at different browser widths. Fortunately, Sketch and Animaapp provide the ability to set elements to respond in different ways as they grow or shrink in size. Using a combination of settings, groups, and symbols, you can create a basic responsive UI in Sketch. And Anima works with different breakpoints; it is powerful for quickly seeing how or if the design works at different browser sizes. Thus we created our library of patterns and components to be responsive.

Responsive components.
Keeping different viewports in mind

We need to ship our product on a multitude of platforms and devices. Dispatchers use desktop and monitors, drivers use ipad, business use mobile. Modules and features used on mobile are limited. But, Keeping designs synchronized takes significant effort, often requiring the same work to be repeated across all of these platforms.

In the interest of consistency in our products, it’s essential we make it as simple as possible for our team to design with Llama. We created different artboards for different viewports and created seperate components for desktop and mobile.

Arboard templates for different viewports.

The sidebar was created in such a way that it will be predominant in desktop devices, but will collapse in smaller viewports.

Sidebar for desktop and mobile devices.

We used Animaapp, a sketch plugin to test the responsiveness of all the components in different viewport. Below you can see the responsiveness of the sidebar.

Responsiveness of sidebar using Animaapp.
Bringing it all together

While creating these components, we collected them in a sketch master file, which we referred to throughout the design process. After a week or two, we began to see huge leaps in productivity by using the library when iterating on designs. One day, while putting together a last-minute prototype, our team was able to create nearly 50 screens within just a few hours by using the framework our library provided.

The last thing we want is people working from this master file, accidentally editing or deleting items! So we created a Sketch template for our team to use, hosted on Internal Server. The template has a wide array of editable symbols, all the text styles, brand colors, and a basic artboard ready to go. Thus,  making it easy to get set up and assemble a UI using Llama quickly.

Sketch - Master file.

Documenting the design system

When creating a design system it’s essential to be mindful that you won’t be the only designer (or developer) who works with it. Documenting the design system was the biggest challenge for me on this project. I usually create annotated specs — typically these are a series of .pdf or .sketch files, to accompany the design(s). While specs can contain every detail imaginable, things can still be missed or misunderstood when a new or replacement designer steps into your shoes. We wanted to do better with Llama!

To get started we created a new Google Doc and started typing. Google Docs proved to be the perfect medium! It’s easily accessible by all our team, plus they can comment inline, which is great for feedback. The ‘Document Outline’ feature of Google Docs, plus the ability to link/anchor to bookmarks and headings within the document, provided ample navigation.

Documenting everthing in Google Doc.
Working with Developers

As the documentation was taking shape, the design needed a way of efficiently communicating and tracking the build and integration of the system to the developers. We chose (and recommend) to use GitHub for this. We uploaded the designs to Invision for the developers to get the CSS using Invision Inspect mode, making it easy for the developers to build the design system in code.

One place for Design and Code.

Testing & feedback

Testing was conducted during the discovery phase to identify the most significant pain points in the current version. During the redesign: Testing was done at every milestone of the project. Invision prototypes were shared with stakeholders to get early feedback.

Impact

Many hours of brainstorming, careful planning, sketching, designing, and developing has brought the results desired for the GoRide platform. The final result of the Llama design system received well with the team. The platform was a light, minimalistic, and an intuitive product adaptable for each user persona to help them achieve everything they hoped for. To read more on this, view GoRide health case study.

Next Steps

We have grand plans for Llama. We are hard at work, making the design better, developing the system, and rolling it out. We are learning a lot in the process, and aim to gain valuable feedback from our staff using our tools and iterate on the system.I hope you enjoyed this case study!


If you’d like to read more, I’ve published additional case studies for GoRide Health and a personal project, PetMeal. Read about me or go back to home