Wireframes
Designing an app is a journey that starts with understanding the user—and for my project, Foodie Quest, that meant diving into wireframes. After mapping out the user flow and defining how people would interact with the app, I identified three core components: creating and managing lists of restaurants, embarking on a “quest” with progress tracking and recommendations, and journaling experiences. These components became the backbone of the app experience and guided every design decision that followed.
I began with low-fidelity wireframes, sketching out the basic layout and interactions without worrying about aesthetics. These early sketches helped me visualize the app structure and refine the flow. From there, I moved into high-fidelity wireframes, where I could start bringing the app to life while keeping the design consistent with the Foodie Quest brand. The goal was to reflect the app’s fun and upbeat personality through soft, approachable design elements.
Everything from the rounded corners of cards and buttons to the warm, compact images and pill-shaped filters ties back to this playful brand voice. Even the icons echo the logo’s badge-like, rounded aesthetic, keeping the visual language cohesive throughout the app.
Color was another important consideration. While the wireframes are largely black, white, and grayscale to maintain clarity, pops of color highlight key interactions. For example:
Map pins light up when selected
Hearts turn the brand’s signature red when a restaurant is saved
Filters highlight in different colors when toggled
Progress bars adopt colors from the brand palette
Patterns are used sparingly—primarily on the main opening screen—so as not to overwhelm the experience but still add a touch of personality.
Here’s a quick walkthrough of some of the main screens:
Home Screen: The first point of entry prompts users to log in or sign up. Once inside, you can see your quest progress at a glance, explore recommended restaurants, and access your default saved list. The map allows searching by location or restaurant name, and you can toggle between map and list views for convenience.
Restaurant Interaction: From the map or list, users can explore restaurant details, add places to their lists, leave notes or reviews, and save favorites—all while keeping the interface clean and approachable.
Profile Page: This is where the quest truly comes together. Users can track progress, review their badges, see saved restaurants, and jot down experiences in the journal. Journal entries can include text and images, giving users a simple but meaningful way to document their culinary adventures. Users can also create multiple lists tailored to dietary preferences or location.
Working through these wireframes has laid a strong foundation for the next stage: building the interactive app prototype. By focusing on flow, brand consistency, and user engagement, the Foodie Quest experience is shaping up to be both fun and functional, giving users an easy and enjoyable way to discover, track, and celebrate their food adventures.
