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 the users

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.

UX Benchmarking

For UX benchmarking Gamers8’s website, I analyzed competitors like ESL Gaming, DreamHack, and Riot Games, focusing on navigation, design, ticketing, schedules, engagement, media integration, and accessibility.

Observations from UX Benchmarking

• Immersive visuals and gaming-themed design elements enhancing user experience.

• Detailed event schedules with filtering options for date, game, and teams.

• Transparent ticketing with clear pricing tiers and benefits on some platforms.

• Smooth integration of live streams and access to archived content.

• Clear navigation observed on platforms like ESL Gaming with intuitive menus and easy access to schedules.

• Limited accessibility features, including lack of WCAG compliance and poor keyboard navigation.

• Overly complex ticketing processes with unclear refund policies.

• Generic user engagement features with minimal gamification or interactivity.

• Device compatibility issues with suboptimal mobile responsiveness.

• Potential to improve accessibility with text resizing, contrast controls, and screen reader compatibility.

• Need for dynamic schedule filters for better usability by game, team, and time.

• Suggestions for interactive features like live polls, fan voting, and real-time chats.

Crafting UX for English and Arabic Audiences

To ensure the website supports both English and Arabic, we first studied the mental models of Middle Eastern 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.

Framing and Shaping

Txxxxxxxxxx ggggggggggggg ggggggggggggggggg

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.