FOREHEAD


Design System for GOI products




Lead Product Designer
Research, UX Design, Visual design & Testing
Design Team of 3
July 2018 – January 2019
As GOI grew, it became increasingly important to maintain a consistent style and visual language across all our products. With more than six applications, it was clear that we needed more systematic ways to guide and leverage our collective efforts.

The initial outcome was to have a collection of reusable components, guided by clear principles, that can be combined together to suit new business and product needs as we developed new iterations.   



THE PROBLEM



As GOI’s software ecosystem was truly fast-paced, it became clear that we needed a strong system that allowed us to build new products faster and better.

The need to create a new product often and new team members meant more people working on the same file and it can become chaotic if everybody uses different styles for the same component. That also cause a lot of confusion and struggle for our development fellows.



CHALLENGES


  • Methodology
It’s actually quite easy to maintain a clean system when you are a solo designer. As our team and our products grew, we needed to follow the same rules.

  • Flexibility
Don’t let creativity die in the process. Learn to fail and start over.

  • Collaboration with development
Keeping the same consistency in production code it is indeed a challenge.


PRINCIPLES


A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications.

Based in Atomic Design I documented the guidelines and and best practices to make our system scalable and efficient.

  • Accessibility
It is really important for us to make sure that our designs meet accessibility standards.

  • Consistency
Essential for guiding our work in a unified direction.

  • Simplicity
We wanted to keep a clean and flat look and feel.


HOW IT LOOKS










HOW IT WORKS


The goal was to be able to create new products and features quickly and reduce the risk of inconsistency while co-designing. We used Sketch Libraries and Abstract to manage and sync our designs to facilitate collaboration and version tracking.

We hosted our Design System in an independent file that was synced across all our projects and UI files. While new versions of Sketch has been released we’ve been adapting our files to be more effective and agile.

First we created our shared text and layer styles to fit any possibility.



Then I categorized the symbols into an Atomic Design hierarchy, been able to navigate and select the component and state needed easily.




CONCLUSIONS


Developing and mantaining a system like this is definitely a long journey. It’s easy to doubt in the process if all that effort is worthy, but after several months of creating, cleaning and improving I can assure you that it is.

They way that it improves your hability to create new interfaces or make significant changes in no time is priceless.

Thanks for reading!
Mark

Let’s get in touch!