Brio
Brio
Designing a visually compelling and seamless
online store for young guitar enthusiasts
Designing a visually compelling and seamless online store for young guitar enthusiasts
Designing a visually compelling and seamless online store for young guitar enthusiasts
An e-commerce site for a conceptual electric guitar brand. Designed to feel modern, easy to use, and accessible for young music lovers.
An e-commerce site for a conceptual electric guitar brand. Designed to feel modern, easy to use, and accessible for young music lovers.
Team
Team
Team
Co-designed with
Quoc Huy Anh (Alex) Nguyen
Co-designed with
Quoc Huy Anh (Alex) Nguyen
Co-designed with Quoc Huy Anh (Alex) Nguyen
Duration
Duration
Duration
3 weeks (Sept - Oct 2022)
3 weeks (Sept - Oct 2022)
3 weeks (Sept - Oct 2022)
My Role
My Role
My Role
User research, Branding, Wireframing,
Product Design, Prototyping
User research, Branding, Wireframing,
Product Design, Prototyping
User research, Branding, Wireframing, Product Design, Prototyping
Tools
Tools
Tools
Figma, Adobe Photoshop
Figma, Adobe Photoshop
Figma, Adobe Photoshop
Defining the Problem
THE CHALLENGE
Buying a guitar online is tough. You can’t try it out, feel it in your hands, or ask questions like you would in-store.
Buying a guitar online is tough. You can’t try it out, feel it in your hands, or ask questions like you would in-store.
PROBLEM STATEMENT
How might we…
help users feel confident about choosing a guitar they’ll love without trying it in person?
help users feel confident about choosing a guitar they’ll love without trying it in person?
help users feel confident about choosing a guitar they’ll love without trying it in person?
DESIGN OPPORTUNITY
Build a bold and stylish e-commerce site that reflects Brio’s brand, makes products easy to browse, and helps users feel confident in their purchase.
Build a bold and stylish e-commerce site that reflects Brio’s brand, makes products easy to browse, and helps users feel confident in their purchase.
Build a bold and stylish e-commerce site that reflects Brio’s brand, makes products easy to browse, and helps users feel confident in their purchase.
Process
A three-week sprint required rapid iteration from research to high-fidelity design.
A three-week sprint required rapid iteration from research to high-fidelity design.
Defined goals and user needs
Built brand identity and art direction
Mapped out key pages and user flows
Designed mid to high-fidelity wireframes
Developed a functional prototype in Figma
Defined goals and user needs
Built brand identity and art direction
Mapped out key pages and user flows
Designed mid to high-fidelity wireframes
Developed a functional prototype in Figma
Final Product
Home
Home
Introduces the Brio brand and highlights key guitar collections and bestsellers.
Introduces the Brio brand and highlights key guitar collections and bestsellers.
Menu
Products
Products
Lets users browse all guitar models and explore details about each one.
Lets users browse all guitar models and explore details about each one.
Account
Account
Allows users to sign in, manage orders, wishlist, and personal information.
Allows users to sign in, manage orders, wishlist, and personal information.
Search & Cart
Search & Cart
Checkout
Checkout
Where users confirm their purchase and enter shipping and payment information.
Where users confirm their purchase and enter shipping and payment information.
Artists
Artists
Showcases Brio’s partnered musicians and the specific guitars they play.
Showcases Brio’s partnered musicians and the specific guitars they play.
Takeaway
This project was a good reminder that done is better than perfect.
This project was a good reminder that done is better than perfect.
With a tight deadline and a small team, I had to let go of pixel-perfection and focus on usability first. That shift actually made the design stronger. Everything became clearer, more practical, and easier to use.
With a tight deadline and a small team, I had to let go of pixel-perfection and focus on usability first. That shift actually made the design stronger. Everything became clearer, more practical, and easier to use.
Next Steps
Moving forward, real user feedback will be key to making Brio even better.
Moving forward, real user feedback will be key to making Brio even better.
We didn’t get to run user testing, so we leaned on design best practices and a clear vision. If I kept going, I’d test the site with real musicians to improve the flow, check what info they still needed, and make sure the experience felt right .
We didn’t get to run user testing, so we leaned on design best practices and a clear vision. If I kept going, I’d test the site with real musicians to improve the flow, check what info they still needed, and make sure the experience felt right .
Next Project
Next Project
Next Project
Pupwiz
Pupwiz
AI-powered dog behaviour tracking app
AI-powered dog behaviour tracking app
