UX/UI on an 8pt grid :) - Minnes Restaurant

Project: Minnes Restaurant

Role: Lead Designer

Duration: Three Months

Watch a Screen Recording

View Prototype on Figma

Project Vision

The Minnes Restaurant app was designed so that busy people in Minneapolis, or those who don’t like to cook, can have a convenient way to order meals from a family-run business in their city.

Challenges

Gain people's trust
Maintain cohesion throughout the app.
Provide users with a seamless payment process.

Kickoff

For this project, I took a goal-directed design approach that proved to be very effective. Qualitative research methods were used, such as a competitive analysis and a user persona construction. Some of the initial questions for consideration were;

"What is the product and who is it for?"

"Which users are most important to the business?"

"Who are are main competitors?"

"What challenges could we face as we progress?"

"What research do we need to conduct?"

"What do our main users require most?"

The data obtained from the user research process showed some very useful insights. From there, an affinity diagram was used to organize and consolidate the information into related subsets. By identifying the particular needs of each user group I was better able to identify the user goals and how those goals would then affect the business goals.

Meet The Users

Competitive Analysis

Minnes Restaurant competes against other independently run restaurants in the Minneapolis metropolitan area. They also have to compete against well-known franchised restaurants, such as McDonald's and Wendy's.

In most cases, competing restaurants rely on using marketplace applications to take care of their ordering and delivery process. Examples of such applications include GrubHub and DoorDash.

These applications are very beneficial to restaurant owners because they do away with the need for technical expertise. Customers also trust these apps.

However, the downside of relying on such applications is that restaurant owners have to pay significant fees for each transaction. Independent operators like Minnes are also likely to become lost in the competitive environment of overcrowded marketplaces.

This makes the idea of owning a standalone application very appealing to the owners of Minnes Restaurant.

Preparing the Journey

A user flow was constructed to show the journey that a user follows when logging in, ordering a meal, and choosing the delivery or pick-up option. This helped me to gain an understanding of how users would interact with the app and how they see the navigation process.

Paper Wireframes

Wireflow

After sketching out some wireframes by hand and giving consideration to the preliminary user flow, the direction of travel was becoming more apparent. At this stage, the essential features of the app along with what could now be seen as unnecessary distractions were evident. This was a painstaking process, but time well spent before moving on to the visual aspects of the design.

Iteration

After creating the low-fidelity wireframes, five people were asked to try out the prototype and give feedback. Some of the consistent feedback that was garnered includes;

Overall, the application had the look and feel of a food delivery app and the design was heading in the right direction.
Testing the prototype seemed a little premature as many of the features, like buttons, were not working properly. This made it difficult for users to properly envision using the app.
Certain aspects of the design seemed a little cramped and were perhaps more akin to a website design.

Product Screen — Before & After Usability Study

Challenge 1

Gain People's Trust

Most people are familiar and comfortable with using mainstream food delivery apps. Therefore, gaining people's trust is always an essential task. Designing the app to look credible and professional with a familiar user flow went a long way to achieving this all-important trust.

Challenge 2

Maintain Cohesion & Accessibility

Along with gaining people's trust, it was essential to maintain cohesion throughout the app. With that in mind, Material Design iconography was used to the greatest extent possible throughout the app so that all users would feel comfortable while interacting with the service.

Challenge 3

Payment Process

The payment process is an essential feature of many apps. Because this is a standalone app rather than a well-known marketplace app, users will naturally be cautious. Therefore, a smooth, seamless transition from the product page to the cart to the checkout is emphasised in the design.

Style Guide

Many of the big-name restaurant companies, like McDonald's, use red as a primary brand colour. Minnes took that route as well. However, great care was taken to not use a tone of red that would be over-stimulating. Therefore, the hex code #bf0000 was chosen. This deep shade of red was used to imply food company, while also being dark enough to suggest a little touch of class. So as not to be overly classy, illustrated characters were used throughout the app to give it a lighter feel.

Takeaways

The food delivery marketplace has grown exponentially in the last decade. This growth rate was only further enhanced by the coronavirus pandemic. As such, people are very familiar with using food ordering/delivery apps and have clear expectations. Overall, there are advantages and challenges when it comes to designing such an application. The main takeaway I have from the overall process is to focus on the user. While it can be tempting to come up with all sorts of great ideas and make assumptions, user personas are a designer's best friend.

Page updated

Google Sites

Report abuse