Ghost Coffee is a coffee roaster and cafe looking for a responsive web page for its product list. This project focused on designing visual consistency across all devices for customers to search and quickly filter products out. From custom illustrations to consistent layouts across devices to evoke familiarity with the brand and overall customer experience.
Summary
Ghost Coffee is a coffee roaster looking for a responsive web page for its product list. This project focused on designing visual consistency across all devices for customers to search and quickly filter products out. From custom illustrations to consistent layouts across devices to evoke familiarity with the brand and overall customer experience.
Summary
Summary
Ghost Coffee is a coffee roaster looking for a responsive web page for its product list. This project focused on designing visual consistency across all devices for customers to search and quickly filter products out. From custom illustrations to consistent layouts across devices to evoke familiarity with the brand and overall customer experience.
Ghost Coffee: E-commerce Product List
Responsive design flow to find your favourite coffee faster
Ghost Coffee: E-commerce Product List
Responsive design flow to find your favourite coffee faster
Branding
Created a custom logo and icons for a cohesive design system and echoed the misty green colour palette throughout.
The galaxy theme was created for consistency in the products presented on each screen.
Low-Fidelity Wireframe
Building the responsive prototypes began with laying out the mobile page, which became the foundation for the tablet and desktop screens. Prioritizing that the customer experience was consistent throughout each device by following the visual hierarchies established in the mobile prototype.
Prototype
Prototype
Low-Fidelity Wireframe
Building the responsive prototypes began with laying out the mobile page, which became the foundation for the tablet and desktop screens. Prioritizing that the customer experience was consistent throughout each device by following the visual hierarchies established in the mobile prototype.
High-Fidelity Wireframe
The focus was designing responsive product images and key filter buttons to ensure the customer journey on the product list page was consistent across platforms. The overall design intent was to be light and minimal to allow the product images to shine.
Micro-interactions
Results & Takeaway
This responsive product list showcased the ability to streamline product information across digital platforms through consistent layouts and visual hierarchies to further the customer experience with the brand. Exploring the option to include a secondary view via mobile/tablet with a swipe function on the product image would be a point to develop this project. Ghost Coffee now has a home to host its various coffee products to provide a positive experience for its customers to shop.
Micro-interactions
Created a custom logo and icons for a cohesive design system and echoed the misty green colour palette throughout.
The galaxy theme was created for consistency in the products presented on each screen.
Prototype
High-Fidelity Wireframe
The focus was designing responsive product images and key filter buttons to ensure the customer journey on the product list page was consistent across platforms. The overall design intent was to be light and minimal to allow the product images to shine.
Results & Takeaway
This responsive product list showcased the ability to streamline product information across digital platforms through consistent layouts and visual hierarchies to further the customer experience with the brand. Exploring the option to include a secondary view via mobile/tablet with a swipe function on the product image would be a point to develop this project. Ghost Coffee now has a home to host its various coffee products to provide a positive experience for its customers to shop.