top of page
Crowd

Case Study

This class project focused on selecting an existing ecommerce site and going through the UX Wheel process to analyze and identify an area for redesign, prototype, and evaluate. 

Duration

5 Weeks

Project

eCommerce Project

Roles

User Research

UX Design

UI Design

Background

The ecommerce site I selected for redesign is the online service, Bandcamp. Bandcamp is an online music community where artists and fans can find and purchase music and music related merchandise. This service cuts out the middleman and has music artists delivering content directly to their audiences and in turn the audience can discover music they like and support artists that they are fans of.

Purpose For Redesign

Goodreads has a dominant market share in the book review and discussion business but has not kept up with updating the interface and key functionalities that would further engage users and increase discovery of otherwise obscure book titles. This case study will focus on the Goodreads mobile application as it is the primary method users access the service.

Bandcamp_logo_Icon-withBC.png

Research & Analysis

Use Cases

Identified two main types of work roles. These roles can be associated to the following users:

  1. Artists that are the content creators (and potentially customers as well)

  2. Audience/Fans that are the customers

 

Use cases reflect the population of users and meets goals of the business, to generate revenue for Bandcamp (the client) and Bandcamp artists by maximizing sales to their audience/fans.

First, I reviewed the rigor of this project and how I would obtain usage research and any obstacles that need to be taken into consideration.

  • Rigor is low – Simple interaction, simple work domain.

    • Bandcamp is an eCommerce site with simple interaction involving few main tasks.

    • The system complexity is relatively simple and is not within the scope of serious systems with large amounts of work roles and user types or that of enterprise and legacy systems of big companies.

  • Usage Research

    • With the limitations I have to access users and the system, I would need to be my own domain expert, going through user tasks on my own and observing workflows, patterns, exceptions, surprises, problems, and barriers, and note taking of these observations to create a reasonable basis of data.

Bandcamp-UseCase01.png
Bandcamp-UseCase02.png

Personas

Personas were developed from the use cases. This was a natural fit and not much debate about who the users would be as they aligned with the use cases: 

  1. Penny Lane as a fan/customer

  2. Taylor Young as an artist and fan/customer

 

Additional users would be much more specialized and have needs that are too specific and may not benefit most users. Limiting to two personas creates focus for the design stage.

Persona-Bandcamp-TaylorYoung.png
Persona-Bandcamp-PennyLane.png

Design

Storyboard

Using the primary persona of Penny Lane, a storyboard was developed. Each frame of the storyboard provides an opportunity of analysis of an interaction b/w product and user at key individual states. With illustrations that tell a chronological story, it provides a clear context of use of a product by a user and can bring up many questions, ideas, or concerns that may need to be addressed such as options on an interface, presentation, and the ecology of the larger technological or physical environment that a product may need to pull information from in order to better serve the interaction with the user.

Primary Persona - Penny Lane

Penny Lane (fan/customer) persona, has clear and relatable path that customers would want to use in the Bandcamp application and spend money on services and events for artists. This is the more lucrative focus and beneficial to the client, the stakeholders of Bandcamp, because this persona are the group of users that will generate revenue for artists and the Bandcamp service. Although artists such as the persona, Taylor Young, can oftentimes double as customers, this would lead to a more complex storyboard as the artist persona would use Bandcamp as both an artist and as a fan. Showing that distinction could double the workload and convolute the storyboard.

By focusing on Penny Lane (fan/customer) persona, the design further focuses on the needs of the client, generating revenue through users and for users.

bandcamp---penny-lane-highres_edited.jpg
Cell-Row-0-Col-0.png
bandcamp---penny-lane-highres_edited.jpg
Cell-Row-0-Col-1.png
bandcamp---penny-lane-highres_edited.jpg
Cell-Row-0-Col-2.png
bandcamp---penny-lane-highres_edited.jpg
Cell-Row-1-Col-0.png
bandcamp---penny-lane-highres_edited.jpg
Cell-Row-1-Col-1.png
bandcamp---penny-lane-highres_edited.jpg
Cell-Row-1-Col-2.png
bandcamp---penny-lane-highres_edited.jpg
Cell-Row-2-Col-0.png
bandcamp---penny-lane-highres_edited.jpg
Cell-Row-2-Col-1.png
bandcamp---penny-lane-highres_edited.jpg
Cell-Row-2-Col-2.png
bandcamp---penny-lane-highres_edited.jpg
Cell-Row-3-Col-0.png
bandcamp---penny-lane-highres_edited.jpg
Cell-Row-3-Col-1.png
bandcamp---penny-lane-highres_edited.jpg
Cell-Row-3-Col-2.png

For the wireframe, further focus was narrowed to address time constraints on this project and maximize the client’s ROI. The checkout process was selected as the point of focus as that would be a main factor getting users to complete a purchase transaction. The purpose of the wireframe was to elicit feedback and finalize changes with the client so the process can move forward to the prototype. 


The medium fidelity wireframe provides a clear idea of how elements will appear on the screen and in relation to each other, alludes to interactivity, flow, and brings up questions of function that may need to be fleshed out further.

Notable design changes

 

Home/Featured page

  • Inclusion of the add to cart button on the Featured page. Provides an expedited pathway to the purchase process.

Item page

  • Multiple images of selected item on the item details page. Provides user with more visual information to decide to proceed with a purchase or not.

  • Additional merchandise available from artist on the item details page. If use is interested in this artist, surfacing related content to generate additional interest for more items to purchase.

 

Add to cart page

  • Addition of ‘Add to Cart page’.  Allow user to purchase multiple items in multiple quantities in one transaction.

  • Additional merchandise available from artist on the add to cart page. If user is interested in this artist, surfacing related content to generate additional interest for more items to purchase.

 

Shopping Cart page

  • No shopping cart page was currently available on Bandcamp, users must checkout indivdiual items for a single quantity one at a time.

  • Allow users to checkout more than one item at a time

  • Allow users to change quantity desired of each item

Wireframe

page_3_-_artist__merch_-_item_details.png
page_2_-_artist__merch_page.png
page_1_-_home.png

Home/Featured

Artist Merchandise

Item Details

page_6_-_checkout.png
page_5_-_cart.png
page_4_-_artist__merch__item_-_add_to_cart.png

Add to Cart

Shopping Cart

Checkout

Prototype

Music App
page_2_-_artist__merch_page.png

Bandcamp Prototype

This prototype focused on the selection and purchasing flow of customers visiting Bandcamp to buy artist merchandise.

100% of the users interviewed reported having difficulty engaging with posts as many of their interactions don’t have notifications, particularly if responding to a post originating with another user. It was found that when a post has originated with a user, that that specific user will be notified but not the commenter on the post if their comment was replied to. This is a problem because it limits the engagement of users and the potential discovery and connections to other users with similar interests and the discovery of new books to consume.

Evaluate UX

bottom of page