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.
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.
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.
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.
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.
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.
Qualitatively, content creators were saying that this flow was much more clear & simple.
the 34% conversion for tournament submission increased to 61%