Project Overview
Roasted and Toasted Lakeside Coffee Bar is a locally owned coffee shop in Burlington, Vermont. The client wanted to replace its outdated website with a modern, responsive experience that would work across mobile devices, tablets, and desktops. A primary concern was improving the online ordering experience because customers had difficulty navigating the existing website on mobile devices.
I designed and developed a multi-page website that allows customers to learn about the coffee shop, browse its menu, order ahead, and find contact information. The site includes a homepage with a hero image and calls to action, an About page, a detailed Menu page, an Order Ahead page with product listings and Add to Cart buttons, and a Contact page with business information and a contact form.
The design was built around the existing Roasted and Toasted brand identity. I used the provided logo, color palette, photography, and Open Sans typography throughout the website to create a cohesive visual experience. The style tile specifies Open Sans Bold for headers, Open Sans Light for subheaders, and Open Sans for body copy.
A major focus of the project was accessibility and mobile-first design. I used the WAVE tool and an accessibility plugin to identify issues involving contrast, heading structure, form labels, and redundant links. I then made revisions to improve the site’s WCAG compliance, including correcting heading levels, adjusting colors, removing unnecessary links, and addressing image attribution issues.
Website
Homepage
Menu
About Us
Contact
Order Ahead
My Design Process
Step One: Empathize
Reviewed the client brief to understand the coffee shop’s brand, users, and need for an improved mobile ordering experience.
Step Two: Define
Established requirements for responsive navigation, accessibility, clear calls to action, product browsing, and online ordering.
Step Three: Ideate
Planned the site’s information architecture and explored ways to organize content, imagery, and navigation for a simple mobile-first experience.
Step Four: Prototype
Built a responsive multi-page website using the existing brand identity, incorporating optimized imagery, typography, navigation, and touch-friendly elements.
Step Five: Test
Used WAVE and accessibility tools to identify and address issues with contrast, heading structure, form labels, and navigation.
Design Brief
https://acrobat.adobe.com/id/urn:aaid:sc:US:0cbb5fd5-16f9-4895-86f2-6b988c98ec66
Brand Style Tile
https://acrobat.adobe.com/id/urn:aaid:sc:US:ea5bbd60-b939-419e-8541-2c3ed1327a12