10 STAR
A B2B supplier to licensed sports books. They leverage market-making and risk management expertise to create tools for online bookmakers.
TL;DR
I was the design lead in a project were we managed the b2b client onboarding & settings for sports book affiliate managers. This tool was to be used by managers and traders to create complicated risk management settings and rules for sports markets. Their datasets include a huge array of global sports, and thousands of market options and custom risk management settings.
As a result of the products complexity, filtering, grouping and assigning datasets was the priority use case.
THE PROBLEM
10Star wanted to reboot their in-house partner management tool. The current platform had been built without much consideration on a javascript ui template, that functioned poorly, had a flat data hierarchy and had cause frequent user error.
They wanted to showcase an improved workflow to sell their SAAS product to the growing sports book market globally.
The initial request was to build a desktop only portal for 10 Star admins, and for partners who subscribe to the service to manage their risk and market strategy.
HIGH LEVEL TIMELINE
6 Month Project
My Role
UX & UI design
KEY GOALS
Focus on discoverability for markets & settings.
Clear and simple batch data management.
MY ROLE
I was the solo UX and UI designer on this project. There were two contacts from the clients team who relayed our work and prototypes to internal members of their company. They represented the customer success team and the dev team.
As with all my agency project the first step was to arrange a number of video calls, where we discussed the problems, I asked for guidance on language and information that was niche specific. I love to lean about new industries and am always happy to ask questions that may seem simple to people with insider knowledge. I make no assumptions during the early phases, and it often helps uncovers considerations that the clients themselves had not considered.
Since we were developing based on their existing system we were granted access to the system with 2 user roles and set out to complete tacks described in our initial discover calls..
Decision Makers
Head of Technology
Head of Data Modelling
Myself
Dev Team
Database team
Front end dev team
Customer Success team
Trader support team
Tech support team
DISCOVERY & EMPATHY
During this particular project I didn't get to conduct any user interviews as the requirements had been previously gathered by the 10Star team from traders and users of the platform.
Beginner mindset: For myself as a first time user of their current product, and a novice in the clients industry, it provides a great chance for me to make detailed notes of any successes or failures (either of comprehension or action) that I encounter.
Stakeholder Interviews: I was led by the head of data modelling and and during the discovery process we mapped the features of their existing platform. While doing so we created specs fo new features that they desired to be added and discussed design patterns that could be used to make user tasks discoverable and understandable.
Gathering user feedback: The 10Star support staff had submitted a list of frequent user pain points, and the most frequently accessed parts of their user help interface. .
Journey Mapping: I worked with staff members to map the user journey, from the initial loan application to the final approval, to identify areas for improvement and opportunities to streamline the process. This gave me an understanding of the impact of design decisions on the ‘backend’ of the system.
Pain Point Identification: It was very apparent that their data structure needed improved. There was inconsistent grouping of data. Some of the data had grouped information (such as Country and region) that needed split so that users could perform more granular searches. It was apparent that du to the volume of sports, countries, competitions and markets that search, filtering and batch sorting results would be key.
Error Prevention: Their current platform only returned harsh database errors when a user performed an inoperable task. This required attention and we research the error types, how they could be avoided, and how best we could help the user to correct on the fly, by suggesting recovery steps, and by providing quality feedback.
Understanding the Product
By examining the tool's design and functionality, I can gain insight into pain points and challenges that traders may encounter when using the tool.
This knowledge will enable me to develop recommendations for design improvements that will lead to a better user experience and increased user satisfaction. The design of the tool must take into account the unique challenges faced by users in performing risk management over global sports markets, ensuring that it is easy to use and provides a seamless experience.
There are two primary users. The 10Star administrator who creates the account and sets up the 'package' for the client. The trader, this is the client who will customise the tool to suit their sportsbooks needs.
Traders are responsible for setting the initial odds for various sporting events based on a variety of factors, including team records, player injuries, and other relevant information. They must also monitor the betting patterns of customers and adjust the odds as necessary to ensure that the company remains profitable.
Traders also play a critical role in managing the risk associated with taking bets. They must constantly monitor the betting activity and adjust the odds to ensure that the company is not overexposed to a particular outcome. This involves a great deal of analysis and risk assessment, as well as the ability to make quick decisions under pressure.
In addition to setting odds and managing risk, traders may also be responsible for developing new betting products and promotions to attract customers. They must stay up to date on the latest trends and technologies in the industry to remain competitive.
Administrator
Creation of client and user accounts.
Setting rules based on which option a client purchases, these may include:
Limiting the number of tiers or customisations that can be set by a trader
Limiting the access to sports or countries
Using the same UI components the admin needs to be able to assign & manage the trader view in a case where a partner wants 10Star admins to completely set up the partner account
Trader
Utilising the 10Star tool set
Managing the risk setting which could include:
Creating tiers, assigning risk and assigning markets to the tier
Assigning market types to rule, such as pregame and in game.
Batch manage large datasets
Clear and simple assignemnt to
ALIGNING GOALS FOR STAKEHOLDERS
Admin Role
Trader Role
IDEATION
During the ideation phase we looked at other sites that managed large datasets as inspiration
E-Commerce: We looked at e-commerce solutions where assigning taxonomies is key to data organisation. We looked into shopify, woocommece & magento to compare how those tools managed assigning attributes, tags, categories and prices across multiple products.
Seeking inspiration and novel solutions: As we wanted to get inspired by a wide range of interface options we considered multiple sass tools and sites to see how they managed filtering, selection, assignment, notifications and error states. I created accounts and demoed interactions with our stakeholders to show how various methods could be adopted to 10Stars needs.
Researching best practices and industry standards: We wanted to offer the users multiple avenues to reach their goals, as each user could have a preferred method or mindset when approaching their tasks. For this reason we investigated methods including drag & drop by gmail. We investigated taking over right click to show sorting options, like in google drive. We also looked to tools like invision, were batch managing screens had a nice interaction that displayed when selections were made.
Competitor Research
With our criteria in mind we looked for Saas products that could help the admin and the trader execute primary actions.
We found similar patterns in E-commerce, project management and online storage tools that inspired user patterns we could adapt and use.
Demoing how these external tools worked helped seek buy in from 10Star.
WIRES & PROTOTYPES
The tool was only to be designed for desktop, which meant we had lots of screen real estate to work with.
Testing options: We rapidly built out examples of how interactions would work to allow the clients to test them in figma. The ability to quickly test low-fi prototypes helped gain clarity that could not be gained via static screens
Components: Out intention was to re-use components and patterns as much as possible throughout the application, so we spent more time on nailing the correct approach, knowing that solving filters on one page would solve it for the entire application.
Search & Filter: The keystone to the application would be to best display the options available on each page. These included data for market, regions, countries, competition names, tiers, and other user generated data sets. The initial loads could be in the ten of thousands, so having quick access to reduce, and having visibility of filter status was paramount.
Assignment: The client was keen on a drag and drop example we had mocked up,
HIGH FIDELITY DESIGNS
FIGMA AT THE CUTTING EDGE
As an advocate for Figma I used every new feature to bring together the highest fidelity designs & interactions in order to get sign off and clarify state & actions with the developers. Using components, variants, style rules, autolayout & prototype interactions we were able to bring the product to life and create complex user flows to tell our story.
TESTING & ITERATION
Prior to development we imported designs into useberry to test flows and get user feedback.
Comparative research: We created a mock-up of the existing application flow and one of our modified flow.
Useberry: Using useberry we set specific tasks for users to carry out and observed the results looking for: time to completion, success rate, erroneous click & inputs.
CHALLENGES & LESSONS
©2023 by Seamus L