Personal project · 2025 · Web design exploration
Designing an interactive coffee experience
Designing a coffee experience that blends visual storytelling, interaction, and playful motion.
Overview
Creating a structure around storytelling
I wanted Brewzilla to feel like more than a coffee website, so I used visual storytelling to guide users through the brand. From the first impression to exploring the coffee and discovering the café, each section builds a simple and engaging story.
The combination of imagery, typography, content, and motion helps create a warm brand experience while keeping the journey easy to follow.
Problem
Creating more than just a static coffee website
For this project, the challenge was not based on a real business problem. Instead, I wanted to explore how a simple coffee brand could be presented through a more engaging digital experience.
I wanted to move beyond static layouts and experiment with how typography, imagery, interaction, and animation could work together without making the website feel overwhelming.
The goal was to create a website that feels natural to explore while giving the brand a distinct visual personality.
Research
Exploring leading coffee brands and their digital experiences
I explored several coffee and café websites to understand how leading brands present their identity, products, and overall experience. I studied their visual language, storytelling, navigation, interactions, and content structure to understand what works well and what could be improved.
I also looked at common patterns and drawbacks across these websites. These findings helped me define a direction for Brewzilla that feels more interactive, visually engaging, and distinctive.
Design
Bringing the Brewzilla experience to life
The final design combines a warm coffee-inspired visual direction with clean layouts, strong typography, and carefully selected imagery. The focus was on creating a consistent visual identity that feels modern, inviting, and easy to explore.
I used Figma for the interface and visual system, Photoshop for refining visual assets, and Framer to bring the design to life. I experimented with scroll animations, hover interactions, transitions, and responsive behaviour to make each interaction feel purposeful and connected to the content.
Outcome
A portfolio designed to grow with the work
The final experience provides a flexible foundation for showcasing product design, websites, and future projects. It combines detailed storytelling with a scalable system that supports ongoing updates without sacrificing consistency.
More importantly, the project reinforced the value of designing systems rather than individual pages. By focusing on structure, hierarchy, and maintainability, the portfolio became more than a presentation tool—it became a framework that can continue evolving alongside my work.
