B and B Restaurant Mobile App

UI/UX Design

Role: Lead, Concept, Research, Visuals, Interactions, Copy

Project Overview

B & B Restaurant is a local restaurant that serves tasty selections of best quality coffee, ice cream. delicious pastries, cakes and specialty local and intercontinental dishes to commuting parents, students and workers who find they lack the time necessary to prepare meals for themselves or their family, unable to take long meal breaks, or otherwise don’t have the ability to do so but occasionally enjoys eating out with family, friends and other associates at any time of the day.

My Contributions

I designed and implemented the interior and exterior space when they served just pastries and ice creams. Once they added more items to their menu all that was left was to get them onboard building a meal ordering app. At the moment, they still rely solely on walk-ins and customers placing orders via WhatsApp which is not optimizing sales and delivery.

Preliminary Ideation

In the design process, I opted for a goal-directed design approach that helped me move along through the timeline smoothly. Qualitative research methods proved to be the most effective during the design process, most notably my user interviews and usability testing sessions. Starting off, I asked myself some generic but useful initial questions.

User Testing & Observation

After interviewing four participants to establish archetypes later on, it became evident that what they needed to accomplish fell within the same categories; placing seamless meal orders and making advanced reservations.

Assumptions

With each pain point encountered and recognizing the conflicts of interest from each participant, I built on that as a foundation for exploring solutions prioritized according to which had the most and least amount of risk, high level goals for improvement in efficiency, process, depth, and familiarity and how those goals would in-turn also affect the business' goals.

Prioritization Plotting

All these informed on which could be worked on first to either validate or pivot towards another idea. Categorization was done using affinity mapping.

Competitive Analysis

I checked what the prominent restaurant food ordering applications and websites were already doing and what user goals they were not reaching. I evaluated several features deemed vital from user surveys and identified which ones we could capitalize on to have a leg up over other applications.

I found out only 1 of the three main competitors offered booking reservations on their website only. That feature was unavailable for their mobile app. None of the competitors offered meal plans for any period of time. Another area I explored was prices for similar meals and found theirs were costlier with limited portion sizes. And only one of them has a minimal and modern design similar to the look and feel we were aiming for.

Key Path Scenarios

I identified three key path scenarios. One the user will experience while ordering a meal, another when meal planning for a period and the other when making a reservation.

User Flow and Information Architecture

I constructed a user flow of what the basic start to finish journey looks like while experiencing/performing any of the scenarios. This helped me understand ways users can interact with the product, see navigation through user goals, focus more on their experience and needs and less so on the details that I would solidify later on.

Lo-fi Ideation

I came up with a couple of preliminary sketches and realized some of the ideas and layouts wouldn't work. These were quickly communicated and prompted more discussions as well as quickly filter the good and bad ideas out. It allowed me to get a feel for what the core of the app would look like when put in front of a user.

Iteration

After creating our prototype from low fidelity wireframes, I began conducting a usability test. I asked 2 participants to run through different scenarios in the prototype to give enough feedback to use for our next set of design iterations.

Wireflow

Using the sketches as a guide, I created a higher fidelity but still fairly preliminary version of the wireframes with intended basic interactions. I was able to work out some of the technical issues that would not be viable as well as turning those sketches into more realistic ones. It was important to focus on the features that we really wanted to have, rather than going too broad and missing something that would've been really cool and functional to see and use as a user.

Style Guide

Using warm feeling colours helped convey the feeling of comfort to our users. Shades of orange paired well with the idea of delicious comforting meals in a serene environment. I utilized colour sparingly throughout the app to convey which elements were interactable and should be paid attention to within the product. I also opted to use the typeface Roboto throughout the interface showing versatility through uppercase and lowercase styling, font weight, as well as coloured, dark and light text fills to better balance the contrast.

Takeaways

Being a food enthusiast myself, I found working on this project incredibly rewarding. I got to experiment with some of the new Figma features, and narrow down my design process. While I didn't add other features and designs discussed earlier in the project, it gives room to incorporate them in future updates and similar projects. I feel even with that, I designed an experience that works well for most users.

Design with a focus on the user pain points and not just the business goals help further the goals of not only the user, but the business. I learned that if you design exclusively for the business' goals, it will most likely fail; this seems to be especially true in shopping apps.

B and B Restaurant Mobile App

Want to work together?