Redesign the website and mobile app and offer a world-class digital experience by keeping user-centricity in mind.
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 member clubs and is admired and followed by fans across the Emirates.
The UAE Pro League had ambitions to increase the fanbase 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, with 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 to their needs.
To meet the objective, we applied a complete User-centred Design (UCD) process to understand the business, the technology and user needs of the UAE Pro League, to provide a user-centric solution.
Knowing the business: As the app and website is complex, the key purpose of the ‘Discovery’ phase was to discover more 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 department's objectives, pain points and expectations were of the redesign.
Knowing the data: We then completed a deep dive on the analytics to understand user behaviour and performance issues by seeing the pages most visited, most exited from and more. This data was used to drive creation of the discussion guide for user testing where we wanted to learn the reasons of the user's behaviours.
Knowing 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's requirements and existing issues with the website and mobile application. It also allowed us to understand the needs and wants from different users, allowing us to create a requirements list based on actual user feedback.
Requirements: We analysed all the findings from the discovery activities and the outcome helped to outline the requirements of the new website and mobile app. The requirements were prioritised using the MoSCoW method and only 'Must and Should' requirements were considered for the redesign. The prioritisations were 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.
IA & Wireframes: As the app and website had 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 on 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, especially for media and partners. 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 the IA was tweaked and approved, our UX consultants created the wireframes for over 400 screens for the responsive website and iOS app in English and Arabic.
Visual design: Our UI designers then created the detailed visual screens and component library based on the new brand guidelines provided. The deliverable included designs for both the mobile app on iOS and Android and the responsive website with desktop and mobile breakpoints. The designs were also provided in English and Arabic languages, in dark and light modes.
Animations and interactions also took a big place in the design. The team worked on creating a dynamic splash screen that showed the Arabian Gulf League's different logos.
To ensure we developed an experience that met the user's needs and expectations, we tested the new designs with 6 participants on app and 6 for the website in our state-of-the-art lab. The findings were used to tweak the new designs and a few desired features were added to the future backlog.
The final delivery of the revamped website and app had received great feedback from the client stakeholders and end users, evident from the new star ratings.
The UAE Pro League now owns a bilingual website and app that caters to football fans and non-fans. It targets to improve football awareness, viewing and engagement in the region.
Key stats 3 months after launch:
The website can be viewed on https://www.uaeproleague.ae/en and the app can be downloaded from the App Store and Google Play.
Thank you very much for the designs. The experience of meeting and working with DOT was really superb.
- Afzal, UAE Pro League
.png)
.png)
