Design Language System

#ADTECH

with Scoota (formerly Rockabox)

“A programmatic platform that enables advertisers to create, activate, measure and optimise brilliant brand campaigns”

FOR CONTEXT...

Scoota was on the lookout for someone to come in a join their small product team and lead the visual re-design of their platform. Hired by and reporting to the CTO, I worked in an agile engineering team, alongside a recently hired (at the time) full-time Product Manager. Visit Scoota

AS A FREELANCE PRODUCT DESIGNER…
  • I created wires & user flows

  • I defined the visual language & Ui

  • Worked closely with the Product Manager 

  • Reported to the CTO

  • Worked closely with the Engineers to develop a new DLS.

THE CORE PROBLEM WAS...

Scoota had built out their web app quickly with little design input. They were facing problems around visual consistency, lack of reusable components, along with missing fundamentals around grids and typography. With these issues, it was slowing the team down and causing issues with customer-facing visual consistency.

 

I spoke with key stakeholders (brand designers, engineers, product manager etc) to build up a picture of what was causing the most amount of pain to each group.

Colour Scheme was erratic and inconsistent

Typography wasn’t aligned with the brand or even within the product itself

There wasn’t a single source of truth for the engineers to work from

Unable to create quick prototypes and tests as they had to be “hand-built” each time and never looked consistent

I BEGAN TO FORMULATE A PLAN...

around how best to approach the DLS. The engineering team were working in Angular so I began to look into how the UI Components worked and what kind of coverage came out of the box that may be useful.

 

From my conversations with some of the key stakeholders, I was able to identify and prioritise the DLS elements to work on

Getting to grips with what had been built already and how to tackle the vast expanse of UI Elements

I BEGAN TO FORMULATE A PLAN...

Presented here formed the basis of the workflows and features that were also being improved and iterated on during the entire process. The DLS continued to grow and was fluid throughout the time I spend here. You can view the old github repo here or take a peek at the original PDF below.

Scoota-UI-Guidline.png

Take a look at the UI Guideline PDF

The design system was then used to build out the entire system following new user flows and features developed by myself, the Product Manager and UX Designer.

Table list page example, this can be seen in more depth on Scoota Features & Workflows

Overlay mid flow for detailed campaign adjustments, this can be seen in more depth on Scoota Features & Workflows

LOOKING BACK & REFLECTING...

This was the first full-on DLS I lead and implemented into a more mature product. Looking back on this experience, I think one of the biggest positives was working so closely with a CSS specialist and also being sat fully integrated into the engineering team. 

 

It allowed me to pick up a new and deeper understanding of tech, both the limitations and the flexibility that could be created.

 

It also really helped in creating a truly collaborative approach between design and engineering where we would often pair and riff on ideas and thoughts around solutions.

 

Working in such a close-knit team was fantastic and one that I look back on fondly.

Get in touch

  • Twitter
  • LinkedIn

© 2020 by Rob Freemantle