June 25, 2019

Designing Smartcar Connect

Kathleen Hsu

Product Designer

We recently launched Smartcar Connect, a product that lets users quickly and securely link their vehicles to an application. If you checked it out, you might have noticed that it looks quite different from the authorization flow we previously offered.

Why the redesign?

Smartcar’s original authorization flow was designed more than a year ago. It was about time to revamp this beta version and make it production ready. We wanted to refresh the end-to-end flow with a clean and modern visual style that enables your users to easily connect their vehicles to your app.

What changed?

When we set off to revamp our visual language, ease of use was top of mind. We decided to introduce brighter colors, bolder call-to-action buttons, and icons for each permission in our Grant page.

Beyond a cleaner look and feel, we made improvements to the following user experience aspects:

Authorizing a single vehicle

Authorizing a single vehicle 🚗 Many users have a connected car account for only one vehicle. On our Grant page, users with a single car used to see a checkbox next to their vehicle’s make, model, and year. Rather than giving these users the ability to deselect their only car and run into an error, our redesigned flow includes the vehicle’s make, model, and year directly in the page heading.

Vehicle compatibility check

Vehicle compatibility check ✔️ To identify areas of improvement in our old authorization flow, we mapped out the optimal path for all potential users. We realized some users were uncertain whether their car was compatible with Smartcar’s API and didn't have a path forward in the flow. When building Connect, we added a way to check a vehicle’s compatibility by simply entering its VIN.

Separating already authorized vehicles

Separating already authorized vehicles ✨ When a user was connecting their vehicle in our old authorization flow, and if they had previously linked other vehicles already, all cars would appear in one big section. Smartcar Connect separates out unlinked vehicles from already authorized vehicles and puts them into two different lists for a better overview.

What’s next?

This isn’t the end of the road. In the coming weeks, we'll be making more changes to improve the developer experience of Smartcar Connect even further. These updates will happen automatically. All you need to do is lean back and enjoy! 🌞🌴

Everything you need to know about car APIs. Delivered monthly.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.