UI/UX Case Study: A POS Restaurant App for Efficient Order Management
Hey Folks! 👋
I’m thrilled to share my latest UI/UX design case study, a culmination of my work during the Dibimbing Batch 21 UI/UX Design program. In this project, I’ll be introducing Geena, a POS WebApp designed to revolutionize order management in the restaurant industry.
Overview
The food and beverage industry has seen a notable move towards digital order management solutions in recent years. With the growing need for efficient restaurant operations, there is a demand for a user-friendly Point of Sale (POS) Restaurant App. Hence, I intend to develop a platform called Geena POS. This case study seeks to delve into the UI/UX aspects of such an app to improve order management processes in restaurants.
Project: Geena POS
Timeline: 3 Weeks
Tools: Figma
Role: UI/UX Designer
The Process
When creating products, it is essential to have a framework in place. For this particular case, I will be utilizing the design thinking framework which includes empathy, define, ideation, prototype, and test.
Empathize
At this stage, I’ll undertake 3 primary tasks: Planning the Research, Establishing Research guidelines, and Conducting the Research. This initial process is aimed at identifying the issues with the POS App.
1. Planning the research
Objective
I aim to investigate and comprehend the cashier’s behavior when creating orders in a restaurant to develop effective strategies for order management. I am conducting an in-depth analysis to identify the root causes of any challenges faced in this process. The research objectives are as follows:
- Understand the behavior of cashier/restaurant owner when generating orders.
- Develop a user-friendly digital product that is beneficial for restaurant owners.
- Gain insights into the needs and challenges encountered by cashiers/restaurant owners while using the POS Restaurant App.
Methodology
Qualitative (Desk Research): Desk research aims to enhance comprehension of creating a digital product capable of efficiently managing restaurant orders.
Qualitative (In-depth Interview): This method is employed to gather insights into user behavior, needs, challenges, and expectations while utilizing the application.
Sample Specification
- Having experience as a cashier
- Business Owners
- Nationwide
- Women/Men
- Aged 18–60 years
Key Information Areas
Key information areas are essential topics that we aim to investigate in this research. These key information areas will serve as the foundation for generating a list of questions:
- User Profile
2. General behavior of cashier staff when using the POS Restaurant App
2. Making Research guideline
Upon finalizing the research plan, I have crafted a comprehensive research guide for executing both Desk Research and Surveys. This guide encompasses an introduction, clearly outlines the survey’s purpose for participants, presents a series of questions aligned with key information areas, and concludes the survey process.
3. Conducting the Research
During this stage, I am delving into user sentiments regarding the utilization of the POS App. The research process is conducted online through Google Meet.
Define
Research Findings
Following the completion of interviews with all respondents, the insights gathered were analyzed using the thematic method, employing affinity diagrams. This approach, commonly used in qualitative research, allows for the identification of patterns and themes within the collected data, facilitating a comprehensive understanding of the information obtained.
User Persona
A user persona is a fictional character crafted to embody the characteristics and behaviors of the target users of a product. These personas serve as a tool to concentrate on recognizing and addressing the problems encountered by users, fostering a more user-centric approach in product development.
Customer Journey Map
Problems
Based on the results of the analysis using affinity diagrams and customer journey maps, it was found 3 main problems faced by users.
- Outdated Application Appearance:
The visual design of the application lacks a modern and aesthetically pleasing look. This deficiency may impact user engagement and perception, as a contemporary and visually appealing interface is often associated with user-friendly and up-to-date technology. - Manual Table Availability Check:
Users are required to manually check the availability of tables. This process consumes a significant amount of time and effort, resulting in inefficiency. Implementing an automated system for table availability could streamline this task. - Limited Payment Methods:
The application offers only a few payment methods, limiting user choices. There is a lack of alternative options such as Ovo, QRIS, and others, which may restrict user convenience and satisfaction. Exploring additional payment options could enhance the overall user experience.
Ideation
User Flow
User flow is used to describe the overall flow of users using the product. The following is the user flow of the activities Login, Book Table, Choose Menu, Payment
Information Architecture
Information Architecture is a method used to arrange all flow, content, and design requirements in an application.
Prioritization Matrix
Wireframe
Before I created a detailed design, I made a simple outline called a wireframe. It helped me plan the basic structure and layout of the design before adding more details.
Design System
Following the creation of the wireframe, I began developing a style guide. This guide helps identify elements such as typography, color scheme, buttons, and other design components, ensuring a consistent and cohesive visual appearance throughout the project.
Mockup All Screen
After completing the wireframe, I moved on to the next step, where I created a high-fidelity design. The following is the outcome of the UI design that I’ve developed.
Prototype
Following the completion of the empathize, define, and ideate stages, I proceeded to create a Figma prototype. This prototype comprises 16 screens, illustrating the interactive and visual aspects of the design concept.
Test
Usability Testing
The final stage involves conducting usability testing. The primary objective of this User Testing (UT) is to gather valuable insights into user behavior while placing orders through the Geena POS WebApp. This study is designed to comprehensively understand user types, their behaviors, and the specific needs and challenges they encounter when interacting with the Geena POS WebApp.
Enclosed are the outcomes of the Usability Testing I conducted, with the hope that they prove beneficial. For access to the full Usability Testing report, please follow this link: [Link to Usability Testing Results].
Summary Insight + Recommendation
- Font Size for Table Numbers on the Order Menu Page:
The font size for table numbers on the Order Menu page is too small, making it difficult for users to be aware of their table numbers. - Absence of Cancel Button on the Payment Page:
There is no cancel button on the Payment page, which could assist users in canceling or exiting the payment process.
Result after feedback
After doing the UT process, I made design improvements based on the recommendations for each task.
- Font Size for Table Numbers on the Order Menu Page
2. Absence of Cancel Button on the Payment Page
Conclusion
By completing this research, I have acquired valuable insights into the intricacies of effective research planning, the functionality of qualitative research methods, strategies for recruiting respondents, and the significance of active listening during interviews. Your engagement in reading is highly appreciated!
Thank you for dedicating time to review this case study. Your comments are welcomed, and I trust that the findings shared here will be valuable for anyone interested in the realm of UI/UX design.
