Restaurant Library App
Role: UX Research, UX Design, UI Design
Skills: Qualitative Analysis, Sketching, Prototyping, Usability Tests and Interview
Duration: June - August 2021
Project Type: CSS 480 Principles of Human-Computer Interaction
Overview
As a group project, we worked from conceptualizing to prototyping an app. We focused on the fact that during the pandemic of COVID-19, there were not only food delivery applications such as Uber Eats and Door Dash, but also restaurants' own delivery applications such as McDonald's delivery app. While these apps that enable online ordering are of high added value in a world where eating out is restricted under the pandemic, the use of each app and the way of ordering are different, making it complicated for users to manage them. We came up with and designed the Restaurant Library app to centrally manage those user experience.
Goals
Through this project, we aimed to examine fundamentals of human perception, human cognition, attention and memory constraints; rapid prototyping, user-centered design techniques, and design evaluation methods through designing the app.
Process
Although we did not actually develop, release, or maintain the app, the project mainly followed a typical application development process.
-
Defining the application concept
-
Defining functional and non-functional requirements, and creating user case stories
-
Stage 1 Prototyping (Lo-fi Design)
-
User Interview
-
Stage 2 Prototyping (Hi-fi Design)
-
Evaluation and discussion
In Prototyping Stage 1, we had several ideas of what functions to focus on in creating the app or how much additional functionality to reproduce. Based on the results of the User Interview and research, we decided to create an application that enables online ordering, specializing in an interface that unifies various delivery applications. Interviews were conducted during the prototyping process (after Prototyping Stage 1), and the results were very effective in helping us to refine the design and make it unique during Prototyping Stage 2. Each process and its details are described below.
1. Defining the application concept
Many apps for restaurants are independent of each other, which makes the user's home screen cumbersome. They also take up a lot of storage space. Moreover, it is inconvenient to search and organize individual apps.
We aimed to solve all these problems for users by integrating them and allowing them to browse through a simple and organized interface. It is designed to meet the needs of frequent smartphone users who prefer to order food online rather than in person.
To do this, we researched and evaluated a total of 20 similar and existing delivery order apps.
Evaluation Criteria:
-
Menu organization
-
Deals/point system clarity
-
Error exceptions
-
Convenience
-
Affordances in the app
-
Navigation between pages in the app
-
Payment method
-
Ability to order on app (delivery, takeout, in person)
-
Visibility
-
Consistency
-
Familiarity
-
Affordance
-
Navigation
-
Control
-
Feedback
-
Recovery
-
Constraints
-
Flexibility
-
Style
-
Conviviality
2. Defining functional and non-functional requirements, and creating user case stories
Examples of functional requirements
01.
Search and Retrieval:
The system shall allow for keyword searches for food items, food ingredients, restaurant names, etc., and shall display a drop-down suggestion list of available/possible field attributes as the user enters them.
02.
User Information Storage:
The system should allow users to create their own accounts where they store personal information such as payment information and shipping addresses.
03.
Organizing “Favorited” Restaurants and Foods:
The system should allow users to group restaurants and foods.
Examples of non-functional requirements
01.
Product Requirements:
Usability - Ensure that users know and understand how to access the restaurant interface within 5 minutes of using the app for the first time.
Dependability - System downtime should not exceed 5 seconds daily.
02.
Organizational Requirements:
Development - Java 11 will be the official programming language used by our team.
03.
External Requirements:
Regulatory - The system must be accessible to people with disabilities in accordance with the Americans with Disabilities Act of 1990.
User Case
3. Stage 1 Prototyping (Lo-fi Design)
In order to brainstorm and create more design options, we started the design process with a rough sketch with low fidelity. We tried to keep the design as simple as possible, and included illustrations to help users understand the app at a glance, regardless of nationality. Several members sketched out the design of a restaurant application with QR functionality.
A persistent navigation bar at the bottom of the screen allows easy access to the main parts of the app. It also includes a calendar for the reservation function.
-
Order, Reservation, Delivery, and Pickup options
-
QR menu scan
-
Explore and search functions
4. User Interview
We conducted a user survey to verify the functionality and the simple operation based on the sketch plan. Seven members of the other team were surveyed using Google Forms, using the following methods.
-
Short Answer Questionnaire.
-
Guttman Scale
-
Likert Scale
-
Guilford
The criteria table shows our evaluation items,
their definitions and methods.
We provided 3 types of the prototype (prototype A, B, and C), and I was in charge of the prototype A.
Some of the results of the survey are listed below.
5. Stage 2 Prototyping (Hi-fi Design)
Based on the results of the survey, we narrowed down the requirements of the design that needed to be improved and which features to focus on, and made a sitemap. This phase of the design funnel process involved the entire team. In this phase, the entire team worked together on the Design Funnel Process (10+10 method and PACT analysis) to design the final prototype.
We wanted many of the features of the app to be easily recognizable and intuitive to the user, so each page of the app focuses on a single concept, making the data large and easy to read. Errors are highlighted and recommended remedies are given whenever possible. Below is the page design I was primarily responsible for.
Home
-
It displays your favorite restaurants and favorite menu items.
-
The icons can be divided into folders to organize the home screen according to the user's needs.
-
A persistent navbar at the bottom of the screen provides easy access to key parts of the app.
Restaurant Page
-
If a restaurant already has its own interface for the app, we will load them in our app.
-
This will allow users to continue to access favorite buttons and other features of the app.
User Page > Order Page
-
Displays a greeting message with the user's name and profile picture (if the user has already registered).
-
Links to other pages and functions such as "Account", "Order History", "Privacy Settings", "Country and Language", "About Us and Help", and "Sign Out".
-
In the Order History page, you can view your order history by date and check the details.
-
In the Order Details page, users can select and reorder.
Explore Page
-
Based on the user's search and purchase history, the app will display restaurant recommendations, foodstuff recommendations, and rankings.
-
This will encourage users to continue using the application.
Sitemap
6. Evaluation and discussion
We discussed important HCI concepts, summarized the theories we referred to, presented the final design, and evaluated the app. As explained at the beginning, our design integrates a number of different apps and adds additional functionality to maximize user convenience and smooth operation in a comprehensive manner. Using QR codes, users can not only view the menu and ordering information of each restaurant, but also use identification and special offers. On the other hand, there are some issues that need to be addressed, such as the need to integrate various apps to ensure consistency, and the need to further test and improve the system to ensure that it does not confuse users. However, after considering all these factors, the design of this app received the first grade out of 8 groups in the class.
Next Steps
As mentioned in the 6. Evaluation and discussion phase, this app is based on the premise that it can be connected to the interface of each delivery app. In addition, the functions such as the order page were the same as those of general delivery apps, and we thought that we could have added some unique functions to make the design innovative.
As an example, the addition of the gift/donation feature and its UI design are listed below.
Home (with the gift/donation feature)
This is a feature that allows users to send items in the app as gifts to friends and family, or donate them as donations to those in need. It has its own area on the home screen, but you can also select them from the drop-down menu on each restaurant's menu page. For example, in the gift feature, users can select other users to whom they want to send the gift.
When the donation option is selected, the user will be prompted with a message about confidentiality (the recipient's information will not be disclosed in the case of donations), and then a pop-up message for each option will be displayed and the user will be directed to the menu page.
.jpg)
Header (with the gift/donation feature)
Users can see which option they have selected in the header.
.jpg)
Takeaways
We experienced the importance of always putting the user first and not lacking "knowledge" and "iteration" in order to do better design. In the early stages our app idea was a bit vague and covered a wide range of functional requirements. However, through user surveys, all the members gained a deeper understanding of the user needs. Each time we repeated the design process using various methods, the concept was narrowed down, and we felt that we were able to narrow down specific design elements that focused on the user experience.
In this project, I learned about sketching techniques to generate various ideas, prototyping to express them effectively, and the research and psychology of design. There are many great performing systems out there that are designed to achieve the user's goals, but in order to get the most out of them, it is important to fully understand how people will use the service and design it. I want to design the ultimate harmony between humans and technology, and enrich the lives of people around the world by utilizing my experience of understanding diversity, taking a multifaceted approach to things, and deepening my knowledge of technology with constant curiosity.
Let's Get
Social
