Building a Design System for London based digital marketing agency

BYE, BYE, MEAN SKIN! HELLO, GORGEOUS

Building a Design system for London based digital marketing agency

My Role

Research
Art direction
Web Design
Iconography
User Flows
CSS Implementation

Context

The Brains’ mission is to help SMEs compete on a level playing field with big corporations. They are a London based data-driven marketing agency which grew rapidly in the last 3 years, starting with a team of 4 and reaching 30+ in months. I was part of the original team and knew the agency processes inside out. In 2018 I was handed the task to find the brand's new voice and personality and with a team of 4 designers, 2 marketers and all other stakeholders we took off on a journey.

Scope

Being a startup The Brains was facing a lot of challenges. With rapid growth comes a lot of noise and confusion and it was essential to keep the company's priorities intact. Expanding the team and services which were offered needed better communication to all new and existing clients, though the narrative needed to be very simple. Clients are as fascinated as scared from the marketing jargon and we needed to discover the perfect balance between the "expert" and the "friend".

Research

We started with a comprehensive review of all the current assets we had and divided the research process into two phases: #1 workshops with the team involved and all stakeholders and #2 expert data analysis on the existing website and communication channels.

Research

We started with a comprehensive review of all the current assets we had and divided the research process into two phases: #1 workshops with the team involved and all stakeholders and #2 expert data analysis on the existing website and communication channels.

Phase #1

Workshops

During the workshop phase, we gathered knowledge about the company's vision for the future and observed the past mistakes and success stories. To get a clear picture of the goals and challenges we were facing, we conducted a variety of exercises.

Phase #1

Workshops

During the workshop phase, we gathered knowledge about the company's vision for the future and observed the past mistakes and success stories. To get a clear picture of the goals and challenges we were facing, we conducted a variety of exercises.

Phase #2

Performance Review

In the Performance Review stage, we dove deep into research and analysed The Brains' current performance using data from online sources, namely Hotjar and Google Analytics, and offline sources, such as internal statistics and customer satisfaction questionnaires.

Phase #2

Performance Review

In the Performance Review stage, we dove deep into research and analysed The Brains' current performance using data from online sources, namely Hotjar and Google Analytics, and offline sources, such as internal statistics and customer satisfaction questionnaires.

Wireframes

After finishing the research and establishing clear goals with the team during the workshops, we began the wireframing process. In that stage it was essentially me drafting the wireframes, creating a working prototype in Invision and discussing changes and ideas with the design team and stakeholders.

Wireframes

After finishing the research and establishing clear goals with the team during the workshops, we began the wireframing process. In that stage it was essentially me drafting the wireframes, creating a working prototype in Invision and discussing changes and ideas with the design team and stakeholders.

Over a 100 pages were mapped

with the help of my design team. Simplifying the myriad of services and ideas ended up being successful. We had a clear structure to work with and it was time to focus on the joyfully awaited design phase.

Over a 100 pages mapped

with the help of my design team. Simplifying the myriad of services and ideas ended up being successful. We had a clear structure to work with and it was time to focus on the joyfully awaited design phase.

Design System

The main goal here was to have a solution that is versatile and modular. It needed to live not only on the website but on all brand materials and communication. I've decided to enhance what we already had by adding a few extra colours to the colour scheme, introducing fluid shapes and modernising the illustrations.

Design System

The main goal here was to have a solution that is versatile and modular. It needed to live not only on the website but on all brand materials and communication. I've decided to enhance what we already had by adding a few extra colours to the colour scheme, introducing fluid shapes and modernising the illustrations.

Typography

Color Palette

Components

The Solution

After getting all the components in place we moved to the final UI phase. Following the wireframes created and the design system composed I've assembled the brand-new website of The Brains. I was responsible for the communication with the developers, for the organisation of the execution, I single-handedly worked on applying CSS changes on the WordPress theme in use and directed a team of designers, guiding them with the production of the case studies section.

The Solution

After getting all the components in place we moved to the final UI phase. Following the wireframes created and the design system composed I've assembled the brand-new website of The Brains. I was responsible for the communication with the developers, for the organisation of the execution, I single-handedly worked on applying CSS changes on the WordPress theme in use and directed a team of designers, guiding them with the production of the case studies section.

Fully optimised mobile experience

All pages were designed along with fully optimised responsive versions. Thanks to the design system modularity and scalability, The Brains’ mobile experience was better than ever.

Fully optimised mobile experience

All pages were designed along with fully optimised responsive versions. Thanks to the design system modularity and scalability, The Brains’ mobile experience was better than ever.

Design system built for mobile

All design system components were prepared with scalability in mind. The entire system was ready for all of the latest devices: smartphones, tablets and a wide array of desktop resolutions.

Design system built for mobile

All design system components were prepared with scalability in mind. The entire system was ready for all of the latest devices: smartphones, tablets and a wide array of desktop resolutions.

Easy to read and fast to load

Loading speed was always amongst the top 5 web priorities in this project. Therefore, where possible, we used SVG images, while everywhere else we rigorously optimised all pictures, icons and illustrations to deliver the fastest web experience.

Easy to read and fast to load

Loading speed was always amongst the top 5 web priorities in this project. Therefore, where possible, we used SVG images, while everywhere else we rigorously optimised all pictures, icons and illustrations to deliver the fastest web experience.