Increasing the ease of use by decreasing the task completion time
e-commerce
redesign
usability testing
UX strategy
UI Design
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
UI design
Usability testing
Branding
Results
Homepage features that increase desirability, according to participants of the usability tests
Improved of the search feature, increasing likability to find new products that fit the requirements
Improved search result page, increasing efficiency in exploring new music
A sticky media player, decreasing necessary layer diving, resulting in a smoother process of exploring new music
Learnings
During this project I looked into metrics. I did the course op openclassrooms about communicating the inpact of design. I learned about metrics that are relevant for web. They help to maintain focus and meaasure and communciate the impact design interventions have. Which especially is useful in optimisation of conversion in e-commerce or landing pages.
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, the user interviews and usability test of the initial design, 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.
The search functionality is limited in regard of filtering results. A search query shows an infinite list of results that include the word in either the artist/label, album or track name.
Also, this hinders users to discover a new artist, since this requires to know the exact name.
"
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.
The general results mean that users need to randomly click through the results, to see whether it suits their requirements and find what they are actually looking for. Moreover, clicking on a result brings the user to a new screen, stopping the music that is currently playing, which slows down the process drastically.
Like one of the participants mentioned: I would like to dig as fast as possible to keep the momentum and this behaviour hinders the continuity of my digging experience.
Design goal
It is safe to assume that Bandcamp's mission is to sell more music and therefore, enable fans to discover new music. Hence, the designgoal 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...”
→ the homepage shows personalised content
Homepage content
→ the search functionality enables multi-tag search queries and filters
Search functionality
→ more controls are available on the surface, to enable a fast and intuitive discovery experience
→ tracks can be played simultaneously while browsing through pages
Navigation
Design
Userflow
Scoping down the project
The user flow illustrates how users navigate through the prototype of the redesign and suggests some of the ideated features, while maintaining a feasible scope for the project timeline.
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
The moodboard communicates five brand adjectives: Simple, alternative, editorial, modest and playful.
Style tile
The style tile presents 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
More controls, less layer diving: Added controls to browse more efficiently
By bringing controls to the forefront, users can easily and quickly browse through releases, artists, and fans, minimising the need for extensive layer diving.
The sticky media player
A media player that sticks with you
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
Feedback
Participants that tested the prototype of the redesign considered it to be a great improvement. They have been coping with the flaws of the platform and will keep using it for its monopoly in fair trade music sales and of their unique database. However, they also mentioned these improvements would increase their purchases due to a much more intuitive and smooth experience.
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.
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.
Setting a business goal with metrics
For this project, I focussed on improving the UX solely, aiming for qualitative research insights. However, the product is part of a larger ecosystem and new design interventions have to align with the overarching business goals. I figured out what metrics would be relevant in this scenario, supporting the business case of the project and communicating the impact of my designs. In this case, the business goal is to increase sales through decreasing the time to purchasing, which is a fairly common metric associated with e-commerce.
