Our goal was to create a custom branded experience for our users, in order to promote our client’s event, ReWired Fest. The Mogul design team’s job was to create a tournament series leading up to the ReWired Fest event, culminating in an in-person final at ReWired Fest.
We spent several months on this project in order to flesh it out fully. We began with a brief given to us by stakeholders, including our product manager, who had held multiple meetings with our client in order to determine how to structure the tournament. From there, we created wireframes and UI, consulting with our client and ensuring we had their approval each step of the way. As we progressed, we created a UX email strategy and email comms to accompany the event itself.
ReWired Fest is a two-day annual event that celebrates esports, and includes music, gaming, and esports tournaments as part of its celebratory activities. Our goal was to drive excitement for ReWired Fest to our user-base, ReWired Fest’s audience, and esports gamers in general. To do this, we would create a custom, white labeled tournament experience specifically for ReWired Fest. The stakeholders decided on calling this tournament series The Road to ReWired Fest.
The structure of the tournament, which was agreed on by the stakeholders, was to be a 12-week tournament which included the opportunity to compete in Rocket League matches, Street Fighter V matches, or both. Finalists of either game would win a free trip to ReWired Fest, as well as the chance to compete in the finals, where a prize pool of $50,000 was up for grabs. This year, ReWired Fest also wanted to celebrate STEAM careers, as well as diversity and inclusivity within the gaming community. This was something we needed to include in our content and designs for the tournament series as well.
While we had the back-end technology available to run the tournament series, we had to completely white-label our existing tech to create the custom tournament experience desired by our client. This required a ground-up approach when creating the UI, though once the UI was created, we would easily be able to “plug in” our existing tech to the interface. However, from a design perspective, this did mean we had to “start from scratch,” in a way - but we also had to grapple with the unique challenges of designing around the functionality and limitations of our existing tech.
While we had the back-end technology available to run the tournament series, we had to completely white-label our existing tech to create the custom tournament experience desired by our client. This required a ground-up approach when creating the UI, though once the UI was created, we would easily be able to “plug in” our existing tech to the interface. However, from a design perspective, this did mean we had to “start from scratch,” in a way - but we also had to grapple with the unique challenges of designing around the functionality and limitations of our existing tech.
We also zoomed in on specific parts of the flow to map those out in greater detail. Because the tournament would occur in different phases (pre-lims, qualifiers, and finals), we mapped out each phase of the tournament. I was responsible for mapping out the user flow for the pre-lims, pictured below.
After we had mapped out the various user flows, we moved into the wireframing process.
While creating our wireframes, we more fully fleshed out the general concepts we had come up with while creating our user flows. We refined some of the details and iterated several times until the concepts for the screens were fleshed out enough to move into visual design.
Once the wireframes were finished, the lead UX designer handed them off to myself and another UI designer to begin the visual design process. We used ReWired’s color palette, which consists of bright neons, and used neutral black and white as a backdrop for bright neon accents. Our goal was to create a fun, vibrant, & visually stunning environment where the tournament would take place.
We used assets from both Street Fighter V and Rocket League to drive excitement for both games. One of the goals of the stakeholders was to see as many users as possible engaging in matches for both games.
Next, we moved on to UX strategy and crafting different types of comms for the tournament. We utilized email comms, SMS comms, and in-website comms (alerts, notifications). We also used Mogul’s KATC (Key Action Tournament Cards) system. This is essentially Mogul's built-in alert system.
First, we created the in-website comms. We started with bell notifications, and then moved on to KATC alerts.
Next, we moved on to email and SMS comms. We used the templates we had built to map out the in-website comms to inform how we would utilize and plan our email and SMS comms. Then, using the strategies we had mapped out, we built wireframes for our email designs and followed this by creating visual designs from those wireframes.
Next, we crafted copy for SMS messages around the key user touchpoints we had identified.
