Steak house App - Charlize Mondahl Portfolio

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.