An in-depth look at how Challonge events was designed. This case study tells an honest story on how events evolved to what it is now, failures included!
Challonge debuted in 2009 as a handy bracket generator, solely developed by David Cornelius (CTO/Product Owner), not knowing it was the beginning of something much bigger. Today, hundreds of thousands of people trust Challonge for their tournaments, including arcade and PC/console gaming venues, sports organizations, and countless online gamers.
What I did at a glance
The events feature is created primarily because of one problem that Challonge has been facing for years: tournament brackets are not consolidated in one "event".
Basically, for each competition or game in Challonge, you need to create one tournament bracket. But in actual gaming events, multiple tournaments being held. Because of this, organizers have to make tournaments for every competition, and will just label them accordingly in the Tournament Name field.
This makes it hard to keep track of all the tournaments that's gonna happen in one event. Thus, the events feature was born.
How do Events work?
The core functionality of Events is quite simple: a CRUD (Create, Read, Update, Delete) of an Event. In this flow, we can see that as an Organizer, we can create an event by providing just the event name, description, start and end time, and location. Although this adds an event onto the database, the event status is unpublished because there will be more steps that are optional for you to do but can make your event more complete and customized. This way, you can always go back to editing your event if you don't have all the information ready yet. Additional steps like as adding banners and logos, sell tickets, organize tournaments, sell merchandise, and add payout preferences, all of which have fields to be filled out of their own. If you don't need them, you can go straight to publishing the event.
If you're a Customer, the flow is pretty straight-forward as well. View the event you like, purchase a ticket, fill out the order form to complete your purchase, then confirm. An email will be sent to you containing your ticket to the event.
As I dive deeper into Challonge, I did a heuristic evaluation of what they currently have at the time I first worked on Events.
There are challenges both in the technical and design parts of Challonge. Technical, since this project has been handled solely by one guy, transferring all his knowledge on getting around the codebase takes time. Also, it is inevitable that there are areas that might not get too much attention while he was coding the app since 2009, particularly CSS Architecture. Since I'm also a front end web developer, this area affects me directly.
As for the design challenges:
The primary target of Events are the medium to large e-sports organizers that could have various games and tournaments for each game: Capcom Pro Tour, Blizzcon, Rage Art, EVO, and other international and local e-sports events. Given that these organisers most likely have their distinct branding, how do we make the interface “feel like it’s theirs”?
The old design and the one deployed to staging feels too much like Challonge, it doesn’t highlight the event that much as it should be.
In this design, the logo is set to become circular, which also be limiting depending on the logo or emblem of the event. From what I’ve researched on game and esports event logos, they usually have a unique, emblem-like shape.
The old design seems premature too at that time. This is primarily because the designer was just borrowed from another team and this wasn't his/her primarily project, so the design didn't go in-depth of the problem yet.
No designs yet for ticket purchasing, but backend code was ready.
All the gears in terms of backend are now ready for Events before I even came into the picture. So only the Event View was available at that time.
Initial Wireframes for Ticketing
As an initial step, I worked on it in reverse: I tried to work with how it was made in the backend and then try to translate it properly in design.
I know it's a reverse approach of your usual design sprint. But we wanted to try and prove first what could be improved from David's initial build and workflow by designing around it and testing it with actual users.
Going straight to coding and deploy to staging
Unlike most design processes, I went straight to coding and deploying to staging. There are several reasons why I decided to go this way.
It was okay for me to jump to coding because I can design the pages in code. Along the lines, I also fixed the CSS architecture and set up a living style guide for Challonge, which is also part of my job in Challonge.
In my opinion, it wasn't wasteful to jump to code because I know I work fast and I'm used to agile methodology. Besides, the backend is ready anyway. The amount of effort required for me to do high fidelity prototypes is kind of the same with me making an actual working app.
By seeing an actual, working app, it's easier for me to do testing and even remote testing. Since the backend is ready, it was also a good way to test David's initial workflow for events, and improve from there.
Event Completion Checklist
Looking to make your event look more enticing? We provided an event checklist that you can do optionally before you go live. We also provided a completion meter to show how you're progressing so far in making your event.
Putting an effort on the Empty States
The Event feature is a new feature in Challonge, so all the users who will encounter this will surely encounter this for the first time, and all of them will stumble upon an empty page that they need to fill out with more information.
I took this opportunity to put an effort into empty states by providing illustrations and subtle animations because this is the first thing the users will encounter as they progress onto making their event.
Your stats at a glance
Once you publish your event live, you will see your event dashboard that provides you with an overview of your stats: orders, sales, and event views. Track how much you're earning, how many orders were made, and see how popular your event is!
Showing the general information of the event: event name, date and venue location, about, and contact.
When you click on "Register", it would bring you to the Tickets page where the tickets are listed and you can choose what you want to purchase.
Once a purchase is complete, we'll send an email confirmation, breakdown of your purchase, and your PDF ticket that you can print or keep in your phone. The QR code will be scanned with a separate check-in app that checks your attendance upon scanning the ticket.
Testing and unearthing problems
We tested our staging environment with people in SplitmediaLabs and our friends outside of the company.
We asked them to do two major roles: be an Event Organizer and be an Attendee.
According to our testers, as an organizer, the event creation is straight-forward. A lot of them didn't encounter that much difficulty going through making and improving their events. It's also easy to buy tickets, but digging further, there are several pain points that we saw and that the tester experienced, and most of them are related to ticket purchasing.
Discovered pain points
No obvious distinction between Participants and Spectators
In an event, there are two types of attendees: Tournament Participants and Spectators. Right now, the backend works in a way that all Tournaments are associated with an Event Ticket, you have a choice not to participate, but you'll always see the tournaments list.
Joining Tournaments wasn't obvious
Tournaments, Challonge's core feature, was sort of downplayed in this design. It has been downsized to a mere checkbox and doesn't even provide the necessary information for the tournament. What game is going to be played? How many players are there? What's the format?
Multiple Ticket Ordering is tricky
Bulk ordering tickets for you and your friends? This is challenging in this design. By ordering more tickets, each of them is associated with tournaments. It's hard to keep track of "Okay for the first Ticket 1 the buyer will only join Tournament 2, but for the second Ticket 1, he'll join Tournament 1".
Going back to the drawing board
Many sketches and internal testings later, we've come up with a new approach that specifically targets the problems above. Unfortunately, there was a caveat, but we think this is necessary.
Introduced 2 ticket types
When creating a ticket, you can now select if what type of ticket you're creating. This way, we can only associate Tournaments with Participant tickets, and Spectators will not see the tournament list that they don't need which lessens the cognitive load for the Spectator.
Single-ticket purchasing per user
Although this has drawbacks especially on bulk ticket orders, it was a necessary step to handle tournament selection properly. With single-ticket purchasing, it also encourages people to have an account at Challonge.
Show Tournament information
In the previous design, we didn't have a good way to expose the tournament information. Here you can see that if you're a Participant, tournament information is now available, and you can select which you want to participate in.
For this test, we made sure that we get people outside of the company as testers, particularly some of the power users of Challonge in the Philippines. From esports coaches to organizers of medium to large esports events in the Philippines.
This time, we had them test Challonge that's in production, and a Framer prototype where we applied the changes and requests from the feedback from the prior test.
We received good feedback for the new iteration for ticket purchasing, but as expected, they were also concerned with multiple ticket ordering.
Besides gathering feedback for our prototypes, we also interviewed our testers and tried to dive in and immersed ourselves in knowing more about how small, medium, and large scale tournaments are organized by various tournament organizers.
Note: Data is from the Philippines and the process may vary per country and organization. Especially on payment methods.
Small-medium events (less than 500 people)
Accept sign-ups through Google Forms
Sort sign-ups on who's spectating, who's participating, and which tournaments are they joining to
If payment is required, it is done via Bank Deposit or On-site payment
Manage sign-ups and input participants in to Challonge
Another fact that we learned is that on small to medium-sized tournaments, participants are also the spectators. It rarely happens that a participant is accompanied by someone. Sometimes a few people bring their parents or significant other along.
Data is still little within Challonge, but for one of the biggest events it held like Push More Buttons, with sales of $8,000+ with 217 orders, shows that most of these event attendees buy tickets for themselves only.
Because of this, it validates that single-ticket ordering can work in small to medium organizations/events.
Large events (more than thousands of people, requires a stadium)
Organizers contact the venue partner
Venue partner handles the ticketing using their own ticketing app which also handles seat reservations. Eg. SM MOA Arena requires smticket.com to be used as the ticketing platform.
Weekly sales reports are submitted by the venue partner to the organizers.
Attendees/spectators are required to pay online through Paypal or credit card.
Payout is handled by the organizer's finance team and venue partner. Either by bank deposit or cheque
In most cases, organizers already have a participant list, which they put in Challonge brackets. They don't go through any registration process.
This process makes it clear that Challonge as an Event and Ticketing service can't fit the needs of large events because the arena or stadium itself has a ticketing service of its own. Which makes sense because there are also some needs like seat assignments that are only possible and available for the venue partner's ticketing service.
Challonge is ❤️ for small to medium communities
The High-expectation customer (HXC), coined by Julie Supan, a Position and Marketing Strategy expert who worked with Dropbox, Airbnb, and Thumbtack, the HXC is the most discerning person within the target demographic. Someone who can be trusted to know the market and make good decisions. If you meet their expectations, you can meet everyone else’s. In Challonge, the HxC is the small to medium-sized communities. Challonge users operate as communities rather than individuals, primarily because it is used for competitions and in competitions, there are groups of people.
Although there are big major tournaments that use Challonge, the majority of Challonge's users are from small to medium-sized communities according to David. Challonge is the go-to app of friends who play competitive fighting games on a Friday night, tournament organizers of a niche community. For events, it would be wise to target the small to medium-sized communities since it's the majority. There might be a lot more money in larger events, which what we're initially targeting for events, but if the product doesn't fit that market, it doesn't make sense to try and force it.
Further improvements, in-app and beyond-the-app
We wanted to channel the Challonge experience even outside Challonge. I wanted to build engagement continuously even after an attendee has already paid. That way we can show that we care about customer experience, not just getting money from them.
How do we follow up and remind them about the event? How do we tell participants where and when is their next match? How do we sort players and spectators so organizers can tend to players quickly? How do we make the check-in progress smooth for spectators? How do we keep the hype? And more.
Note: A lot of these are either shelved or trashed. I didn't get to see them come to life before I left Challonge.
By sending an email regarding the event, we aim to add more to the build-up of the hype of the upcoming event. In the order confirmation, you also have an option to add the event to your Google or iOS calendar, so you have your own reminder in your phone.
Know where you should go with Stations
Stations has been a requested feature from years ago. If you're a participant, it simply tells you which station your match is happening, so you won't get lost!
As an additional help and reminder, we would also send an email regarding your match, where, and when it will happen.
Challonge is probably one of the most interesting projects I've ever worked on. Although I had to leave for another job after working for a year at Challonge, I'm glad I was able to put a foundation in its design in a span of a year, from the learnings from research to establishing it's CSS architecture, which I didn't go through in-depth here anymore since I want to highlight design more in this study.
The vision I had for Challonge's design is that it caters to the small to medium-sized communities, that even though they may seem a small target, it's actually a big pool of Challonge's majority of users and also considered as our power users, and making them stay. By taking care of them and giving them the best experience and make Challonge remain as their go-to app for tournaments and events, we trust that they will be the ones who will recommend Challonge to others. Thankfully, as far as I can see on how Challonge is improving, it has been catering to the needs of this group of people and continues to do so.
Wanna talk about design, tech, career, your dog over some coffee maybe? Let’s connect!