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:
Identify the strengths and pain points of Mood’s Music commerce website
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?
High Fidelity Prototype: