KIRSTEN PERRY DESIGNS
Music Retail Website
Website + Branding Concept Design
Website + mobile design for a fictional retail company selling musical instruments and equipment.
OVERVIEW
Being a music lover and musician, I occasionally shop on major music/instrument retail websites. I noticed that many sites had some usability issues. For example, some were so cluttered with sales and advertising splashed across the page, it was hard to find what I needed.
GOAL
Create cohesive branding + website design from scratch for "Electric Music Company" with streamlined features.
BRANDING
There's a saying that goes something like: "Every time Fender sells a seafoam green guitar, they are printing money."
The inspiration for this brand is founded in the idea of using a classic, popular guitar color, with a modern twist.
DESIGN PROCESS
1.
EXPLORATION & INSPIRATION:
I first looked at competitors' websites, noting what worked or didn't work on each site. Based on this information, I generated ideas for the features I might want to include for this site.
QUESTIONS:
-
What types of layouts work well for displaying instruments?
-
What are some key features needed?
-
What mood is being evoked?
2.
CONTENT NEEDS:
Based on the information gathered in step 1, I established content needs for the site including possible photos to be used, text, and features that would work well from both the user and business perspectives. I also mapped out what was needed on the homepage since it would involve a lot of content (for example, popular categories & trending deals).
3.
CONCEPTS & WIREFRAMES:
Once I had established the content needs and basic branding, I built inspirational mood boards to gather ideas. Based on these, I created mockups for a few of the UI components to help drive the art direction. I also created wireframes with the content needs in mind.
Branding & UI Component Mockups
COLOR & ACCESSIBILITY:
The evolution in the button design represents some key decisions for how branding components would fit into the overall site design.
The "Fiesta Red" included in the brand color palette seemed at first glance to be a good choice for eye-catching buttons and actions. However, when thinking through the site needs, issues arose from needing to use this red for error messages, as well as questions about its legibility in button design.
Both the "Seafoam Green" used in the logo and the accent yellow do not provide enough contrast for accessibility.
I decided the brand purple was the optimal choice, due to its ability to provide contrast as well as a pop of color, in line with the brand aesthetic.
