RIFF
Application Overview
Riff is a startup that helps musicians manage the business side of making music professionally. They provide useful tools for users that monitor sales, connect with collaborators, sell their brands to investors, and more. Riff currently asks users to complete an Electronic Business Kit (EBK) that helps musicians showcase their material similar to a digital resume. Users can feature past projects like album releases, as well as data from Spotify, Plaid, and social media.
Contract Duration ( 4 weeks )
Skills + Tools
Figma
Sketching
Lo- Fidelity Designs
Prototyping
User Testing
Stakeholder communication
Mid-project integration
Collaboration
Contributors
Kristen Tompkins, Harrison Amelang, Bethany McBride
Problem Statement
The onboarding process for Riff’s Electronic Business Kit (EBK) is currently a long and arduous multi-step form. Riff’s stakeholders would like to streamline the experience.
Industry Design Project
“ Riff serves musicians as a virtual business manager. Access tailored growth plans, connect with industry services, and manage it all in one-place. “
Challenges
How might we simplify the onboarding process?
How might we prevent users from feeling overwhelmed?
How might we reduce drop-off or fatigue during onboarding?
Target
Riff’s target audience is musicians and music industry professionals. They hope to help independent artists grow their brand and business and connect with other industry professionals.
Process
We brainstormed, designed, and tested new solutions for Riff’s EBK based on stakeholder input, past research, and previous user tests.
Helping create an easy, seamless onboarding experience for new users who are wanting to connect with other people in the entertainment industry.
Week 1- Lightening Demo
We started with a brainstorming exercise in which we each presented existing products or services that address similar issues; We discussed their solutions and how they could be applied to the EBK.
Linkedin, like the EBK, requires the user to fill out large amounts of information, But they accomplish this through chunking the information into sections that you edit through individual pop-up forms.
Squarespace Website Builder
Squarespace allows users freedom to place elements wherever they need to on a certain page. Offering that kind of flexibility can help musicians design their own EBK’s layout in a unique and memorable way.
IMDb
IMDb communicates vast amounts of information, but excels in using hierarchy to create a natural flow and emphasize the most important elements.
Using stakeholder feedback, previous research, and our brainstorming exercise, we each sketched 5-10 versions for the “Blank Slate”. We then selected our strongest sketch and presented them to the client with a brief explanation of the changes we proposed.
Week 2- Low Fidelity Designs
EBK Onboarding, Simplified
Moving from paper and pencil into digital, we implemented our proposed changes with low-fidelity mockups using Figma.
Our focus here was to transfer Riff’s existing onboarding flow into the new pop-up design. We wanted to maintain the original copy and requested information, both due to positive feedback from users and time constraints, but present it in a clean format. One major concern was keeping each pop-up at a reasonable size without creating an information overload or chunking information into unnatural groups.
Key Points
Although our initial test had a few hiccups, with the user confused by certain aspect not being available to him, we adjusted based on his selections and had much smoother tests in the future
They are an artist who is starting a new album release. They’re using Riff’s EBK to build a proposal to send to potential investors.
Goals
How do users feel about the new design?
Are there any features missing or suggestions for new features?
Is there clear discoverability?
We spent time developing layouts that felt neutral, easy to follow, and without feeling too dense. We created several iterations for each pop-up based on feedback from our client and within our team.
Week 3 was spent prototyping the low fidelity designs in preparation for testing.
The biggest challenge to creating the prototype was balancing creating a realistic and immersive experience for the user while being cognizant of our time constraints.
Week 4- User Testing
Fifteen tests were conducted over the course of a week and a half. Testers were selected from Riff’s contact pool and the user interviews were completed with Riff stakeholders in attendance. Testers held a variety of roles related to the music industry, including managers, cash investors, and artists themselves.
Week 3- Prototype
We recorded the tester as they filled out their EBK, thinking aloud as they did so. Once they had completed the page, we opened the floor to suggestions and questions and dug deeper into their thought process.
Is the new flow efficient and easy to navigate?
Are all elements from the original flow found in the new flow?
Are there clear signifiers and visibility?
We focused on the most likely flows and built out several possible paths. Although it wasn’t feasible for us to create every possible interaction, one of the major changes made to the EBK was the ability for users to complete sections in any order, and we wanted to ensure that experience for our testers.
Each test began with a brief introduction and explanation of the testing process. We gave an overview of the EBK and presented them with a scenario.
Concerns
As a testing group we were concerned about potential railroading during testing. At first, only one journey was available and required users to click on the correct buttons in the correct order to move on. This was in large part due to time restrictions, but over the course of testing we ironed out these issues and eventually had a fully flushed out prototype.
We took concepts from each team member’s sketches to create our final solution for the new design. Our proposed changes were:
Blank Slate - an empty version of the final EBK, in which each section is editable, as the EBK landing screen.
Chunking Data - the information is divided and grouped into smaller editable “chunks” for the user to fill out rather than face the entire document at once.
Optimized Flow - Shifting section placements to create a more natural flow and highlight the most important aspects.
Info Toggles - Allow user to toggle certain section of information on or off for the shared deliverable
