top of page

Building familiarity to improve adoption of a Web3 music streaming app.

MY ROLE
UX Research, E2E Design
TOOLS
Figma, Figjam, Notion
METHODS
Interviews, Observation, Competitive Analysis
DESIGNED FOR
iOS Mobile App
ezgif.com-gif-maker (2).gif
Context
Artistree is a Web3 music streaming app with an established user base of free users

Artistree's strategy was to first build a user base by offering a free product and then evolve the feature set to monetize on a premium product. At this point, the product has been well received and has a healthy user base of free users. We now need to design a premium product that will allow users to subscribe for a monthly fee.

Problem
Users are not upgrading.
Users are intimidated by Web3.

New and existing users of Artistree Free are not upgrading to the premium service, Artistree Grow. In order to increase conversion we need to clarify what it is we are offering, increase comfort and understanding of its Web3 features, and provide clear opportunities and incentives to upgrade.

Solution

akar-icons_circle-check-fill.png
Create
Opportunity

Bake opportunities to upgrade into both new and returning user flows

akar-icons_circle-check-fill.png
Incentivize

Provide Artistree Free members with $SEED upon signup

6
iPhone 13 Pro.png
iPhone 13 Pro.png
Home.png
akar-icons_circle-check-fill.png
Simplify
New Concepts

Onboarding flow that includes digestible breakdown of what Artistree is and how it works

akar-icons_circle-check-fill.png
Reinforce 
New Concepts

- $SEED snapshot on home page

- Details that expose user to how others use the app

The Process
General Landscape
Consumers will abandon
convention for more access and ease of use

Research Method: Secondary Research

My initial concern was how do we convince users to transition away from their Spotify accounts? To answer this question, I looked to the past. I read news articles to get a better understanding of major changes in the music industry, and more specifically, in music distribution. 

Key Takeaway

The music industry is not immune to major change. From radio through streaming, each shift in music distribution was marked by access to more content and increased ease of use. 

Fortunately, Web3 can offer both of these incentives.

Understanding Web3
Web3 provides value to music listeners in a variety of ways

Research Method: Secondary Research, Competitive Analysis, Informal Chats

What, exactly, can Web3 make possible in the music industry? I focused on this question in order to better understand what an Artistree premium service could include. I read news articles and looked at existing products to not only identify use cases, but to see how new technology and features are being introduced to the user. 

Competitive Analysis

Royal.io

Sells royalty rights and other perks in the form of a token on the blockchain

akar-icons_circle-check-fill.png
Royalty ownership
akar-icons_circle-check-fill.png
Return of scarcity
akar-icons_circle-check-fill.png
More equitable for artists

Audius

Music streaming service with tokenized economy

akar-icons_circle-check-fill.png
Listen-to-earn
akar-icons_circle-check-fill.png
Monetization of collabs & remixes
akar-icons_circle-check-fill.png
Crowdsource funding
akar-icons_circle-check-fill.png
More equitable for artists
iPhone 13 Pro.png
iPhone 13 Pro-1.png
iPhone 13 Pro.png
iPhone 13 Pro-1.png
Key Takeaway

- Both Royal.io and Audius use direct and easily digestible language to make their platforms easy to understand.

- One sentiment that came up in the Discord channel for Audius is that it is trying to do too much too soon. I agree, and want to keep this in mind as I decide what functionality Artistree Grow should have.

Understanding the User
The Listener.
The Content Creator.
The Artist.

Research Method: Observation, Informal chats

For the scope of this project, we will focus on the music listener. To better understand this user I joined Discord channels for similar services (Audius and Royal.io), and chatted with friends and family about Web3 and their streaming habits. I was most interested in gauging sentiment toward Web3 on its own, and as it pertains to the music industry. 

My observations confirmed to me that there is both skepticism toward new technology as well as a heavy attachment to current convention. In short, music listeners don't see that they have a problem that needs to be solved. 

Key Takeaway

- Web3 is polarizing and misunderstood.

- The first mainstream adoption of NFTs (ex. Crypto Punks, Bored Ape Yacht Club, etc.) created doubt and mistrust in the viability and purpose of Web3 and in those who advocate for it.

- Music streaming is deeply ingrained in day-to-day lives. 

- "You'll have to pry my Spotify account away from my cold lifeless fingers." - a particularly dramatic, but honest, friend

How Might We. . .

... increase interest in what Web3 has to offer our user?

... build trust in the viability of Web3 in the music industry?

... make the transition less intimidating?

... communicate new features in a clear and approachable way?

LoFi Solutions
Hypothesis: users will be more receptive to Web3 features if the experience feels familiar

Activity/Deliverable: User Flows, Wireframes, LoFi Prototype

At this stage, I was most interested in how we could simplify. I hypothesized that users would be more at ease if we took the spotlight off the newer features and focused on familiarity. I first created red routes that would reflect the company goal to get users to upgrade. Then, I  translated those into user flows and wireframes that, hopefully, would solve for our user problems.

Red Routes

1. New user signs up for Artistree Free

2. Returning free user logs in to their account and upgrades to Artistree Grow

Wireframe Testing
Users were in fact not more receptive

Research Method: User Testing

I don't think the hypothesis was off base, but the execution of it created more problems than it solvedOverall, users were confused by (or not aware of) the Web3 capabilities. They did not understand the difference between Artistree Free and Artistree Grow. The way I approached easing into new features left them buried and dismissed. 

Key Takeaway

- It is not clear how to upgrade to Artistree Grow as an existing user.

- It is not clear what the difference is between Artistree Free and Artistree Grow

Possible solution: create a walkthrough with easily digestible information that introduces new features. This could also be an opportunity to distinguish Artistree Free from Artistree Grow. 

Evolution of the Brand
I struggled to balance creating a brand that was both distinguished and familiar

Activity/Deliverable: Word Association, Affinity Map

Since I prioritized maintaining user expectation of what a music streaming platform looked and felt like, I needed to take extra care to not look like a Spotify knockoff. Walking that line made for some fun creative problem solving. 

To better define this platform's brand, I used freeform word association to brainstorm as many words as possible. Then I organized these words into groups to identify reoccurring themes that together would create the vibe of the brand: growth, community, and creativity.

The Rebrand

Before testing with users, and with feedback and encouragement from my mentor, I decided that there were ways to more successfully execute the brand. The color scheme was too reminiscent of Spotify and needed reconsideration. I also felt the icon in the logo was weak and a missed opportunity to be more versatile and supportive.

Company Name 

I love a good play on words. "Artistree" embodies two of the brand attributes: growth and creativity.

$SEED Icon

The icon in V1 illustrates a tree, but that is it. I felt it could do more.

In V2, the icon is now a symbol for the native token of the app, $SEED. The block that encompasses the seed represents blockchain technology, and the S within the seed is another detail supporting the name of the token.

akar-icons_circle-x.png
iPhone 13 Pro.png
akar-icons_circle-check-fill.png
4
akar-icons_circle-x.png
iPhone 13 Pro-2.png
akar-icons_circle-check-fill.png
5
Color Scheme

The company name and attribute of growth made it a challenge to get away from the color green. In order to create distance from Spotify's green, I used a gradient with some blue to soften. This change sets the brand color apart, but more importantly it elevates the color from a simple green of growth and success to a soothing blue-green that I call flow and grow.

HiFi Solutions
Hypothesis: a successful walkthrough will solve a big chunk of user confusion

Activity/Deliverable: HiFi Screens, Prototype

In keeping with what I learned when analyzing other Web3 music platforms, I kept the walkthrough copy succinct and to-the-point. I also used transitions (the seed icon rooting down) to reinforce the idea of growth and give the user an added layer of exposure to what Artistree is all about.

ezgif.com-gif-maker (2).gif
4.2
4.3
4.4
HiFi Screen Testing
But where is the music?

Research Method: User Testing

This round of testing was much more encouraging than the last, but there was still important feedback to be had. While the distinction between Artistree Free and Artistree Grow was greater, there was still some uncertainty. Luckily, the problems that cropped up had simple solutions. 

Key Takeaway

- The walkthrough made a huge difference in user understanding and comfort level.

- Though the focus on Artistree Grow features helped, there is still some uncertainty on the difference between it and Artistree Free.

- As users moved through the app, I noticed missed opportunity for free users to be prompted to upgrade.

- Sometimes the most obvious details are the easiest to forget! Users of Artistree Free weren't sure if it included music streaming.

Possible solution: make the play button active on the prototype and design a music player.

Final Revisions
Users are more intrigued by Web3 features when new concepts are simplified and the streaming experience familiar

Activity/Deliverable: HiFi Screens, Prototype

I created additional opportunities to upgrade, as well as a popup notification upon sign up, in order to further distinguish which features were exclusive to Artistree Grow. I also added a home screen music player to reinforce that Artistree Free was, in fact, a music streaming service first. 

iPhone 13 Pro.png
ezgif.com-gif-maker (3).gif
Home w player
iPhone 13 Pro.png
Looking Forward
There is so much more that could be done!

The scope of this project does not leave room for exploration of all the potential functions and interesting design problems this product would have in real life. Looking forward, I'd be interested in translating this to a desktop application. Since the walkthrough is such an important feature for the iOS app, how could we help the desktop user in a similarly successful way? Does the user remix and collaborate from within the app? Or would they need a 3rd party program to create? What would the platform look like for other user types? 

bottom of page