Chomp
Designing and developing a modern restaurant discovery and review platform to enhance how users explore Atlanta’s food scene
Timeline
August 24 - October 24
​
My Roles
Scrum Master
Product Designer
Front-End Developer
Skills
Interdisciplinary Teamwork
Visual Design
Front-End Implementation Branding
Interaction design
Team
4 Developers
Project Overview
Chomp is a web-based food finder designed to help users explore Atlanta’s restaurant scene through features like search filters, favoriting, reviews, and an integrated map. It leverages Google APIs for displaying restaurant locations, reviews, and directions, offering a seamless, user-friendly experience. Built as part of my CS 2340 class at Georgia Tech, Chomp is focused on intuitive navigation and easy access to key features. Despite a short project timeline, we delivered a fully functional platform with a modern design.
Process
UX Flow
At the start of the project, I created a user flow chart to map out the entire journey, from logging in to writing a review. This gave us a clear visualization of how users would navigate the app, which was helpful for both designing the wireframes and guiding the developers. It ensured they knew exactly which pages to build and the functionality each one needed, like buttons and navigation.
Diagram to Code
From there, I created wireframes in Figma to mockup Chomp’s design. We then used the plug-in Anima to export them into HTML and CSS as a very basic baseline to begin modifying. While the exported code needed extensive debugging, we successfully linked the buttons and input fields to our backend functionality. For future projects, we plan to explore different frameworks like Vue or React for smoother design-to-code transitions.
Final Screens
Here are some of the final screen mockups. While time constraints meant we couldn’t implement them exactly as designed, we worked hard to stay as true to the vision as possible.
See it in action
This video showcases our final product, launched on a local server. Due to the nature of the project, the demo most focuses on functionality.
Reflection
This project pushed me to think about design in the context of development—it was my first time actually bringing Figma designs to life in code. I quickly realized how important it is to keep designs well-organized and standardized in order to make things easier for front-end adjustments.
​
Being the only designer on a team of developers taught me how to advocate for my ideas while also keeping communication open and clear. I had to be realistic about what interactions we could actually build within the time constraints. We couldn’t brand every page the way I’d hoped, but I still focused on making the design look professional wherever I could.
​
Moving forward, I’m excited to bring a more collaborative approach to future projects, stepping out of the “designer bubble” and contributing in a way that benefits the whole team!