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
MVP
Wireframes
Competitive Analyses
UI Design
Prototyping
Digital Illustration
HTML
CSS
Javascript/jQuery
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.
Styleguide
Sample Mobile Screens
Visit the live site here: https://justincory.github.io/hanks/
Reflections
Over the course of making this website, I learned how to take my design comps to the next level by coding them in HTML, CSS, and Javascript. Getting the animations and interactions to work on mobile was a fun challenge—I definitely admire the hard work that developers do. 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 so I can 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.
Let's Make Something:
Thank you!