Ugly Bagel Site
Project Overview
Our mission was clear: craft a web experience that mirrored the fun and excitement of biting into one of Ugly Bagel's delicious offerings. The primary focus? Channeling users seamlessly towards the online ordering platform, Toast, while also ensuring a visually delightful and user-friendly presentation of the mouthwatering bagel menu. From brainstorming in Adobe XD to the final flourish within Webflow, every step was an exploration of fun, flavor, and functionality.
My Role
Research
Site Map + Wireframes
UX/UI Design
Art Direction
Development
Step 01: Sitemap
Of course the first step of this project was to research the standard experience for other similar food and beverage businesses. From this research we were able to gather our take-aways and establish a sitemap that felt clean and easy to use (because when you’re hungry for a bagel, you need to be able to order that stat).
Step 02: Wireframes
Upon establishing the sitemap, our team then moved into creating wireframes of the site. This helped further establish the flow of the site and allowed us to audit section types, ensuring a clean user experience.
Step 03: Design & Develop
The design of the site was heavily influenced by the fun elements established in the brand system (which I also had the pleasure of directing). The site is first and foremost mobile-friendly, as most users ordering food are doing so from their mobile device. Each section is purposeful and easy to read, making it of great use to users of all ages.
I also had the privilege of direction the product photography alongside the team at Digital Love Studio in Nashville. The photo compositions were crucial in elevating the site design.
This site was developed by a coworker, Sean Powell, and myself using Webflow.
