How Publicis Sapient Redesigned Automotive Site Acura.com with a Focus on UX

Illustration: Justin Cheong.

Three years ago, Publicis Sapient Creative Director Erik Norgaard was tasked with leading the full redesign and re-platforming of the award-winning Acura.com, the site of Honda’s luxury vehicle brand. It quickly became clear this project would be a lot bigger than just another redesign. In fact, it has fundamentally changed the design process for the entire company.

“Acura as a brand had an existing website that did not represent the new brand position of ‘Precision Crafted Performance’,” Erik remembers. “The previous site was dated, slow, not responsive, and lacked the visual appeal consumers expect when purchasing a luxury vehicle.”

Erik’s team had to coordinate with numerous stakeholders within Honda and its advertising agency in order to achieve a successful re-platforming and redesign of the Acura website and associated shopping tools. The brand also hoped the project would help it move from near the bottom of the JD Power consumer rankings to at least above median. In the end, Erik’s team got them into the top five, but only after a considerable shakeup to the UX design workflow.

The Acura site before the redesign.

A new design process for Publicis Sapient

Before Erik’s shift, teams at Publicis Sapient were still working with flat files created in Photoshop. But a move to a more flexible prototyping tool was in the cards.

“We would take the designs and bring them into InVision,” Erik remembers. “It was a way to prototype and see how things worked. We loved using InVision but it was still slow. At the same time, the alpha version of Adobe XD came out and we quickly migrated our workflows over. The entire Acura team found that we could create higher quality designs for a whole multitude of responsive behaviors in less time.”

The team created massive spreads of artboards for the Acura project, put them into prototypes, and reviewed them with internal stakeholders (front and back-end developers as well as client support). They then handed the prototypes off to the developers to get them ready for deployment. Erik says the process of designing, developing, and deploying suddenly became a lot faster and easier — something that made a significant difference to the client at sign-off.

“Just seeing designs in a prototyping tool was way better than seeing them in a Keynote or Powerpoint presentation of flat files,” Erik explains. “Making the leap to XD was relatively easy. The clients were already accustomed to reviewing things on devices, so switching them to XD was no problem at all.”

The Acura site after the redesign on desktop, tablet, and mobile.

Automotive UX that scales

The Acura team dove right into XD and began making changes and iterations fast. At Publicis Sapient they were able to get their process down to just two rounds of reviews before many design approvals.

Successful JD Power results.

Meanwhile, the team working with the main Honda brand was still using the previous workflow, relying on flat files, which often needed to go through up to seven rounds. It wasn’t long before that team was ready for a change, too. Erik began overseeing the Honda team, in addition to Acura, and applied the significantly faster strategy. Now almost everything at Publicis Sapient is done in XD.

Viewport examples of component behaviors.

Faster collaboration and more cohesive designs

Design systems are now integral to the long-term success and viability of any digital product, and Erik says working with a design system-approach has become top priority across the board at Publicis Sapient.

“From my days working on Google, it quickly became apparent that nearly every prominent digital brand incorporates a centralized design ethos, as Google has created with their Material Design framework,” said Erik.

“Much of the challenge is helping marketers realize the operating benefits when a design system is adhered to and carefully defined. Acura took a lot of effort initially to establish this process and quickly saw their brand lift as-well-as nimble speed and efficiency in day-to-day operations.”

Reasons Publicis Sapient switched to XD for system design. Courtesy of Publicis Sapient.

Adobe XD has become a key tool in helping Publicis Sapient adopt this design systems approach, improving collaboration and aligning design teams on how things can go into production. “That’s been a huge benefit for us, not just on the design and UX side but also on the development side,” Erik points out. “It’s made it easier for all of those different departments to do their job. We found having a central repository for your main design system, where works-in-progress or updates can be fed into, is crucially important.”

Publicis Sapient has made use of various native UI kits for XD to put together a cohesive design system that they could share with the UX and creative designers. In many of their projects, they utilize both the iOS and Android UI kits in prototyping to help them make UX and design decisions that improve the ease-of-use for end users.

“Everybody uses the same components, which can be modified and adjusted,” Erik explains. “This all feeds back into a central design system, which is then proliferated and shared with the greater team. That helps the overall workflow run more efficiently, so you can deploy similar objects faster.”

The team usually starts by designing universal elements like buttons, then shares them to get agreement on the general look and feel and defines customized components in detail to create a cohesive product that everybody feels comfortable with.

The future of UX, in the fast lane

Looking to the future of automotive UX, Erik points out two specific areas of great potential: seamless front-end component integrations and machine learning.

“The combination of these two offers a unique way to deliver personalized systems in an extremely fast, targeted, and scalable way that benefits not only the end user but the company who can capitalize on personalization,” Erik explains. “Whether it’s shopping for your perfect vehicle, improving your personal finances, or having entertainment content with brands built into scenes, machine learning has the capability to alter how brands are sold to consumers.”

For automotive sites like Acura this could also mean that AI and machine learning, such as voice automation, will play a part in how system UX components are built and displayed. So, combining the power of design systems with machine learning opens up exciting new possibilities for the design process and the end user experience alike.

For more UX insights sent straight to your inbox, sign up for Adobe’s experience design newsletter.