Goals
To create a responsive website for an up-and-coming artist that allows a user to purchase merchandise, view their photos and music videos, and see upcoming tours.
Problem
An artist's website is a great way to connect with their fanbase. These platforms are not without problems. These platforms tend to not have good user support which can leave fans alienated.
Project Background
This is a case study from my Google UX Design course. The task I was given was to create an ecommerce website for an up and coming artist that would allow you to purchase an artist's merchandise.
Time Frame
4 weeks
My Role
UX + UI Design, Visual design, Branding, User flow, Research, Prototyping + Testing
Tools
UX Pilot, Figma, Canva, Squarespace, Wix
My Design Process
Market Research
I began the project conducting background research of current market trends and user needs. I conducted a competitive analysis of 3 other direct and indirect businesses. All three competitors had varying features and catered to or met diverse needs.
Competitive Audit
Justin Bieber
Pros:
-
When you hover over a shirt it automatically shows the backside of the shirt.
-
Easy to navigate around the website.
-
Return information can be found at the bottom of the page.
Cons:
-
Product page is very basic.
-
Color scheme is black and white on home page then changes to light green on the checkout page.
Ariana Grande
Pros:
-
Brand is consistent throughout website
-
Unique and cool way to embed her videos for her fans to view
Cons:
-
Menu navigation on the shop page is not intuitive.
-
No information about the products that are on sale.
-
No distinction between men and women’s clothes.
21 PIlots
Pros:
-
Can translate the website to multiple languages.
-
Pictures of product merch is big, and contains large product description text underneath.
Cons:
-
No navigation when checking out the item.
-
Inconsistent pink background (some merch have it, some dont).
Pain Points
Personas
I gathered the data found from our competitive analysis and our pain points to create two user personas that represent our target audience
How Might We create an app for an up and coming artist that allows you to customize the merchandise, displays the different shipping tiers and provides customer support?
Information Architecture
User Flow
Design System
Paper Wireframes
I started out drawing different layouts on paper and to get an idea of what my application would look like.
Digital Wireframe
Hi Fi designs
First Usability Study
I conducted a 20-minute moderated usability study on our prototypes. There was 4 participants, and I was measuring the participant’s ability to find the shipping label.
Main user pain points were:
-
Had trouble finding information about shipping
-
Wanted to see reviews on products
“The shipping label text is so small, I almost missed it” - Anonymous
Key Designs & Iterations
1. Shipping label information
Our initial designs had shipping information at the footer of the page and then this would link you to the information.
Solution: Our usability study revealed that it was tough for users to find information about shipping. I asked myself “Does the shipping label only need to be found at the footer of the page? This led us to put the shipping information right underneath the product details and to build out a whole page for it.
Result: Fans are able to choose different shipping tiers for when the merch will be delivered to them. Fans said they were more likely to buy products if they could choose the shipping
2. Product Customization
Users wanted the ability to change the color of the shirts so I built out this functionality for them
Result: This customization significantly improved the overall shopping experience for our users within our app
3. Sold out & Discounts
Users identified the issue of clicking on a item and then going into the checkout only to discover that the item was sold out. The application now show the item as sold out from the beginning to alleviate this
Before = You could not tell which items were in stock or sold out
After= now fans can see a product is sold out/on sale up front
Before
After
Result: Fans loved the ability to see which products were sold out ahead of time. This saved them minutes browsing the different products and gave them more time to focus on the products they were actually interested in.
4. Reviews & Bundles
If you wanted to add different items to your order there was no way to do this except to scroll to the bottom of the page. Now I added a bundle feature to seamlessly add multiple items to the orders.
A review feature was one of the recommendations I got from the usability study so I added it. Now fans have more information about the merchandise during their decision to buy.
Result: Our conversion rate of users completing the checkout process increased by 20%
Next Steps
Build out the ticketing platform so a fan will be able to book a ticket for a future performance from Jamie.
Lessons Learned
Always ensure that design requests are compatible with design and development capabilities before starting to prevent redundant effort and time.