Summary

Project type: Responsive Website

Industry: Restaurant / Food Service

Team: Independent project with feedback from mentor and peers

Tools: Figma, Google Forms/Sheets, Photoshop, Illustrator, Adobe XD

Background

Noodle Nirvana, a popular family-owned Asian restaurant, needed a responsive website to streamline online orders and showcase its fusion-style menu. The project involved creating a user-friendly, mobile-optimized platform that reflected the restaurant’s modern yet traditional vibe. The result enhanced customer engagement, boosted online orders, and strengthened the restaurant’s digital presence.

Problem

The main challenge for Noodle Nirvana, a newly established restaurant, was the lack of an online presence to attract and engage customers. With an increasing need for digital accessibility, they required a responsive website that would not only showcase their diverse menu but also provide a seamless ordering experience across all devices. The goal was to create a user-friendly platform to help establish their brand and drive online orders, crucial for a new business in a competitive market.

Solution

The solution was to design and develop a fully responsive website tailored to Noodle Nirvana’s needs. The website was optimized for mobile, tablet, and desktop users, ensuring a seamless experience across all devices. It featured an intuitive menu layout, easy navigation, and a streamlined online ordering system. By focusing on user-centered design and incorporating the restaurant's brand identity, the website not only enhanced customer engagement but also helped establish a strong digital presence for the new restaurant, driving orders and increasing visibility in the competitive market.

Don't feel like scrolling?

See the prototype here

RESEARCH

Methods: Competitive Analysis, User Interviews

Research Goal: The research goal for this project was to understand the target audience's behavior, preferences, and pain points when interacting with online food ordering platforms. This included identifying key user needs, such as ease of navigation, quick access to the menu, and a smooth checkout process. Additionally, the goal was to explore design trends and usability best practices in the restaurant industry to ensure the website would not only meet but exceed user expectations, leading to higher engagement and conversion rates for Noodle Nirvana.

Research Objective:

How might we create a responsive website that simplifies the online ordering process while showcasing Noodle Nirvana’s menu, making it easy for customers to navigate and place orders across all devices?

Competitive Analysis

. Competitor 1: Panda Express

Strengths:
- User-friendly, responsive website with clear navigation.
- Easy-to-use online ordering system with quick checkout.
- Strong branding and visual appeal that reflects the restaurant’s identity.
Weaknesses:
- Limited customization options for orders.
- High dependency on third-party delivery services, which may affect user experience.
Opportunities:
- Enhancing customer loyalty through exclusive in-house offers or discounts.
Threats:
- Large scale chain with established customer base and robust marketing efforts.

2. Competitor 2: Wagamama

Strengths:
- Modern and visually appealing design that reflects the brand’s authenticity.
- Strong mobile optimization with a focus on quick menu access and delivery options.
- Effective use of social proof (reviews, testimonials) to increase trust.
Weaknesses:
- Clunky navigation when switching between sections like the menu, locations, and offers.
- Website feels somewhat cluttered, especially on mobile devices.
Opportunities:
- Simplifying the user journey to make the ordering process more streamlined.
Threats:
- International presence with a loyal customer base, which poses a significant challenge for new competitors.

3. Competitor 3: Pho Restaurant

Strengths:
- Clean, minimalist design that’s easy to navigate.
- Strong focus on menu images, which enhance the visual appeal of the dishes.
- Well-integrated online ordering system.
Weaknesses:
- Limited accessibility options, such as language support or ADA compliance.
- Lack of unique branding elements, making the site feel generic.
Opportunities:
- Adding more personalization features like customer profiles or saved orders.
Threats:
- Known for consistent quality, making it a reliable choice for users, which could divert potential Noodle Nirvana customers.

Key Takeaways for Noodle Nirvana:

Strengths to Leverage:
- Focus on creating a visually striking and clean design that highlights the restaurant’s unique offerings.
- Ensure a seamless, intuitive online ordering experience, especially for mobile users.
Weaknesses to Address:
- Ensure the website provides a balance between simplicity and functionality, avoiding clutter while offering easy navigation.
Opportunities for Noodle Nirvana:
- Develop a responsive, visually appealing website with an easy-to-use ordering system.
- Focus on local SEO and personalized customer experiences, such as user profiles and order histories, to encourage repeat customers.
- Highlight the freshness and authenticity of the food, appealing to health-conscious and food-savvy customers.
Threats to Monitor:
- Competitors with established brand loyalty and greater marketing resources.
- Large-scale chains offering similar dishes with competitive pricing and delivery options.

In-Person Interviews

Using a structured script of prepared questions, I conducted one-on-one interviews with five potential users. Each interview was recorded and transcribed into a Word document for future reference. This process allowed me to gather key insights and identify recurring themes among the participants.

During the interviews, I maintained an open and unbiased approach in my responses. Participants were selected based on the age obviously, the participants were all 60+ and had to use the smartphone.

Total Participants: 15
Ages: 18 - 40

Learnings:

Users want quick, affordable, and satisfying meals with diverse flavors, healthy options, and a vibrant dining experience that fits their busy lifestyles and social preferences.

In-Person Interview Transcripts

Affinity Map Insights:

1. Convenience is King
Users prioritize a fast, easy-to-navigate website that simplifies the ordering process. Features like minimal clicks to complete an order, clear pricing, and group ordering options are highly valued, especially by busy professionals and students.

2. Customization is Crucial
There is a strong desire for menu flexibility. Users appreciate the ability to customize their meals to fit dietary preferences (e.g., vegan, gluten-free) or health goals (e.g., low-sodium, high-protein). This customization helps cater to diverse customer needs and encourages frequent orders.

3. Health-Conscious Dining
Health-conscious users expect clear labeling of healthier menu options and ingredients, including the ability to substitute with healthier alternatives. Highlighting nutritional benefits and fresh ingredients appeals to this audience.

4. Mobile-Friendly Experience
A large proportion of users, especially younger ones, order on-the-go via mobile devices. Therefore, having a mobile-friendly, responsive design is essential for capturing this segment. A slow or complicated mobile experience could drive potential customers away.

5. Visual Appeal and Social Engagement
For users who value aesthetics and social dining, the website’s visual design plays a critical role. High-quality food photography and a stylish design not only enhance the browsing experience but also encourage social sharing, making the website and the restaurant more “Instagrammable.”

6. Affordable Pricing with Added Value
Price-sensitive users, particularly students and young adults, want affordable yet satisfying meals. Offering competitive pricing, loyalty programs, and promotions can significantly increase customer loyalty, drawing in repeat visitors.

Link for Affinity Mapping

Persona

From the themes that emerged, I then formed three personas to represent potential users for this product.

User Personas Identification: Utilize interviews and affinity mapping techniques to discern various user personas. Analyze behavioral patterns, preferences, and requirements of users efficiently.
User Personas Creation: Craft detailed user personas based on identified patterns. Each persona represents a distinct user type, highlighting their characteristic traits and behaviors.
User Understanding: Acquire in-depth insights into user demographics through persona analysis. This facilitates a comprehensive comprehension of diverse user profiles within the healthcare app domain.
Personalized Design and Development: Implement user personas as a foundation for designing and developing the app. This approach ensures the app's alignment with specific user needs and preferences.
Targeted Product Enhancement: Concentrate on user personas to enhance the app's functionality for its intended users. By catering to these personas, the app becomes more adept at addressing various healthcare requirements effectively.

Link for Personas

HMW provide more customization options to cater to diverse dietary needs and preferences?

Project Goals

To support informed design decisions for the app, it was essential to thoroughly reassess and reinforce the project's objectives based on my extensive research findings. Clearly defining and aligning these goals is vital to ensure that every design choice is intentional and focused on fulfilling the specific needs of the target audience. This approach guarantees a cohesive, user-centric app that effectively addresses pain points while enhancing the overall user experience.

DESIGN AND PROTOTYPE

User Flow

I mapped out the key flows for the site to visualize how users would navigate through the design. This process helped me identify previously overlooked complexities.

I recommend clicking the image to visit the link to view the detailed flowchart, as it is too intricate to include in the case study.

Link for the detailed flows

Scenario 1 : Vicky has to order a ramen bowl but he is a vegetarian so he choose to make his own bowl and order online and decides to pick up the order in the restaurant.

Sitemap

sitemaps play a crucial role in structuring and organizing content, providing a clear visual representation of the site’s hierarchy and navigation flow. They help designers plan the user journey by outlining how users will access and interact with different sections of the website. Additionally, sitemaps facilitate communication and collaboration among team members, ensuring a shared understanding of the site’s structure and user experience goals.

Link for the detailed sitemap

Low-Fidelity Wireframes

After carefully mapping out the key flows, I performed an in-depth evaluation of various organizational apps to explore a wide range of design patterns for inspiration. Leveraging these insights, I began crafting low-fidelity wireframes in Figma. Through multiple iterations of critical screens, I was able to visualize and refine my concepts. These low-fidelity wireframes played a crucial role in fine-tuning the design, enabling rapid adjustments and feedback before moving on to develop the final high-fidelity wireframes.

Landing Page for the restaurant

Testimonies Page for Noodle Nirvana

Landing Page with a Live Chat feature

Branding

To encapsulate my vision for the app as a nurturing, organic space with a strong sense of community, I started by crafting a comprehensive moodboard. It included natural color schemes, soft textures, and visuals that evoke calmness and connection. The branding was thoughtfully developed to embody this vision, incorporating earthy tones, gentle typography, and harmonious imagery to create a warm and inviting user experience. The aim was to design an app that feels like a sanctuary, fostering both comfort and a sense of belonging among users. Every branding detail was designed to align with the core values of mindfulness, wellness, and community, ensuring that users feel supported and connected throughout their experience.

High-Fidelity Wireframes

Establishing Visual Style: Developed a visual style and principles centered around simplicity and tranquility.
Creating High-Fidelity Wireframes: Translated visual elements into refined high-fidelity wireframes through an iterative process, saving each version for future reference.
Incorporating Feedback: Actively sought and integrated feedback at each stage, continuously refining the wireframes to achieve a high level of satisfaction.
Starting with Low-Fidelity Sketches: Began with low-fidelity sketches to quickly explore and test various ideas and layouts.
Progressive Detailing: Gradually added visual design elements, interactions, and precise alignments, evolving the wireframes into a polished representation of the final product.
Prototype Development: Once satisfied with the high-fidelity wireframes, moved on to prototype development for rigorous usability testing, ensuring the design effectively meets user needs.

Landing Page with Live Chat feature

FINAL DESIGN

Final High-Fidelity Wireframes

After conducting peer reviews of my UI and UX, I validated the features already in place while making a few refinements based on valuable insights. The feedback reinforced the effectiveness of the existing design, with only minor adjustments needed, such as fine-tuning color contrasts, slightly increasing text sizes, and refining navigational elements to enhance usability.

Additionally, I made small tweaks to features to ensure they were even more intuitive and user-centric. This iterative review process confirmed that the designs were already well-optimized while allowing for subtle improvements to further enhance inclusivity.

After thorough testing and validation, these refinements were finalized, preparing the designs for the next phase of development.

Link for the Final Design