Yaum Noodles Website
Yaum Noodles, which translates to 'Eat’ Noodles in Khmer, proudly operates as a food truck in Jacksonville, serving authentic Cambodian cuisine.
Users can conveniently browse through the menu, place their orders with ease, and receive timely updates on the food truck's current location.
Role: UX/UI Design, Visual Design
Tools: Adobe XD, Figma, Photoshop, Illustrator, InDesign
Overview
In the city of Jacksonville, it is difficult for older, minority-owned businesses to compete with restaurants that have the budget for an online ordering system. Business can easily decline because customers consistently choose convenience over other factors. That is why its imperative for restaurants to provide online ordering system, especially now in this post-COVID time.
Research
I wanted to understand users’ pain points as they interact with a food truck’s online ordering system. After doing competitive research and conducting interviews, I’ve determined the 3 pain points users encounter:
Unknowingly ordering from an inconvenient location
Calorie information unavailable
Lack of food accommodation preferences
Creating a user persona provided me with a concise overview of the individuals I was designing for. It prompted me to consider how the site integrates into their daily lives and what features could be made. By envisioning ideal experiences, I honed in on their mindset and actions before delving into the details of UI.
I conducted research to explore the food truck arena in Jacksonville, analyzing the variety of offerings and competition in the market and focusing on their online presence.
For branding, I crafted a mood board meticulously curated to reflect the rich Cambodian aesthetic, with a primary focus on authenticity to honor the culture and heritage. The aim was to inspire individuals and foster cultural appreciation by seamlessly integrating these elements into the design
Ideation
That food truck offered a unique experience by allowing customers to customize their noodle bowls. I delved into the flow and information architecture, mapping out the happy path users would take to navigate through the customization process seamlessly.
Once I understood the flow I created wireframes starting with the mobile view and then desktop view.
I opted for an online ordering site rather than a mobile app, a strategic decision, informed by the phenomenon known as "app fatigue." This term, coined by developers, highlights the growing reluctance among users to download additional apps due to feeling overwhelmed. Given the smaller scale and limited budget of the food truck business, an online ordering site emerged as the optimal solution.
Design Solution Phase 1
The home screen prominently features a clear call-to-action (CTA) inviting users to view the menu. Below this, users can easily identify the current location of the food truck. Upon clicking the button, users are directed to the menu section where they can either customize their noodle bowl or select appetizers, facilitating a seamless ordering experience.
In the checkout cart, the top location indicator confirms your ordering location, ensuring users are in proximity to the food truck that moves to different locations daily.
Validation and Feedback
Addressing the feedback gathered from testing the Yaum Noodles ordering interface with friends revealed several key areas for improvement. Below are the identified issues and potential strategies for resolution:
1. Lack of Clear Visual Feedback on Selection
Problem: Users found it confusing when selecting a broth, as there was no clear indication that their choice had been registered.
Solution: Implement more distinct visual cues for selections. This can include changing the color of the selected option, adding a checkmark icon, or animating the selection to provide immediate and clear feedback to the user.
2. Insufficient Affordance for Error Correction
Problem: The interface did not intuitively allow users to correct mistakes or revert to a previous step, leading to frustration.
Solution: Introduce easily accessible "back" or "undo" buttons at each step of the selection process.
3. Buttons Too Small and Close Together
Problem: The small size and proximity of buttons made it difficult for users to accurately make selections, particularly on touch screens.
Solution: Increase the size of buttons and ensure adequate spacing between them, following best practices for touch targets. This adjustment will enhance accessibility and reduce user error.
4. Lack of Quick Menu Filtering Capability
Problem: Users needed a more efficient way to navigate and filter through the menu to find items quickly.
Solution: Implement a dynamic search function with filter options that allow users to narrow down choices based on categories. Providing a clear and user-friendly filtering system streamlined the selection process, improving the overall user experience.
Addressing these pain points with thoughtful design solutions will not only alleviate user frustration but also enrich the interactive experience, encouraging repeat usage and positive word-of-mouth for Yaum Noodles.
Design Solution Phase 2
It went back to the drawing board and based on the feedback made improvements to the design.
While the food truck has limited menu offering, I still want to provide convenience. Therefore, I included tabs that categorizes the menu, allowing customers to swiftly navigate through their desired items. This feature caters to those looking for more than just main dishes, enabling them to quickly find their preferred selections without the hassle of scrolling and searching.
Expanding the modal to occupy the entire screen was a strategic decision to optimize screen real estate and enhance user interaction. This adjustment allowed for larger buttons, improving the overall usability of the ordering process. By maximizing the modal's size, we ensured that users have a clearer and more intuitive interface, making it easier for them to navigate and engage with the ordering system
To enhance user experience and accessibility, clicking on an appetizer now enables customers to add multiple items to their carts or customize each item according to their preferences. Originally, the checkboxes were represented by blocks of color, which could pose challenges for users with color blindness. In response to this, I've also implemented a visual checkmark to clearly indicate the selection of each item. This improvement ensures that all users, regardless of color vision, can easily identify their chosen items in the ordering process.
Takeaways
Designing this site has been a valuable learning experience. It prompted me to consider edge cases and accommodate users who may not always follow the typical user journey. One aspect I'm particularly focused on is addressing any accessibility issues within the UI. While I did take color blindness into account during the app design phase, I'm committed to continuously improving accessibility to ensure a better user experience for all.
Screens and features in the works:
Build out the filters option to accommodate people with special diets.
Payment screen for users who do not want to pay in person
Saved favorites for repeat orders