Yelp OpenCar
OpenCar is a system that allows third party vendors the ability to build their app once and install it across multiple OEM's and OEM profiles. The information below is the journey that the Yelp app took from inception to completion. Some of the challenges included combining the Yelp's brand with the OEM's brand all while following the National Highway Traffic Safety Association (NTSA) distracted driver guidelines.
I was the lead designer on the Yelp project that lived through multiple iterations and OEM profiles.
User Personas
The personas that I used were general driver personas with the understanding that once we signed an OEM we would focus on designing for their specific demographics.
Yelp IA
The Yelp IA was a simplified version of their mobile app which was optimized for automotive. This included features like a simpler landing page and audio reviews.
Yelp Carbon
OpenCar had already built a profile called Carbon. We wanted to take it to CES so we built a simple search functionality.
Yelp Templates
To speed up the design and production process we came up with templates for each chamber of our Carbon 2 OpenCar profile. Each chamber could be used across multiple apps and would present a look of uniformity reducing the time that the drivers eyes were off of the road.
Splash screen
Sing in/up screen
Keyboard
Grid view
List view with tabs
POI detail
Route map
Filter Location
After testing we found that the filter was in a difficult place to reach. Below are the two alternative options and their pros and cons. We eventually decided on the overflow button.
Original Filter Location
Upper right
The original design for the filter was to place it in the upper right corner of the screen. While being a universal location for the filter it created some problems. It was hard to get to with the commander and was at the furthest point from the driver.
Filter Option 1
Secondary Buttons
The advantage to the secondary button model is that there are less clicks to get to the item you want. The buttons are also in a familiar location. The disadvantage is that it is not scaleable.
Filter Option 2
Overflow Button
We decided to go with the overflow button model because it is scaleable and in a familiar button location. Users are also familiar with the overflow button paradigm.
Yelp Carbon 2 Visuals
The visuals are a combination of the Carbon 2 profile and the Yelp brand. The Carbon 2 profile allows the Yelp brand to shine by taking their brand color and making it the mood profile color. This shows up in the tabs, focus state, primary and tertiary buttons, and the mood bar. We also tried to use artifacts that are familiar to Yelp like their ratings system and icons.
