KIMBAP NARA
Timeline:
-
8 weeks (2024)​
Role:
Korean Cuisine Restaurant Website
aims to make customers easily accessible to those who wish to enjoy their meal, by providing its menu, reviews, find its location, and learn more about the restaurant.
-
UX/UI Design
-
User Research
Tools:
-
Figma
-
Trello
-
MS Excel
Project Background
As part of the UX/UI design team for the project, my teammate and I designed and prototyped Kimbap Nara's first digital platform. From concept to completion, we established the design system, iterated on the website structure, and refined multiple versions based on user feedback. The goal was to create an intuitive and engaging experience that highlights the restaurant's unique offerings. The project spanned three months, during which we worked closely with stakeholders to align the design with business objectives. The website was launched in October 2024.
Problem
Users want quick access to key details—menu, hours, contact info—and an overview of the restaurant's offerings when planning a visit to a Korean restaurant. This helps them make informed decisions, feel confident about their dining choices, and easily plan their visit without confusion or uncertainty about what to order.
Project Goal
How might we help customers easily explore Kimbap Nara's offerings and enhance their dining experience?
​​
Based on our research, we identified a gap between existing restaurant websites and customer expectations. Currently, people are looking for a platform where they can seamlessly browse the menu, find restaurant details, read authentic reviews, and feel connected to the restaurant's story. Our goal is to bridge this gap by designing an intuitive and engaging website that provides a smooth and informative experience.​
Empathize
Desk Research
-
Understand customer needs and expectations.
-
Access the ease of navigation and usability.
-
Determine visual design preferences.
-
Explore accessibility and performance preferences
Why are existing Korean restaurant website resources?
Analyzing competitor websites for Kimbap Nara reveals common trends like visually appealing designs, easy-to-navigate menus, and information. However, each site tends to focus on one or two features - such as reservations or reviews.
​
Interestingly, in observing these features, there is an opportunity for Kimbap Nara create a more integrated, user-friendly experience that combines all these elements into a platform.
Define
Persona
Based on insights from user research, I developed two personas for the Kimbap Nara website project: a new to Korean cuisine and an experienced diner. The goal was to create a seamless dining experience that catered to both first-time customers and those with a deeper appreciation for Korean food. I prioritized new customers as the primary persona, focusing on designing an intuitive interface and clear navigation. This approach ensured the website was accessible and inviting, allowing users to easily explore the menu and learn more about the restaurant.
Ideate
Sitemap / User Flow
With a clear understanding of user needs and the website's key goals, I focused on designing intuitive navigation and efficient task completion for Kimbap Nara. The website centers around three main capabilities:
​
-
Learning about the restaurant
-
Exploring the menu
-
Finding contact information​
​
To achieve this, I developed a sitemap and user flow to outline how users would interact with the website. One of the main challenges was mapping out user flows that streamlined key tasks, such as locating the restaurant or browsing menu categories. This process involved understanding user behavior and creating clear decision points to make these tasks seamless and intuitive.
Design & Prototype
Low-fidelity Wireframes
To design an intuitive user experience for the Kimbap Nara website, I created low-fidelity wireframes for the key pages: Home, About Us, Menu, and Contact. These wireframes focused on clear navigation, visual hierarchy, and user needs.
​​
-
The Home Page offers an overview with quick navigation to core sections and includes customer reviews to build credibility.
-
The About Us Page tells the restaurant's story, featuring visuals, core values, and mission statement to convey its identity.
-
The Menu Page organizes dishes into clear categories, making it easy for users to browse options.
-
The Contact Page displays the restaurant's location, hours, and contact details, ensuring users can easily find or reach out to the restaurant.
​
These wireframes prioritize simplicity, clear navigation, and accessibility to create a seamless user experience.​​
Design System
while developing the design system, I focused on creating a vibrant and approachable aesthetic that reflects the restaurant's welcoming and lively atmosphere. The restaurant owner provided the logo, which features a playful and recognizable depiction of kimbap, reinforcing the brand's identity.
​
I built the visual system using a bold primary color from the logo and a cheerful secondary color to evoke warmth and energy. I also chose Montserrat and Open Sans fonts to balance modernity with legibility, ensuring that the typography supports a clean, inviting experience throughout the website.
Hi-fidelity Wireframes
Test & Implement
Iterations
Home Page:
​
Many users struggled to find key sections like the menu and contact information, due to unclear navigation and low-visibility call-to-action buttons.
​
-
Added a video from the owner in the hero section to create a more engaging welcome.
​
-
Improved visual hierarchy with clearer headings, buttons, and spacing.
​
-
Upgraded the menu layout with high-quality food images for better engagement.
About Us Page:
​​
-
Refreshed imagery with warm, personal photos of the owners and restaurant interior to create a stronger emotional connection.​​
​
-
Optimized layout by rearranging text and images for a more balanced, easy-to-read, and visually appealing design.​
​Contact Page:
​
-
Removed the contact form to simplify the page and streamline user interactions, focusing on direct methods like phone and email.
​
-
Improved the layout by increasing the size and prominence of contact details, ensuring users can quickly find essential information.
Menu Page:
​
Initially, the Menu Page was designed with separate pages for each category. However, users feedback revealed that navigating between different pages felt inconvenient and disrupted the browsing experience. To improve usability, I applied the following changes:​
​
-
​Consolidated the menu into a single page to provide a seamless browsing experience.
​
-
Implemented scroll navigation, allowing users to click on categories and automatically scroll to the relevant section, making it easier to explore the full menu.
​​
Conclusion
This project was a valuable experience in leading a UX/UI design process from start to finish. As a part of design team, I had the opportunity to explore various design options and iterate based on user needs, but I also had the responsibility of handling every design aspect, from wireframing to prototyping. This experience helped me develop a more comprehensive understanding of digital product design, beyond just aesthetics, focusing on user flows, accessibility, and engagement strategies.
​
Additionally, working closely with stakeholders, including developers and restaurant owners, allowed me to improve my communication skills. I learned how to present and justify design decisions effectively, ensuring that business goals and user experience aligned seamlessly. This project reinforced the importance of collaboration and iterative design in creating a meaningful digital experience.
Next Steps
The next steps will involve conducting additional user testing to gather more feedback, ensuring the site continues to meet user expectations. Further enhancements could include integrating an online ordering system and maintaining the site for users and stakeholders.
Project Takeaways
Going into the Kimbap Nara website project, I faced several challenges. How can the website provide a seamless experience for users exploring the menu, learning about the restaurant, or getting in touch? How do I balance clear navigation with an engaging visual design? How do I ensure the design reflects the authenticity of the restaurant while addressing user needs? Despite these challenges, I thoroughly enjoyed the process of designing user flows, iterating on wireframes, and conducting user research.
​
Some project takeaways:
​
-
Prioritize clarity and simplicity: A clear layout and easy navigation help users find what they need quickly and effortlessly.
-
Embrace iteration: User testing highlighted areas for improvement, such as consolidating the menu onto a single page for smoother browsing.
-
Balance aesthetics with function: Thoughtful imagery and design elements maintain brand authenticity while improving usability.
-
Make interactions effortless: Using familiar design patterns helps reduce cognitive load and creates a more intuitive experience for users.
​
​
