Background

In line with Saudi Arabia's Vision 2030 to become a leader in esports, the Saudi Esports Federation launched Gamers8 at Riyadh’s Boulevard Stadium. The 60-day event boasts a $45M prize pool, attracts millions of viewers, and offers a blend of gaming, live music, cultural activities, and family entertainment. The Saudi Esports Federation plans to develop a website that caters to both local and global audiences, offering event details and ticket booking.

Problem

The Gamers8 website needs to cater to a diverse audience, including global esports fans and local Saudi users, who differ in cultural norms, languages, and mental models for interacting with websites. While esports is characterized by vibrant and bold themes, Saudi culture leans toward conservatism. The challenge lies in designing a website that strikes a harmonious balance between the dynamic nature of esports and the cultural values of Saudi Arabia, delivering an engaging user experience that resonates with both local and international audiences.

Solution

To craft an engaging user experience for gamers worldwide, it is essential to first understand their behaviours, usage patterns, and preferences. This should be followed by a deep dive into the cultural sensitivities of Middle Eastern users, who make up the majority of the in-person audience.

Understanding eSports Gamers

To gain insights into our users, we began by conducting secondary research to understand gamers both globally and in Middle Eastern countries, focusing on their preferences, attitudes and behaviours.

Insights from secondary research

• Around 70% of Arabic-speaking users in the Middle East prefer browsing websites in Arabic, so the website must support both Arabic and English languages.

• With English being a left-to-right (LTR) language and Arabic a right-to-left (RTL) language, the design must accommodate both layouts seamlessly.

• Since 70–80% of web traffic in the Middle East comes from mobile devices, the website should prioritize a mobile-first design strategy.

• Users in the region equally use high-end and low-end smartphones, so layouts and interactions should be optimized for a wide range of devices.

• Avoid inappropriate imagery, such as depictions of alcohol, revealing clothing, or non-halal food, to ensure cultural appropriateness.

Competitor UX Benchmarking

As part of our UX benchmarking analysis, we evaluated competitors such as ESL Gaming, DreamHack, and Riot Games, focusing on key aspects like navigation, design, ticketing, schedules, user engagement, media integration, and accessibility.

Observations from UX Benchmarking

• Dynamic Visuals & Gaming Aesthetic: eSports websites use high-energy, immersive visuals with bold, dark themes, neon accents, and gaming-related imagery to create an engaging atmosphere.

• Real-Time Updates: All competitors provide live scores, event streams, countdowns, and real-time updates to keep users engaged during events.

• Interactive Features: Few competitor websites incorporated live chats, live streaming, scoreboards, and tournament brackets to foster active user participation.

• Ticketing & Merchandising: eSports competitors highlight ticketing systems and exclusive merchandise, often offering event-specific bundles and gaming-related products.

• Multi-Language Support: Competitors in Middle East, such as those based in Dubai, offer their websites in both English and Arabic to cater to the diverse regional audience and enhance accessibility.

• Community Focus: eSports competitors emphasize community engagement through forums, social media integrations, and user-generated content, such as fan voting and content sharing.

  
  

UX Benchmarking of Popular Saudi Websites with Arabic (RTL) and English (LTR) Support

To ensure the website supports both English and Arabic, we first studied the mental models of Arabic users and their typical interactions with bilingual websites. We benchmarked dozens of the most popular websites in Middle Eastern countries, particularly in Saudi Arabia, to gain insights.

Observations from Popular Saudi Websites

• Most websites default to Arabic, with an option for users to switch to English.

• Layouts on websites are mirrored from left-to-right (LTR) to right-to-left (RTL), although certain elements like numbers, dates, separators, and some graphic elements should not be mirrored.

• English content follows LTR alignment, while Arabic content aligns RTL.

• Italics are rarely used in Arabic, and there are fewer font weight variations compared to English.

• In LTR layouts, the focus is typically on the top-left corner, while RTL layouts emphasize the top-right.

On-Site Research: Boulevard Stadium Visit

Our on-site visit to Boulevard Stadium in Riyadh was invaluable in understanding the environment and how Gamers8’s offline facilities are designed to enhance the visitor experience. This understanding is crucial for developing a website that not only complements these facilities but also empowers visitors by providing essential information and effective wayfinding. By bridging the gap between digital and on-ground experiences, the website can serve as a seamless guide, ensuring attendees can fully navigate and engage with all that Gamers8 has to offer.

Observations from Onsite visit

• The stadium’s vast size, resembling a small city, with multiple venues and hundreds of events on the same day, makes wayfinding for specific events challenging for visitors.

• Locating essential facilities like washrooms, help desks, and prayer halls can be difficult due to a lack of clear signage in many areas.

• Timings for open events, such as light shows and fountain displays, may be missed by users as announcements may not reach attendees inside the venues.

• Mobility vehicles for commuting between venues are available at specific spots, but these may be hard for visitors to notice.

• Popular events are clustered in one corner of the stadium, which may cause a concentration of the audience in that area, potentially limiting exploration of lesser-known events in other parts of the venue. Efforts should be made to encourage visitors to explore these areas.

Framing and Shaping

The homepage of the Gamers8 website is designed to immerse users in the vibrant world of esports, featuring bold visuals, neon highlights, and dynamic layouts that reflect the energy of gaming. It supports seamless bilingual functionality, with an intuitive toggle between Arabic (RTL) and English (LTR) languages. Key sections include real-time event updates, ticket booking, live streams, and schedules, ensuring users can easily access the most relevant information. The homepage serves as a gateway to everything Gamers8 offers, catering to both local and international audiences.

The Gamers8 website is designed with a mobile-first approach, ensuring optimal performance and usability across devices, from high-end to low-end smartphones. Layouts adapt seamlessly to different screen sizes, maintaining clarity and functionality on both mobile and desktop. This responsiveness guarantees a consistent and engaging experience for all users, regardless of their device.

The esports page of the Gamers8 website is designed to centralize all tournament information in a dynamic and user-friendly way. It features an interactive match schedule with live countdowns, real-time updates, and seamless ticket booking options. Users can access live streaming links directly from the page, ensuring they don’t miss any action. Detailed team and player profiles highlight stats, achievements, and rosters to deepen engagement. The page is fully responsive, offering a consistent and engaging experience across all devices.

The Arabic version of the Gamers8 website is designed with a right-to-left (RTL) layout, ensuring seamless navigation and usability for Arabic-speaking users. Content is fully localized, including text, imagery, and labels, to resonate with the cultural and linguistic preferences of the target audience. Numbers, dates, and non-language-specific elements retain their standard formats to ensure clarity and consistency. The design prioritizes mobile accessibility, reflecting the high percentage of regional users accessing the site via smartphones. An intuitive language toggle allows users to switch effortlessly between Arabic and English, maintaining a cohesive experience across both versions.

Impact

• Unique Visitors increased from 1.8 million to 3 million (60% increase)

• Page Views grew from 4 million to 6.5 million (62.5% increase)

• Average Time on Site improved from 3 minutes to 5 minutes (66.7% increase)

• Bounce Rate decreased from 45% to 30% (33.3% decrease)

• Conversion Rate (Visitors to Buyers) rose from 2% to 4.5% (125% increase)

Role

I was the lead UX designer on this project, responsible for research, strategy, and overall execution, with support from two visual designers who assisted with visuals and ideation.

Skills Acquired

• Conducted user research to inform design decisions based on user needs and behaviors.

• Gained experience in creating bilingual interfaces for English and Arabic, ensuring accessibility.

• Developed the ability to balance dynamic design with cultural sensitivities for diverse audiences.