Superfan Overview
Company Backgorund
Riff, Inc. is a company that serves as a career coach to musicians looking to grow their business. They collect and analyze career data to help artists determine their next steps. I, along with three other Springboard students, spent a little over a month working on redesigning their Superfan feature based on user feedback the company had received for their current version. Superfan connects all of a user’s social media accounts to show patterns a musicians’ following, and gives them actionable suggestions to achieve more success.
Problem
The original Superfan design was a text heavy and did not have clear visual hierarchy. In interviews conducted by former teams, users expressed having trouble prioritizing tasks and taking in all the data in front of them. Riff asked our team to redesign their Superfan dashboard so that information was displayed in a more cohesive and intuitive way.
Goals
-
Create a welcome widget for the dashboard that would update users on their most important business trends when they first visit the superfan page.
-
Create better visual hierarchy for the dashboard to help users focus on what they’re looking for.
-
Use user stories to create a better experience for musicians using the website.
Solution
Our team worked together to create a new design for the Superfan dashboard that improved visibility with visual organization and color, and used drop downs and widgets to give the user more control over the information in front of them. This would reduce clutter, facilitate finding specific information, and help users to feel less overwhelmed when looking at their data.
Role
Our team collaborated for every stage of the design process, and shared the roles of UX researcher, UX Designer, and UI Designer.
Tools
Figma
Timeline
One month (April-May 2022)
Beta
Redesign
Design Process
Empathize& Define
Ideate
Prototype
Validate
01. Empathize & Define
Research Synthesis
Since our team was brought on for a redesign, Riff had already had some user feedback from the Superfan beta.
We began our work by going over user stories and looking over the current version of the website together.
.jpg)
Riff’s beta version of their Superfan builder was ambitious and provided musicians with a lot of helpful data to analyze their careers, but it lacked a cohesive design, had very little visual hierarchy, and required a lot of scrolling to find specific information.
User Stories
Riff also provided us with user stories that they had developed based on their user tests. These user stories helped us to narrow our focus and to improve the visual hierarchy of the old design.
-
“As an existing musician, logging in to check out my business after a while can be overwhelming and daunting, I want assurance that my business hasn't exploded in that time even if there are to-dos waiting for me”
-
“As an existing musician, I want to see which areas to focus on to drive my brand forward”
-
“As an existing musician, I want to see the specific actions that I’m working on and should take to drive that area of the funnel”
Persona
Our team was provided with a persona based on Riff’s goals for their Superfan builder.
02. Ideate
Client Sketches
Riff sent our team their sketches of roughly what they would like to see in our redesign.
We went over these sketches with them over Zoom calls and discussed how we could bring them to life.
Low Fidelity Wireframes
Because we were working remotely and on a tight deadline, we decided to start our design process by each doing our own interpretations of the dashboard sketches in Figma and then discussing what which elements worked best for each one. We used components from Riff’s style guides so that we could translate to high fidelity quickly once we clarified our direction.
Wireflows
We went through each design and discussed our choices individually with the guys from Riff and would eventually form a cohesive design based on their feedback. But first, we took a step back to create wireflows for all the superfan functions. To address the issue of users having trouble staying organized and finding the right information on the old dashboard, it was requested that we hide the task creator and most metrics within different widgets that the user could open and close. Our wireflows illustrate the paths that users would take to open these widgets and display their information and to add a task to their agenda. We used a kit for the wireflows to save time and keep aesthetic decisions from interfering with our UX process.
%201.jpg)
Style Guide
Riff also shared their style guide and Figma component files for the redesign. Their brand communicates a sense of excitement and urgency with its bold orange color palette, while keeping their typography simple and clear with Roboto and Nunito.
.jpg)
High Fidelity Screens
03. Prototype
High Fidelity Interactive Prototype
Click for fullscreen!
04. Validate
High Fidelity User Testing Methodology
Riff recruited artist and manager participants who are currently working with their company to test the superfan dashboard prototype. All of the tests were conducted remotely with one team member guiding the test and the other three monitoring and taking notes on the call. Because the superfan funnel was still not active, the main purpose of our tests was to ask if our language and information architecture was clear to users.
Key Takeaways
Problem
One of the main issues that users encountered was creating a task from the welcome widget. Not a single user went to the add a task button without guidance.
After waiting to see what users would do instead of adding a task from the welcome widget buttons, we asked what they thought plus sign meant, and only 10% guessed correctly that its purpose was to create a task.
Solution
To address this, we removed the plus sign we were using and replaced it with a button that said “improve”.
Problem
When asked to create a custom task on the metric card, 75% of participants found it difficult to find the ‘add task’ button.
Solution
To address this issue, we added the words “add a task” next to the plus sign on all metric cards to clarify the buttons purpose.
Problem
More than half of our participants thought the task manager was the most important feature of the dashboard and wanted to see that reflected in the hierarchy. 60% of users also found the original task manager to be text heavy.
Problem
Four out of five of our testers did not know how or where to sync their music and social platforms to their dashboard, and two did not know what “optimal funnel” meant when asked.
Solution
To improve this, we altered the task manager to show multiple upcoming tasks created from various metrics rather than one detailed task. This way users could see a broader scope of their upcoming deadlines or minimize text depending on what their focus was at the moment.
We also moved the task manager towards the top of the dashboard to maximize visibility.
Solution
To address this, we added a small information icon on the optimal funnel card to let users to know what to expect by clicking the ‘Get Started’ button.
Problem
Solution
72% of usability participants had difficulty finding more data within the metric card
To improve this, we added a small graph icon that helps draw the user’s eye to the dropdown and gives them a preview of what to expect when they click.
Final Thoughts & Future Recommendations
Because we had a one month time limit with Riff and their website was an ongoing project, we did not conduct a second round of usability testing, but we did make changes to our design based on the feedback from our first round and made a short list of findings with future suggestions for improvement.
-
Problem: Testers expressed confusion over the metric terms (ei. Conversion, Superfan)
-
Potential Solution: Add an information icon per metric so the user has a better understanding
-
-
Problem: 2/5 participants asked to see more data on location of their listeners and streams to create successful ad campaigns
-
Potential solution: Show fan base location and streams on main dashboard
-
-
Problem: UI of task manager and metric project timeline tasks not cohesive
-
Potential Solution: Design task manager and project timeline to look similar to improve relation between the two
-
Although it would have been nice to do more rounds of testing and iterations, I think our team significantly improved the superfan builder.
