Hobie Music E-commerce UI Design (Figma)

Mason Price

Hobie Music E-commerce UI Design (Figma)

🧠 Project Overview

Client: Hobie Music
Industry: Music & Alternative Fashion Retail
Scope: UI/UX design for desktop and mobile (Figma)

🎨 Design

Handmade, cut-and-paste visual style inspired by zines and fan culture
Mixed-media art direction, combining nostalgic and edgy aesthetics
Clean and intuitive navigation layered with creative flourishes
Custom styling for key categories like "Band Collabs" and "Anime Drops"
Full mobile and tablet optimization with unique layouts and filter UX

πŸ›  Development

Figma-only deliverables for a WordPress + WooCommerce build
Product pages include zoomable galleries, stylized descriptions, and cross-sell sections
Mega menu with multi-column layout and band visual callouts
Account section redesigned with fan-club style tiles and gamified UX
All screens designed responsively with thumb-friendly mobile layouts

🀝 Our Role

We led the full creative direction of the Hobie Music e-commerce redesign, capturing their DIY spirit and subcultural roots. Working exclusively in Figma, we designed every screen β€” from product grid to account dashboard β€” with personality and performance in mind. The result is a design system ready for implementation, giving Hobie a bold new face for their digital storefront.
Homepage features alternate color options with fun, bold palettes for an eye-catching first impression
Homepage features alternate color options with fun, bold palettes for an eye-catching first impression
Dropdown menu bar with organized categories, making navigation easy and intuitive
Dropdown menu bar with organized categories, making navigation easy and intuitive
Clean and simple product page layout designed to streamline the shopping experience
Clean and simple product page layout designed to streamline the shopping experience
Bold color footer showcasing strong branding with a prominent logo presence
Bold color footer showcasing strong branding with a prominent logo presence
Mobile view featuring fun purple tones and a layout optimized for a smooth user experience
Mobile view featuring fun purple tones and a layout optimized for a smooth user experience

🌟 Client Review (from Behance)

"We communicated a lot through Telegram, and they really took the time to understand my brand and create a unique design that reflected it perfectly. They used the time efficiently and delivered high-quality work. I couldn’t recommend a team more than them. I’m extremely happy with the final product and would definitely work with them again in the future! Price and final product totally worth it!!"
- Diego Morales Jimenez

πŸ” Check Out our Other Projects:

Noodle Cat Coin (Framer Development)
Alta Advisors | Finance Site ( Framer Design & Development )
Zamasu Society Frameship | Streetwear Brand ( Framer Design & Development )

Let us help with your site?

πŸ’» Book a quick call with Mason: https://cal.com/wenlaunch/15-30min-discovery-call
Thank you for reading!
Like this project

Posted Jun 20, 2025

Led UI/UX design for Hobie Music's e-commerce site using Figma.

Building Blox Design & Framer Development
Building Blox Design & Framer Development
Leroots Shopify Replo Store
Leroots Shopify Replo Store
Fluence Trainings Website Migration to Framer
Fluence Trainings Website Migration to Framer
Alta Advisors Framer Design & Development
Alta Advisors Framer Design & Development

Join 50k+ companies and 1M+ independents

Contra Logo

Β© 2025 Contra.Work Inc