Steak house App


Responsive E-commerce Web App

UX/UI DESIGN PROJECT
Duration: 1.5 months (27 March – 16 May 2023)
Overview

SteakHouse is a web responsive e-commerce app that focuses on healthy & delicious meals. My aim is creating a cohesive brand and a useful food ordering platform.

Compare

There are several similar applications, such as Uber Eats and Deliveroo. Both these apps cater for endless amounts of fast food restaurants, but SteakHouse is a luxury brand, creating it’s own platform showcasing quality, healthy meals.

Problem

It is necessary to present the product to the user as much as possible on an e-commerce website. However, it should neither be full of annoying elements nor too many product options on one page.

Solution

I believe less is more elegant. I choose to create white space between the items so that the user can focus only on the objects. Also, the user likes to see some recommendations depending on their selections.

Users

This application is for users who want to buy healthy and quality take-away or delivery meals from a luxury brand.

Key Features

The application allows users to filter the items. There are two filtering options: one is general and most common item filter; the other option is an advanced filter that helps the user search by how healthy the meal is, allergens and preferences for individuals with specific dietary needs.

Brand Guidelines

  • Guiding Principles
  • Our Logo
  • Colour Palette
  • Font Style
  • Image Style
  • Icon Style
  • Pain Points – User Research
  • Personas
  • User Journey Map
  • User Flow Diagram
  • Storyboards
  • Wireframes
  • Prototypes
  • User testing
  • Mockups
  • Responsive Design

Guiding Principles

Our Logo

Colour palette

I chose some strong, bold colours to accompany the imagery of steaks and meat based imagery. This dark and moody colour palette is perfect to set the tone and mood for the app.

Font Style

Inter is the font used for headlines on marketing and product web experiences. It is a sans serif typeface and a clear typeface that is easy to read and available on many platforms. Different variations of the typeface is used in the design such as bold, medium and regular.

Image Style

I chose the dark and moody images for the project. I believe it gives the app a look of sophistication, elegance and class.

Icon Style

I chose icons that are familiar to users. These icons are simple line sketches.

Pain Points – User Research

After conducting user research, I was able to determine the following pain points:

Personas

Using the information gained from the research phase, I was able to create personas for my project. I took the pain points into consideration when creating the personas and tried to stay focused on being empathetic towards the users.

User Journey Map

The personas gave me a great indication of what type of user will be using the app. This lead me to create user stories. From the user stories I moved on to create a user journey map.

The next steps in the process involved coming up with the problem statement for the project. I made sure to keep accessibility in mind when conducting research and creating all the elements. My research continued and at this point I started looking into what the competition is doing. This lead me to creating a competitive audit & competitive audit report.

View the full competitive audit by clicking HERE and the competitive audit report by clicking HERE.

User Flow Diagram

The next step was determining the goal statement and then I had some fun with crazy eight sketches. I designed a user flow based on what I imagine the user would do to place an order in the app. The user flow shows you what happens from opening the app to order confirmation.

Storyboards

Next, I created 2 storyboards: A big picture storyboard & close-up storyboard. The big picture storyboard focused on how and why the user does certain things in the app, while the close-up storyboard focused on what the user was doing.

Wireframes

After my storyboard were perfected, I moved on to create paper wireframes for my app. After that I created some low-fidelity digital wireframes using Figma, and moved on to create high-fidelity wireframes (also using Figma).

Low Fidelity Wireframes
High Fidelity Wireframes

Prototypes

While creating my wireframes, I also created prototypes from the wireframe screens. This gives you a good indication of user flow and where the app can be improved.

Please feel free to interact with the low-fidelity prototype Below.

Enlarge the screen by clicking on the 2 arrows in the top right of the screen below.

Please feel free to interact with the High-fidelity prototype Below.

Enlarge the screen by clicking on the 2 arrows in the top right of the screen below.

User Testing

After the prototypes, it was time to conduct some research in the form of a usability study.
I started with a research plan (Click HERE), followed by the usability study (Click HERE) and ended with an affinity diagram:

Thereafter, I identified themes/patterns from the usability study, which gave me some insights for the design. I put together a Usability Study Presentation which you can view by clicking HERE.

Mockups

Finally, the optimized features are added to create more efficient and intuitive flows.

Home Page
Menu Options Page
Meal Info Page
“Added to Cart” Page
Confirm Order Page
Confirm Details Page
“Order Submitted” Page
App Menu Page
User Profile Page
Order Tracker Page
Meal Info Page
Meal Info Page
Meal Info Page
Meal Info Page

Final Responsive App Prototype

Please feel free to interact with the prototype Below.

Enlarge the screen by clicking on the 2 arrows in the top right of the screen below.

Share your love

Leave a Reply

Your email address will not be published. Required fields are marked *