Challenge: Creating a web-page for HenRay App to extend it for web-users. Again, the aim is to enable users to 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: Tab on the design for the app and extend it for the web as look and feel. but as interacting with the web is somehow different, this should be tackled right.
Project duration: 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
Site map
Starting the Design
Paper wireframes
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
Mobile Version:
Desktop Version:
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
Mobile:
Desktop:
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 Responsive Web:
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
Comments