Acapella App

For a take home challenge as part of a job interview, I was asked to examine a user flow from any app with at least 5 steps.

I chose the Acapella App by PicPlayPost which I have been using to record songs during quarantine. The following is the flow of creating a new recording and my suggestions for how it could be improved.

Project

This app allows users to easily create, share, and collaborate on multi-track audio-visual recordings. The goal of this project is to find and remove any unnecessary roadblocks to create a more seamless user experience.

Research

If I actually worked for Acapella, I would begin by doing (or reviewing) research including:

  • User interviews
  • Stakeholder interviews
  • Conversation mining

In reality, I do not have access to stakeholders or other users. So, I used my own judgement and had 2 friends go through the flow to identify any pain points.

Updating the user flow

Acapella app welcome screen

Screen 1

There's not much to do with this type of welcome screen. We could test a more enticing message to get users more engaged, but this screen is flashed only for a short time when the user opens the app. They don’t have to take any action to get to the next screen.

Alternate copy suggestions:

  • Sing, play, collab
  • Make music together
  • Let's make music together
  • Let's make some music
The Discover tab showing a feed of recommended videos

Screen 2

This is the first screen users can interact with.

Problem: Users struggled to start a new recording.

Hypothesis: The brand logo does not look like the other menu icons and is not labeled, so users don't immediately realize they can interact with it.

Solution:

  • Redesign the record icon to look consistent with the other icons. Retain the brand color for emphasis and because red is the color of a typical record button.
  • Place a label beneath the icon to add clarity.
the revised menu with labels for each icon

Revised menu

A screen with options to Join Collaboration or Record New and another screen showing the expanded info menu

Screen 3

First screen in the recording flow. This is mostly very clear and intuitive.

My one criticism here is the info icon at the top right. This is the only screen where that information is ever available.

The menu that pops up is quite long and includes lots of things like social links and ads for other apps that aren’t related to the recording flow.

Redesigning this menu would be a whole project unto itself so I’m going to gloss over it a bit. But I think most of these items can be incorporated more naturally into the app so the user can see it when it is most relevant.

two screen for selecting video layouts

Screens 4 and 5

From a UX perspective these two screens can be combined. There’s no reason to make a user choose between Classic or Premium layouts when you can easily toggle between them in the second screen.

I’d have to make sure I was in alignment with business goals—this is an opportunity to encourage users to buy a premium subscription—but I’d want to test eliminating screen 1 from the flow.

options for track length

Screen 6

In this screen, the app asks users to choose an exact track length and suggests they record for the entire lenght of the track.

Problem: Users who don't know the exact length of their song weren't sure how to best proceed.

Hypothesis: It may not even be necessary to include this step. There's no apparent benefit to choosing a length first as opposed to stopping the recording manually whenever the user is finished singing.

Solution: Eliminate this step altogether. Automatically record continuously until the user stops the recording or the maximum track length is reached (10 minutes for premium, 30 seconds for free users).

users can create and edit their track

Screen 7

In this screen, users can choose which track to record, and add effects to any tracks that have been added.

Problem: Users didn't know what any of the menu items would do.

Hypothesis: Using only symbols in the menu adds friction. Users will have to tap each icon to see what it does, and then remember it next time.

Solution: Add labels to the menu icons.

Revised menu

Screen with recording controls

Screen 8

In this step, users can record their track. They can access various settings through the icons at the bottom. I like the warning that pops up when a user does not have headphones connected. They can still record, but it lets them know they won't have the best results.

Problem: Users were again confused about some of the menu items.

Hypothesis: Adding labels to the menu will solve this issue. The record button is an exception, since that is a standard element across all camera apps.

Solution: Add labels to the menu.

the revised menu with labels
screen 9 of the flow

This screen is displayed when the track reaches the time limit or the user taps the record button a second time.

This step is great—it gives users a quick way to redo their recording if they made a mistake without having to wait for their video to render.

users can preview their video track then accept or discard it

Screen 10

Users see this screen after selecting "Continue" in the previous screen. It gives the user a chance to preview their track before adding it to their project. This is where they can trim the video to eliminate any extra time at the end.

The green check and red x icons feel familiar and intuitive, but I would want to test them with more users to see if they were easily able to move on to the next step.

At this point of the flow the user repeats the steps from screen 7 onward until all the tracks have been recorded and accepted.

screen where users can save and share their video

Screen 11

With all tracks recorded and added, the user can add audio or visual effects to their project. And when they're done, they can save and share it.

Aside from the unlabeled menu icons that we've already addressed, this screen works well as it is.

users can add captions, choose privacy settings, and share to multiple platforms

Screen 12 original and revised

Users can add a caption, tag a song (if they're recording a popular song), add privacy settings, or invite collaborators.

Problem: Users were confused about how to save their project.

Hypothesis: This is the first mention of "Mixcord" since the welcome screen, so it may not be obvious that Mixcord and Acapella are the same thing. A clear call to action for sharing would help reduce cognitive load.

Solution:

  • Choose one name for the app and stick with it.
  • Replace the social share icons with one clear "Share now" button.
  • Sharing to other platforms already happens on the next screen—remove it from this screen.
Success message and more social links and back to screen 11

Screens 13 and 14

At the success screen, users can save just the audio or share the project to another social platform. If the user is done with their project, the only option is to close this window with the x icon.

  • Selecting the close icon takes the user back to editing the same project.
  • If they then select "Cancel" they will see an error message warning that they will lose their project.

Problem: Users weren't sure how to proceed. Some ended up sharing their project more than once.

Hypothesis: Users are afraid to lose their work because of a misleading error message. We can bypass the error message by giving the user different options to proceed once they are done sharing.

Solution: Add a menu into this screen so users can go straight to their feed, profile, or a new recording.

Summary

How I improved the flow:

  • Reduced user fatigue by removing 3 screens and shortening the flow
  • Reduced cognitive load by adding labels to all menu icons
  • Removed friction from the final step by adding menu options

Things I didn't resolve, but would continue to work on if I were a UX writer for the Acapella App:

  • Making the info menu more visible and more useful
  • Adding some help text to the audio settings to help users make better recordings

The revised user flow


Get in touch

Interested in working with me on your next project? I'd love to hear from you.

Email me