Disclaimer: Please consider that these designs are not my property. This file and the information it contains may be confidential or be legally privileged. It is intended solely as a reference for my work. You should not copy it for any purpose or disclose its contents to any other person. Finally, if these contents are downloaded, please delete once they are reviewed. Thank you.
EsportsGuide
Overview
Emerging from passion and necessity, we spotted a gap in the market and decided to create that missing link. As a result, we launched an international service that guarantees millions of esports enthusiasts around the world, are always up-to-date with esports events. And the best part? All the action can be enjoyed through a single website!
My Role
Product Ideation, Interaction, Visual Design, Prototyping & Quality Assusrance.
The Challange
The global esports audience will reach 453.8 million in 2020 (15% growth YoY), made up of:
-201.2 million Esports Enthusiasts (16.3% growth YoY)
-252.6 million Occasional Viewers.
Design a product that delivers real-time stream listings and online sources to watch esports events, the list covers multiple esports matches broadcasted globally. To ensure full access to all users, we made sure to provide a platform that’s available on desktop and fully optimized for mobile use.
The Process
1.0 – Identifying the problems
Market Research
The main goal was to understand the market and user goals so that we could design a better solution.
- How do some of the biggest esports franchises compare in terms of players and viewers?
- How big is the overlap between viewers of different franchises?
Old platform data
We had some data from the existing platform which helped us speed up this process and get some high-level facts right.
2.0 – Understanding the user
Gamers make up a huge proportion of internet users, 37% to be precise. While the group is highly male-dominated, it’s surprisingly diverse in other ways.
The term ‘gamer’ is broad, so we’ve broken it down into 6 key personas: Mobile-only, Casual gamer, Esportser, Socializer, Cloud gamer, and Influencer.
71% of Fans Watch Only One Game!
3.0 – Framing the problem & Brainstorming
All brands in esports are vying for the attention, engagement, and loyalty of fans, so increasing brand value will be the main priority. We want to tap into global users who want to review stream listings that can be adjusted to their personal preferences – features such as esports, teams, leagues and tournaments are fully customizable. Users can also set alerts and receive notifications about their favourite esports.
4.0 – Building blocks & Design decisions
- Competition audit
- Prioritise MVP
- Assist graphic designers in maintaining brand consistency
- Design iterations and interaction system
5.0 – Wireframing & Page Layouts
Quickly laying out ideas on how to best prioritise all the information based on content hierarchy. This process has been iterated and repeated for all core pages prior to commencing any high fidelity designs.
6.0 – Design systems & Design handoff
Continual communication on every step with the Product Owner has led to the final stages of the design process. Here I have:
- Uploaded and categorised everything to Zeplin
- Assisted with development carrying out Quality Assurances on staging across devices and browsers.
- Compressing all images for SEO optimisation.
The Solution
Results
Outcomes, Metrics, Lessons learned
The love for simplifying any complex project always comes close to my heart. Building upon what was already a very promising product has been truly amazing. The allowance to focus on both the visuals and the information architecture has led to what I believe is one of the nicest (and useable;) products I created to date. Hats off to the developers for an awesome job as well as the rest of the team for staying on target.
Limitations
Points that are not covered in this documentation but could be worth discussing in person.
- Testing and optimisation
- SVG vs PNG/JPG
- Speed optimisation
No way, really thanks for making it this far! Here’s a gif for you!