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.
Playful brand elements with an easy to use interface
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 playful asian inspired illustrations with modern whimsy.
I designed a bold wavy logo that would visually tie this all together and be illustration forward and recognizable.
Oodles stands out by being highly customizable and unique to each user.
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, and how they could be made more playful.
In my user flow below, 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.
Utilizing all the design ingredients
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 simplicity at the forefront. Thin light headers paired with bold rounded buttons are meant to visually illustrate all the variations in the vast world of noodles.
Finalizing your friendly neighborhood noodle site
After several iterations, I designed the home page, and online menu page with brand elements, photography, and a finalized logo with illustrations. While these pages wouldn’t be fully prototyped in Figma, they are important steps for customers to reach the custom order flow.
Now we’re cooking with sauce: tracking your bowl building prowess
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.