Nissan Connect Design System


January - March 2019


Product designer


Sketch, Principle, Zeplin, Abstract

When I joined ACV, we were 4 designers working on the same file and although we shared common styles and had the UX principles in mind, individual teams made decisions in isolation, leading to inconsistencies and duplication. Key principles were not documented and were only shared with new starters on an ad hoc basis. Ultimately, as the number of features grew to improve our MVP, design processes needed to scale too.

We also went through plenty of discussions about how to keep design consistent across platforms, while ensuring it would integrate into existing guidelines for iOS and Android devices. We needed a tool that allowed us to effectively communicate our designs with the development team, shortening the time from design to coded components.

An agile process, our work with all stakeholders (client, design, development) ran in parallel, at the same time. But I pro-actively established the needs for a design system among the team and it happened in 3 main steps.

1. Introduction

Implementing a design system became a main priority as this would set the design direction for ACV's other applications and formed the basis of the broader mobile and web platform style guides. The main objectives of the project were to improve the consistency of our product, build trust and create a cohesive experience for clients. We also wanted to improve our internal process making the design process more transparent and collaborative.

2. Design audit

First was the design audit – combing through the current design we had on our MVP and report inconsistencies. The focus was on finding inconsistencies in the patterns and styles used. This covered all of the basics including typography, colour, iconography, brand elements and tone of voice. The second step were documenting the chosen approach and working closely with the engineering teams to create codified components for the different development libraries.

3. Setting the rules

The second step were documenting the chosen approach and working closely with the engineering teams to create codified components for the different development libraries. We had to make sure everybody speak the same language

Working in such a big organisation tighten us in many project principles. Working with the Head of Design, we pulled together all of the unwritten rules we used as a team to critique some set rules from Nissan global branding such as color accessibility, color contrast, typography.

Extract - Board 2. Colors

Extract - Board 3.1 Icons

Next was a review of our design thinking and values. We had many people involved in that design system indirectly that we needed to communicate clearly about that and interview people that are most likely to interact with it to see how they are actually going to use it (mainly design peers, engineering team).

Building design systems is tricky. It relies on a huge amount of hard work and collaboration from across a business. It also requires a certain kind of mindset. Unlike the brand guidelines and style guides that came before, design systems are living entities that need to constantly evolve to stay relevant useful. 

My biggest learning from the project are:

1. Being more and more agile

It's so much easier to record thinking as it happens rather than retrospectively document changes. Make sure when you start a new project that you set a side time to document changes that are relevant to the design system.

2. Getting more people involved

Creating a design system isn't a job for one person or even a small team. It requires support and buy-in from a multitude of teams and stakeholders. Find people that are motivated and get them to help you build awareness for the project.

3. Get the level of detail right

Figuring out the right amount of detail to include in your design system was one of the biggest headaches of the project. Include too much and your system become dense and obtuse. Don't include enough and your team are left asking questions.