Increasing the ease of use by decreasing the task completion time
e-commerce
redesign
usability testing
UX
UI
branding
Summary
Goals and challenges
Increase purchases through of the homepage through offering user-specific content
Increase purchases through search activity, by improving the controls of the search feature
Decrease time on task of finding desired releases, by improving the navigation structure
Activities
User research
UX strategy
UX/UI design
Usability testing
Branding
Results
Homepage features that increase desirability with 90%, according to participants of the usability tests
Improved of the search feature, increasing likability to find new products that fit the requirements by 80%
Improved search result page, increasing efficiency in exploring new music by 60%
A sticky media player, decreasing necessary layer diving, resulting in a smoother process of exploring new music
Feedback
The verbal feedback of users was extremely positive, just like the scores of the tested metrics.
Background
Bandcamp
Bandcamp.com is a beloved platform with the mission to support and empower independent artists to sell their music directly to fans.
Compared to popular streaming services such as Spotify, where musicians receive 0.00003 cents for every time their song is listened to, artists only have to give up a small amount (average 13%) of their turnover. this is particularly interesting for smaller artists who position themselves in niches.
Bandcamp offers a large user-driven database of music for fans to explore. Fans can listen to tracks three times before they are being asked to buy the release, which makes it a fair and popular platform for all parties.
Issues and challenges
Despite its popularity, user experience issues hinder the exploration and discovery of new music.
Users find the homepage’s content irrelevant, as it lacks any user specific content. The challenge is to identify the type of content users would like to see.
When exploring new music, users experience counterintuitive and cumbersome navigation and controls, which slows down their process, resulting in a higher amount of drop-outs. The design intervention requires, therefore, to understand how users explore music and which buttons and information are most relevant to them.
When searching for music, users experience an insufficient amount of filters to narrow down search results. Hence, a lists of filters and their preferred way to adjust were gathered.
Solution
Offering features on the homepage that show user-specific content, such as recommendations and previous activity, resulting in an increased session time, interactions, and purchases through the homepage.
An improved navigation, by offering more hand-on controls, such as buttons on tiles and a sticky media player, which eliminates the necessity of layer diving and decreasing the time on task of finding desired content.
Additional filter options when searching, increasing decreasing the time on task of finding desired content.
On top of the UX recommendations, the visual appearance of the website has been revamped to explore more modern looks for the website.
Approach
This case study details a three-week redesign project aimed at addressing these issues through improved UX and UI design.
To identify opportunities, the project started with a research phase. Based on the insights, lo-fi wireframes were made to explore and test the design interventions.
Through creating a mood board an style tile, new looks of the visual identity were explored and summarised in the final designs.
survey
>
user interviews
>
usability tests
>
prototyping wireframes
>
branding and skinning
>
mocku-ups
Research
Initial designs and painpoints
Based on the survey and the user interviews, the initial designs have been reviewed and several insights have been summarized below.
“I consider the homepage/landing page to be useless.” , since I feel like it has nothing to offer.
“One thing I would like to see is some personalised content."
Op deze homepagina kun je onder andere thema's vinden als een radio, album of the week en andere aanbevelingen. De inhoud van de homepagina sluit niet aan bij waar zij naar op zoek zijn, oftwel het is niet gepersonaliseerd en vroegen de gebruikers af waarom ze het uberhaubt te zien krijgen.
"One of my biggest frustrations and limitations of this website is that it doesn’t allow to search for multiple tags at the same time.”
“Also, I would like more extended options to narrow down my search."
De zoekfunctie zoekt erg gelimiteerd en algemeen, waardoor gebruikers eerst eindeloos door nummers moet klikken die niks tot weinig te maken hebben met waar zij echt naar op zoek zijn.
Zo kan je niet een nieuwe artiest ontdekken, want daarvoor moet je de naam van de artiest al weten.
Ik zoek nu op Utrecht omdat ik artiesten zoek die uit Utrecht komen, maar nu kan ik hier bijvoorbeeld niet aan toevoegen dat ik bijvoorbeeld naar Volksmuziek zoek.
“I find it very important that I can explore as fast as possible to maintain the momentum of my interest.”
“The counterintuitive interface and need to dive into layers of pages slows down my music discovery process.”
Om er achter te komen of het is waar ik naar op zoek ben, moet ik op een van de resultaten klikken dat me naar een nieuw scherm brengt.
Bovendien, als ze naar een nieuwe pagina gaat, stopt de muziek dat op dat moment afspeelt.
Zoals één van de gebruikers benoemde: ik wil graag zo snel mogelijk zoeken om het momentum vast te houden en dit belemmert de continuiteit van het zoeken. Om er achter te komen of een release lijkt op waar ik naar op zoek ben, wil ik het luisteren. Om het te luisteren moet ik op de link klikken dat mij op een nieuwe pagina brengt. Ik heb geklikt op de zoekhit waarbij staat dat het uit Utrecht komt en ik kan je vertellen dat dit alles behalve Utrechtse volksmuziek is!
Design goal
Het is natuurlijk de missie van Bandcamp om fans nieuwe muziek te laten ontdekken en de artiesten zo direct en eerlijk mogelijk te supporten, maar daar moeten de fans de muziek wel kunnen vinden. The design goal is defined as: “To enable users to find relevant music more efficient.”
Hypothesis
In order to test the design goal, the following hypothesis have been defined. “Users find relevant music more efficiently, if...”
→ if de homepage gepersonaliseerde aanbevelingen biedt
Homepage content
→ if de zoekfunctionaliteit wordt uitgebreid met multi-tag zoekopties en filters
Search functionality
→ If er meer bedieningsopties aan de oppervlakte zijn, om het ontdekkingsproces intuïtiever en sneller te maken
→if de mediaplayer blijft spelen terwijl gebruikers door verschillende pagina’s browsen
Navigation
Design
Userflow
Scoping down the project
To narrow the scope of the project and maintain a realistic output within the given timeframe, a user flow has been created. The user flow illustrates how users navigate through the prototype and suggests some of the ideated features.
From low to high fidelity
Exploring layouts and interactions
By sketching low-fidelity screens on my iPad, I quickly explored potential solutions. These sketches were then turned into mid-fidelity screens for testing with users and stakeholders before translating the ideas into final designs.
Visual identity
Moodboard
Communicated five brand adjectives: Simple, alternative, editorial, modest and playful
Style tile
Presented UI elements reflecting the mood board
Solutions
Homepage content
A personal landing page with features that inspire users to explore
Based on user search behaviour and patterns, the landing page offers several features designed to encourage users to discover new music.
Search functionality
Search and filtering: Added controls for more specific filtering
The advanced search controls enable users to filter more specifically, encouraging them to search more creatively.
Navigation
The Details of the Debris: Information Viewers Want to See
The qualitative research indicates that users are interested in several topics related to debris pollution. This information can be detailed in an info card on the left.
Additionally, test participants mentioned having difficulty understanding the size of the debris. To address this, a reference object (a plane) has been added to help convey the scale.
The advanced search controls enable users to filter more specifically, encouraging them to search more creatively.
Navigation
The sticky media player
A media player that sticks with you
Communicated five brand adjectives: Simple, alternative, editorial, modest and playful
To fulfill the desire to listen to music while browsing and exploring layers of content, I designed a media player that stays with the user. As users navigate through the website, the media player remains accessible.
This enhances the listening and browsing experience by offering controls to save albums and tracks individually to their wish list or shopping cart. Additionally, it allows users to explore all relevant releases from the corresponding artist or label.
Project roundup
Personal learnings
Thank you for making it till the end! Perhaps you have a little longer to read how I reflect about my personal learnings in this project.
Branding and using a mood board
One of the most important lessons I learned during this project is the importance of maintaining a manageable scope. When I completely lost sight of my end goal and felt overwhelmed by the amount of work, a mentor advised me to define the most realistically feasible user flow. This advice greatly helped me focus on delivering quality over quantity, rather than trying to do everything.
Aim for higher quality output, rather than quantity
During this project, I learned the importance of identifying and prioritizing issues to focus on the most critical one and maximize its potential. Trying to solve multiple problems at once made it challenging to maintain focus and deliver quality. If I were to redo the project, I would aim for a higher quality output rather than quantity.
As a next step, I would assess which issue causes the most friction and has the greatest impact on the business case. This would allow me to continue the research, conduct a thorough analysis, and create the most effective final design.
Using metrics
For this project, I focussed on improving the UX. However, in a real project, the product is part of a larger ecosystem and new design interventions have to align with the overarching business goals. Hence, I figured out what metrics would be relevant in this scenario. In this case, we could agree that increasing sales through decreasing the time to purchasing is a fairly common metric associated with e-commerce.
