Problem: How do we get users excited about buying March Madness tickets?
My team wanted to create an enjoyable experience for our users that would also make the ticket buying process more seamless.
After researching March Madness designs, we settled on a bracket concept. Anyone interested in March Madness tickets has probably filled out a bracket before in hopes of their team making it to the final round. By using a bracket design, we hoped to connect more with fans during their ticket buying experience.
The bracket itself is interactive. It acts as a filtering system, so users can filter by the tournament rounds they wish to buy tickets for. Another purpose of the bracket is to be informational for basketball fans. Finding out the location of each tournament round can be difficult thanks to the numerous tournament schedule websites with bad user interfaces. Therefore, we chose to include the round locations in our bracket to help our users easily obtain that information as a part of the ticket buying flow.
We also had to create a slightly different experience as the March Madness tournament progressed. We didn't want users confused and trying to interact with the filter buttons of past rounds, so we disabled specific buttons (with styles and functionality) depending on the advancement of the tournament.
One issue that arose when designing this page had to do with the mobile experience. At first, we wanted to treat the mobile and desktop experiences uniformly; however, the dimensions for mobile devices made that difficult. After brainstorming and sketching out wireframes, we developed a mobile version of the bracket that moves vertically rather than horizontally. This stays true to the bracket concept while proving easier for users to interact with on a mobile device.
While testing the mobile implementation, another issue arose. Users did not see the filtered results of interacting with the bracket without scrolling down. This was definitely problematic, so we decided to add a smooth jump scroll to the bracket filter buttons. When users click a button, they are scrolled down to the appropriate event listings. Then when a user wants to choose a different round to filter by, there is a “view all” button the user can click on to scroll back up to the bracket view.