Engine: Building a Design System that works for scale in the Auto Advertising Industry (UX Case Study)

Stock image | www.pexels.com

Let’s start by defining what in the world is a design system…

What is a Design System?

“Design systems provide a convenient, centralised, and evolving map of a brand’s known product territories with directional pointers to help you explore new regions.”

Chris Messina, tech evangelist and former Developer Experience Lead at Uber

Let’s go back in time:

iCar Asia owns a network of automotive portals in ASEAN’s three largest markets: Malaysia, Indonesia and Thailand. When these businesses were initially acquired, each portal had their own design language and non-standardised codebase as they were built by different people working for different organisations.

Efficient maintenance of all these systems became a challenge due to the major differences in each codebase and standards. This led to increased workload, waste and excessive context switching which frustrated many designers and developers.

Stock image | www.pexels.com

In 2015, I had the opportunity to come onboard and help on looking into what could possibly be the solution to all of the legacy left behind. The real challenge was in fact to design for scale.

One of the company’s earliest acquisition was Carlist.my which is the largest Malaysian B2C car portal. I had to start from somewhere, so why not the malaysian market since we were based in the heart of Malaysia. Here’s how Carlist.my used to look like back then:

Carlist.my | November 2015

… and this is the sister company Mobil123.com, which is based in Jakarta, Indonesia:

Mobil123.com | November 2015

You may notice both sites are similarly identical but what you can’t see behind the scenes is where it all begins.

Project scope:

My involvement in this project was to lead, manage and deliver a seamless system of design language that speaks for itself about the brand. Here’s the project in summary:

The project scope | December 2015

The Objective:

This initiative would need to assist both designers and developers to be able to easily collaborate to implement a design language and ultimately a framework that is both maintainable and scalable. While the development lead worked on the exploratory phase, I led the creation of a set of guidelines for the design system to ensure designers will create consistent designs and experiences for users.


The solution:

The team understand the value of a design system solution, but it must be comprehensive to support a large number of web components and in addition, robust to support the needs of a diverse team of designers. To achieve this, we started by conducting an overall visual audit by identifying the frequent design inconsistencies that we normally encounter and also the common elements that we could unify. Thorough research was done to compare what we had with other frameworks already published by successful teams.

Stock image | www.pxhere.com

One of most popular approaches to tackle the legacy problem was Atomic Design by Brad Frost. Here’s a summary of how it looks like:

Atomic Design | atomicdesign.bradfrost.com

I won’t go into details here, but the exhaustive work that we have, produced an artifact that we were immensely proud of. We call it Engine Design system which would be the design bible for all designers to refer to when creating their visual designs.


Start the Engine

Start the engine | April 2016

First, I started by identifying the categories from a higher level that is relevant to full under one roof.

01. Branding: It is essential to start with the brand and define all the necessary guidelines that are related to the brand elements. Be it the official logo and the complete visual identity. We managed to create a dark and lighter version to accommodate any possible background colour.

02. Colour Palette: The colour palette category consist of two parts. First, primary colours which are assembled from the brand colours. The second part is called secondary colours which are introduced to maximise the level of creativity touching up future micro-components and cross-platform GUI elements.

03. Typography: The font type identified with the list of headings starting from H1 to H6. Identifying font sizes that are above and beyond the headings list is by releasing special classes for special cases.

04. UI Pattern Library: Since the platform is web-based, the pattern library will cover the familiar web components that we see everyday. Some of which are, forms, labels, alerts, pagination, navigational tabs, overlay dialogues and tooltips. The library can be extended according the level of requirements and complexity of integratations.

05. Icons: A complete refreshment of the current icons. In addition, introduce new icon set and eventually compile them all under one library. It is important to note such a category will be updated in a regular basis.

06. Grid System: It helps define the layout and keep it consistent across multiple devices and multiple screen sizes.

07. IAB Standards: A set of creative guidelines to define ad units specifications for advertising on both desktop and mobile.

That is all.

The sketch file and artboards | June 2016

The release plan:

We began to think about our release plan as I was working on the project and the homepage was the first that came in top of the list. Almost all traffic on the homepage is direct since users are familiar with the brand in the local malaysian market. In addition, we didn’t want to wait to roll out everything one shot without testing the new design language with users.

We were surprisingly overwhelmed with all the feedback we have gathered from our B2C users, active car agents and traders. As usual, we were proactively iterating and fine-tuning the homepage. See below for the complete homepage design:

Carlist.my | March 2016

We have accomplished consistency across the Carlist.my platform. There were always ups and downs taking up new challenges. Instead of looking at what went wrong, the repetitive iterations made the project possible and certainly more rewarding.

The learnings:

  • Conducting visual audit is what makes the project move in the right direction. Tip: start as early as possible.
  • Proceed with small and frequent releases. Do not plan for a single release (Your users may not be ready for a big change). You can start with one page or one component at a time.
  • Get first hand and direct feedback from users (Figure out which communication channel is more effective)
  • Gather the feedback and priorities
  • Involve each team member in the usability workshops (Everyone in the team contributes one thing or another)
  • Let the UX team have complete accountability and proactively keeping the design system up to date
  • Constantly communicate results, failures or successes with stakeholders
  • Plan is nothing, planning is everything!

Before I knew it, the mobile team has quickly adopted the new design language into our native mobile apps and the delivery was lightening fast and results were satisfactory

Carlist.my | iOS App

The following steps:

Naturally, applying the design system into the neighbouring markets was the next step moving forward. With that we decided to hand over the current system to the representative designers to replicate the design patterns library, and update the brand guidelines accordingly. A part of this strategy is to recognise all the auto advertising businesses under iCar Asia as one, delivering the same consistent user experience.

Adopting one design language has definitely helped the business to successfully present itself as a leading and trusted brand in the auto advertising industry. It was overall a great learning and certainly a rewarding experience. Nothing would have been accomplished without the support from the stakeholders, teams and continuous feedback from users.

Challenges:

Of course, with every project, there is an endless set of challenges and here are some that I could recall:

  • Language barrier with other designers from Thailand and Indonesia
  • Time management while working with remote designers
  • Endless in-house workshops and discussions
  • Working overtime was necessary at times

Acknowledgment:

I would like to thank the team at iCar Asia for their complete trust in me, cooperation and openness to make this project a reality despite all the uncertainty. I’m so proud of to be part of this unique and special digital transformation phase.

Last words:

Design Systems evolved throughout the years and I was aware how complex and overwhelming the process can be. Here’s a compilation of articles that Invision came up with that are useful to look at

https://www.invisionapp.com/inside-design/guide-to-design-systems

“… most Design Systems are really just Pattern Libraries: a big box of UI Lego pieces that can be assembled in near-infinite ways. All the pieces may be consistent, but that doesn’t mean the assembled results will be. Your product is more than just a pile of reusable UI elements. It has structure and meaning. It’s not a generic web page, it’s the embodiment of a system of concepts.”

Emmet Connolly, Director of Product Design at Intercom

Until next time!