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.

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:
- Audit the live site.
- Create a token and alias structure that guaranteed consistency and scalability.
- Build the DS in figma considering it would become our “one source of truth” for Webflow, making updates a breeze.
- And re-design components with the new established system.

More to come soon…