Responsive Web Design for a Local Coffee Shop

Daisy Bell

Web Designer
UX Designer
Framer Designer
Framer
Shopify

Overview of Brand

In this project, I redesigned the e-commerce website for a local Seattle coffee shop, transforming its online presence by integrating a modern coffee shop aesthetic with subtle animated web elements, a streamlined web flow, and a clean web experience. The website was built and refined using Framer.

User Research

This section is really academic, so if that's not your flavor of inspiration, it's recommended to skip it...

Coffee shops are a cherished part of the creative industry, evolving with visual trends almost as quickly as Instagram. While Pegasus has been a staple of the Seattle coffee scene, its digital and physical footprints could benefit from a Queer Eye-style makeover. But how should these two presences be transformed?
To my surprise, coffee shop e-commerce web design has entered the realm of academic research. A 2023 study from Atma Jaya Catholic University in Indonesia found that coffee shop websites should prominently feature menus and specials to boost marketability. By doing so, coffee shops can stand out from competitors. The study describes these sites as a 'forum' to 'promote, store, and provide information,' which helps potential customers feel more informed, build trust, and increase buying interest (1).
From a design perspective, this can be achieved by presenting easily accessible product information alongside enticing visuals and maintaining strong visual cohesion across the site. Guided by these research insights, I designed Pegasus’s website to highlight its menu and specials and reflect its unique personality and values. By prominently featuring product information alongside vibrant imagery, the site emphasizes Pegasus’s dedication to sustainable sourcing and the artistry behind its coffee flavors. This approach ensures that customers are not only informed but also inspired by the story behind each cup, creating a seamless connection between their digital experience and Pegasus' commitment to quality and ethical responsibility.
1 Sidabutar, G. D. G. E., Seah, J. A., & Singgalen, Y. A. (2023). Analysis and design of web-based information system for coffee shop management using design thinking methodology. Journal of Information Systems and Informatics, 5(1). https://doi.org/10.51519/journalisi.v5i1.455

User Flow

In the creation of a user journey, my focus is on circularity. Distinct website sections should narrate the brand's story while directing the user to sought-after products. Moreover, the unique character of the brand should shine on a web platform, either through blog posts or responses to product reviews. However, this can also link back to revenue generation. Essentially, circularity enhances a user's experience, allowing them to effortlessly locate related web content.

Style Guide

Final Deliverables

Partner With Daisy
View Services

More Projects by Daisy