Steak It is a mid size traditional outfit located at the center of Lagos, Nigeria. They are particularly proud of their traditional beef aging methods and strive to offer their customers a taste of legacy with each juicy bite.

In addition they serve custom side dishes to further enrich the dining experience. Steak It target customers range from families to single professionals.

The Product

Project Duration: February 2022 to September 2022.

The Problem

Families and busy workers want to cut down on meal preparation times.

The Goal

Design an app for Steak It that allows users to easily order and pick up delicious, traditional beef.

My Role

UX designer designing an app for Steak It from conception to delivery

Responsibilities

Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.

Project overview

Understanding the user

● User research

● Personas

● Problem statements

● User journey maps

Summary

I conducted interviews and created empathy maps to understand the users I’m designing for and their needs. A primary user group identified through research was working adults and families who don’t have time to cook meals. This user group confirmed initial assumptions about Steak It customers, but research also revealed that time was not the only factor limiting users from cooking at home. Other user problems included obligations, interests, or challenges that make it difficult to get groceries for cooking or reduce meal prep times.

Pain Points

1 Time

Accessibility

2

Working adults are too busy to spend time on meal prep

3 IA

Text-heavy menus in apps are often difficult to read and order from

Google UX Design Certificate - Persona [Template] (1).jpg

Personas

User journey map

Mapping John’’s user journey revealed how helpful it would be for users to have access to a dedicated Steak app.

Starting the design

● Paper wireframes

● Digital wireframes

● Low-fidelity prototype

● Usability studies

Paper wireframes

Taking the time to draft iterations of each screen of the app on paper ensured that the elements that made it to digital wireframes would be well-suited to address user pain points. For a quick and easy ordering process.

Digital Wireframes

As the initial design phase continued, I made sure to base screen designs on feedback and findings from the user research.

Easy navigation was a key user need to address in the designs in addition to equipping the app to work with assistive technologies.

Low-fidelity prototype

Using the completed set of digital wireframes, I created a low-fidelity prototype. The primary user flow I connected was to place a steak order so the prototype could be used in a usability study.

View the Low-Fi prototype

Usability study: Findings

I conducted two rounds of usability studies. Findings from the first study helped guide the designs from wireframes to mockups. The second study used a high-fidelity prototype and revealed what aspects of the mockups needed refining.

Round 1 Findings

1

Users expressed that completion should be prioritized over sign up creation and details

2

The checkout process is too long

Round 2 Findings

1

Welcome page seems unnecessary

2

Users want a delivery option

Refining the design

● Mockups

● High-fidelity prototype

● Accessibility

Mockups

Early designs mandated the users to input their details for sign up before placing and order. But after the usability studies this feature was placed at the end of the user journey.

Before usability studies

After usability studies

Mockups

The second usability study revealed some frustration with the checkout flow. Users were impatient with the length of the process so I streamlined it accordingly.

Key mockups

High-fidelity prototype

The final high-fidelity prototype presented cleaner user flows for steak order and checkout. It also meets user needs for a pickup or delivery option View the Steak IT.

View the Hi-Fi prototype

Accessibility considerations

Used icons to help make navigation easier.

Provided access to users who are vision impaired with larger text size

1

2

Used detailed imagery for Steak offerings to help all users better understand the designs.

3

Going forward

● Takeaways

● Next steps

Takeaways

Impact:

The app helps users enjoy an easy order process and delights them with delicious steak images.

One quote from peer feedback: “The app looks fun, and navigation is easy and straightforward.’’

What I learned:

During the design phase, I learned that the first ideas regardless of how good they seem is only the beginning of the process.

The necessity and reliance on usability studies insight and peer feedback cannot be over emphasized!

Next steps

Conduct more user research to determine any new areas of need.

Conduct another round of usability studies to validate whether the pain points users experienced have been effectively addressed.

The Product

Project Duration: February 2022 to September 2022.

Project overview

Understanding the user

● User research ● Personas ● Problem statements ● User journey maps

Summary

Pain Points

1

Time

Accessibility

2

Working adults are too busy to spend time on meal prep

Working adults are too busy to spend time on meal prep

3

IA

Text-heavy menus in apps are often difficult to read and order from

Personas

User journey map

Mapping John’’s user journey revealed how helpful it would be for users to have access to a dedicated Steak app.

Starting the design

● Paper wireframes ● Digital wireframes ● Low-fidelity prototype ● Usability studies

Paper wireframes

Taking the time to draft iterations of each screen of the app on paper ensured that the elements that made it to digital wireframes would be well-suited to address user pain points. For a quick and easy ordering process.

Digital Wireframes

As the initial design phase continued, I made sure to base screen designs on feedback and findings from the user research.

Easy navigation was a key user need to address in the designs in addition to equipping the app to work with assistive technologies.

Low-fidelity prototype

Using the completed set of digital wireframes, I created a low-fidelity prototype. The primary user flow I connected was to place a steak order so the prototype could be used in a usability study. View the Low-Fi prototype

Usability study: Findings

I conducted two rounds of usability studies. Findings from the first study helped guide the designs from wireframes to mockups. The second study used a high-fidelity prototype and revealed what aspects of the mockups needed refining.

Round 1 Findings

1

Users expressed that completion should be prioritized over sign up creation and details

2

The checkout process is too long

Round 2 Findings

1

Welcome page seems unnecessary

2

Users want a delivery option

Refining the design

● Mockups ● High-fidelity prototype ● Accessibility

Mockups

Early designs mandated the users to input their details for sign up before placing and order. But after the usability studies this feature was placed at the end of the user journey.

Before usability studies

After usability studies

Mockups

The second usability study revealed some frustration with the checkout flow. Users were impatient with the length of the process so I streamlined it accordingly.

Key mockups

High-fidelity prototype

The final high-fidelity prototype presented cleaner user flows for steak order and checkout. It also meets user needs for a pickup or delivery option View the Steak IT.

View the Hi-Fi prototype

Accessibility considerations

Used icons to help make navigation easier.

Provided access to users who are vision impaired with larger text size

1

2

Used detailed imagery for Steak offerings to help all users better understand the designs.

3

Going forward

● Takeaways ● Next steps

Takeaways

Impact:

The app helps users enjoy an easy order process and delights them with delicious steak images. One quote from peer feedback: “The app looks fun, and navigation is easy and straightforward.’’

What I learned:

During the design phase, I learned that the first ideas regardless of how good they seem is only the beginning of the process. The necessity and reliance on usability studies insight and peer feedback cannot be over emphasized!

Next steps

Conduct more user research to determine any new areas of need.

Conduct another round of usability studies to validate whether the pain points users experienced have been effectively addressed.

1

2

● User research

● Personas

● Problem statements

● User journey maps

● Paper wireframes

● Digital wireframes

● Low-fidelity prototype

● Usability studies

Using the completed set of digital wireframes, I created a low-fidelity prototype. The primary user flow I connected was to place a steak order so the prototype could be used in a usability study.

View the Low-Fi prototype

● Mockups

● High-fidelity prototype

● Accessibility

● Takeaways

● Next steps

The app helps users enjoy an easy order process and delights them with delicious steak images.

One quote from peer feedback: “The app looks fun, and navigation is easy and straightforward.’’

During the design phase, I learned that the first ideas regardless of how good they seem is only the beginning of the process.

The necessity and reliance on usability studies insight and peer feedback cannot be over emphasized!