Home
Product Overview
About the Product
DiscoverEats is a mobile app designed to help users find locally-owned eateries. It includes an innovative “chooser” feature to help those who are undecided choose a place to go for a bite.
My Role
UI designer on the DiscoverEats team, responsible for creating wireframes and the low- and high-fidelity prototypes. I also led the team on the brand and visual design for the app. Our team consisted of myself, project manager Jennifer Gardner, developer Humberto Messeguer, and QA engineer Myles Waite.
The Problem
Users needed a way to cut through all the soulless chain restaurants and ghost kitchens, to find a locally-owned restaurant and get reviews, photos, the menu, and more. Users also needed an automated way to help them choose where to go when they can’t decide.
The Goal
Design a locally-focused app with great search features that will showcase relevant information about local restaurants. Design a feature that will automatically help users choose a place to go from a preset list when they’re feeling undecided.
Design Process
Starting the Design
I started the design for DiscoverEats with digital wireframes in Adobe XD. The focus for our design was to create ways to easily discover restaurants through search or by browsing. I chose to go with a toolbar-style nav at the bottom for easily reachable access to the app’s main features.
I connected the digital wireframe screens according to our user flow to create a low-fidelity prototype in Adobe XD. We used the prototype in our user tests to evaluate the design for usability.
I created a design system in Adobe XD to make creating mockups and high-fidelity prototypes efficient and scalable. It contains reusable elements that already have the correct colors, fonts and styles. This helped me avoid rework, especially when going through design changes for different iterations of the product.
After user testing with the low-fidelity prototype was complete, it was time to apply the brand colors and fonts, and add realistic text and images to the designs to create these high-fidelity mockups.
Finalizing the Design
The mockup screens were connected to create a high-fidelity prototype. The DiscoverEats prototype is special because it's nonlinear. You can access multiple user flows while you're using it. This gets us as close as possible to a real, native application running on the user's device.
Key Takeaways
DiscoverEats turned out as a fun and elegant way to check out the local cuisine. Users commented that they enjoyed the friendly and colorful design of the app, and that they love the Chooser feature for when they can’t decide what to eat.
While designing DiscoverEats, I discovered a lot of new ways to design interactions in Adobe XD. I had a lot of fun creating animated, interactive UI elements like sliding scales, switches, checkboxes, and buttons.
- Conduct an accessibility-centered usability study to ensure that the unique features of DiscoverEats are usable for individuals with disabilities.
- Conduct more user research to find out if the app can be expanded to other options like delivery.
Back to Top