UX designer
EUROBET
The challenge of redesigning the Sport Eurobet app focused on enhancing usability and user experience while preserving existing functionalities. This case study outlines the process of research, analysis, design, and testing, with a particular focus on one key area of the app: the Home Page.
RESEARCH
The first critical step of my design process begins with empathizing—initiating UX research. I structured a comprehensive research plan divided into three distinct phases, each with specific objectives.
Phase 1: QUANTITATIVE RESEARCH
The primary goal of this phase was to segment the target audience using demographic and behavioral profiling. This helped us identify the users we needed to focus on and analyze potential pain points in depth. To achieve this, I employed quantitative methods such as user profiling surveys and satisfaction questionnaires to uncover initial, general pain points.
We collected data from a statistically significant sample of 384 participants, calculated using statistical rules. Through this research, we identified four main user types:
-
Sports Enthusiasts: Users who actively follow sports events and are eager to place bets.
-
Casual Gamblers: Occasional bettors who wager for fun during major events.
-
Experienced Gamblers: Users with deep knowledge of betting, who frequently place complex wagers.
-
New Users: Beginners in sports betting who require guidance and clearer instructions for app usage.
Phase 2: Qualitative Insights
Building on the data from the first phase, we used qualitative methods to deepen our understanding of the identified target segments. The objective was to extract key insights and define clear problem statements.
We conducted focus groups with representative users and created individual empathy maps, which were then aggregated into collective empathy maps. This provided a detailed view of user pain points and experiences. These insights guided the development of User Personas, archetypal representations of our core users.
To further enrich our understanding, we carried out in-depth interviews with users aligned with our Personas. These interviews provided a deeper look into their needs, frustrations, and expectations.
Additionally, we created User Journeys for each persona, hypothesizing how they would interact with the app in various scenarios. This exercise helped us visualize user paths, pinpointing critical pain points and opportunities for improvement.
By combining these tools and insights, we clearly defined user problems and needs, allowing us to formulate specific problem statements to guide the redesign process.
Phase 3: Testing
In the final phase, we conducted additional research through usability testing. The goal was to gather measurable and comparable metrics, enabling us to evaluate the app's performance pre- and post-redesign.
We identified three key metrics to measure:
-
Task Completion Time: Measuring how long users took to complete specific tasks allowed us to identify friction points and assess whether the redesign improved task efficiency.
-
Success Rate: A high success rate indicates that the interface is intuitive and navigable, while a low rate highlights usability challenges. This metric helped us evaluate the effectiveness of our design solutions.
-
Error Rate: A high error rate indicates usability issues, such as unclear navigation or misleading design elements. Reducing the error rate was crucial for enhancing user trust and the overall app experience.
IMPROVeMENTS
Onboarding Tutorial for New Users
One potential improvement is the implementation of an introductory tutorial for new users. A well-designed tutorial could guide first-time users through the app's main features, reducing the learning curve and enhancing their initial experience. This tutorial could include interactive walkthroughs, tooltips, and answers to frequently asked questions, making it easier for users to navigate and effectively use the app from their very first interaction.
Redesigning the Statistics Section
Another area that requires significant improvement is the statistics section and its user flows. Currently, the complexity of this section leads to a cumbersome and unintuitive user experience. For users relying on statistics to make informed betting decisions, quick and straightforward access to data is essential.
I propose a complete overhaul of the navigation and interface for the statistics section, focusing on simplifying the flows and improving information presentation. This could include:
-
Intuitive Filters: Allowing users to easily sort and refine data.
-
Clear Data Visualizations: Displaying information in a visually digestible format, such as graphs or charts.
-
Quick Access Points: Adding shortcuts to the statistics section from various parts of the app, improving accessibility and user efficiency.
The redesign proposal primarily focused on enhancing the usability, accessibility, and engagement of the home page. However, the onboarding tutorial for new users and the statistics section redesign represent significant opportunities for further optimization. Addressing these areas would ensure a smoother, more satisfying experience for all users, ultimately increasing the app’s overall effectiveness and appeal.
iDEation
After empathizing with users and defining the core problems to address, we moved into the ideation phase of our design process. From the research phase, we identified three key areas for improvement:
-
Enhancing usability and accessibility
-
Customizing the interface
-
Increasing user engagement
With these principles in mind, I organized the work by identifying the pain points related to the home page and devising targeted solutions, which I will detail below.
-
Confusion in the Event Selection Bar
The event selection bar features a confusing categorization, mixing sports, entertainment, and politics. This lack of logical order can lead to user disorientation and frustration. A clear and logical categorization is essential to simplify navigation and improve the user experience.
-
Virtual Events Button
The virtual events button is prominently placed above the event selection bar, but it feels like an out-of-context and disjointed element. Ensuring visual and functional consistency within the interface is crucial to minimize distractions and enhance usability.
-
Box Below the Bonus Section
The box positioned below the bonus section contains some event categories but fails to clearly communicate its purpose, making it less intuitive for users. Each interface element should have a clear and easily understandable function to ensure a seamless user experience.
-
Real-Time Events
Real-time events occupy most of the home page but may not be relevant or necessary for all users. Personalizing the content displayed on the home page can increase its relevance and improve user engagement.
The design process began with a wireframing phase, where I quickly developed and iterated through various low-fidelity (lo-fi) versions to evaluate and select the most viable ideas. This was followed by a mid-fidelity (mid-fi) mockup phase, which allowed me to incorporate UI elements into the proposed solutions.
Top Navigation and Event Selection Bar
-
Search Bar: I replaced the previous two-step process (tap on the search icon, then input on a separate search page) with a direct search bar at the top. This change also enabled me to reposition the “My Bets” icon to the left, assigning distinct functions to each area based on the Law of Proximity.
-
Event Selection Bar: I added a secondary bar acting as a filter for event types, integrating the virtual events section to eliminate its previous disjointedness. This enhanced navigation clarity and streamlined the selection process for users.
Top Live and Recommended Boxes
To address issues with the live events and the bonus box below them, I introduced an interactive box structure. This design serves as a preview feature, allowing users to view multiple contents in an organized and personalized manner. The interactive previews leverage gestures (e.g., swiping) and call-to-actions (CTAs) to improve engagement.
The “live” box structure went through multiple iterations to deepen interaction opportunities and assess the pros and cons of each approach.
Mid-Fidelity Mockups and Accessibility Enhancements
During the ideation phase, mid-fi mockups proved invaluable for integrating and refining additional solutions to improve accessibility and the overall user experience. These mockups allowed us to create a visual hierarchy, highlighting key information and important data more clearly and intuitively. This included utilizing typography, colors, and icons to draw attention to essential elements such as betting results, CTAs, and real-time updates.
Dark Mode and Color Mode
One of the major improvements derived from the mid-fi mockups was the introduction of Dark Mode and Color Mode options for the interface:
-
Dark Mode: Offers a visual alternative that reduces eye strain and enhances usability in low-light conditions.
-
Color Mode: Ensures proper contrast and optimal readability while adhering to accessibility guidelines.
Prototyping and Testing
Finally, we developed a prototype to integrate and test the proposed solutions. This prototype not only included the structural and layout changes identified earlier but also introduced animations.
For example, animations were added to the event selection bar to create a smoother and more dynamic navigation experience. These animations help guide user attention, clarify transitions between sections, and enhance the overall aesthetics of the app.
The prototype enabled us to test the new solutions with a fresh user sample, applying the same practices and methodologies used during the research phase. This provided updated data to compare with previous findings, allowing us to measure the effectiveness of the proposed improvements.
This iterative process ensured that the redesign addressed key pain points while delivering a more accessible, engaging, and visually appealing user experience.