CONTEXT
Built a personalized music artist website and created a direct-to-fan distribution channel for selling music and merchandise.

CHALLENGE
How might we increase brand awareness and sell merch?

SOLUTION
I utilized design methods including building a persona, sitemap, mid-fidelity wireframes, and a final visual design.

Interviews

Research began by interviewing five random men and five random women who expressed that hip-hop/rap is their favorite music genre. I recruited participants from Santa Monica College and outside the Amoeba Music record store in Hollywood, California. I documented the interviews with photos and a voice recorder.

Participants answered open-ended questions about music discovery, why they choose to spend their money to support music artists, and what their goals, pain points, behavioral patterns, and needs are when visiting an artist's website. Interviews allow us to understand the end-users thoughts, feelings, and motivations. If we can understand why a person makes choices, we identify their behavioral patterns and recognize their needs.

Persona

User interviews help to build personas. After conducting user interviews, I extracted insights to identify user needs, goals, pain points, and behavior patterns. I examined analytics from the client's YouTube, Facebook, and Instagram accounts to understand the audience demographics. I synthesized these data points into a user persona to help create understanding and empathy with the end-user, allowing the design to reflect on the user needs and expectations of this project.

Sitemap

A sitemap represents web pages of the site and structures them to make sense to the user. A sitemap will allow you to create a website with a navigation flow that makes sense to the user and a search engine. I did an inventory of what content will be on the website and asked users to organize the information under meaningful labels users' would navigate to learn more. Organized top-level navigation labels are used to advertise website content.

Mid-Fidelity Wireframe Prototype

Click on image to interact with the mid-fidelity wireframe prototype