MOBILE APP
Songkick Redesign.
Much more than a sleek facelift, my redesign of the live music platorm, Songkick, drives home a user-centric experience backed by data, interviews, and user testing.
Background
Following my passion for live music, I set out to better the user experience of an app central to that domain – Songkick. I began this project on a hunch – having used the Songkick website previously, I knew the UI was extremely inconsistent, and that there were features that seemed poorly thought out. Moreover, because Songkick is a much smaller company than many of the music industry tech giants, I wondered if there were underlying UX problems resulting from this lack of infrastructure and investment in design best practices.
I knew that to uncover whether or not this hunch was valid, the beginning portion of this project would be very research-heavy.
Redesign goals
Understand the product
Know the company and their product
1
Understand the user
Analyze the user context and overall user experience
2
Iterate towards a solution
Consolidate insights, iterate towards a solution via prototyping
3
At a higher level, a successful redesign would advance/promote Songkick's mission through an enhanced UX.
01
Foundational Research
Performing organization research, constructing initial assumptions based on app usage, conducting qualitative user interviews to understand user context.
ORGANIZATION RESEARCH
What is Songkick?
The product
Songkick provides it's users with "personalized concert alerts". Users rely on Songkick to stay in the know about when and where their favorite artists are performing live near them.
Tracking
Users must track both artists and locations, allowing Songkick's UI to display primarily concerts from the user's tracked artists within their tracked locations.
Scanning
One popular way that users can track their favorite artists: by scanning their music library, like Spotify. Each time they scan, Songkick automatically tracks each artist in that user's library.
Notifications
Push notifications are a big part of the experience, where users mostly recieve alerts about newly announced concerts that they are tracking.
Ticket Purchases
Songkick provides quick access to popular ticket-purchasing platforms and occasionally allows users to purchase concert tickets from them directly.
The company
I knew that, because this was a redesign of a company's flagship product, the goal of this project would be to advance the mission of the company through the new design.
What is that mission? After reading up on Songkick's About page among other resources, it became clear that their number one priority was putting the fan first.
[Getting to a concert] is hard work. We want to make live music effortless, so that anyone can experience it.
– Songkick
INITIAL TESTING
Building hypotheses
Initial Testing
Here's what the current version of Songkick looks like.
A walkthrough through the current Songkick app
As you can see in the above video, there we some perceptible UI shortcomings of the design, and as I walked through the app (I'm fairly familiar with the Songkick website), I began to piece together micro and macro problems.
Initial Hypotheses
Tracking artists
There are way too many tracked artists ("tracked" means I'll be updated if they're performing near me) generated from my Spotify account – did you see how long I had to scroll??
Concerts view
The Concerts view is confusing – I can filter, but I can only sort by genres, and not my tracked artists? The horizontal carousels also create a very overwhelming UI of seemingly randomly-generated content.
Interested/Going feature
Marking a concert as "Interested" or "Going" provides the user with no obvious value. This should either be fleshed out or done away with.
INITIAL USER INTERVIEWS
Understanding the user & their journey
Initial insights
My user interviews allowed me to build a mental model of which touchpoints Songkick fits in to the current user journey.
A high-level summary of the main takeaways from users about how they find concerts
Reading between the lines
The importance of friend groups
Often times, interviewees described finding out about concerts when one person in their friend group posted something in a group chat or shared the news about a concert in person. There was also surprising overlap between friend groups and live music tastes!
"Accidental" discovery
I thought it interesting how no one really "goes out to find a concert", they kind of happen across them via word-of-mouth or during social media sessions.
When it comes to concerts, I don’t actively seek them… if they stumble upon me I’ll check them out…
– Interviewee 5
Red flag: scanning artists
While most users confirmed the Spotify was an accurate representation of their live music tastes, it raised eyebrows with regards to how "scanning your Spotify library" actually manifests in the app.
What artists get tracked when Songkick "Scans your Spotify library"?
The short answer – all of them. For example, if you like just 1 song featuring artist X, artist X will be automatically tracked by Songkick when you scan your Spotify playlist.
My personal tracked artists count: 467!
25
The average number of artists that users say they would consider seeing live.
300+
A rough estimate of average number of artists that would be automatically tracked from scanning a user's Spotify library. Yikes!
02
In-Depth UX Research
Information Architecture testing, user testing with various flows, user feedback + app store feedback, consolidating insights, revisiting hypotheses, collecting quantitative survey data.
INFORMATION ARCHITECTURE TESTING
What do the users expect?
Categories (cards) for card sorting
First, I explained Songkick's mission and the base functionality of each category (each category being a feature/tab from the Songkick app) to users.
Search
Interested
Going
Concerts
Tracked Locations
Recommended Artists
Recommended Concerts
Notifications
Friends
Filter Concerts
Profile
Card sorting results
Then, I tasked users to, in short, redesign Songkick. This is what they came up with, and I made sure that they explained their thinking every step of the way.
Here's how my users expected Songkick to be organized
Most users correctly reproduced the higher level architecture, and there wasn't any overlap across the discrepancies that users had between what they expected and the app's true organization.
While I gained many insights, I didn't see any core shortcomings of the current IA.
Card sorting insights
Users viewed Profile as "the place where [they] would mess with preferences"
Concerts being "that initial feed that you see, the results based on your preferences."
Notifications is a very essential feature, but users weren't sure if it deserved its own tab or not. Many claimed that push notifications was its most effective implementation.
To users, Search = used when looking for something that’s not permanent, not a persisting preference/setting.
IN-APP TESTING
Observing Songkick in the wild
For in-app user testing, I ran my users (who had never seen the app before) through 3 primary flows and observed their thought process at every step of the flow.
User tasks
Scan your artists from Spotify.
1
Find a concert that you'll want to see this summer.
2
Start tracking a new location.
3
Reactions, during and after
Users walked me through what they were thinking during each task, what they liked, what they didn't, and what confused them.
Key quotes from satistifed, confused, and frustrated users
those artists on the Concerts view aren’t any I’d go to so I don’t know why they're giving me all of that… like I don’t want to #$%&ing filter all of this @#$%... if I I’m switching the location and the dates… I expect that @#$% to be there – I want these to be the artists that I’m into.
– one particularly frustrated user
The value that users saw in Songkick is the magical ability to track exclusively artists they like and to be able to easily find those concerts relevant to them.
Unfortunately, once they actually began to use the app, many felt let down.
APP STORE FEEDBACK
Listening to the general user base
To bolster the robustness of my in-app feedback, I read through Songkick reviews on the Apple app store and Google Play store.
The good, the bad, and the ugly... well, maybe not the good
Highly voted reviews mainly focused on the Concerts view, with users being dissatisfied with its clutter and lack of chronologically-ordered concerts.
A lack of relevant recommendations and tracked artists was also frequently cited as an area of frustration.
CONSOLIDATING INSIGHTS
Reflecting on my 3 hypotheses
Users explicitly confirmed...
Tracking artists
The scanning process is extremely sub-optimal (note the quote that I bolded). After scanning, users get inundated with concert UI about artists that they wouldn't care to see live.
Concerts view
The content strategy and overall design of the main view, Concerts, is incredibly flawed and confusing for users.
Which leaves us with one hypothesis
Interested/Going feature
To do away with the Interested/Going feature, or to build it out?
As voiced in my interviews, users only saw the Interested/Going feature as beneficial if it mean that their friends could be notified of these micro-interactions, if it was SOCIAL.
I still wasn't satisfied – I needed to know definitively if users would gain value from "socializing" this part of the concert discovery process.
FURTHER RESEARCH
Investigating the Interested/Going feature
The current implementation, or lack thereof
Currently, the app allows users to mark concerts as Interested or Going, yet there is no apparent benefit, save for viewing your upcoming plans, to doing so in-app.
The current Interested/Going feature on the app
While on the website, the value attained is being able to view friends' upcoming plans, which lacks discoverability altogether (it's at the very bottom of the long-scrolling main page).
The only UI on the Songkick website where you can view your friends' concerts marked as either Interested and Going
Queue the quantitative research
To further dive into this hypothesis, I reached out to my Stanford classmates to learn about how important word-of-mouth transmission and peer influence are in concert conversion, or one's likelihood to go to a concert.
The form that I sent my Stanford class of 2021 classmates
The responses that I eventually accrued
93%
claimed that "Friends" was one of the top 2 most important factors when deciding to go to a concert or not.
64%
discovered a majority of their attended concerts via word-of-mouth.
Overall, my survey responses confirmed that for most users, the concert discovery and decision journey is social.
I decided to move forward in fleshing out functionality to facilitate further concert discovery/conversion via the social relations ingrained in the process.
A word of caution (to myself)
Because of the contextual insights I had gained in my interviews (i.e., users would see themselves using this app every week or month), I did not want to replicate social network or messaging functionality established in widely and frequently-used social media.
03
Insights to Screens
Creating dedicated user personas, 3 core design goals, brainstorming solutions/features, testing screen prototypes, consolidating feedback, iterating core solutions.
USER PERSONAS
From many, 3 personas
USER PERSONA
Raver Roddy
Roddy loves to go to EDM raves during free weekends, but he generally listens to hip-hop when he's not catching live music, regardless of if he is studying or working out.
User Journey
Decides he wants to go to more raves with his friends.
1
Downloads Songkick hoping it can help.
2
Scans his Spotify playlist and gets 300+ hip-hop artists.
3
Creates new account, manually searches every EDM artist.
4
Realizes this is way too tedious and time consuming.
5
USER PERSONA
Moving Matt
Matt is a busy college student always making plans to see concerts. This coming summer, he'll be moving to New York City to pursue a banking internship.
User Journey
Excited to make plans to see concerts in NYC.
1
Downloads Songkick in hopes that he can find shows.
2
Becomes super confused by the Concerts view.
3
Can’t find a chronological list of his recommended concerts.
4
Gets alerts for artists that he doesn’t like.
5
USER PERSONA
Social Sally
Sally, a social butterfly, has a super diverse music taste. She loves to go to all kinds of live events as long as she has at least one friend to go with.
User Journey
Finds Songkick isolating, yearns for a social aspect.
1
Instead, asks around about concerts people are seeing.
2
Realizes some people share an interest in a smaller artist, Yung Pinch.
3
Goes and has a great time with them!
4
Wishes there was a magical orb telling her who everyone was seeing.
5
DESIGN GOALS
Where to focus my efforts
3 personas = 3 core painpoints
While there are an incredible amount of UI tweaks to be made to Songkick based on the in-app feedback that I had gathered, creating the above user personas based on my UX research allowed me to focus on a subset of persisting problems that, if solved well, would contribute to 80% of usability improvement (look up the Pareto principle, or the 80/20 rule).
Core design areas
Tracking artists (Raver Roddy)
Refine Scan/building up tracked artists in a flexible, effective manner to align with users’ true live music preferences.
Concerts view (Moving Matt)
Streamline and align Concerts and Search view/functionality with expectations and needs of users.
Interested/Going feature (Social Sally)
Leverage social networks and Interested/Going feature to facilitate more discovery and engagement without attempting to replace current established lines of communication.
BRAINSTORMING
Brainstorming solutions
Tracking artists ideas
How might we refine the scanning/tracking process?
One of my mind maps for tackling the tracking problem
Smaller scan + then curate further
After scanning, Songkick automatically tracks the user's top 25 artists. The user can continue to curate (add or delete) tracked artists at their will.
"Tinder" on-boarding like/dislike
During on-boarding, after initial scan, user goes through "cards" of concerts that they might be interested in, likeing or dislikeing them as Songkick refines their tracked artist list.
"Google Photos" interruption UI
Intermittently during app-use, the UI pops up concert recommendations that the user might be interested in, and the user confirms or rejects that recommendation, updating their tracked artist list.
Concerts (and Search) view ideas
I decided to also focus on streamlining the Search view because most users, during my Card Sorting testing, viewed the Concerts and Search view as having intertwined functionality, and thus were confused by the Search view's seemingly limited scope.
How might we improve the Concerts (and Search) view to fit the users' needs and expectations?
Thinking through solutions to enhance the browsing/searching experience
"Spotify" 2 tabs
Divide the Concerts view into two tabs (like the Spotify Library view), Explore (the user's tracked preferences) and For You (the app's recommendations).
Explore = vertical, For You = horizontal
For the Explore tab, vertical shows the chronological ordering, while horizontal carousels maximize real estate (and sacrifice discoverability) to show user concerts they may like.
Search locations + artists
Expand search to provide for locations. One potential user flow: Search => Boulder => View concerts in Boulder => Explore tab in Concerts view with that filter applied.
Interested/Going ideas
How might we leverage social networks for concert discovery?
Brainstorming how I might make Songkick social
"Venmo" friends syncing
Like in Venmo, automatically track friends based on contacts and Facebook. Also allow user to gauge a "pulse" on who is seeing who performing live, similar to the home view on Venmo.
Groups
Allow users to join groups to help mobilize concert conversion within friend groups - entire group recieves notifications together as well as pre-sale codes.
The Groups idea arose from a combination of research findings: users admitting that they've missed out on several concerts before, friend groups often sharing live music tastes, peer influence being very important in concert decision-making, etc.
Ideal user context
This is what we want: "Ryan is interested in concert X"... "Hey Ryan, I saw you were going to X"... "yea man, didn't know anyone else wanted to see them too, but wanna go together actually??"... "I'm in!"
TESTING SCREEN PROTOTYPES
Notecard Prototyping
Tracking artists
What did I sketch out?
Scanning UI
"Top 25" scanned artists v1
"Top 25" scanned artists v2
Scanned/Tracked Artists
Scanning UI
No major changes here – simplying making the UI minimalist.
Automatically track "Top 25" (variations)
Two variations of an on-boarding screen to display all artists that were scanned, with the top 25 having already been tracked.
Scanned/Tracked Artists
A 2 tab view in the Profile tab where users can see their tracked artists as well as their scanned artists.
What did users think?
My users rated this approach as much more effective than blindly tracking all of the artists on their libraries.
One user voiced her concern: "what if I start listening to new artists: I doubt that they would bubble up to my top 25 artists! That list wouldn't help me then."
I knew that I would need two lists: a ranked list of the user's scanned artists (where the top 25 are tracked at the outset) and a "your top artists from the past X days" list.
With this curated approach, recommendations from the app would be hugely important for updating the user's tracked artists during regular app use.
Concerts (+ Search)
What did I sketch out?
Tracked, Recommended, Saved tabs
Concert card UI v1
Concert card UI v2
Search view
Search results v1
Search results v2
Tabs variation
Tracked, Recommended, Saved tabs
The main Concerts view has 3 tabs. Tracked = concerts based on who/where they're tracking, Recommended = app's recommended concerts, Saved = manually saved concerts).
Concert card UI (variations)
I created 3 ways to render Concert content in square, rectangle, or 3/4 rectangle shape.
New Search view (variations)
Initial search state with "Recent Searches" suggestive UI, variations regarding search results to account for addition of location searchability.
What did users think?
Users unanimously preferred the overall Concerts view structure compared to the original horizontal carousel UI.
Users appreciated the Recent Searches feature of the Search view and preferred the tabbed search results UI. As one user pointed out, "I hate how Spotify doesn't separate albums from songs from artists when I search things".
Half of my users preferred the square (2 column) card layout, while the other half preferred the wide rectangular card layout.
I decided to move forward with a 2-tabbed Concerts view structure, separating concerts based on the user's preferences/filtering from concerts that the app is recommending to the user.
I also decided, in allowing Search to additionally encompass locations, to categorizing the, or use tabs for, search results for users.
Interested/Going screens
Since the Interested/Going feature isn't exactly a screen itself, and because it is intrinsically part of "socializing" the Songkick app, I decided to focus on the Profile view, where users already expected friends preferences and Interested/Going to reside.
What did I sketch out?
Profile UI (variations)
Different experimentations on organizing preferences for the user (tracked artists/locations) and embedding Friends and Groups features within as well.
Friends/Groups tabs
A tabbed view to toggle between a user's friends and the groups that they belong to.
What did users think?
Users saw potential in the groups feature and confirmed that they did not want for this feature to allow for messaging because they already have group-chats established!
Users were weary of making this a fully fleshed out friends feature, wherein users make accounts and explicitly add/request friends.
They also voiced concern about receiving notifications about "friends" that they didn't care about.
At this point, I knew that socializing the Songkick app must only account for concert *discovery*, i.e., finding out about concerts and spreading the word.
In terms of friends, I saw Venmo as a great analogy in terms of a "low-commitment" social network – syncing friends automatically and keeping a pulse on who was going where.
04
High Fidelity Designs
Devising a design system, studying Songkick UX copy, designing high-resolution mockups and final prototype in Adobe Xd, future improvements and next steps.
DESIGN SYSTEM + COPY
Refining the UI
Maintaining dark theme
Songkick's dark theme already served as a very robust visual approach because it met the users' mental model of concerts and live music.
I made sure to read up on and follow the dark theme best practices widely agreed upon, specifically referenced in Google's Material Design documentation.
Utilizing the Songkick Red
Songkick did not seem to use color intentionally within their UI. I decided to use their accent color to indicate important UI, like newly announced concerts, tracked artists, etc.
Other
Rounded edges
A ubiquitous design transition from the current app, I decided to rely consistently on rounded edges for card components as they are widey regarded as being "back in style" in the UX world for many valid reasons.
Error state
Since I was using red to indicate important UI, I needed a distinct color to show error states. I chose an orange hue to do so!
Without furtho ado...
My new Songkick mobile design system, typography, and color pallette
UX copy
Sensibly, I decided to align my copy in the redesigned Songkick app with Songkick's tone itself. Their tone?
"We think of the most straightforward way to say something, then don’t say it that way."
"We don’t refer to ourselves in the third person."
"Sentences should feel tidy and functional, and paragraphs should look and feel snappy."
This tone comes out most in the onboarding flow!
HIGH-FIDELITY MOCKUPS
Putting it Together
Onboarding + tracking artists
For a user to build their list of tracked artists, this is a persisting process that begins in the onboarding phase and continues via app recommendations and manual additions in the Profile tab.
Onboarding flow – building a user's tracked artists list, from the initial scan to further curation
Connecting with friends and groups
Users receive notifications from their "Close Friends" while being able to keep a pulse on who is going to see who in their Notifications tab.
Users can join groups with shared live music tastes to be notified together and recieve Songkick promotions.
Social flow – connecting with others, viewing friends and joining a group
Finding a concert
The bread and butter of Songkick, the Concerts view allows users to browse chronologically through concerts from artists and in locations that they are tracking. They can also check out location music that the app thinks they will enjoy.
After getting a pulse on their surrounding community in the Notifications tab, users can view more information on specific artists or concerts.
Browsing flow – finding a concert by adjusting filters, exploring recommended events, visiting notifications, and choosing an artist
HIGH-FIDELITY PROTOTYPE
The Final Redesign
Here's what the final redesign looks like in the hands of a user!
The final product, from onboarding through most user flows
WHAT'S NEXT
Future Improvements, Next Steps
Feedback from users.
To test how successful my redesign was, I know I have to get my final prototypes back in the hands of users. As I am still testing users, I am still waiting to post the final redesign feedback here!
Running this by Songkick themself.
As of now, Songkick has no idea that I redesigned their app. But I intend to change that (via many cold emails) and at the very least, to hear their initial thoughts!
Test the Groups feature intensely.
The social side of Songkick is the most volatile, for me, as many users claimed they would only see themselves using Songkick around once a month. Would only a few users add their friends?
Optimizing push notifications.
Throughout this whole redesign, I was weary to focus on push notifications because I worried it took away from the app design itself. But, as I learned with user interviews, push notifications could make or break their UX. Songkick could be improved via intense quantitative research on which push notifications are effective (enhance concert discovery and conversion) versus disruptive.
Profile UI v1
Profile UI v2
Profile UI v3
Profile UI v4
Friends tab
Groups tab
Profile UI variation