10-minute read
The Client
For this student project, I chose a real-world issue: how to translate local reputation into an effective online brand for a new and global audience.
Stradella is a hypothetical 100-year-old accordion shop with deep roots in the local music community, now looking to expand their business online.
Local accordion shops are few and far between, so many musicians by necessity look online. However, buying an expensive musical instrument online requires a great deal of trust. Potential customers require confidence and knowledge to make such a purchase.
Constraints
The project length was a mere five weeks, so time was of the essence. Focusing in on very specific features and gathering as much data from potential customers as possible were the key elements to solving real problems for an imaginary client.
My Role
As the solo designer on this project, I performed user research, designed wireframes, created low to high-fidelity prototypes, ran usability studies, and wrote design documentation.
Approaching the Problem
Exploratory interviews revealed that many musicians who play traditional, analog instruments are wary of buying online. Some had previous bad experiences, others could imagine no better alternative to holding, hearing, even smelling, an instrument in person.
“I had a bad experience shopping online for instruments…I got it and it was a really awkward shape. That kind of turned me off from buying instruments online.”
“I prefer brick and mortar. I want to hear it in person, get a true sense of the tone.”
Faced with a target audience skeptical of buying online, it was clear Stradella needed to go above and beyond the typical add-to-cart experience.
Musicians needed to place a lot of trust in the website, so I needed to design a tool that would not just inform, but would exude deep experience and competency.
This led to my problem statement:
How might I…
…help wary musicians feel confidant and informed when shopping for an accordion online?
Testing Features for Viability
Round one: the audio demo
Since hearing the instrument is such a crucial part of the buying process, I decided to test the concept of high-quality audio demonstrations. Since testing actual audio was beyond the scope of the project, I set out to identify:
Are users interested in such a feature?
Would audio demos effect a user’s trust in the business?
How might the feature be incorporated into the site?
For my first round of testing, I created a paper prototype and ran a think-aloud study with 4 participants, two in their 30s and two in their 70s. As this was convenience sampling, only one was a serious musician, but all had experience researching and making expensive online purchases.
This first iteration had simple navigation trees to test navigation labels, and to test if users could find the demo library (a complete list of available instrument audio samples). I was also testing different ways to incorporate audio samples on a product page.
As a warm-up, I asked participants to imagine shopping for an instrument online, and if they had any “must-haves”. I was curious to see if anyone explicitly expressed a need for audio samples, without being prompted by me. One of the four - the musician - mentioned that she’d want to hear the instrument before buying.
Home page and a drop-down menu example
Testing different ways to deliver audio samples
The findings from round 1 were very informative: Users were in favor of audio samples, and I got clear feedback about how to display them.
“Why did I have to hit ‘play’ again?”
“The pop-up is too cluttered!”
“Oh this is even simpler. A lot more clear. It’s the box that does it.”
Something surprising to me at the time, though completely obvious in hindsight, was that users ignored my “clever” navigation slider. Why manipulate the prototype when you can just point to a menu item? That test would have to wait until I had a clickable prototype, where the off-screen menu items were actually off-screen.
For Round 2 I created a high-fidelity clickable prototype, with two variations of the audio sample.
On the product page, I riffed off of popular inline player from my paper prototype.
For the demo library I made each sound sample much more prominent, with an image of the specific accordion. Sort of like…a video…is this foreshadowing?
My prototype was ready, my participants lined up, and then I had a realization I couldn’t ignore.
I was so focused on sound quality that I ignored the possibility of video. Couldn’t video do everything audio did, and then some? Could video demos be even more convincing, with the added value and engagement of, well, video?
Researching a pivot before leaping
To validate my suspicions (as well as copious data that says visual information is king), I did a quick online survey of musicians who play analog instruments. The goal was to determine whether users would prefer audio or video, and why.
Survey participants: making me work for it.
The results were a bit surprising – exactly half of participants preferred audio, which put me in a tough spot. I didn’t want to abandon half my users and lower their level of trust in Stradella’s expertise, but I still suspected that video would appeal to a wider audience.
But I started to see a theme in the survey comments: Those who preferred audio did so because of perceived flaws of video, as opposed to any specific feature unique to audio.
Specifically, they believed audio was the only way to go for high-quality sound, while video would be visually distracting, with lower audio fidelity, for no additional benefit.
“Instruments are about sound and I feel HIGH QUALITY audio of the instrument being played will give me far more data than a video.”
“Easier to concentrate on the sounds rather than the flashiness of the footage.”
“It’s aaaall about the sound!”
I surmised that many of these skeptics could be brought to the video side if I tackled these issues. In the magical realm of a hypothetical business, guaranteeing studio-quality demonstrations was the easy part.
What concerned me was how to communicate the promise of fidelity. What would convince a video skeptic to hit play?
User testing round two: the video demo
If you search for instrument demos on YouTube, there are plenty of videos that are clearly a guy in the back of a shop. Sure, you can see the instrument, and get a gist of what it sounds like, but that sort of video quality would never convince my audiophiles.
I imagined something different: a clean, unadorned studio space, focused entirely on the instrument and the musician. This would hopefully communicate to the user to expect high-quality and accurate audio.
I tried two slightly different versions of the video demo: one showing the performer in full, and one cropped to focus only on the instrument. I was curious if either choice added or detracted from the experience.
I surmised that many of these skeptics could be brought to the video side if I tackled these issues. In the magical realm of a hypothetical business, guaranteeing studio-quality demonstrations was the easy part.
What concerned me was how to communicate the promise of fidelity. What would convince a video skeptic to hit play?
User testing round two: the video demo
If you search for instrument demos on YouTube, there are plenty of videos that are clearly a guy in the back of a shop. Sure, you can see the instrument, and get a gist of what it sounds like, but that sort of video quality would never convince my audiophiles.
I imagined something different: a clean, unadorned studio space, focused entirely on the instrument and the musician. This would hopefully communicate to the user to expect high-quality and accurate audio.
I tried two slightly different versions of the video demo: one showing the performer in full, and one cropped to focus only on the instrument. I was curious if either choice added or detracted from the experience.
This version of the video demo, without showing the performer, was used on the product page.
This version was on the demo library page.
After updating my prototype to video demos, I ran my 2nd usability test. I talked to four participants, all new to my prototype and all musicians. One played the accordion, and three played acoustic guitar.
I asked users what they expected to hear when clicking through to the product page and seeing the video image.
When viewing the prototype, 4 out of 4 participants expected:
high-quality sound:
“You make an assumption that when you take time to focus on the visuals you’re going to focus on the audio.”
and a demonstration that showed the exact instrument in action:
“In a recording of someone playing it, I can see, visually, a correspondence between what I’m hearing and what is happening with the instrument. That’s very useful.”
“One of my accordions was inherited, and I never play it because it’s too big for me. I like that this would show me what kind of space [the instrument] occupies in real life.”
Final Design & Further Iteration
After synthesizing the results of round two, I prepared a testing report with recommendations and next steps. I made no changes to visual design or the design of the video demos, as those proved successful in testing (and for the record, participants preferred to see the entire performer).
Navigation still needed some work, however. Users continued to struggle with the unconventional slider menu. They also had trouble locating the Demo Library.
To address this I presented two alternative designs for the navigation system though I would test, with additional time.
One design iterates on the slider, increasing contrast and adding additional affordance - the trusty chevron.
The second uses a hamburger menu, combined with color, iconography, and hierarchy to bring attention to the Demo Library. Two participants had said during testing that they expected the demo library to be in the product menu, so that seemed like a great thing to test.
The homepage tested in round 2.
This version still uses a slider, but with added contrast and affordances.
This version uses a hamburger menu, color, typography, and clear labels to eliminate confusion.
Conclusions
Video samples were successful: Users had no trouble finding and manipulating the video demonstrations, and all expected a high-quality audio experience based on visual cues.
The information architecture needed more love: There was some confusion when looking for less-obvious menu items, like expert advice or the demo library. With additional time, I would dig into IA and test navigation labels.
Don’t let your prototype get in the way: A big takeaway from my usability tests was the importance of an appropriately realistic prototype when testing primary interactions. I was hoping to test horizontal sliding navigation, but users struggled to get my prototype to cooperate and were thus frustrated by the navigation in general.
Thanks for reading!
go back to Gates Foundation Discovery Center
continue on to Mountain Mike: Research & Brand Development