About
Favoriting is a functionality that allows users to save artists, teams and shows that they like to their account. We can use that information to personalize their experience, notify them when their favorites are performing nearby and suggest other performers to them that they may like.
Up to this point, when users were viewing an artist or team, they could favorite that performer. We wanted to add a management section in the app for a centralized place for users to view, add and remove favorite performers. By investing in this management section, we hoped to support ways to recommend favorites and increase the ease of finding and adding favorites.
Goals
Create a centralized section for Favorites management in the app.
More specifically
-Organize Favorites in one place
-Add functionality for finding new Favorites faster and easier
-Support a search to add from a list of performers
-Organize Favorites in one place
-Add functionality for finding new Favorites faster and easier
-Support a search to add from a list of performers
The Solution
Manage Favorites View (No Favorites)
Manage Favorites (Viewing Favorites Lists)
Search For More Favorites
Using a Music Scan Service to Identify Favorites
Favoriting Animation
Informational Dialogs
The Process
Research
I took a look at competitors and other apps that allow you to save products as favorites or to a wishlist. I brainstormed with product what elements and features we wanted on this screen and went over business requirements. From this research, I was able to take away some best practices for this type action and come up with functionality that we should include in this section:
- List of favorited performers
- separated into teams and artists
- links to the respective performer page
- ability to unfavorite easily
- Filter to highlight performers with events (in season/on tour)
- Search to add favorites
- Music library scan for quick bulk favorite artist add
- Recommended carousel
Ideation
I created a user journey map to help visualize the user experience and layout what views needed to be designed.
Design Exploration
Explored different layouts, UI elements, informational structure and visual treatments for the various pages of the Favorites Management flow.
Choosing a Direction
We went through various design reviews with the design team and product to narrow down on best directions to move forward with. Some of those designs were ran through light user to tests to get user reaction and observe difficulties in using these layouts and UI elements.
Some key decisions made at this point:
1. "Find more favorites" section should be collapsible to remove focus on adding more if user wants to view and interact with current list of favorites
2. Differentiate list of favorites from a list of recommendation with different UI (list versus carousel cards)
3. Favoriting action should be consistent with an on/off state whether its in a button or using the heart icon (Don't use separate Add/Hide buttons)
4. Favorites are organized so that they are easy to find. They are categorized between two tabs (performers and sports), sorted alphabetically and can be filtered by events/no events.
Designs Ready for Development
Once design direction was finalized, I created designs for all the various possible states, accounting for scenarios like a Spotify disconnection, a user trying to view this screen when not signed in, some various loading states, etc. These designs were created in Sketch and handed off to engineering via Zeplin. I designed these views for iOS, android, and our tablet app.
Outcomes and Reflections
The management view was successful in increasing these two KPIs we were tracking: number of users with Favorites and number of Favorites per user.
We released the Spotify scan first because it was the most used music service for our users. Then, we had to design similar scans for Apple Music and Google Music. The scan designed for Spotify was specific to what we were able to pull from Spotify but only needed minor changes to work for the other services. The music scan was a unique idea to easily find artists that a user listens to, but overall it did not have the utilization we were hoping for. The next product idea is to add an onboarding to set-up a profile for new users in which case we can surface Favorites and the music scan to more users.
Ideas for future iterations for this view:
1. Personalized recommendations: The v1 of recommendations in the carousels are based on location for sports and top trending for performers. It'd be great to make recommendations based on events attended, or in the same genre as current favorites, etc.
2. A quick add Favorite functionality: The carousel and the search can both surface performers for the user to add Favorites but without doing the Spotify scan, the user can't go through a list and select a bunch quickly. If the music scan doesn't have better utilization, it'd be great to add something like the pill select in a flow that would surface a lot of options to a user, especially someone with no Favorites or very few.
3. More organization of Favorites: By understanding more about how users are using this view, we could get smarter with how we organize their Favorites. Possibly, separating performers into music and theater would be helpful. More sorting or viewing options could also be helpful. For example, maybe a grid of images instead of a list or sorting by something related to their events versus just alphabetically.