Skip to main content

UX Design

BBQ Booking App: Case Study

Project Overview

  • The Product

    BBQ Booking app that allows users to reserve seats, assign meals, share the bill and give special requests to restaurant

  • Project Duration

    Jan 6th, 2023, Mar 9th, 2023

  • The Problem

    The Restaurant Barbacoa wanted to create an app to show the menu and develop a better way to book tables to improve the experience of the users on site. Currently all bookings were made by phone and no-show bookings were above 50%.

  • The Goal

    Research and Design the new App with a Booking feature that will allow people to organize better and raise the number of bookings that are fulfilled.

  • My Role

    Ux Researcher and Graphic Designer

  • My Responsibilities

    I was in charge of conducting the whole research and also of the graphic design and prototypes of this app.

Understanding The User

  • User Research

  • Personas

  • Problem Statements

  • User Journey Maps

Summary

For this UX, I performed interviews and usability studies on the low fidelity prototype. I had the assumption first that people could make use of an app that allowed them to share bill and let each seat pay their meals but in the end it turned out that there’s always a leader/organizer that will push it so everyone joins.
The UX research changed our proposed features to better tools to let people do what they do: get a group, go have dinner.

Pain Points

  • 1

    Users didn’t find it intuitive to navigate the menu and add meals to a booked table.

  • 2

    Status of the booked table was unclear and didn’t let the users know if there were extra steps to take or if the table was already booked.

  • 3

    Shared controls and depending on others actions to get the booking confirmation generated more discomfort than solutions. 

Personas & User Journey Maps

Starting The Design

  • Paper Wireframes

  • Digital Wireframes

  • Low-Fidelity Prototypes

  • Usability Studies

Paper Wireframes

For a restaurant, meals menu is the most important product and has to be shown, easy to navigate and appealing to the eye.  Photographs are important as a catchy name and description.

Digital Wireframes

Front page was designed to call to action right away showing photos of meals, a button right below it and featured meals on the lower half of the screen.

Low-Fidelity Prototype

The flow of the low-fidelity prototype would start on the home page and then click the book table button, add a meal and check out.

Open in Figma

Usability Studies: Findings

  • Round 1

    1. Users need a better way to manage their booked table
    2. User need a more intuitive way to add food to a booked table and better browse the menu.
    3. More information on the side dishes that can be added and if there are price changes, to show them as well.

  • Round 2

    1. Users didn’t like the sharing code option fearing it could be stolen.
    2. Split bill option wasn’t an option that could be a game-changer.

RefiningThe Design

  • Mockups

  • High Fidelity Prototype

  • Accessibility

Mockups

Final design turned out great showing a large featured meal, a call-to-action button that is bright and the right size of thumbnails below so you can appreciate at least 9 of them on the first screen.

High Fidelity Prototypes

A design so hot you can taste it.

Open in Figma

Accessibility

  • I’m using high-contrast texts over backgrounds so it could be easily read by anyone

  • Iconography is simple and large enought to be easily understood by any person.

  • Call-to-action buttons have texts that are simple, clear and easy to be clicked as I’m using bright yellow as the color that means action.

Going Forward

  • Takeaways

  • Next Steps

Takeaways

  • Impact

    This booking feature will help people to optimize their time, pre-pay their meals and be received as expected on a restaurant with your food hot and your table clean.

    When I was making the research I had many people excited on this and they keep telling me when is it going to be available.

  • What I learned

    People share a meal to celebrate or to make bonds. If we let them focus on that and not spend 20 minutes reading menus and then more time waiting for the food to be done, we are improving their moments and improving their lifes.

Next Steps

What's next?

  1. This prototype will be developed by engineering as a beta.
  2. We will launch beta on selected users and then make a launch date.
  3. I’ll book a table and have some BBQ Ribs. Wanna join?

SALA-SEEM Case Study

SALA-SEEM is a Secretariat that promotes the knowledge of Environmental Legislation as part of the USA-Panama Trade Promotion Agreement.

Visit SALA-SEEM website

Project Overview

  • Problem

    Website’s architecture has been growing over time. Since then, more and more people have been using it.

  • Project Duration

    March-June 2023

  • Goal

    improve reading time, pages visited and increase interactions (form submissions).

Summary

I checked Google Analytics traffic to see time spent on pages and got a list of participants for the interviews. For the participants I took 2 environmental lawyers, 2 environmental activists, and 1 user without any knowledge of the site or topic.

Feedback reflected that the information was already there at the site but hard to find and when it comes to technical or legal documents, it takes too much time for users to find something they could use.

Research Questions

  • What can we do to make it easier for users to browse info?
  • How to improve the navigation on the site/app?
  • Is it easy to find a document about an specific topic?

Usability Study

  • This was a moderated study using 5 participants on virtual meetings of about 45 minutes long.
  • There were 5 tasks participants had to perform, the 3 most important were:
    • Find a specific legal document about the prices of Wood.
    • Find a Submission by it’s ID number.
    • Find a specific Factual Record

Usability Study: Findings

  • People were using the pages as navigation.
  • People had a really difficult time looking for a specific legal document
  • People felt frustrated when there was no hints or way to find documents easier.

Personas

User Stories

  • As a teacher, I want to find clear information so that I can explain it to my class or my son.
  • As an environmental activist, I want to find the latest laws so that I can promote community participation.

Insights

  • Priority 0
    • Based on the theme that: Most people felt the structure needs to be improved, an insight is: Information Architecture needs to be restructured to make it easier to find information
  • Priority 1
    • Based on the theme that: Most people looked for navigation using the frontpage, an insight is: Frontpage need to show snippets of the main sections
  • Priority 2
    • Based on the theme that: Most people needed visual cues or keywords to know what topics are covered by a document, an insight is: All documents repositories need to show excerpts and tags to help them cluster similar documents and find information faster.

Ideation

Paper Wireframes

  • Desktop Version

    Paper Wireframe

  • Mobile Version

    Paper Wireframes

Digital Wireframes

  • Navigation was reflected on the frontpage to help people find it easier.
  • Frontpage resulted in doom scrolling because it was too long, reduced the size and simplified information.

Lo-Fi Prototype

Mockups

  • Based on the insights, information was presented more clear on shorter paragraphs.
  • Large color buttons are now part of the layout so people now know they can click on them to move to other pages.
  • Graphic load was reduced to help loading times on remote áreas where Internet Access is limited.

Responsive Designs

Finally, these are the responsive designs for the website along with a change of the Information Architecture to help users find content easier.

Takeaways & Next Steps

What's next?

  • After publishing the changes on the website, conduct a usability study with a wider sample of users including those from remote regions.
  • Monitor and measure time spent on page.
  • Monitor downloads of documents from the repository or the citizen participation section.

Takeaways & Next Steps

  • Impact:
    One user in particular had special focus on navigation, colors and disposition of the information. She was worried on how her son could make use of this information and to make sure no one is excluded from this important source of environmental legislations.
  • What I learned:
    We do things on our daily jobs and we don’t know how far or who are we impacting. We could be changing someone’s life by just improving accessibility or by having content translated properly.

Published changes

I'm most glad to present you all the new website www.sala-seem.org

You can compare this site against it's previous version as seen here.