—
UX Case Study: Roselle School of Music
TIMELINE
November 8 -19, 2021
TOOLS USED
Figma, Maze, Notion, Optimal Workshop: Optimal Sort and Zoom
METHODS USED
User interviews, open and closed card sorting, moderated and unmoderated usability testing
ROLE AND RESPONSIBILITY
I wore all the hats, UX Researcher, UX/UI Designer, and Interaction Designer
INTRODUCTION
Overview
Roselle School of Music is a local music shop located in the heart of downtown Roselle, Illinois. Its long-standing history of service to the community since 1959 has proven to be an excellent resource for school band instruments and music lessons. Their current website roselleschoolofmusic.com has been seen as outdated.
Roselle School of Music wishes to build a more efficient eCommerce site that helps create a broader audience and provides quick and easy shopping experiences even for the local shoppers.
Users and Audience
Roselle School of Music’s target audience is between 18-45. They cater to the music community but have a large audience of parents when their kids are in band and customers who take advantage of their musical instrument lessons.
INTRODUCTION
Problem Statement
The highest priority will always be given to Roselle School of Music's face-to-face contact with its customers. A year ago, they saw an opportunity to support the local community by allowing people to order some products online. Roselle School of Music built our website, but we're not pleased with the results. They have plenty of website visitors yet few completed purchases.
Roselle School of Music wants to showcase its products through an improved eCommerce website while maintaining its brand image: "small shop" appeal and excellent customer service. Unlike eCommerce retailers like Amazon, they offer a highly curated inventory focusing on hand-picked quality over quantity. You can find the current site at roselleschoolofmusic.com.
Roselle School of Music current home page
Roselle School of Music current product page
THE DESIGN PROCESS
Research
Competitive Analysis
During the project's discovery phase, I decided to compare functionality with competitive and comparison competitors. Since our shop was not one of those "big box" stores, I reached them up to two other local type shops. But I felt it was important to compare against the more prominent stores as they have much more traffic and a long-standing e-commerce platform.
User Interviews
I conducted four user interviews to understand frustrations and pain points when users shopped online for their guitars and accessories. The hardest part I quickly realized was that most people relied on Amazon or local “big box” stores for their purchases. But I did come away with some insights that would benefit a small local store.
Taking all the insights I learned about online and local shopping for guitars, I created an affinity map to gather my insights and create an "I" statement to help identify my potential users' needs, wants, and point points.
Information Architecture
Using the Optimal Workshops, Optimal Sort, I learned valuable information for setting up the navigation and where products will live under.
Moderated and unmoderated open card sort: I ran three tests, and each came back completely different. I chose other parts that made sense and ended up figuring the rest out with a bit of extra research from my competitor sites.
Moderated and unmoderated closed card sort: My closed sort evaluation had 11 participants and was very close to what I expected.
DESIGN PROCESS
User Persona
To better understand whom I was designing for, I created a user persona from my interview insights. It helped when I decided to add or remove something and how my user Calvin would use the site to his advantage.
PROBLEM STATEMENT
Calvin shops at big-box retailers because they have lower prices on their guitar gear. This is a problem because he is less likely to purchase from his local neighborhood guitar shop and can’t compete with big-box prices. Calvin would instead shop local and support his local shop.
DESIGN PROCESS
Calvin’s User Flow
THE DESIGN PROCESS
Lo-Fidelity Wireframing
I started sketching sessions called crazy 8’s and quickly put any ideas on paper. I honestly have never designed an e-commerce website before, so I just let my brain run wild on paper. The goal of this site was to make it easy to use and very simple to digest. From some of the interview insights, my users felt like the busy big-box store sites got in the way of the actual purchasing process with ads and promotions.
Low-Fidelity Wireflow
The low-fidelity stage allowed me to visualize the actual flow I would get Calvin through and test it with fellow students and potential users in a moderated setting. Plus, it gave me an excellent road map to start leveling up on the design process.
THE DESIGN PROCESS
Mid-Fidelity Wireframing
Leveling the fidelity provided visual appeal and led the way to validation. I wanted to keep the clutter out and streamline the flow from home to cart easy to use.
DESIGN PROCESS
Usability Testing
I ran three moderated usability tests over Zoom and ten unmoderated usability tests, sending links to my social networks. Maze, a software tool, offered qualitative and quantitative information by providing heat maps and insights like drop-off rates and satisfaction surveys at the end.
Overall the flow was successful and received a high percentage of completed tasks. I need to account for optional paths to get the same job done.
Users wanted to click the check-out button instead of the view cart CTA. Back to the drawing board for the next iteration.
DESIGN PROCESS
Prototype
I have provided a link to Figma to view the interactive prototype.
CONCLUSION
Next Steps and Learnings
Next steps
A designers' work is never done. These are the following steps to take if given more time:
I need to conduct more usability testing and interactions to verify that multiple paths work.
I want to build out more of the sections like lessons and possibly book them online.
Finish the cart flow to show the entire journey from entry to cart.
Learnings
I struggled a bit to locate adequate participants for my interviews. I called on many of my musician friends, and it didn't help me. I should have built a prescreening survey to help narrow down my audiences. One big takeaway from this project was that most people out there shop at big-box stores over small local shops because of price and convenience. Some more avid musicians still use the small shops due to the stores' exceptional services.