Problem: the traditional bracket style voting system is too complicated and large. It is not mobile friendly and easy to get lost.
Mission: Create a new back-end CMS system. The user can create a bracket voting module which also can be embed to their website.
Create a front-end mobile friendly bracket voting system, easy to use and navigate. Also make the result fun to share.
Here is my design
Here is the process
We identified the structure of how bracket works from a publisher stand point. It has 2 ways to do it:
Group based - Vote from start to finish. We can collect all vote data for all the votes
Round based - the bracket progress with time and each round’s result.
The first iteration we want to use group based voting style, which users can vote from front to end, finish and share their result in once.
The design thinking : Because mobile has limited screen space and bracket is a huge map that can not fit into a mobile screen. Our design is to focus on each cell (each vote) in the bracket , create a simple two buttons tab screen. Once you cast a vote, the screen move to the next vote. In this way, it creates a continuous tabbing motion, the system will automatically navigate the user through the entire bracket.
Beside painless voting style, the other important part of bracket is to know where you are, which round you are in.
We designed 3 different style of indicator map to help user navigate their process or go back to change their votes.
The result is depend on the votes collect from all the users. It is design to be easy to share and visually fun to read.
What I will do better: I wish to have the second iteration that is based on the rounds. The rounds based bracket is more challenging, because to call back the users to continue the brackets is hard. I wish to design a “reminder system” or a “My brackets” system that the users can easy to follow their votes.
