Acura

After months of working at Dentsu, with the Acura client, it became clear that their Design System needed an update. Initially the site was designed by another agency, and built by a different agency, and then handed over to Dentsu for maintenance. We acquired a Design System that was piece meal, didn’t match 1:1 with the live site, and updated & rebuilt where we could. There was barely any documentation and little clarity on who did what and why things were the way they were.

Because the live site was already built the time spent on this design system initially was not enough and as page design work came in for this client as well as others, the system was not consistently updated and just started getting more and more confusing and convoluted. Every time a new page was being designed we would have to auto layout the components and on top of that pages were copied from previous years carrying over bad designs again and again. The client was also looking at getting all their dealer partners to update their websites to be more on brand with the corporate brand and we were putting together presentations on our Design System but there seemed to be no point in putting together guidelines for something that was so broken.

So I was tasked with updating the Design System

I took a phased approach and put together a plan to update all components that were needed by dealers first, along with a presentation.

I started out planning based on each page that was needed, breaking it down based on component. We were also sending a Figma file to our dealers so of course the fundamentals had to be set up first and documentation was needed for everything. I took this as an opportunity to look at every single component being used on the live site and in the Design System and audited whether we would need to consolidate, remove, re-design, or update.

We did have a pretty robust design system already

But most if not all the components were not auto layouted and they weren’t using variants so there were pages and pages of components that were almost exactly alike.

There were also so many inconsistencies between the live site and the design system as there were multiple code bases that the live site was using (one older and one newer).

Design System 1.0

Colours.png
Mobile.png
Desktop.png
Accordian.png
Functional-UI.png
icons.png
Quick-links.png
Quick-links - circles.png
Desktop.png
Mobile.png

I started auditing the current live site & got to work

I worked with a junior designer and set up the Design System 2.0 Figma adding all desktop and mobile typography styles, colours, & grids. We then redesigned all components from the ground up using the updated styles making sure all components had variants and used auto layout and the correct properties.

As we worked we audited the current system so we could find ways to improve the system to improve adoption, and ease of use. See process here

Design System 2.0 Selected Components

Spacing.png
Colours.jpg
Desktop.png
Mobile.png
Icons.png
Quicklinks.png
Button.png
Quicklinks.png
Tab.png
Toggle.png
Tool Tip.png
Notifications.png
Navigation Links.png
Progress Bar.png
Brand Logos.png
Model Badges.png
Accordions.png
Main Navigation.png
Navigation - Trims Page.png
Navigation - Overview Page.png
Key Features Card.png
Full Width Card.png
Key Features Model Badges.png
Diagonal Card.png
Gallery.png
Landscape Box Card - Pricing.png
Landscape Box Card.png
Landscape Card.png
Portrait Card.png
Showcase Card.png
Title Card.png
Colour Selector.png
Info and Selling Price-1.png
Info and Selling Price.png
Key Features Card.png
Model Card and Trim Card.png
Offer Card.png
Trim Bap Card.png
Brand Logos.png
Model List Trim Card Section.png
Tool Tip.png
Toggle.png
Progress Bar.png
Pagination.png
Notifications.png
Navigation - Trims Page.png
Navigation - Overview Page.png
Main Navigation.png
Key Features Model Badges.png
Model Badges.png
Side Nav & Key Features Section.png
Quicklinks Section.png
Trim BAP Section.png
Trim Selector Trims Section.png
Your Selections Section.png
Model Selector.png
Modal.png
Modal Example.png
Inventory Filter Menu.png
Inventory Dealer Cards.png
Icon Card.png
Dropdown.png
Customization Panel.png
Colour Swatches.png
BAP & Inventory Image.png
BAP Customization Panel Sections.png
BAP Image Section.png
BAP Tabs.png
Card Components.png
Navigation - Inventory & BAP Navs.png
Navigation - All Models Page Filter.png

Design System 2.0 Documentation

Once phase one was complete, we started on documentation

There was some documentation, however most of it was new. As dealers needed to adopt the new design system, and branding style, we needed to provide as much information as we could.

We also did not know the design capacity of the teams implementing the system so we worked tirelessly putting together documentation for all the components including spacing diagrams and any instructions we thought would be helpful..

Slide 1.png
Slide 2.png
Slide 3.png
Slide 4.png
Slide 5.png
Slide 6.png
Slide 7.png
Slide 8.png
Slide 9.png
Slide 10.png
Slide 11.png
Slide 12.png
Slide 13.png
Slide 14.png
Slide 15.png
Slide 16.png
Slide 17.png
Slide 18.png
Slide 19.png
Slide 20.png
Slide 21.png
Slide 22.png
Slide 23.png
Slide 24.png
Slide 25.png
Slide 26.png
Slide 27.png
Slide 28.png
Slide 29.png
Slide 30.png
Slide 31.png
Slide 32.png
Slide 33.png
Slide 34.png
Slide 35.png
Slide 36.png
Slide 37.png
Slide 38.png
Slide 39.png
Slide 40.png
Slide 41.png
Slide 42.png
Slide 43.png
Slide 44.png
Slide 45.png
Slide 46.png
Slide 47.png
Slide 48.png
Slide 49.png
Slide 50.png
Slide 51.png
Slide 52.png
Slide 53.png
Slide 54.png
Slide 55.png
Slide 56.png
Slide 57.png
Slide 58.png
Slide 59.png
Slide 60.png
Slide 61.png
Slide 62.png
Slide 63.png
Slide 64.png
Slide 65.png
Slide 66.png
Slide 67.png
Slide 68.png
Slide 69.png
Slide 70.png
Slide 71.png
Slide 72.png
Slide 73.png
Slide 74.png
Slide 75.png
Slide 76.png
Slide 77.png
Slide 78.png
Slide 79.png
Slide 80.png
Slide 81.png
Slide 82.png
Slide 83.png
Slide 84.png
Slide 85.png
Slide 86.png
Slide 87.png
Slide 88.png
Slide 89.png
Slide 90.png
Slide 91.png
Slide 92.png
Slide 93.png
Slide 94.png
Slide 95.png
Slide 96.png
Slide 97.png
Slide 98.png
Slide 99.png
Slide 100.png
Slide 101.png
Slide 110.png
Slide 103.png
Slide 104.png
Slide 105.png
Slide 106.png
Slide 107.png
Slide 108.png
Slide 109.png
Slide 102.png
Slide 111.png
Slide 116.png
Slide 113.png
Slide 114.png
Slide 115.png
Slide 112.png
Slide 117.png
Slide 118.png
Slide 119.png
Slide 120.png
Slide 121.png
Slide 122.png
Slide 123.png
Slide 124.png
Slide 125.png
Slide 126.png
Slide 127.png
Slide 128.png
Slide 129.png
Slide 130.png
Slide 131.png
Slide 132.png
Slide 133.png
Slide 134.png
Slide 135.png
Slide 136.png
Slide 137.png
Slide 138.png
Slide 139.png
Slide 140.png
Slide 141.png
Slide 142.png
Slide 143.png
Slide 144.png
Slide 145.png
Slide 146.png
Slide 147.png
Slide 148.png
Slide 149.png
Slide 150.png
Slide 151.png
Slide 157.png
Slide 156.png
Slide 152.png
Slide 155.png
Slide 154.png
Slide 153.png
Slide 158.png
Slide 159.png
Slide 160.png
Slide 161.png
Slide 162.png
Slide 163.png
Slide 164.png
Slide 165.png
Slide 166.png
Slide 167.png
Slide 168.png
Slide 169.png
Slide 170.png
Slide 171.png
Slide 177.png
Slide 173.png
Slide 179.png
Slide 175.png
Slide 176.png
Slide 172.png
Slide 178.png
Slide 174.png
Slide 180.png
Slide 181.png
Slide 182.png
Slide 183.png
Slide 184.png
Slide 185.png
Slide 186.png
Slide 187.png
Slide 188.png
Slide 189.png
Slide 190.png
Slide 191.png

I was also responsible for designing and updating new components as needed.

For example, the Hero component needed to be rebuilt. Based on the way it was coded and the systems being used on the back end to compress images (among other things) the hero banner was a consistent pain point for our client.

Every single time a page was designed, it had to be re designed multiple times, images had to be exported and re exported and the whole process was costing too many resources. The project had also been worked on for at least a year however never implemented as a solution that worked for everyone was never found, and there wasn’t time or resources to build it.

So we re-designed, and re-built it.

I led a team of two to do all the research (looking at past iterations, competitor sites, as well as industry standards), re-design the component, present to all stakeholders (internal, client side) and build out all guidelines for the dev team.

We also re-designed the client’s authoring tool so that all designs could be exactly what the user would see on the front end.

The process was very long and we went through a lot of iterations. We looked at the hero component from the users perspective but also from our users perspective - the clients perspective. We were also working with an external dev team, so had to ensure that the build was done right throughout the whole process - Everything was coded properly from the back end, designed properly at the design stage, and then once designs were approved, the client was able to implement the designs one to one using their authoring tool.

The biggest challenge was responsiveness.

So to get buy in from the internal team, the client, the dev team, we had to do a lot of research. Internally, within the industry, and with this client specifically, the want was typically something that was designed with an editorial feel, so everyone wanted to maintain that. But they also wanted flexibility.

On top of that, when we brought over assets from their US counterpart, and took into consideration how everything worked on digital, accessibility, & responsiveness, what they had was just not working.

To get buy in we had to show them what the current drawbacks were, and how we could solve all of these challenges with a new design of the component. Then we had to mock it up in every possible version so that they could see if it would work for them.

Research & Iterations

Responsive Stress Test

Responsive Stress Test

Industry Research - Auto

Industry Research - Auto

Industry Research - E-Commerce

Industry Research - E-Commerce

First Iteration

First Iteration

Second Iteration

Second Iteration

Final Iteration

Final Iteration

Dev Guidelines

User flow of client authoring tool showing all options the client needed to have in order to build out the types of hero sections they needed.

Updated authoring tool design using a drag & drop WYSIWYG style

Authoring tool design incorporating all additional options client would need to have - designed in the style of the current tool.

General guidelines

General guidelines

Spacing guidelines

Spacing guidelines

Additional button options

Additional button options

Alignment guidelines

Alignment guidelines

Hero Variations

Hero Variations

Carousel guidelines

Carousel guidelines

Colour Variations

Colour Variations

Copy guidelines

Copy guidelines

Video guidelines

Video guidelines

Previous

American Express Design System
Next

Amazon Robotics