E-commerce · UI/UX · Responsive Web
Cheers Mate
E-commerce Website
- Client
- Cheers Mate
- Role
- UI/UX & Graphic Designer
- Tools
- Figma · Illustrator
- Scope
- Responsive E-commerce
Overview
A playful Australian brand, built into a complete shopping experience.
Cheers Mate is an e-commerce brand offering custom merchandise inspired by Australian beer culture and Aussie slang. The website was designed to bring that personality into a clean, intuitive shopping experience across desktop and mobile.
Challenge & Goals
Make the brand feel fun.
Make the shopping feel effortless.
Easy to browse
Create a clear structure for exploring a growing range of merchandise.
Personality without clutter
Use the playful brand identity without compromising e-commerce usability.
Responsive by design
Build a consistent purchase journey across desktop and mobile layouts.
Information Architecture
Structuring the store
A simple hierarchy keeps product discovery, purchasing and account management easy to understand.
Shopping Flow
From discovery
to checkout.
The primary flow focuses on keeping the path to purchase, familiar and direct.
- Home
- Shop
- Product
- Add to cart
- Checkout
- Success
Wireframes
From rough ideas
to refined interfaces.
Early sketches helped define content hierarchy, layout and key shopping interactions before moving into the final visual design.
Home
Shop
Visual Direction
Playful brand.
Clean interface.
Logo
- #FABA25
- #F7F5E6
- #313131
- #FDFEFF
Colour palette
Rubik
(Header + Body)
Sansita One
(Buttons)
Selected Component
UI Elements
Key Design Decisions
Designed around
the moments that matter.
01/ Product discovery
Product-first browsing
Large imagery, restrained cards and simple categories keep attention on the merchandise.
02/ Purchase
Clear purchase actions
Options, quantity and cart actions are grouped together to make the next step obvious.
03/ Continuity
Quick cart access
The cart drawer lets shoppers review their selection without losing their browsing context.
04/ System states
No dead ends
Empty, confirmation and failure states provide clear feedback throughout the experience.
Responsive Design
One experience. Every screen.
Layouts were adapted rather than simply scaled, prioritising product imagery, actions and content differently on smaller screens.
Final UI
The complete Cheers Mate experience.
Outcome & Reflection
A complete e-commerce concept built from brand to checkout.
The project brought together brand direction, responsive interface design and a complete set of shopping states into one consistent system. The final design established a strong digital direction for Cheers Mate while strengthening my approach to designing scalable e-commerce experiences.
Have a design project in mind?
Currently taking on web and brand work for small studios and product teams. Tell me what you're making and what it needs to do.
Available for new projects
A good first email
- 01What you're making
- 02Where it stands today
- 03Timeline and budget range