.png)
A responsive web design and food ordering system for a local business.
Duration:
April 2024 • 4 Weeks
Role:
End-to-end UX/UI Designer
Redesigning this food truck's online presence involved enhancing its digital experience. This included redesigning its website and implementing a seamless online ordering
system for the local establishment cocktail bar.
Problem
The home page is hard to read and the menu is not optimized for mobile users. Additionally, the online ordering system is inactive, leading to missed sales opportunities and customer frustration.
Responsibilities
UX Researcher
UX/UI Designer
Prototyping/User Testing
Solution
Redesigning the home page for both mobile and desktop platforms and reviving the online food ordering process to improve the user experience, ultimately driving more sales.
Tools
Figma
Whimsical
Google Suite
Zoom
Hungry for More
To understand user needs, I conducted interviews with Caddywampus customers and uncovered a demand for a cleaner, more intuitive interface and a seamless ordering process. Additionally, I analyzed competitors to identify best practices for online food ordering systems.
4 out of 5
Interviewees stated they do not visit a food vendor’s website menu if they cannot place an order directly through the site.
3 out of 5
Interviewees stated that poor UX/UI on a website can deter them from visiting the establishment in person.
Patron's Pain Points
Based on my research and interviews, the user persona represents a social and tech-savvy person who values a seamless, intuitive online ordering experience and clear, accessible menu information.
How might we...
Enhance the credibility of the website?
Provide information that helps users make informed decisions?
Implement an efficient online food ordering process?
Brand Consistency
The goal was to maintain customer recognition by utilizing the establishment's existing branding as much as possible. However, the logo was updated to better reflect the brand's playful themes and to improve accessibility while maintaining the existing color scheme.
.png)
Cooking Up Ideas
I created three lo-fidelity wireframes for mobile and five for desktop, exploring different options for the website homepage redesign, the food menu, and the checkout screen.
Mobile
Desktop
Most initial testers preferred a landing page to a single-page menu, as they primarily visited the website to view the menu or order food, and this simplified the process.
Digesting the Results
Five users tested existing designs and provided feedback, particularly on the footer and menu.
One user mistakenly attempted to order an item that appeared on multiple menus from the incorrect menu.
Three users noted that the home page's call-to-actions were clear and easy to navigate.
5 out of 5
Task Completion Rate:
All testers completed tasks on both desktop and mobile.
4 out of 5
Easy to Use:
Most testers found the website easy to navigate, but some confusion arose around the different menus.
4 out of 5
Error Rate:
One tester mistakenly clicked the Happy Hour menu instead of Small Bites due to unclear instructions at the test's start.
.jpg)
A Taste of Transformation
Compare the existing Caddywampus website with the final high-fidelity designs, which showcase the improvements based on user feedback and testing.
Mobile - Home
Added fill to navigation bar for better visibility against logo
Included slogan to engage readers
Added footer to provide location information & hours
Mobile - Menu
Made Happy Hour menu appear inactive when unavailable to reduce confusion
Added hierarchy to menu for a clear CTA & noticeable prices
Included food photos since testers rely on them to make informed decisions
Additional Final Mobile Screens
The shopping cart icon reveals the draw to begin the check process.
Users input personal information while viewing selected menu items and total.
A confirmation screen displays the order number and pickup instructions.
Desktop - Home
Logo is difficult to read and not color-accessible
Added a CTA to the navigation bar to reinforce user flow
Desktop - Menu
Menu items and descriptions used the same font, making them hard to read and distinguish for users
Separated the menu into distinct sections for clarity and easier navigation for users
Desktop - Cart
Provided a review of items in the cart before prompting for payment information, allowing users to make changes
Final Bites
One challenge was keeping the project scope in mind; I initially wanted to redo the entire website, but user interviews highlighted a need for a food ordering flow, so I focused on that.
I didn't work directly with this business due to time constraints. If my designs were shared, I'd emphasize that while 100% of tested users were initially discouraged from visiting due to the current online presence, they later said the new designs would change their minds. These improvements would likely increase orders, positive user feedback, and engagement. Moving forward, I'd like to explore features like loyalty programs.
This project provided valuable experience in enhancing a small business's digital presence, underscoring the importance of user-centered design.