Intenso Coffee Roasters
Local Coffee Brand
E-commerce Web UI
Project introduction
A Brand Transformation
Intenso Coffee Roasters is a reputable Vietnamese brand in the specialty coffee industry, offering full-service coffee solutions.
In 2024, they decided it was time for a fresh start: rebranding the company and rethinking their overall direction. Part of that shift included stepping up their online presence. Until then, they had mostly relied on social media and e-commerce platforms like Shopee to connect with customers.
But with the brand growing and evolving, it made sense to create a proper home online. So, they started building a new website – a space where people can learn more about their story, explore their coffee offerings, and connect with the brand more directly and meaningfully.
Project Workscope:
– Examine the business needs and the benefits of website development for the brand growth
– Propose visual and development direction of the new website
– Design the e-commerce userflow
– Design a new web UI follows new branding guideline
– Responsive adaptation for mobile
A little dive deep
Project Analysis
Business Painpoints
- Limited brand control & storytelling
- No central hub for business inquiries and community building
- Fragmented customer experience
- Limited data collection, analytics & customer insights
Website Solution
- The Brand’s Digital Home that offers centralized brand experience
- Build for both Retail & Wholesale
- Streamlined E-commerce Journey
- Streamlined CMS management
What have been done
Design Direction
Design Approach
- Design Concept: VINTAGE MENU x SWISS GRID
- Inspired by classic coffee menu design style combined with modern grid design system
- Characteristics: Modern, Flat, Minimal, Visible Grid Line
Development Direction
WordPress with Woocommerce : for cost-effectiveness, integration and future scalability.
Web Sitemap & Userflow
- Examine client’s brief and sitemap request
- Research e-commerce customer journey
- Research Woocommerce workflow
Design Assets
Color Palette
Branding
Gradient
Base
Neutral
Typography
AVERIA SERIF LIBRE
Heading, Sub-heading, Body copy
Regular, Italic, Bold
PENTASTIC
Campaign title, Brand moment, Special moment
Regular
Illustration
Making use of various brand illustrations in high quality vector format to maintain a unique brand feel.
Note: These illustrations are not drawn by me.
Final Design
Intenso Coffee Website UI
Homepage
About Us
Wholesale
Shop (Product List)
Product Detail
Check-out – Success
News (Blog)
News Article
Contact Us – Purchase Instruction
Experience in Figma Prototype
Instruction:
Click on screen to find flashy hint for available interactive elements
Hit [R] or click on [Restart button] at the bottom right corner
For full screen view, click on the expand icon at the top right corner
Thank You For Reading!