KPD_Hero_Music_v1.png

Music Retail Website

Website + Mobile 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 a website design from scratch for "Electric Music Company" that is user-focused with cohesive branding and 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.
LOGO + COLORS.png

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?

guitar_crop.png

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.

Style Tile

Branding & UI Component Mockups

COMPONENT EVOLUTION:

The evolution in the planned button design represents some key decisions for how 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, an issue arose because red would need to be used for error messages. This led to the decision not to use "Fiesta Red" for UI components, so that it would not be confusing to the user.

Another option was to use "Seafoam Green" from the logo, however this color does not provide enough contrast for legibility.

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.

KPD_Music_Buttons1.png

4.

HIGH FIDELITY VISUAL DESIGN:
COMING SOON!