18-03-21+ComPrizing.jpg

Problem

Battlefy is a Series A esports startup. The platform is a multi-sided marketplace where content creators (tournament organizers) create tournaments for the content consumers (players). This project was re-doing the content creation flow.

  1. Business problem - there were too few tournaments being submitted by tournament organizers, resulting in low revenue because we were getting paid based on how many were being submitted.

  2. User problem - people weren’t submitting because the interface and flow were incredibly confusing, you can see what the old one looked like below. We knew this was a problem because of complaints & conversations over Intercom. We therefore decided to operate with the assumption that the low conversion % of tournaments submitted was due to the complaints - we were roughly 70% confident and felt it didn’t require any additional validation. If we spent more time validating it would take time away from solving a problem we were quite confident was correct.

Solution

The solution was to change the design goal - after talking to a few users and confirming that the flow & UI were incredibly confusing, I decided to revisit the intentions behind the original design. Turns out at the time the old flow was built the team had prioritized speed, aka how fast the user could get through the submission process.

Because of the user problem, I needed to reprioritize the goals for the team. The new goal was clarity. I made the case that we should actually slow down the user, increase the number of steps they’d have to make, but in doing so reduce the amount of information they would have to digest at any given point in time.

You can see how the flow looked much longer at the outset below (new flow is on the right). It took some convincing for the team to be onboard that a longer flow was better for the user and business in this case.

Solution

  1. The solution to increasing clarity was 2-fold:

    • After I challenged product management to be sure that we couldn’t cut any steps, I decided to chunk the information into batches of progress that users could save & leave. What this was intended to do was give users an occasional sense of accomplishment so they wouldn’t feel so overwhelmed by the 30 some-odd steps total. I introduced an ‘overview’ page that showed the high level steps (Setup, Make it Awesome, Finish) and within each step there would be ~10 micro-steps. From an information architecture perspective, I simply introduced a new layer of information hierarchy to group things to be easier to digest.

18-10-25 Scoops 1.2-4.0 - New frame (2).jpg
  • The second part of the solution was to increase the clarity by reducing the amount of visual information on each screen. This would necessitate increasing the number of steps the user would have to go through. The image below shows the overview page where I chunked the steps. Below that is an image of one of the UI of the micro-steps. You can see how I reduced the amount of information, clarified visual hierarchy, and even added a helpful tooltip to further increase clarity, at the expense of speed.

The previous iteration also had 3 levels of navigation present on a single screen. You could see the site-wide navigation, the organizer-wide navigation, and the tournament-creation navigation. I stripped out as many as I could in each flow, so the maximum you would ever see is 2. My argument was that if you are creating a tournament, you don’t need site-wide navigation, you can click a back button to move to a different screen to see the top level nav. Again this would slow the user down potentially, but led to a lot less visual information on each screen.

The previous iteration also had 3 levels of navigation present on a single screen. You could see the site-wide navigation, the organizer-wide navigation, and the tournament-creation navigation. I stripped out as many as I could in each flow, so the maximum you would ever see is 2. My argument was that if you are creating a tournament, you don’t need site-wide navigation, you can click a back button to move to a different screen to see the top level nav. Again this would slow the user down potentially, but led to a lot less visual information on each screen.

Results

  1. Qualitatively, content creators were saying that this flow was much more clear & simple.

  2. the 34% conversion for tournament submission increased to 61%