Oodles Noodle Bar
Web Concept | Role: Product Designer
Problem: Food ordering flows often lack the brand personality and customization to keep users engaged. Stronger visuals can drive better business outcomes.
Research
Oodles Noodle Bar is a noodle restaurant concept that seeks to bridge a playful brand personality with clean, accessible web design.
In my research, I was inspired by traditional blue and white china for the color palette and was drawn to asian illustrators and influences to transform a traditional noodle house into a fun but modern brand.
For this product concept, I wanted to focus on a purely web experience geared towards discovery, but specifically what a customized online ordering flow for a “build your own” bowl could look like for this brand.
Competitive Analysis / User Flow
I compared the sites of two potential competitors in my neighborhood: Noodle St. and Woon. I documented the information architecture of their sites and noted the design elements I thought were successful, as well as design decisions that I wanted to avoid in the Oodles experience.
In my user flow, I focused on the user navigating specifically to order online and place a custom build-your-own order. While I don’t show every potential outcome in my prototype, it was important in this process to understand all the choices a customer could make.
Low fidelity / Design system
Once I had my flow finalized I wireframed and built out the design system and components. I had a look and feel in mind but also wanted to ensure that the brand identity was strong, while keeping usability and clarity at the forefront.
High fidelity designs
After several iterations, I designed the home page, and online menu page with brand elements, photography, and a finalized logo with illustrations. These pages wouldn’t be fully prototyped in Figma but are important steps for customers to reach the custom ordering flow.
Prototyping
The prototype visually ties in the “build your own” concept with illustrations and creates a playful way to track your order progress. Each line item populates and users have a clear breakdown of what they’re paying for as they progress. What’s often presented as a practical step is made more playful and stimulating.