Ana Cachão
UI/UX designer
Made with

Orbit design system

Making Orbit platform consistent

Client
Capita People Solutions

Project Date
2016 - 2018

Major Tasks & Responsibilities
Research, design and document the design system to be implemented on Orbit platform

Platform
Responsive Web App

Design Tools / UX Methods Used
Sketching, Adobe Illustrator, Sketch, Axure, Confluence Wiki 

Consistent and robust design patterns

Orbit Design System is a collection of rules, constraints and principles, implemented in design and code, for Orbit’s internal teams. It can increase productivity and improve collaboration with consistent and robust design patterns.

My role was to research, design and document all the components and design patterns of the new Orbit Design System. I collaborated with product development and engineering to launch this project.

The inventory

I started this project by conducting a review of the platform and making an inventory of all components found on Orbit. Then I grouped them by categories, like buttons, inputs, fonts, colours and icons.

Orbit design system
Different icons' styles

Different icons' styles

Making consistent

The requirements were to keep the Orbit current style, but make it consistent. After the inventory was done, I defined what components to keep and eliminated repetitions, for example, choosing the best icon for information out of 3 different styles! 

Sketching new components

Sketching new components

Sketching in action

If the existent component didn’t fit the purpose or if it was missing, I created new components. I started by sketching the idea on paper and presenting it to the developers to discuss rules and restrictions.

New cards component

New cards component

Design new components

Once the components were defined I designed them using Illustrator and Sketch.

Spec and documenting

To improve the process of documenting the Design System I created a template with principles and rules for every component: Summary, Design, General guidelines, Detail Specifications, Usage, Interaction, Accessibility.

Then I put the Design System together using the template to spec every detail needed to build it and shared it on Wiki/Confluence with other internal teams.

Putting the design system to the test

Here is a comparison between the old Orbit UI and the new Orbit UI.

Learnings

I learned a lot about Atomic Design and Design Systems. It’s a product serving other products.

The project had many challenges, but the most challenging step was communicating the importance of the Design System within the business, in particular with Capita as a consultancy with many design departments. Thankfully, we were able to present it to some of our directors and to evangelise other parts of the business when they came to consult with us.

I particularly loved seeing the components being built and used. Every time the team needed to start a new project they didn’t have to waste time on the design of a button or other component, just focused on the problem they were trying to solve in a more efficient way.