Online Food Ordering

With different lifestyles, needs, and wants, there seems to be no time to cook, sit in a restaurant, or wait in line. Online food services create conveniences that allows for users to complete other tasks at home, at work, or anywhere of their comfort.

Overview

Many local restaurants are adapting to ordering food online that gives a platform to users where they can explore a variety of restaurants with recommended items to try.

This has become more popular and as we walk into this new norm, I have conducted a research study with three participants who shared about their experiences in ordering food online in different platform and synthesizing my finding in creating a report.

I then created an interactive prototype that allows users to customize their meal to their liking with visual content. I evaluated three participants on how they would interact with my website. Lastly, I delivered a finding and recommendation report.

 

Tools

  • Notebook/Sketches

  • Pen and pencil

  • PowerPoint slides

  • Microsoft word

  • iPhone for recording

  • Figma

Methods

  • Directed Storytelling

  • Sketched Wireframes

  • Digital Wireframes

  • Architecture Diagram

  • Interactive Prototyping

  • Usability Testing

Role

UX Designer & Researcher

Solo Project

Users

Family and Friends

Directed Storytelling

I have interviewed three users through a Directed Storytelling that allowed me to understand their lived experiences with ordering food online through other platforms.  These are individuals who are wanting something convenient and meet their needs with consistency. The usability of a functioning website is extremely important to users as they expressed their positive experience and frustration.

Based on my findings: My user group are busy individuals who wants to have an easy-to-read online menu with accurate pictures and details so that they can try new restaurants with different recommendation in the comfort of their home.

My users expressed that ordering online allowed them to stay productive, avoid crowds and interacting with others, and saving time to cook for when they’re busy or not feeling well.

Key findings:

  • Exposure to new restaurants

  • Lack of images

  • Lack of detail menu

  • Convenient

  • Time saving

  • Food progress updates

Wireframes

After understanding my users’ needs and pain points, I started hand sketching low-fidelity wireframes to organize my thoughts about the visual appearance I would like my website to appear as. I then turned this into digital wireframes, where I failed to include additional details and placeholders, but the idea here was to create a website where users can navigate from the main page to open a more detail menu where they can customize their meal. The focus was to have a functional intuitive flow that can be easily navigated at first glance.

Main focus:

  • Detail information on meal

  • Adding pictures for visual content

  • Customization options

 

An Architecture Diagram was then created to give a visual idea that maps out the flow on the components in my website. It was focused on home page function; however, my wireframes concentrated on the aspect of selecting your meal and making any customization.

Prototype

Once I identified a clear flow, I created an interactive prototype exploring my ideas from my wireframe to bring my vision to life that demonstrates functionality to the website that can impact the overall project. This was design to see how users will interact with my website that is intended to give them a chance to understand how specific navigation is supposed to work and if it does, it answers the functionality question.

Tasks

•From the main page, navigate through the website to pull a more detail menu

•Customize the meal, add sides, and beverages (minute maid)

•Choose if you would like to order for yourself or for another person

•Add the meal to your cart

•Navigating back to the main page of the online menu

Testing

The idea was not to focus on the aesthetic look of the website but to ensure users were able to easily navigate through the different pages, customizing their meal, and identifying the different icons, tools, and purposes of buttons. My main focus was to ensure detailed information and images were visible as my research users expressed the importance of visual content.

 

I conducted a Think Aloud Evaluation where I observed three participants expressing their thoughts and opinion in my interactive prototype as their feedback was the most valuable with having a functional prototype. During this usability testing, I found that the first thing my user identified were the lack of color, layout organization, and the great photos that were displayed in which impacted the user experience.

Key Takeaway

The importance of understanding current problems influenced the way how I designed this website to solve those concerns that my first three users expressed. After completing the usability testing, several issues were brought to my attention such as creating identification information to ensure accurate flow consistency, ensuring font sizes are readable to all users, and having features that are prominent enough to spot but doesn’t overshadow the flow of the website.

Next Steps:

Looking ahead, I want to dedicate my time in building user flow, intuitive navigation functions, and visibility consistency. This will enhance my website for users to comprehend information.