Different icons' styles
Ana Cachão
UX designer
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.
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 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
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.