UX/UI MOBILE-APp design
Mobile-app for a Japanese Restaurant
Overview
The goal was to create a user-friendly and visually appealing app that enhances the overall dining experience without the need for a conventional paper menu or waiter.
Timeline
From explorations to final designs in 3 weeks whilst working on other projects simultaneously.
Background
IKIGAI is a mobile-app for a Japanese restaurant chain. The goal was to create a user-friendly and visually appealing app that enhances the overall dining experience without the need for a conventional paper menu or waiter.
Assuming that the product would be developed, the minimum viable product would include features such as, booking reservations, personal favourites, detailed dish descriptions, and in-app checkout.
This category details the step-by-step approach taken during the project, including research, planning, design, development, testing, and optimisation phases.
Demographic
Market research was conducted to identify existing challenges and user preferences within restaurant app usage. The target users for the study were those who regularly dined at a Japanese restaurant. Participants included individuals aged 18-70, residing in metropolitan or suburban areas, and representing male, female, and non-binary identities, as well as those with disabilities.
Research Questions
What frustrations do users have when ordering from a food menu app?
What accessibility needs should be considered?
Do users admire personalisation in a food menu app?
What common challenges do users face when navigating through a food menu app?
What motivates a user to return to a food menu app?
Define
To visualise the ordering journey, user flow was created, emphasising key interactions and navigation. While Ikigai faces direct competition, it can stand out by offering a seamless in-app experience.
User personas were created to understand the target audience's needs, focusing on nutritional info, accessible design, and efficient ordering.
Further Research
Jennifer | 34 | Personal trainer
Jennifer, a 34-year-old personal trainer from London, is married with two young children. She loves dining out with her family but finds it frustrating to obtain accurate nutritional information. As a PT, her diet plays a crucial role in her training, so maintaining it when eating out is essential. Her youngest child has a peanut allergy, making detailed and precise menu information critical for their safety. With a demanding schedule, Jennifer treasures family time and strives to be fully present. A "favourites" tab in a menu app would help her feel more confident about menu options, ensuring more time to focus on her loved ones.
AARON | 21 | student
Aaron, a 21-year-old Software Engineering student at Edinburgh University, is dyslexic and processes information more effectively using screen reading technology. He finds it easier to listen at his own pace than to read. When dining out, fast-speaking waiters often overwhelm him, making him the last to order. During short lunch breaks, he avoids ordering altogether because it takes too long. Aaron would benefit greatly from a preorder system. He appreciates food menu apps that allow separate orders but struggles when they lack screen reader compatibility. Clear images, descriptive labels, and easy navigation would significantly enhance his experience.
Wireframing
After analysing user cases and mapping out the user flow, I created paper wireframes to visualise the structure. I then imported these into Figma to design low-fidelity wireframes, focusing on the primary user journey while also considering alternative paths users might take.
Testing & Optimisation
A moderated user test with five participants identified issues in the low-fidelity prototype. Findings were categorised into seven areas, with nutritional information highlighted as a key concern. Insights were organised using an affinity diagram to guide improvements in the second prototype.
A moderated user test with five participants identified issues in the low-fidelity prototype. Findings were categorised into seven areas, with nutritional information highlighted as a key concern. Insights were organised using an affinity diagram to guide improvements in the second prototype.
Design & Prototyping
A low-fidelity prototype was created with nine screens outlining the basic user flow: Launch, Home, Restaurant Selection, Table Selection, Menu, Add to Menu, Checkout, Payment, and Confirmation. The goal was to streamline the ordering process. Features like a favourites tab and nutritional information were included to test user response and inform future design decisions.
Design & Prototyping
A low-fidelity prototype was created with nine screens outlining the basic user flow: Launch, Home, Restaurant Selection, Table Selection, Menu, Add to Menu, Checkout, Payment, and Confirmation. The goal was to streamline the ordering process. Features like a favourites tab and nutritional information were included to test user response and inform future design decisions.
Design & Prototyping
The design was refined into a mockup and then a high-fidelity version, integrating feedback from the previous low-fidelity prototype test to enhance the user experience and address key improvements.
UI Elements & Branding
Visual elements, including the logo design, typography, and iconography, were refined to enhance readability and create a more cohesive and appealing brand identity.
Navigation Flow
The navigation flow was streamlined to allow users to easily move back and forth, filter options, and remove items, ensuring a more flexible and efficient experience.
Accessibility Features
Accessibility features were enhanced to improve text contrast, ensure screen reader compatibility, and provide clearer visual cues, making the app more accessible for all users.
Key Takeaways
This project has provided valuable insights that will shape the approach to future work, fostering continuous improvement and more effective outcomes. Key areas of focus include:
Expand User Outreach for Interviews and Testing
Increasing the reach to a broader and more diverse group of users for interviews and testing, ensuring that a variety of perspectives and experiences are captured to inform the design process.
Incorporate Further Iteration Phases
Introducing additional iteration phases throughout the design process, allowing for continuous refinement based on user feedback and testing results to enhance the overall product quality.
Create More Playful UI Components
Designing more engaging and interactive UI components that offer a playful and enjoyable user experience, making the interface feel more dynamic and responsive while maintaining usability.