HenRay App with Figma

Challenge: Creating an app that let users Place orders to be picked on-the-go which will affect users who need to spare more time for other activities in their day by Having their orders ready at their preferred time.

Solution: An interface that enables the user to place his/her order online and chose the time that he would like to collect it at.

Project duration: Feb. 2023 – Mar. 2023

My Role: In this project, I played all parts: lead UX designer, UX researcher, Designer, ..etc

Responsibilities: I played all parts throughout the project: user research, wireframing, prototyping, …etc.

Understanding the User

User research: summary

I had some interviews and created some empathy maps to help me understand users I’m designing this app for and to know their needs. One primary user group identified through this research was the busy people as they need more free time to do other things than cooking or waiting for their orders to be ready.

This user group indicated that they are would like to be able to spend as much of her non-work time as possible on her hobbies and personal life. In addition, they would like to have an easier and efficient way to order food to pick up on-the-go. Finally, they need to have the ability to add their usual orders so that they can just click on time and reorder.

User research: pain points

The research showed that there are main four (4) pain points

Personas

User journey map

Starting the Design

Paper wireframes

Digital wireframes

To ease the experience, previous orders that the user tend to order are listed on the main page with the ability to directly pick and order. In addition, the user can tick other items and add to his order.

Two different ways to set the pick-up time. This gives a good luck and great functionality. The time will show in green if the time is enough to have the order ready and in Red if not.

Low-fidelity prototype

The workflow usually starts with the user opening the app and choose the location of the restaurant that he would like to order from and pick the order on-the-go. after that the user will choose the items either from the menu or from his previous orders. after that, he needs to check his order confirm it. Next, he will specify the pick-up time and then checkout.

Check the low-fidelity prototype in action

Usability study: findings

Two unmoderated usability studies were held remotely with the participants being Users that tend to place online orders more than two times a week and each one lasted for 50-60 minutes per participant. during the two studies, the users were asked to perform tasks on the prototypes (first one lo-fi and second one on hi-fi)

Refining the Design

Mockups

Early designs had add button that is when clicked will add one order of that item. I replaced that button with an Add – X + button with the ability to add multiple orders of the same item. I have also added the wight of the meal

The Early design had only the clock way to set the pick-up time. Another way to set time was added based on the revealed frustration during the feasibility study. In addition, the redundant location pickup menu was removed.

High Fidelity Prototype

The final High-fidelity prototype presented cleaner user flows for ordering food to pick on-the-go. it also met user needs for re-ordering previous items and the ability to customized the order

View the HenRay App:

Web Mobile

Accessibility considerations

Going forward

Takeaways

Impact: " this is one of the greatest designs I've seen for a restaurant; I really liked it. Way to go“ ~Anob

What I learned:I have learned a lot out of these courses starting with the empathizing with users and understanding their pain points, defining user needs using problem statements, and coming up with lo-fi and hi-fi prototypes. I became an expert in figma and I will use it a lot in my future