Pegasus Coffee E-Commerce Website
Pegasus Coffee E-Commerce Website
Refreshed and modernized a local coffee shop's Shopify site with Framer and other web applications.
User Research
User Research
Pre-Production
Coffee shops are a cherished part of the creative industry, visually evolving 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-type makeover. But how should the shop's digital presence be transformed?
To my surprise, coffee shop e-commerce web design has been investigated in 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, builds trust, and increases buying interest (1). From a design perspective, this can be achieved by presenting product information prominently,
Coffee shops are a cherished part of the creative industry, visually evolving 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-type makeover. But how should the shop's digital presence be transformed?
To my surprise, coffee shop e-commerce web design has been investigated in 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, builds trust, and increases buying interest (1). From a design perspective, this can be achieved by presenting product information prominently, surrounded by enticing visuals, while maintaining strong visual cohesion across the site.
Guided by this research, I designed Pegasus’s website to not only highlight their menu and specials but also reflect their 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 their 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
surrounded by enticing visuals, while maintaining strong visual cohesion across the site.
Guided by this research, I designed Pegasus’s website to not only highlight their menu and specials but also reflect their 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 their 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
User Flow
Pre-Production
When constructing a user flow, I like to focus on circularity. Every page should point the user to another relevant page, thereby increasing an e-commerce site's revenue through web traffic. By designing a circular user experience, users can effortlessly locate related content.
Style Guide
Style Guide
Pre-Production
Wireframes
Pre-Production
Usability Testing
Production
A critical aspect of web design is the usability testing phase. In this project, I made use of an AI plugin from Figma named Aidentic. It scrutinizes spacing between text and objects, making sure the design is logical to end-users. I also went beyond usability tests and checked whether the user flow aligned with the website's content. While evaluating the prototype through this perspective, I aimed at streamlining user interaction with the website's
content by utilizing responsive web elements. Meanwhile, Aidentic identified other issues in my preliminary design. It detected irregularities in the distribution of text and spacing. To rectify this, I introduced a more conventional interface and implemented the sharing and user flow from the earlier prototype.
Usability Testing
Production
A critical aspect of web design is the usability testing phase. In this project, I made use of an AI plugin from Figma named Aidentic. It scrutinizes spacing between text and objects, making sure the design is logical to end-users. I also went beyond usability tests and checked whether the user flow aligned with the website's content. While evaluating the prototype through this perspective, I aimed at streamlining user interaction with the website's content by utilizing responsive web elements. Meanwhile, Aidentic identified other issues in my preliminary design. It detected irregularities in the distribution of text and spacing. To rectify this, I introduced a more conventional interface and implemented the sharing and user flow from the earlier prototype.
Final Product
Final Product
Post-Production
Get In Touch
Get In Touch
Multimedia
Web Designer
Daisy Bell
Framer 2024
Multimedia
Web Designer
Pegasus Coffee E-Commerce Website
Refreshed and modernized a local coffee shop's Shopify site with Framer and other web applications.
User Research
Pre-Production
Coffee shops are a cherished part of the creative industry, visually evolving 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-type makeover. But how should the shop's digital presence be transformed?
To my surprise, coffee shop e-commerce web design has been investigated in 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, builds trust, and increases buying interest (1). From a design perspective, this can be achieved by presenting product information prominently, surrounded by enticing visuals, while maintaining strong visual cohesion across the site.
Guided by this research, I designed Pegasus’s website to not only highlight their menu and specials but also reflect their 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 their 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
Pre-Production
When constructing a user flow, I like to focus on circularity. Every page should point the user to another relevant page, thereby increasing an e-commerce site's revenue through web traffic. By designing a circular user experience, users can effortlessly locate related content.
Style Guide
Pre-Production
Usability Testing
Production
A critical aspect of web design is the usability testing phase. In this project, I made use of an AI plugin from Figma named Aidentic. It scrutinizes spacing between text and objects, making sure the design is logical to end-users. I also went beyond usability tests and checked whether the user flow aligned with the website's content. While evaluating the prototype through this perspective, I aimed at streamlining user interaction with the website's content by utilizing responsive web elements. Meanwhile, Aidentic identified other issues in my preliminary design. It detected irregularities in the distribution of text and spacing. To rectify this, I introduced a more conventional interface and implemented the sharing and user flow from the earlier prototype.
Final Product
Post-Production
Wireframes
Pre-Production