HondaLink & AcuraLink Redesign
Making Honda’s apps faster and more flexible.
The goals behind the redesign
In 2018 the design team that I lead was tasked with redesigning the HondaLink and AcuraLink mobile applications. The primary goal of the redesign was to consolidate both the Honda and Acura apps to share a common technical platform. To achieve this goal, we had to develop a system of UI and UX elements to share between the two brands, while ensuring extensive flexibility to apply across many different vehicles. Ultimately, we arrived at three key properties that our new design system had to achieve: modularity, simplicity, and speed.
Target 1: Make it modular
A key challenge in designing mobile applications to work with cars is the inherent variability in the different models of vehicle. One car might support advanced features such as remotely starting the engine and unlocking the doors, while other models may only support in-app functions such as scheduling service and getting support. A clear directive from our executives was to only have a single app for each brand, so that customers could interact with all of their Honda or Acura vehicles within a single consistent experience. This meant that the apps needed to have an interface that gracefully scaled with the differing capabilities of the various vehicles that Honda and Acura build.
To achieve this goal, we designed the home screen of the app to consist of a modular set of tiles. These tiles served as the entry points to the different features for a given vehicle. These tiles can be individually added or removed from the home screen to match the capabilities of the vehicle you are currently viewing. This solution proved effective, as it minimized duplicate work required of developers, provided flexibility to match every possible vehicle model, and kept the navigation of the app consistent for customers even when viewing vehicles of very different capabilities.
Target 2: No more getting lost
Another key goal in our redesign was to reduce the complexity of navigating our apps. From our usage data, we knew that people only frequently use a small number of key functions within vehicle-related apps. We also learned through user-feedback sessions that many people felt that simply scrolling is a more comfortable way to explore and discover the features in the app than to have to have to page through distinct section screens. The preference for discovery via scrolling was a hunch we had from the get-go, as so many mainstream applications such as Facebook, Instagram, and even most webpages already rely on scrolling as their primary discovery interaction.
As a result of this user-feedback, we decided to make navigation dead-simple by putting the entry point to every single feature on a single scrolling home screen. This means there are no tabs to search through or multi-level menus to navigate in and out of; just a single screen with all the functions for that specific vehicle.
Target 3: Make it fast
We knew from usage-data that the most frequently used functions of our apps were the vehicle remote-commands. These include actions such as locking or unlocking the car, flashing the lights to help you find the car in a parking lot, or starting the engine to warm up or cool down the car by the time you get inside. In early feedback sessions with our customers, we also learned that these features were most often used when walking to or from the car. The time it takes for most people to walk to their vehicle is often between only seconds and minutes, so speed and ease-of-access to these frequently used features was essential to making them useful. To achieve this, we first made sure that all of a vehicle’s remote commands were visible as soon as the app’s home screen was opened. We did this by placing the remote command buttons on a drawer that floats above the home screen.
The drawer design ensured that all commands were only a flick away when the user was on the home screen. By anchoring the drawer to the bottom of the screen, we also made sure that all of the remote command buttons were always within thumbs reach, even on devices with large screens. When we initially drew up the drawer concept, we were concerned that people would be confused as to why it was overlapping the home screen and how to effectively interact with it. Fortunately, user-feedback sessions proved our worries wrong, as almost everyone who tried the app immediately understood what the drawer was for and how to effectively use it. The overlaid drawer is already a prevalent UI pattern in mainstream apps like Google Maps and Yelp, so from experience using these popular apps, we found most people were comfortable with the drawer concept. Ultimately the drawer design allowed us to literally put the remote controls for the car front and center, while still allowing flexibility for people to navigate the home screen by tucking the remote controls away.
Outcome
Designing mobile applications to work smoothly with automobiles is a real challenge from both a development and design perspective. Customers come to mobile apps with high expectations in terms of simplicity, focus, and consistency. Automobiles on the other hand are very complex machines themselves, and the variance between models and trims only compounds that complexity. I am very proud of the work that the design team and I accomplished on the redesign of the HondaLink and AcuraLink apps. Our design manages to support the complexity of Honda’s many products, while guarding the development team from re-work and one-off implementations as much as possible. Most importantly, our design presents a simple, consistent, and immediately usable interface for our customers to connect and interact with their vehicles.
Thanks for taking the time to read this!
If you’d like to see more of my work or get in touch, feel free to visit my personal website:
