Client

Personal

Role

UI/UX Designer

Year

2023

Duration

2 weeks

The Challenge

Creating a restaurant finder app presents a multifaceted challenge that involves addressing several key issues to deliver a seamless and user-friendly experience. Some of the challenges to consider in this case study are:

1. The app must efficiently and accurately display food hotspots based on the user's current location. Implementing a reliable geolocation system and integrating it with the app's search functionality is crucial to ensure users can find nearby restaurants easily.
   
2. Implementing a seamless and user-friendly table reservation system is essential to facilitate hassle-free restaurant bookings. The app must ensure real-time updates on table availability and provide users with confirmation notifications to eliminate uncertainties and avoid no-shows.
   

The Approach

In response to the challenges presented in this case, the approach focused on the following key elements:

1. Research and Discovery
   
2. Project Objectives
   
3. Wireframing
   
4. Visual Design
   

Research and Discovery

While searching for inspiration for my restaurant app, I explored the screenflow of Naver Maps. I was impressed by its user-friendly interface, intuitive use of colors and icons, and helpful reservation guidance. It served as inspiration for my app, and I also identified areas for improvement, like adding more filter options for better search results.

By mapping user flows, I visualized how users would interact with the app and identified potential areas for improvement. The research and discovery phase served as a solid foundation for the subsequent design decisions, ensuring that the UI/UX design was tailored to meet the specific requirements and preferences of the end-users.

Inspiration Wall

Project Objectives

1. Simplify food hotspot discovery.
   
2. Streamline table reservation process.
   
3. Provide personalized recommendations.
   
4. Enhance social experience.
   

Wireframing

After gathering inspiration and analyzing other restaurant finder apps, I proceeded with the wireframing phase. These wireframes served as rough sketches, allowing me to experiment with different layouts and elements in a straightforward manner. I aimed to visualize how everything would fit on the screen and ensure a coherent and organized design.

However, I encountered challenges as I tried to incorporate too many requirements, leading to overcomplication. Eventually, I decided to simplify the wireframes and focus on the four main requirements. This approach streamlined the process and allowed me to progress with the app's development more efficiently.

Wireframes 1.0, Low Fidelity Flow

Mid Fidelity Flow

During the development process of my restaurant finder app, I decided to create a mifi screenflow before delving into the visual design aspect. My focus was on structuring and refining the app's content rather than rushing into the aesthetics. I wanted to ensure that the text and elements were thoroughly worked out before proceeding with the visual elements. It was challenging to concentrate on the content and resist the temptation to focus solely on the appearance, but I was pleased with the outcome of my mifi screenflow. Additionally, I found it beneficial to add an extra requirement, which further enhanced the app's development process and ultimately improved the overall design.

Wireframes 2.0, Mid Fidelity Flow

The Result

Requirements incorporated in the app

• The user must quickly find a food hotspot nearby.
  
• The user should be able to reserve a table through the app.
  
• The user must receive a confirmation of the reservation.
  
• The restaurant's POS system should receive a notification of the reservation.
  
• The app should be accessible via desktop on a web browser.
  

After fully developing the mifi screenflow of my restaurant finder app, it was time to add color and style. This was an exciting part of the design process as it provided a clearer visual representation of my app. However, during the addition of form and color, it became evident that certain elements were overlooked. Fortunately, I could make necessary adjustments and improvements. Taking a step-by-step approach and working on the mifi first allowed me to better understand how my app would look and identify areas for enhancement.

High Fidelity Flow

Key Learnings

• Simplicity is Key: During the wireframing phase, it became evident that simplicity is essential for a user-friendly interface. Avoiding overcomplication and focusing on core features helped streamline the user experience and make the app more accessible.
  
• Visual Consistency: Maintaining visual consistency throughout the app and POS system enhances brand identity and user trust. Attention to color schemes, typography, and icons played a significant role in creating a cohesive and visually appealing interface.
  

Let's work together!