HoleyCow Steakhouse Menu App

A Case Study

By Tony Coombes

Overview

The Product

The client wants a menu app for his customers to view their menu from anywhere. Target demographic is adults of all ages: 18 –65+

Project Duration

06/2022 –10/2022

The Problem

Most menu apps are simple & basic and do not offer the user customizable options that consider their diet plan.

The Goal

Create an app that gives the user control over his/her search results that find menu items that match their eating plan/restrictions. We also want it to be user-friendly for senior citizens.

My role

Project manager, Lead UX Designer, Lead Researcher

Responsibilities

Product research, user research, concept, wireframing, prototyping & design.

Understanding the User

User Research: Summary

I conducted moderated research sessions with five participants ranging from 5-10 minutes each. Three participants were between 20 years old and 50 years old. Two participants were over 65 years of age and required reading glasses..

User Research: Pain Points

Diet Plan Icon

The original Diet Plan icon was not recognized by 3 of the 5 participants. They did not associate that icon with its intended purpose.

Search Button

Write one to two sentences reflecting on the pain point listed above and how it will guide designs moving forward.

Persona: Zach

“The older I get, the more health-conscious I become.”

Age:
Education:
Hometown:
Family:
Occupation:

38
BS in Kinesiology
Dallas, TX  USA
Single
Assistant Physical Therapist

Problem Statement

Zach is a health-conscious person who needs access to nutritional data when he dines because he is on a very strict eating plan.

Goals

  • Find restaurants that can suit his dietary restrictions
  • Be able to search menus before deciding on a restaurant with friends

    • Frustrations

  • Hates not knowing if a restaurant can accommodate his eating plan before arriving

    • User Journey Map

    Zach is a fairly intelligent individual and his User Journey was a rather smooth one. It did, however, alert me to a few opportunities for improvement for which I swiftly acted upon.

    ACTION
    Find the Rib-Eye Special
    Find its nutritional information
    Create a new profile
    Add a diet plan to your profile
    Find any meal that suits the selected diet plan
    TASK LIST
    A. Clicked the Search icon
    B. Clicked the Search icon again to commit
    A. Clicked the "nutrition facts" button
    A. Clicked "home"
    B. Clicked "join"
    A. Clicked the "profile" icon
    B. Clicked on the Diet Plan selection bar
    C. Selected the Diet Plan
    A. Clicked the Diet Plan icon at the top
    B. Clicked the menu item with the icon
    FEELING ADJECTIVE
  • Excited
  • Hesitant
    		•
  • Confident
    		•
  • Content
    		•
  • Explorative
  • Confident
  • Confused
  • Content
    		•
    IMPROVEMENT OPPORTUNITIES
  • Search button recognition
    		•
  • Diet Plan icon recognition
    		•
    • 1

    Starting the design

    Paper Wireframes

    After quickly hand-drawing iterations of the landing page, I was able to isolate my favorite elements marking them with a ‘star’ to use in my digital mockups.

    A Featured Item section
    to showcase the restaurant's
    top meal lineup.

    A large Sign In button
    prioritizes the user's actions.
    We want the user to have and
    use the profile benefits.

    There is a quick view function
    to jump straight to the menu
    for quick access and skip the
    log in process.

    Digital Wireframes

    I wanted the user to have easy access and a clear flow the second they opened the app.

    I was careful to base my design decisions on user input from the research phase of the design process.

    In Figure A. users were having difficulty associating the ‘diet plan icon’ with the diet plan.

    In Figure B. users did not know how to commit the search after typing in the search bar.

    Figure A.

    Before
    After

    Figure B.

    Before
    After

    Low-Fidelity Prototype

    The initial low-fidelity prototype allowed the user to navigate and explore the app, as well as add a diet plan to their profile.

    View the HoleyCowSteakhouse Low-Fidelity prototype by clicking the button, below.

    Low-Fi Prototype
    Lorem Ipsum is simply dumy text of the printing typesetting industry lorem ipsum.

    Usability Study: Findings

    I conducted two usability studies during the development for this app. The first was conducted in wireframe mode and revealed issues with icon recognition. The second study went much more smoothly but indicated a small issue with font size.

    Round 1 Findings

    • Diet Plan icon not clear
    • "Commit Search" icon not clear

    Round 2 Findings

    • Food titles are too small

    Refining the design

    Mockups

     

    In Figure A. the wireframes provided a loose by clear path for the user flow during the usability studies. However, icon recognition appeared to be a big issue so I was sure to address that after the study was completed.

    In Figure B. the second round of usability testing went much smoother, but I was alerted to an issue with menu item font sizes

    Figure A.

    Before
    After

    Figure B.

    Before
    After

    Mockups

    High-Fidelity Prototype

    The high-fidelity prototype had much smoother animations and transitions for the user flow.

    View the HoleyCowSteakhouse
    High-fidelity prototype by clicking the button, below.

    High-Fi Prototype
    Lorem Ipsum is simply dumy text of the printing typesetting industry lorem ipsum.

    Accessibility Considerations

    We want pinch and stretch to affect all text in the app. Once the user is in the menu details on a specific image of the menu item, the pinch and stretch action should affect the image, as well.

    I used high-contrast colors for ADA compliance.

    Large Icons will be helpful for interactivity throughout the app.

    Going forward

    Takeaways

    IMPACT: The mobile app is more versatile and informative than any static printed menu can ever be. This app will allow everyone the freedom to explore HoleyCow’s dining options no matter where they are: dining in the restaurant, or viewing the app in a remote location.

    WHAT I LEARNED: The mobile app is more versatile and informative than any static printed menu can ever be. This app will allow everyone the freedom to explore HoleyCow’s dining options no matter where they are: dining in the restaurant, or viewing the app in a remote location.

    Next steps

    Conduct another round of usability studies to verify pain points have been properly addressed.

    Move product into development.

    Conduct user research via survey’s and analyze data after launch.

    Reach Out!

    My contact information is listed below in the footer of this page. Feel free to contact me in whichever method you prefer. I’d LOVE to hear from you!!

    Thank you for taking the time to review this case study!

    Thank you for visiting my portfolio! I am eager to hear your thoughts & ideas, as well as your criticism and advice! Please take the time to reach out and hit me with your thoughts.

    Tony Coombes

    •