UX/UI Case Study: Designing A Better Sports Betting Experience

OVERVIEW

Betting on football is a fun and exciting experience. The ups and downs, playful banter between friends, and the opportunity to win a bit are what draw users in.

Project Highlights

The international website is currently live in 5 countries and features 21 sports, pulling feeds from over 50 bookmakers. The website gets a lot of traffic but thanks to a design that is not fit for purpose, most users leave before engaging with the content.

The Process

My process will be different in different projects and will be determined by many factors such as the project goals, business needs, complexity of the problem, time and etc. Here I’ll describe my process for solving this problem.

Understanding the core of the product

Before doing any ideation I started to analyzing the existing design page by page to understand the core of the product. Analyzing comments in the app store also helped me to know the pain points and strength of the current design. 

Key Findings

• Useful: Your content should be original and fulfill a need.
• Usable: The design must be easy to use.
• Desirable: Image, identity, brand, and other design elements are used to evoke emotion and appreciation.
• Findable: Content needs to be navigable and locatable onsite and offsite.
• Accessible: Content needs to be accessible to people with disabilities.
• Credible: Users must trust and believe what you tell them.
• Features Discoverability issues
• They don’t feel the emotionally bounded to app.
  
• Too many taps for the simple action 

Structure your UX proposal sample

Once you have gathered information about the project, next is adopting a structure that would make the document clear and easy to understand. You want to give a background of the project and break down the material into labeled sections. UX proposals can include different sections depending on the nature and complexity of the project it has to cover. Ensure that the document covers the problem, goal, scope, materials needed, and the terms, among other details.

A regular UX proposal would involve the following sections:

• Personal information of parties involved
• Introduction
• Problem definition & goals
• Scope of the project
• History of elements that need changes
• The mapped plan/solutions
• Process
• Final project
• Deadlines
• Budget
• Terms and conditions
• Notes

There were known issues with information architecture, navigation and interaction design. The navigation didn’t allow users the freedom to move back and forward in the journey, and the interaction design was inconsistent across the site. The information architecture was not intuitive and did not follow common industry patterns.

Sketching and Wireframes

We had a list of screens to cover all scenarios so I started to sketching different designs to detail out the flows  to discuss and share with team members to get feedback.

Crafting a Holistic Look and Feel

This is a style guide for the brand and mobile application. This style guide contains colors, typography, components, buttons, icons, and overlays. Color is a great way to impart vitality, provide visual continuity, communicate status information, give feedback in response to user actions, and help people visualize data. Look to the system’s color scheme for guidance when picking app tint colors that look great individually and in combination, on both light and dark backgrounds.

User Flows

familiar, understandable words and phrases. Technology can be intimidating. Avoid acronyms and technical jargon that people might not understand. Use what you know about your audience to determine whether certain words or phrases are appropriate. In general, apps that appeal to everyone should steer clear of highly technical language. Such language may be appropriate in apps that target a more advanced or technical crowd.

As the saying goes, “A good start is half the battle." Before going into user interface design, I made sure to polish the features and user interaction flow.

The following feature flowcharts describe the content strategy and user flow through the app, listing potential features users may interact with. The creation of flowcharts are the basis for refining the workload necessary for developers and higher-fidelity designs later on, and for discovering potential issues behind the product in a quick and time-efficient way. 

Splash and Onboarding

Resist the temptation to display your logo throughout your app. Avoid displaying a logo throughout your app unless it’s necessary for providing context. This is especially important in navigation bars, where a title is more helpful.

When the users start the app, they will be led through a Sign In or Sign Up and onboarding process before proceeding to their default screen, the Home screen, which houses a footer navbar. The navbar has four tab options:

Home — where users go to see and explore different Sport.

Discover — where users go to browse yuor App.

Profile — where users go to view their public profile and settings.

Home and Discover Screens

Real users do not know anything about trends, correctly selected indentations and fonts. They only need a functional that makes their life easier. And designers often forget about it.

Test your app’s color scheme under a variety of lighting conditions. Lighting varies significantly both indoors and outdoors, based on room ambiance, time of day, the weather, and more. Colors you see on your computer won’t always look the same when your app is used in the real world. Always preview your app under multiple lighting conditions, including outdoors on a sunny day, to see how colors appear. If necessary, adjust colors to provide the best possible viewing experience in the majority of use cases.

User Experience Critical for Players in the Sports Betting Market

Have you ever downloaded an app, looked at it for five minutes, couldn’t figure it out, and deleted it? Yes, me too. Even if the app provided all of the features and capabilities I needed, if it’s not usable, it is erased from my mind forever. The same goes for websites. If it takes me more than 30 seconds to figure out how to navigate it, then I will probably never visit that…

What I have learned from this project?

• Simplicity is strength. As a designer, we are often lured by attractive, trendy and out of the box designs. But, We must always remember the ‘why’. The primary goal is to understand the user, their problems and then come up with a design that solves it.
• Process in essential. For a project that is vast, it gives you a roadmap to navigate through what can be a foggy route.