Smokeland BBQ

Type

Mobile App Design

Duration

May 2022 to September 2022

My Role

UX/UI Designer

Summary


Smokeland BBQ is a fictional grillhouse experience for barbeque enthusiasts. The primary target audience are busy working adults who lack the time and energy necessary to prepare a healthy meal.

The Primary Goal


I used pre-written bios to answer interview questions and empathize with each user I’m designing for and their needs. A primary user group identified through research was working adults who are too tired or busy to cook and order food once or twice a week.

The goal was to design an app for Smokeland BBQ that allows users to easily order healthy and budget-friendly meal options when low on time or energy.



What We Learned About Potential Users


Data provided by Smokeland BBQ's market research, allowed us to develop interview questions to better understand potential user needs.

I observed that:

  • Participants were unable to consistently cook every day of the week due to busy work schedules and family obligations.
  • Participants sought affordable and healthy food options when ordering out.
  • Participants with visual impairments found it difficult to navigate more websites and mobile applications.

The feedback received through research made it very clear that users want an easy to navigate ordering experience, offering healthy and budget-friendly food options.



Sandra and Tim: User Personas


Problem Statements:

  • Sandra is a young professional who needs an efficient way to pickup large group orders because they are limited on time.
  • Tim is a single working father who needs a quick and clear way to order healthy and budget-friendly food options because he is often tired from work and finds it difficult to navigate menu items with his visual impairment.


Researching the Competition


An audit of a few competitor’s applications provided direction on gaps and opportunities to address with the Smokeland BBQ app.

A few direct and indirect competitors included:

  • HelloFresh: A subscription based meal plan and kit service, providing people with easy-to-cook food options.
  • Montana's BBQ & Bar: A popular barbeque restaurant chain offering ready-to-eat products, sauces and seasonings.
  • Swiss Chalet: A rotisserie chicken restaurant chain, offering products available for purchase in grocery stores.
  • Texas Roadhouse: An American BBQ restaurant providing iconic food and service.


Sketching up Some Solutions


The time finally came to leverage the data and insights from the initial research and competitive audits, to begin ideating on potential solutions.

My focus was specifically on the main user flow of selecting a meal and completing the checkout process.

I wanted to design for:

  • A "Home" screen, acting as a landing page for people.
  • A "Menu" screen to display all available meal options.
  • A "Meal Customization" screen to demonstrate the next step after selecting a meal.
  • A "Checkout" user flow to simulate the purchase of a meal.

I started off by sketching various versions of the "Home" screen.

Once I came up with a few design ideas for the interface, placement of text, and any other important elements, I repeated this process for the remaining screens.

I reviewed the sketches for each screen, and began dissecting what I liked from each to combine them into a second version.



Paper to Digital


After ideating and drafting some paper wireframes, I created the initial designs for the Smokeland BBQ app. These designs focused on the easy navigation of meals, accessibility considerations and guiding the user through the checkout process.

Healthy and budget-friendly food experience was a key user need to address in the designs, in addition to equipping the app to work with assistive technologies.

The next step was to prepare for user testing. At this stage of the development, I had refined my designs multiple times so that I could have real users test the functionality of certain features. I created a low-fidelity prototype centered around the main user flow of purchasing a meal.



User Interviews - Round 1


The goal of this usability study was to observe users and gather their feedback concerning the user flow of ordering a meal, along with any other impressions of the overall app experience.

The parameters of the usability study were as follows:

  • Moderated: Users were observed by the interviewer while they were asked to complete certain tasks and share their thoughts.
  • Location: Conducted remotely via Zoom.
  • Duration: 30 to 60 minutes.
  • Participants: Five; conducted individually.

These were the main findings uncovered by the first usability study:

  • Login Screen: People need better cues for what steps are required to login.
  • Meal Selection: People need more information on how to better filter their meal choices.
  • Filter Function: People want a more intuitive way to filter their meals.
  • Design & Iconography: People want icons to be more recognizable and familiar.
  • Checkout Process: People need better cues for what steps are required to add a meal to checkout.


Low-Fidelity Prototype - Version 2


Based on the insights from the first round of user interviews, I applied changes to improve overall visual design, structure of information, and user flows for the meal selection and checkout process.



Refining the Design


Once the initial changes were made from the first round of user interviews, it was time to bring life into the application.

Thus began the transformation from placeholder text, colours and images, to something closer to how the finished product would eventually resemble.

Along with colour implementation, various pages and features were refined and explored as well.

A high-fidelity prototype was then created, focusing once again on the main flow of selecting a meal and completing the checkout process.



User Interviews - Round 2


The goal of this usability study was to gather additional insights concerning:

  • The modified "Meal Selection" feature and user flow.
  • The refined "Checkout" process.
  • The improved "Filter" function and search integration.
  • Additional design improvements, and overall look and feel of the application.

The parameters of the usability study were as follows:

  • Moderated: Users were observed by the interviewer while they were asked to complete certain tasks and share their thoughts.
  • Location: Conducted remotely via Zoom.
  • Duration: 30 to 60 minutes.
  • Participants: Two; conducted individually.

This was the main finding uncovered by the second usability study:

  • Checkout process: People want the icons in the checkout process to be less attention-grabbing.
  • Home screen: People want the home screen to be better structured, less cluttered and show only relevant information.

Based on the insights from the second round of user interviews, I reduced the focus of the icons displayed during the checkout process, while tweaking the aspect of the page's design for better user experience.

Frustration in the meal selection process was also observed during the second usability study. I consolidated the "Home" and "meals" screens into a single "Home" screen to allow for quick browsing of meal items in one location.

The final high-fidelity prototype V3.0 presented cleaner user flows for ordering a meal and completing the checkout process. It also met user needs for saving time and offering budget-friendly, healthy meals.



Accessibility Considerations


During the design and development of the Smokeland BBQ app, several considerations were made to include people with accessibility limitations:

  • Icons and high-quality images were incorporated to support users with visual impairments.
  • Appropriate colour schemes were researched and leveraged to complement onscreen elements and call-to-action buttons.
  • Gestures and motions with reasonable animation delays were incorporated. Accessibility features such as voice command for the app's search bar was considered early on in the app's design.


End of the Journey - What Was Learned?


The main takeaways from the Smokeland BBQ product development project are as follows:

  • Impact: The app makes people feel excitedabout ordering meals from Smokeland BBQ. One quote from peer feedback: "The pictures are really nice and in a meal app the pictures are the most important thing. If the pictures don't look nice, people aren't going to order."
  • What I Learned: While designing the Smokeland BBQ app, I learned that the first ideas for the app are only the beginning of the process. Usability studies and peer feedback influenced each iteration of the app’s designs.


Next Steps


The Smokeland BBQ app could benefit from the following next steps in its development:

  • Continue working on designing the remaining features and screens of the app.
  • Conduct another round of usability studies to capture any iterative feedback regarding the app's newly designed features from the previous point.
  • Conduct more user research to determine any new areas of improvement.

Let's Work Together