AutoYelp - Adapting Yelp For Android Auto

Design For In-Car Interactions

Redesigned an existing app by simplifying and translating its user interface to adapt to in-car scenarios keeping in mind the user’s immediate need to avoid distraction and also staying within the pre-defined android auto guidelines.

Role

  • User Experience Designer
  • Visual Interface Designer

Skills & Tools

  • Sketching for Brainstorming & Storyboarding
  • Sketch for Wireframing & Screen Design

Defining UI Requirements

The product I chose to understand and adapt was the Yelp app that allows users to find local businesses and services, based on location, reviews & other custom preferences and also leave valuable feedback for other users. I picked ‘Restaurants’ category to begin with.

I started with defining the following objectives, constarints & requiremnts that became the framework for all the important design decisions :

  • Most of the interaction had to happen with few clicks and simple voice commands that needed to be in the right balance. Too much of either distracts the user.
  • The sort and filter system also needed to be preset to certain rules that would not only assist the user but also reduced overload of search results
  • Yelp collaboration with google maps and messages resulted in high usability factor of this app for its users
  • Toggling between reservation and delivery modes helped make it exclusive for users on the go and avoid confusion.

Visual Exploration


The design for screen was done using A/B/Q versions each being a little to a lot different from each other with the Q version being the most ambitious.

Version A

ASSUMPTION: The user has already initiated ‘SEARCH’ before getting into the car.

Search Results

Dismissable cards helped display restaurant details with minimal action buttons and replaced the list ui pattern used in mobile platforms.

ACTION BUTTONS
Get Directions | Call Restaurant

  • Directions opens location in google maps directing the user to the chosen restaurant
  • Call connects user with the restaurant to order take out or reserve a table

Menu

Menu gives quick access to bookmarks, reservations, recent order history and status alerts (image:right) with subtextual information.

Bookmarks is preset to display only nearby favourites depending on the user's location

The status is updated live and a toast message (android default feature) appears on the active screeen timely notifying the user.

Bookmarks

Bookmarks when clicked, displays pre-filtered restaurants that are nearby or along the route.

The details of each result are further edited to show important and necessary information such as cuisine, distance to destination and quick 'call to action' buttons.

ACTION BUTTONS
Get Directions | Call Restaurant
The user can also activate the voice command to initiate a related task.

Version B

Introducing a toggle button for helped the user switch between map (image:left) and image (image:right) views incase the user wanted to browse through restaurant images. This feature is intentionally locked when car is in motion to avoid user distraction

Replacing action buttons of version A with order modes ‘pick up’ (image:left) and ‘reserve’ (image:right)

Version Q

Introducing categories (suited for users) to the main screen to unlocked the wide range that Yelp has to offer its users. Clicking the restaurant icon (image:left) opens the categories page (image:right) incase the user wants to switch to a different search category.


Back to Top