Client

The Overview Effect

Role

Web Design System

the overview effect’s

design system

This is still a WIP (work in progress) project.
As one of the designers working in The Overview Effect, I sold the idea of creating a Design System for the company’s website, as what we had, wasn’t created with a system in mind, and made updating it’s content, a nightmare. This is an ongoing project as being a consultancy agency, client projects are always a priority, leaving little time for internal projects.

Animation that shows the systems responsiveness

Stumbling into a challenge

Context

I started working in The Overview Effect, a small company, that was only two years old at the time. Their design department was even younger, maybe a year old. This meant many processes were non existent yet, and we needed to start talking about our collaboration strategies, meaning we needed structure and guidelines, but that’s a story for another case :).

When it came to updating our website’s content, I realized the process was very frustrating, as what had been implemented wasn’t well systematized, which meant waisting a good amount of time guessing what was what. We were also on the brink of updating our brand, which made it even a bigger pain to iterate everything, colors, typographic styles, components, etc.

The challenge

So the challenge was clear, create a Design System for The Overview Effect’s website, that would:

  • Reduce time and effort for the design team when implementing new components, or updating the sites content.
  • Improve collaboration within the team, thanks to having clear guidelines and organized resources (styles, colors, components, etc) reducing miscommunication.
  • Ensure consistency across the website guaranteeing a unified look and the solid application of the brand identity.
  • Onboard effectively new team members that can refer to the Design System instead of fragmented documentation.
  • Offer a single source of truth within Figma, making changes and updates very accessible to designers.
The game plan

I defined an on the go plan, so we could start working on this, instead of waiting for assigned time for this internal project, since that wasn’t likely to happen.

These were the different phases I planned:

  1. Audit the live site.
  2. Create a token and alias structure that guaranteed consistency and scalability.
  3. Build the DS in figma considering it would become our “one source of truth” for Webflow, making updates a breeze.
  4. And re-design components with the new established system.
The Overview Effect's Design System, Specific Global Colors
The Overview Effect's Design System, Specific Global Colors

More to come soon…