PROJECT INFO
Riff was a client project I worked on along with three other designers to create a mobile and tablet experience that helped young musicians start their music careers at an early age.
I led the mobile experience design of one of the key features: Project Timeline. I also collaborated with 3 UX designers to ensure all three features work seamlessly on mobile and tablet platforms.
👩🏻💻 MY ROLE
• UX researcher
• UX designer
• Visual designer
🕛 TIMELINE
• 5 weeks
⭐️ Collaborators
• Riff CEO, product lead
• 3 other UX designers
THE CHALLENGE
• Riff only had a desktop website for their product. This limits the accessibility for artists who use their products daily, especially on the go.
• Their current desktop design had lots of user experience friction. Users’ drop-off rate is high.
Riff brought us on board to help design their mobile and tablet platforms for their 3 main features and fix the user friction with the current design.
PROJECT GOALS
Build mobile/tablet-optimized user experience
• Reduce the user friction with the current design and improve the usability of each feature
• Create a mobile and tablet-friendly platform that works seamlessly with the existing desktop design
DESIGN PROCESS
1.EMPATHIZE
We spent one and a half weeks understanding the user and evaluating the existing design. With the user research done by the previous desktop design team, we mainly focused on figuring out the frictions in major user flows and interactive prototypes.
Kickoff with Riff team
At our initial meeting, we met with the CEO of the company and learned some basic information about Riff products. We received the style guide and user research files documents, which included user feedback videos, user stories, persona, interactive prototypes, and so on.
Due to the large quantity of data, we decided to separate the information based on each feature and split it into teams. I ended up in charge of redesigning the mobile platform for the Project Timeline feature.
User research videos offered by Riff
Persona offered by Riff
Insight from the user research
I went over the user feedback videos, persona, affinity map, user journey, etc. for the Project Timeline feature in order to find users’ needs and pain points:
Pain points
Poor navigation
Users mentioned that navigation was confusing. For example, the action button was gray. The projects they created were color coded but they didn’t understand how they worked, etc.
Too tedious to add projects
The biggest struggle users faced was that creating a new project was too time-consuming. Ironically, the reason they used the product was to be more time-efficient.
Identify user frictions in user flows
To better understand the current user flows and discover the user friction, I drew the user flows based on the desktop prototypes Riff offered. I found that:
When the users created a new project, there was no place to add collaborators. The users had to manually add them in later. I decided to add that step directly in the “creating project” process.
When managing project timelines, users couldn’t add new activities while managing daily activities. I also added that to the flow.
User friction in interactive prototypes
Users complained that creating a new project is time-consuming. Some users drop off in the middle of the onboarding process due to lack of a clear step-by-step navigation and tedious tasks to fill out the forms. Here are some examples I found:
🚩 tedious method to fill forms
🚩 grey out the action button
🚩 confusing color coding
🚩Small touch point, not practical when the project is longer than 10 weeks.
2. DEFINE
How Might We…
How might we design a mobile-optimized user experience that allows users to create and manage projects more efficiently?
3. IDEATE
Design mobile-optimized experience
Ideally, designers like to use a mobile-first design approach. This can be done by designing for the smallest screen first and gradually working up to larger screen sizes. However, in our case, the desktop website was designed first. Despite the constraint, we still tried our best to design an optimized experience for mobile and tablets.
1.Choose the simplest input method for each task
In the desktop version, the dropdown menu requires lots of extra effort to click through and made the whole experience more tedious than it needs to be.
I changed it into a multiple choice question format because it is easier to tap on mobile and requires less effort.
2. Add step indicator and auto-fill to inform users about the progress and save users time.
Steppers informed users about their progress and provide reassurance. They are especially helpful for mobile users. Autofill is a thoughtful detail that everyone loves.
3. Break down the form into small steps
What looks fine on the desktop can be overwhelming on a mobile screen. To reduce the comprehension load, it is important that users only take a small step on each screen.
4. Provide enough touch space
What looks fine on desktop can be overwhelming on mobile screen. To reduce the comprehension load, it is important that users only take a small step on each screen.
5. Stick to a single-column layout
Staying with single columns made everything easier to read and tap.
Low-fi wireframe
1st iteration
2nd iteration
Building Hi-fidelity prototypes with a new mobile style guide
The company had a style guide. However, it does not have specific instructions for mobile and tablets. Our team added a few elements that work for mobile and tablets. Based on the feedback from my tablet design partner, I made a few final changes to the hi-fi design and finalized the prototype for a usability test.
4. TEST
Positive feedbacks
Our client recruited musicians, who were current users of the product to test the mobile and tablet interactive prototypes. We had the participants go through the three main features: Project Timeline, Superfan Builder, and Electronic Business Kit on their phones and tablet.
Findings:
No major issue was found with the Project Timeline feature. Users liked the changes they saw in the new design. Before the usability test, users were unsatisfied with the onboarding experience. With the new designer, they were more comfortable with the multiple choice style questions and less likely to drop out.
Final deliverables
LEAVING THOUGHTS
On the last day of our 5-week project, we delivered what we have promised and presented our work to the client. Our team successfully designed cohesive mobile and tablet experiences that work seamlessly with their desktop website.
I will do more user research on users before designing for mobile, and ask for more user feedback on their habits and preference for mobile usage.