Visual identity first
IDENTITY · NAVIGATION
Use large imagery and editorial typography to express the band’s character while keeping navigation direct and readable.
01
Key design screens
Short walkthrough of the homepage, about flow, events, and future member layer
Cinematic homepage hero and identity direction
Event-ready structure for live dates and practical navigation
Future member layer explored as a secondary system concept
About page combining band identity, editorial layout, and member overview
02
Overview
Los Baby Jaguars is a personal MVP created for a real band. The experience combines a strong visual identity with clear navigation across the band story, members, events, and evolving content.
Personal MVPBand WebsiteUX/UI DesignProduct DesignResponsive UI
03
Problem
Create a distinctive band website that feels expressive and immersive while keeping essential content easy to find and navigate.
- Translate the band’s identity into a coherent digital experience rather than a generic music template.
- Balance large imagery and editorial typography with clear navigation and content hierarchy.
- Structure the MVP so real band information can evolve while future features remain secondary.
04
Ownership and scope
I independently shaped the product direction, UX/UI, visual system, and functional MVP.
- Defined the initial product idea and prioritised the MVP content and navigation.
- Designed the visual direction, page hierarchy, responsive layouts, and interaction patterns.
- Built the working MVP through a vibe-coding workflow and connected it to Supabase.
- Scoped membership and payment concepts as possible future features rather than current functionality.
05
Key design decisions
Core content first
MVP · CONTENT
Prioritise the band story, members, and events as the core MVP experience before adding secondary functionality.
Future features later
FUTURE · SCOPE
Keep membership and payments outside the main flow until they become validated needs.
06
Process
01
Define the MVP
Shape the product idea, core content, and first navigation priorities around the band’s current needs.
02
Build the visual direction
Translate the band’s identity into imagery, typography, composition, and responsive layouts.
03
Structure the experience
Organise the band story, members, and events into clear pages and browsing paths.
04
Build and refine
Build the working MVP through vibe coding and refine the experience as the project evolves.
07
Experience structure
The MVP organises identity, core band content, and future scope into a simple experience structure.
01
Identity
Imagery, typography, and composition establish the band’s visual character.
02
Core content
Band story, members, events, and gallery form the main browsing experience.
03
Future scope
Membership and payment concepts remain outside the current MVP flow.
08
Constraints and trade-offs
Expressive identity, clear navigation
The visual direction needs to feel distinctive without making essential content harder to find.
Working MVP, evolving scope
Real band content is still evolving, while membership and payment concepts remain outside the current release.
09
Design outcomes
Distinct visual direction
Creates an editorial, image-led experience that reflects the band’s character.
Clear content hierarchy
Organises the band story, members, events, and gallery into direct browsing paths.
Working MVP foundation
Provides a functional base for real content updates and future scope decisions.
10
Tools and methods
Define the MVP
Product framingContent prioritiesNavigation structure
Build the visual direction
Visual directionEditorial typographyResponsive UI
Build and refine
ReactSupabaseAI-assisted development