UAE Pro League

Mobile app and website redesign

Add multiple images to case study
Re-design the website and mobile app and offer a world-class experience by keeping user-centricity in mind.

Background

The UAE Pro League, known also as the Arabian Gulf League, is the top professional football league in the United Arab Emirates. Launched in 1973, UAE Pro League consist of 14 members clubs, and is admired and followed by fans across the Emirates.

Business need

UAE Pro League has ambitions to increase the fan base to expats as well as abroad. To cater for new-age football fans, they wanted to revamp their app and website, keeping user centricity in mind, to create  an exceptional experience for both fans and non-fan user groups. The main goal was to raise the awareness of local football as well as increase engagement in the region. They wanted to ensure each type of visitor had a unique experience, tailored for their needs.

Approach

To meet the objective, we applied a complete User-centred Design (UCD) process to understand business, technology and user needs of the UAE Pro League, to provide a user-centric solution.


Discovery

Know the business: As the app and website is complex, the key  purpose of the ‘Discovery’ phase is to discover about the users and business so that the experience definition is guided by data. Firstly, as there were numerous stakeholders within the business, it was important to host a stakeholder workshop to uncover each departments objectives, pain points and expectations from the redesign.

Know the data: We then completed a deep dive on the analytics to understand user behaviour and issues by seeing the pages most visited, most exited from etc. This data was used to drive the discussion guide for user testing where we wanted to learn the reasons for the user behaviour.

Know the users: We completed user testing with 6 participants for the app and 6 participants for the website. The sessions focused on understanding the user requirements and current issues with the app/website. It also allowed us to understand the needs and wants from different users. This  allowed us to create a requirements list based on user feedback.

Requirements: We analysed all the findings from the discovery activities and the outcome helped to outline the requirements for the new website or app. The requirements were prioritised using the MoSCoW method and only Must and Should have requirements will be considered for designing. The prioritisation was based on business inputs, development feasibility in the given timeline and UX impact.

With all three activities completed, we were in a position to move towards completing the UX and UI.



Definition

IA & Wireframes: As the app and website has a vast amount of data, statistics and information on players and clubs, it was imperative to establish the  information architecture for both platforms. The app was more focused towards fans where they can interact, keep up to date and engage. The website was directed towards non-fans, promoting casual browsing and offering more information than the app specially for media and partners. therefore, the IA was tweaked for each platform. The app was mainly to be used by fans, where as the website also had non-fans, media and other user groups visiting the website. Once IA was approved, our UX consultants created wireframes for over 400 screens for the website, responsive, iOS app in both English and Arabic.

Visual design: Once all wireframes were approved, our DOT UI designers created the detailed screens and component library based on the new brand guidelines provided. The deliverable included designs for both mobile app on iOS and Android and responsive website with both desktop and mobile breakpoints. The designs were also provided for both Enlgihs and Arabic, in dark and light mode.

.


Animation and interaction also took a big place in the design. The DOT team worked on creating a dynamic splash screen that showed the Arabian Gulf league different Logos.


User Testing Validation

In order to ensure we develop an experience that meets the user needs, we tested the new designs with end users, in our state of the art lab. We tested our designs with 6 participants on app, and 6 for the website. The findings were used to tweak the designs, and some were added to the future backlog.

Outcome

The final delivery of a new re-vamped website and app has received great feedback from stakeholders and end-users. This is evident from the new star ratings for both apps.

The league own now a bilingual website and app that caters to football fanbase as well as non-fans; it targets to improve football awareness, viewing and engagement in the region.

Key stats 3 months after launch:

Key stats after launch

The website can be viewed on https://www.uaeproleague.ae/en and the app can be downloaded from AppStore and GooglePlay. 


Thank you very much for the designs. The experience of meeting and working with DOT was really superb.

- Afzal, UAE Pro League


Similar Projects.

Carrefour

User Research

Deliveroo

Mobile App Arabic Usability Test

Postpay

FinTech UX and UI design

Global Village

Revamp website and app design, UX and UI design

Ski Dubai

UX and UI redesign

Atlantis

UX and UI solution - AI