9slides Editor
Motivation
After I started at 9slides, I started tracking key metrics in Mixpanel to get a feel for how engaged our customers were with the product. I was horrified to find out we had an 8% completion rate on our Create a Talk page, which was the central function of our product.
I started tracking user actions required to complete the page to figure out where users were abandoning the process. I won't go into too much detail, but the essentail steps of the funnel were Upload Slides > Upload Media > Start Sync > Publish. I found that most users were able to upload slides, but left before uploading accompanying media. The other large dropoff point was between uploading media and syncing the slides and media together. If a user made it through syncing, they were likely to publish. With this info in mind, I knew I had to address the two biggest pain points: uploading media and syncing.
Approach
First, I performed a user test with a professor at a local university. I chose to interview the professor since he strongly represented our target market. Among other tasks, I asked him to try to make a presentation in our system. Sure enough, he was able to upload slides but got stumped at uploading media.
We didn't have the budget to perform any other user tests so I set about fixing the media uploading problem, starting with a sketch.
At this point, the page just had a button that said "Upload Media," and this opened up a file selection screen. Users could then choose a video or audio file to upload. If they wanted to publish slides only, they would skip that step and push publish. I decided the button was too ambiguous and tried putting three buttons in instead: "Add Video," "Add Audio," and "Slides Only." This approach served the same function as the earlier button but gave users some guidance in what they were looking for. This approach also left room for adding recording funtion in the future.
I also felt that the existing page was too overwhelming to users: every button on the page was present all the time, even though users had to go through them in a specific order. In the new approach, the only buttons that would appear are ones the user could click on. I organized the flow in a way that the user would always know what he or she would need to do next.
Next, I made a prototype in Axure so I could do user testing before passing it to developers. We had no budget for testing, so I took the prototype to other people in our incubator who hadn't used 9slides before and asked them to try to make a presentation with the prototype. Here is a screenshot taken midway through the prototype.
The good news was everyone I had tested was able to upload media sucessfully. The bad news was only one out of three were able to figure out how to sync slides with points in the video. I had not encountered this issue in my previous test because the user never made it that far in the proccess.
I realized this section was more complicated than it needed to be. I simplified the process using the same approach I had before: only show the buttons a user can actually use. See this updated screenshot? Since the user hadn't yet synced a slide, there is no "Restart" or "Done Syncing" button. This will make more sense once you see the entire process below.
This test went very well. All three users were able to finish sycning. I then made mockups for the developers to reference when coding. Here are those mockups. You can see the whole process a user would go through when creating a Talk on 9slides.
Upload Slides
Note the addition of "Use Demo Slides." I added this option for people who just want to test out the system or who may not have a PowerPoint and video prepared.
Upload Media
Here are those three buttons I was talking about earlier. I also added a "Use demo video" option.
Processing
I added a "Processing... this may take a few minutes" message after the video was uploaded. I wanted a progress bar but we couldn't actually estimate how long processing would take, so I settled for this.
Start Syncing
This was a critical step - remember, syncing was one of the two largest dropoff points on the page. Before, a user was presented with four buttons after uploading slides and media, even though only one was clickable. The verbage was confusing as well, and I think the combination of jargon and choice overload was scaring people off. I just presented one new button for the users to press, so they would know what to push next.
First Slide
Now the user's video is playing, and the first slide in their presentation is being shown on the left. The user has two options: speed up playback or select "Next Slide."
Second Slide - Last Slide
After a user syncs a slide, a point is added to the timeline and two new buttons are introduced: "Undo" and "Restart." Nothing changes until the last slide is synced.
Review
After the last slide, a "Done" option appears, as well as the ability to jump between slides. I disabled the "Next Slide" button at this point, because there were no other slides to sync.
Publish
The page scrolls down after the user clicks "Done." I didn't make too many changes to this part of the process; I just laid it out in a more structured way and simplified the verbiage.
View
After clicking "Publish," I took the viewer to the web page that hosts the video. Before, we were taking them back to the Dashboard, which led to some confusion about whether the video was actually published or not.
Results
After making the changes, we saw a gigantic shift in completion rates. Before, 8% of Add a Talk visitors completed the page. After the changes, we had a 33% completion rate. The largest dropoff point was still adding media. My hypothesis is that few people came to the page with media prepared, and thought that they would be able to record in the browser. I suggested adding in-browser recording as a feature, but it is suprisingly difficult to record video in a HTML 5 browser, so we never got around to adding it.
Modifications
After a few weeks, I chose to add a help video to the Add a Talk page for first time visitors. Completion rates went up from 33% to 40% after the change.
