Mood’s Music Website Resign

This is Darryl. He owns and operates Moods Music, which is located in the heart of Little Five Points, Atlanta. He loves to share his art and ear for good music. Mr. Harris is committed to supporting local and emerging artists. Mood’s Music Picks can be found weekly in Atlanta Magazine!

Needless to say, Mr. Harris is a local legend and Mood’s has been a staple in the community for over 20 years. But ever since covid-19, Mood’s has been struggling to stay afloat.

With an improved e-commerce experience, we were able to improve sales and bring lasting change, as it encouraged younger generations to shop at Mood’s!

The Proposal

Challenge

Small businesses offer a personal touch that big retailers simply cannot. How can we create an improved e-commerce website, while maintaining brand image, “small shop” appeal, and great customer service?

Key Objective

Redesign moodsmusic.com to improve sales, while maintaining everything that makes it so special.

Project Overview

  • Project Duration: 2 weeks (December 2022)

  • Tools: Figma, Keynote, Google Workspace, Optimal Workshop

  • Methods: Research, Contextual Inquiries, User Interviews, Competitive & Comparative Analysis, Heuristic Analysis, Accessibility Analysis, Affinity Mapping, Persona Development, User Flows, Site Map, Sketching, Wire framing, Usability Testing, Prototyping

Discover: What is Mood’s Music doing well and where can it improve?

Research Goals:

  1. Identify the strengths and pain points of Mood’s Music commerce website

  2. Analyze the site’s current information architecture and explore how to improve it

Contextual Inquiries:

Key Takeaways: Further reaffirmed that the way the categories are currently set up is not intuitive and confusing for users.

Define: What is the problem that customers need support with?

Persona:

I contextualized the target audience by creating a user persona

Kenny, 25 / Music Producer

Motivations - Discovering new records, Finding “hidden gems”

Frustrations - Wants a better way to discover new records, Frustrated at the amount of new music constantly coming out

Activities - Always listening to old samples, Loves talking about music, Goes through artists entire catalog if he likes them

Behaviors - Listens to music everyday, Always searching for new music

Attitude - Audiophile and believes vinyl records sound best, Likes boasting about his taste in music and what he “discovered”

“I love sampling old records and giving them new life”

Problem Statement + HMW:

Kenny needs a better website experience because he likes to discover new music.

How might we create a better web experience to encourage Kenny to shop online?

User Flows:

User Task: Find the new Kendrick Lamar album

This image illustrates how a customer would interact with the current site. Notice the user must click through every page to get to the letter “K”. There is no option to sort albums/artist in a way thats intuitive.

This image illustrates how the implementation of user reviews and ratings could potentially lead to more sales.

Design: How Did I Consolidate Research Data to Design a Solution?

Site map:

Using the research from the C&C analysis, the card sort, and the proposed user flows, I tweaked the site's current information architecture. After reorganizing categories, I created the site map below to have a visual of what the global navigation of the site could be.

Sketches & Wireframes:

In order to begin my sketching, I used the current site as inspiration. In my initial mockup, I wanted to keep the layout close to the original while making minor quality of life adjustments.

Mid-Fidelity Prototype:

With this mockup, I wanted to bring Mood’s into the current state of the web. Taking design cues from services like Netflix and Apple Music, I wanted to create a simple, elegant and intuitive interface. My goal was not only to increase sales, but create a website that could feel like browsing at the store.

Usability testing:

Who: I had four participants between the age of 18-39

Objective: To observe what worked well and what could be improved within the prototype

Tasks: Find the new album by Kendrick Lamar and checkout

Results:

4/4 participants were able to complete the given tasks

Key Takeaways:

Even with a complete redesign, all users could complete the given tasks much faster

I was not happy with the color scheme. I wanted the site to have a “quality” feel

Minor text sizing issues

Next Steps:

  • Adjust color scheme

  • Alphabet scroll bar on homepage (reminiscent of browsing by letter at the store)

  • Darryl is already known around town for his great taste in music. Let’s add a “Darryl’s Pick” section on the homepage

  • Implement new features, test, and iterate

Deliver: Did the solutions work?

Journey Map:

I created a journey map for my persona, so that I could better understand the problems that needed to be addressed. We can see that Kenny has a great experience when visiting the store but not so much on the website.

Key Takeaway: How can we create an online experience similar to that of the physical location? Is there a way to leverage Darryl’s vast musical knowlege, and can we implement features that promote browsing on the website?

Video edited on Kapwing

High Fidelity Prototype:

Conclusion:

Next
Next

Truist Financial