Account access
Create an account and log in to reach a personal profile and account data.
ATLGrub
WEB DESIGN · FRONT ENDFind your next local favorite.
- Role
- Lead Front End Developer
- Team
- 5 developers
- Duration
- 6 weeks
Overview
A 6-week, 5-person team project to build an Atlanta restaurant finder from assigned user stories. As lead front-end developer, I created task flows, low and high fidelity wireframes, and brand direction in Figma and FigJam, then built the interface in HTML and CSS. We brought the front end and Google Maps API together in a functional website.
User Stories
The assignment defined five areas of the experience. These stories served as our design objectives.
Restaurant search
Search by name, cuisine, or location and narrow results by rating and distance.
Map exploration
Explore restaurants on an interactive map and select a marker to open restaurant details.
Restaurant details
Compare the information that matters including cuisine, contact details, Google ratings and reviews, plus a route to directions.
Favorites
Save places for later and revisit favorite restaurants from the profile.
Research
Reference Review
We reviewed the Google Maps restaurant-search experience to understand how search, map results, and restaurant information work together on a web platform.
SearchHow people enter a query and narrow their options.
Map resultsHow locations help people compare nearby places.
DetailsHow ratings, reviews, and contact information support a choice.
Ideation
Task Flow
As a group, we mapped the actions and screens involved in finding a restaurant on a web platform. We considered the different routes a person could take through search, map results, and restaurant details before choosing a place, as well as account access and saving favorites.
The diagram helped us connect those routes before translating them into screens.
Prototyping
Low Fidelity Wireframes
I used low fidelity screens to position search, results, restaurant information, and the map around the choice of where to eat.
Testing
Map Integration
Our checks focused on bringing the Google Maps API and the HTML/CSS interface together in a working web layout.
- Google Maps APIThe map experience within the restaurant finder.
- HTML & CSSThe interface surrounding search, results, and the map.
- Integrated BuildChecking that the map worked within the combined web layout.
Technical integration checks. This project did not include a formal usability study.
Location in the interface
Final Product
I created the high fidelity wireframes in Figma, defining the brand direction, typography, spacing, and component styling. I then translated the interface into HTML and CSS, working with the team on Google Maps integration.
DISCOVERY
Search & Details
Restaurant information and the map share the screen, keeping location in view while people compare ratings, cuisine, reviews, and contact details.
RETURN VISITS
Saved Places
Favorites sit beside account details, giving saved restaurants a place within the personal profile.
Account Access
Supporting screens carry the same brand language through login and registration.
Takeaways
- Design for responsiveness. Building an end-to-end interface showed me how Figma auto layout supports more realistic, responsive designs.
- Integrate earlier. Combining screens near the end exposed mistakes we could have caught sooner.
- Keep design and development connected. Daily team check-ins helped bridge design intentions with implementation constraints.