EF Class Design System

The Goal

To document and re-write properly our design patterns already in use, reuse them at any time for faster experimentation and production, and continue to evolve and build upon.

Audit

We started by performing an app audit. This would allow us to understand how many elements we had in each section, which patterns existed and where, and understand where we had inconsistencies across pages and platforms - web and iOS.

We found a lot of small differences between design elements such as button states, form elements and error states, how the transition between pages worked differently although they were supposed to behave exactly the same ... the list was long.

Together with the development team, we defined a plan to move forward: we would start to develop the basic and universal elements first such as colours and typography, and gradually build specific elements for other use cases less used across the app.

Foundation

The first challenge we took was our colour palette. Although we had been using these colours for years, there wasn't a logic into how the different shades were created. We decided to use a opacity system of white and black and this way use common method to treat all of the different colours equally.

Typography

The same thinking exercise had to be developed for a typography scale. We wanted it to be reusable across components and adaptable so we could change the font family in the future.

Responsiveness and Accessibility

While thinking about these foundation elements we made accessibility and responsiveness a priority. Any re-designed element had to be responsive and adapt to both platforms as well as accessible. Each component had to be rendered on a phone, tablet and desktop, pass colour contrast standards, be readable by screen readers, and adapted by the user if needed.

Patterns

As we moved along we re-defined patterns and started to re-use them to quickly and easily create new pages and app features. Creating a uniform spacing system was key so that the patterns could be stacked in any order and look great next to each other.

Process

This project became a parallel stream of work in the team’s roadmap. So we had to be clever on how to do it - we needed to balance out our pace and keep delivering to our product. We took one challenge at the time and learned fast from our mistakes.

Outcome

Although the project is still ongoing (and never fully finished 🙂) it has been a very rewarding experience as a designer to contribute to a design system and laying down the foundation for it.

On a team level, our speed of development has increased and we can see the benefits of having a reusable design system on a daily basis. Contributing to a bigger project made everyone think about the same problem, collaborate and speak in the same language across teams and departments.

On a personal level, this project helped me improve my design thinking and prioritize even more certain aspects and principles into my work such as adaptability, accessibility, and responsiveness of any element, regardless of how big it is.

Starting date: June 2018
Product: www.class.ef.com