esports landing page

Web Development for Infinix Gaming Master

Client : Infinix

Partner : Mineski

Year : 2022

About Infinix Gaming Master

This project is the creation of an esports website at the Infinix Gaming Master event for registration purposes and displaying various information about tournaments. Infinix Gaming Master is a program that accommodates young people in channeling their interest in playing MOBA Mobile Legends: Bang Bang. Starting from an online-based program that was first held in 2021, Infinix Gaming Master now comes with a challenging tournament concept with a bigger scale and prizes.

Personas

To determine the user persona that will take part in this Infinix Gaming Master, we did several resets. Based on research entitled Gaming and Esports in Indonesia by ASEAN communication agency Vero and research firm Decision Lab, the following data were found:

14 percent are 16-21 years old
18 percent are 22-25 years old
19 percent are 26-29 years old
17 percent are 30-33 years old
21 percent are 34-37 years old
12 percent are 38-41 years old

In addition to age or age, the report also highlights the demographics of domestic e-sports fans by gender. It is interesting to see that although it is still dominated by men with a percentage of 53 percent, it seems that women also have a big share with 47 percent.

Mood Board

I'm looking for some inspiration from Pinterest & Dribbble. Most of them are landing pages with the same category, namely Esports. I found some good visualizations of what they'd expect soon. And I ended up using some layout and design approaches from this inspiration.

infinix gaming master
Moodboard for Infinix Gaming Master

Flow Diagram

This is a project with a simple flow:

  1. User visits the main page
  2. User can view tournament details
  3. The user registers the name of the team and the players

Wireframes

After Flow Diagram is approved i proceed to wireframe process. In this wireframe, i use the actual content from them and also the layout that i propose to present the content, so they know how the page would look like. I find this wireframe process is very important so i and the clients can focus on the content first. I designed the wireframe for all the pages.

Getting Feedback

They approved most of the pages above, on some small revisions. The first one is the hero section on tournament page. They only change some copywriting and description.

High-fidelity UI Design

After some feedback on the wireframe in figma file and their approval, i continue to the UI Design phase for infinix gaming master esport tournament landing page. I ended up using most of the layout from the wireframe which means they agree with my design proposal. Filling the images, creating some design elements to emphasize the meaning of the site, adding colors, and refining the layout.

In this project, all the slideshow designs in the hero section were done by their team. This speeds me up in making Prototypes.

infinix gaming master
Home Page

 

infinix gaming master
Bracket Page

 

infinix gaming master
Tournament Schedule

 

Infinix Gaming Master
TOS Page

 

Esports Web Development
Players Page

 

Esports Web Development
Register Form Step 1

 

Esports Web Development
Register Form Step 2

 

Esports Web Development
Success Register Page

 

Contact Us

If you have project for Web Design & Developemnt like Infinix Gaming Master you can contact us via the contact page to discuss further.

PT Inovatif Cipta Media © 2022 All Rights Reserved