Creating a New Esports Betting Platform
Client
An Online Sportsbook, working as an in-house UX Designer with the Esports and Content teams
Time
Six Months, Dec 2019 - May 2020
Type
Competitor Analysis . Stakeholder Interview . Wireframing . Design Studio . Agile
Brief
With the growing interest and uptake of Esports Betting and the increase of competitors in the market, my stakeholders wanted me to create a dedicated esports betting area on our company website.
This included adding and updating new and existing features and functionality to not only have greater appeal to the Esports target audience, compared to the traditional bettor but also grow our audience by enticing novice or square bettors to watch and bet with us.
Our Approach
Using a Mobile First approach, the project was divided into two major sections. With limited access to users, we deep-dived into the subject matter with competitor analysis and usability best practices. Identifying the project requirements, user needs and creating a site map helped to set us up for the design phase.
We designed the new esports area on a page-by-page basis that followed one the of key user journeys, finding a team and placing a wager. Weekly meetings with stakeholders allowed for rapid wireframing and constant iteration, making sure we would get even the smallest detail perfect. The project also included Design Studios where we were able to co-design with the Esports team.
My Role
Lead UX Designer
Appointed as the Lead UX designer I was responsible for the entire end-to-end process, which involved choosing the project approach, carrying out all the research and designing as well as planning and arranging all the stakeholder meetings and design studios.
I designed all the low to high fidelity wirerframes in Sketch and the functional prototypes in Invision. However, I would often confer with my colleagues for their opinions and feedback on the designs.
Discovery Phase
Discovery
Identifying project requirements and user needs
After a stakeholder interview, the business requirements were confirmed. This allowed us to set realistic expectations for the project, align as a team on the features and functions that were to be included in this new product and prioritise them.
Combining my desk research on esports betting behaviours and my existing knowledge on traditional betting behaviour, I was able to create some user needs that helped me understand what our user’s goals and problems might be.
These requirements and needs were important as they acted as guidelines while I was wireframing. Being able to go back and check whether the designs met both the business requirements and helped the user achieve their goals was extremely helpful.
Discovery
Competitor Analysis
Understanding our competitor's strengths and weaknesses was vital to help me identify what the most effective and common features were. But also as this was a brand new area for us, identifying what type of content our competitors used and what the user flow was like between the different pages was helpful. Creating comparison tables was a great way to quickly see the similarities and differences between competitors.
Presenting my findings back to the stakeholders was a chance for me to showcase all the different features and functions available. But also helped them to keep a more open mind when trying something different or new.
Examples of a detailed breakdown of a specific element and a comparison table for the different homepages
Design Phase
Showing four of the early site map's iterations
Design
Site Map development
I made sure to spend plenty of time focusing on creating the correct and most efficient site map for the new esports area.
It allowed me to develop the esports navigation so that we did not include any unnecessary pages nor did we miss out on any critical part of the area’s architecture. It helped me when I started creating the user flows and identifying the important pages for SEO.
Discovery
User Flows
With the Site Map confirmed I began to map out the different pages and how the user would move between them. After multiple meetings and iterations, the flow was confirmed. I also ran multiple scenarios checking that the user was able to complete a range of different tasks and meet their goals.
One of the earlier iterations of the User Flow
Design
Design > Iterate > Repeat
Working through the pages of the user flow I started with identifying the information architecture and page hierarchy, then moved onto the detailed areas of the page. Each week I presented and received feedback on the latest sets of wireframes or design functionality we were focusing on in that particular week.
Starting out with a range of different concepts and ways to design elements, these concepts were critiqued, narrowed down and refined to the smallest of details until the final design was achieved.
Creating prototypes allowed me to present my ideas to the stakeholder in the context of the device being used, but also to conduct short usability tests to ensure a feature made sense or it was clear to the user what the next step was.
Initial concepts for how the Hamburger menu and its behaviour
Three of the proposed line variation, including designs for both mobile and desktop
Design
Design Studios
One of my favourite parts of the project was the Design Studios. Bringing the stakeholders and Esports team together to co-design and create requirements was brilliant and insightful. For one of the design studios, we focused on what information the article pages should include.
In preparation, I broke down and identified the different elements our competitors used. As a team we identified what would be most effective for our page and then individually each member used post-it notes to design and map out their own pages.
Photos of some of the post-it note pages designed by stakeholders
Delivery Phase and Outcome
Outcome
Final Designs
The final result saw the stakeholders received a set of mobile and desktop wireframes for the new esports area and a basic interactive prototype. The new area is now designed with the target user in mind and with new and improved features making it easier to watch, make informed bets and get more out of the site.
As the final product is not yet publicly released, I am not able to show any final designs. The other images show the product during early development, with certain elements blurred out or removed.
Outcome
Challenges and Learning
One of the biggest challenges for this product was the lack of users to speak to. Not being able to conduct usability tests with the designs to test their effectiveness or more importantly find out what users actually needed and how they interacted with the site made it tricky.
Unfortunately, this was out of my control, but to lessen the impact I was able to conduct small usability tests with colleagues (outside of my team) to test how features worked and if they understood the process to be able to complete their tasks.