Hank's Music Exchange
All of the charm and character of vintage music gear is on display with this interactive website interface redesign. From skeuomorphic components that scale into mobile to animated motion and retro arcade color vibes, this project is a love letter to musicians.
The Problem:
Used music gear shops like Hank's Music Exchange often burst with character in the store while their digital presence is often bland. How might that aesthetic visual language expand into their digital UI?
Solution:
After researching the websites of other music gear retailers, I crafted an experience that centers the user's goals of shopping for that "holy grail" of used gear while utilizing interactive design to set the experience apart from local and national competitors.
What I did:
• Design Direction
• UX Research
• Information Architecture
• Wireframes
• Competitive Analysis
• UI Design
• Prototyping
• Digital Illustration
• HTML
• CSS
• Javascript/jQuery
Visit the site:
Styleguide
Research
While there are many intuitive music stores online, they all tend to feel like any other retail experience in terms of interaction and user experience. It was important to give thoughtful consideration to both the user and proprietor's goals with an eye on making the experience stand apart.
Audience
1. Local musicians
2. Small music gear shops
3. Fellow designers, artists, & creatives
Competitive Analysis
Being a musician and vintage gear lover myself gave me some insight but nothing can replace the thoughtful research of similar products and interfaces.
Previous Site
Analyzing the previous Hank's Music Exchange website, I identified ways that the navigation could be simplified to prioritize several user goals:
1. What the shop has for sale
2. Contacting the shop to purchase inventory
3. How to sell gear to the shop
4. Joining a newsletter to be notified of new gear more quickly
5. Business location/hours/policies
Wireframes
From hand sketches of site maps and paper wireframes to Figma for digital low-fi and high-fi design comps.
Reflections
I learned how to take my design comps to the next level by coding them in HTML, CSS, and Javascript for this project. I admire the hard work developers do after making this website from scratch. I intentionally created an analog and skeuomorphic vibe with the components and visual identity, however, the designs also had to evolve when particular design considerations didn't translate well from the comps to coding. This knowledge will serve me well when working with front-end and back-end developers.
In the future, I would love to learn more about Javascript to make even more bespoke and exceptional browser events happen. This was a passion project as I love playing guitar, drums, bass, and synth and have been a vintage gear enthusiast buying gear from the real Hank for many years.
