September 17, 2015

Starlight Cafe Mobile App

Role: User Research | Wireframes | Prototype | Interaction Design | User Testing
Tools: Balsamiq, InVision App

The Challenge:

Identifying an unmet need that people had when making restaurant reservations and design a mobile solution.

Process

Step 1: Needfinding:

I observed and interviewed three users making restaurant reservations using the following websites and apps, Google, The Cheesecake Factory (website), BJ’s Brewhouse (website), Texas de Brazil, Yelp (App), and Siri (App).

Step 2: Identify User Problems:

  1. Texas de Brazil took user to another site (OpenTable) to complete reservations without warning.
  2. Texas de Brazil/Open Table didn’t tell the user that the time she wanted wasn’t available.
  3. All three users had to use at least 2-3 sites to find a restaurant.
  4. BJ Brewhouse’s use of Online Ordering and Takeout was confusing, because they sound like the same option.

Key Findings:

Users that were familiar with a restaurant bypassed 3rd party apps like Yelp and used the restaurant’s website or app. They wanted an easy way to find the nearest location, make reservations, or find answers to specific questions. Ex. Did they deliver or offer takeout? Did they have outside seating?

Step 3: Develop Personas:

My users 21-45 year olds who need to make reservations frequently at a favorite restaurant. They are tech savvy and expect to find information and conduct transactions quickly on their smartphone.

Opportunity:

Designing a mobile app for a restaurant chain would increase customer visits and loyalty. A mobile app needed to provide to quick access for finding restaurant locations, making reservations, and paying for meals. Additionally, repeat visits would be encouraged through the discounts offered through the Starlight Rewards loyalty program featured in the app.

Wireframes Iteration #1:

Assignment #3-Wireframes for Restaurant App-page-002

Assignment #3-Wireframes for Restaurant App-page-003

Assignment #3-Wireframes for Restaurant App-page-004

Assignment #3-Wireframes for Restaurant App-page-005

Wireframes Iteration #2:

  • Reduced visual clutter and streamlined user actions, by making the following changes:
  • Replaced menu list with icons and labels on the Home page
  • Added tab navigation & condensed picture icons for Lunch and Dinner tabs.
  • Removed credit card input fields from the Starlight Rewards Sign Up Page.
  • Experimented with using one screen for search and results features on Starlight Locations page.
  • Reduced order details information on Pay Online & Payment Receipt page.
  • Experimented with “Hamburger button” navigation.

Iteration #3: Clickable Prototype