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

Mapping the current product

The product as it stood was based on a javascript ui framework and hand been created exclusively by a dev team, and you could tell.

While technically it "worked" in most use cases, it was deeply unintuitive. In many cases similar interaction patterns resulted in different then expected outcomes.

Mapping the current product

The product as it stood was based on a javascript ui framework and hand been created exclusively by a dev team, and you could tell.

While technically it "worked" in most use cases, it was deeply unintuitive. In many cases similar interaction patterns resulted in different then expected outcomes.

Mapping the current product

The product as it stood was based on a javascript ui framework and hand been created exclusively by a dev team, and you could tell.

While technically it "worked" in most use cases, it was deeply unintuitive. In many cases similar interaction patterns resulted in different then expected outcomes.

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.

DEFINING USERS AND THEIR NEEDS

DEFINING USERS AND THEIR NEEDS

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,

FOCUS ON BEST PRACTICES

Tables and tests

Breaking the form into logical grouping, using form logic from our earlier map. We Used modified checkboxes with text and graphics to reduce cognitive load. We made inputs, placeholder & prompts highly accessible.
We made sure that the form could be saved and completed at a later time, and that all fields could be edited prior to offical submission.

We experimented with table designs allowing the user to edit settings per row, these created a lot of duplication and cluttered the UI

SLICK INTERACTIVITY, BUT PROVIDE GUIDE RAILS

Filters & Work areas

We made the form interactive so focus was placed on the current question and subsequent options were revealed when a choice was made. This allowed us to add some nice animated interactions, but we were cautious to include the ability for user to backtrack to different stages of the application, and to edit every previous field.

We decided that on the left side of the page we would display filter results, and on the right side we created a "work area" which was where the settings and assignment would happen.

CONSIDERATION FOR BACK END

We documented all new required fields and wire-framed how this new data and documents would be integrated into the current system backend CMS.

Wireframing & Prototyping

I used Figma as the primary design tool for a number of reasons.


Allowed me to design with interactive features

Use components & state

Share live links with stakeholders

Inline feedback on the canvas with collborators

Wireframing & Prototyping

I used Figma as the primary design tool for a number of reasons.


Allowed me to design with interactive features

Use components & state

Share live links with stakeholders

Inline feedback on the canvas with collborators

Wireframing & Prototyping

I used Figma as the primary design tool for a number of reasons.


Allowed me to design with interactive features

Use components & state

Share live links with stakeholders

Inline feedback on the canvas with collborators

HIGH FIDELITY DESIGNS

When we were happy with the flow we integrated the brand guidelines and added polish to the interface.

We did most of our testing prior to the deliver of the company's new brand guidelines. One receiving those we began to import styles and make adjustments.

Imported style guides: I created a new figma document using the same components but imported and applied visual identity of the company, including the brand colours, typography, and visual elements.

Make revisions: I shared the figma links and and we discussed the impact of our edits, this led changes based on feedback.

Modified interactions: I looked beyond the loan industry and considered other industries and applications that may provide inspiration and novel solutions for the SME loan application.

Imported style guides: I created a new figma document using the same components but imported and applied visual identity of the company, including the brand colours, typography, and visual elements.

Make revisions: I shared the figma links and and we discussed the impact of our edits, this led changes based on feedback.

Modified interactions: I looked beyond the loan industry and considered other industries and applications that may provide inspiration and novel solutions for the SME loan application.

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.

High-fidelity designs

I used Figma as the primary design tool for a number of reasons.


Allowed me to design with interactive features

Use components & state

Share live links with stakeholders

Inline feedback on the canvas with collborators

High-fidelity designs

I used Figma as the primary design tool for a number of reasons.


Allowed me to design with interactive features

Use components & state

Share live links with stakeholders

Inline feedback on the canvas with collborators

High-fidelity designs

I used Figma as the primary design tool for a number of reasons.


Allowed me to design with interactive features

Use components & state

Share live links with stakeholders

Inline feedback on the canvas with collborators

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.


TESTING DISCOVERY

Finding were that completion time was 17% faster on the new design.

CHALLENGES & LESSONS

The challenges initially were overcoming the language barrier & assigning time to understand & research the industry and regulations.

Late delivery of brand guidelines.

Of course as the project proceeded we unearthed many problems, ideas solutions and each one of these had an impact on the scope & deliverables of the project.

This had a knock on effect on development, as we design to best practice & used whet was known of the brand (colors & fonts) however

IF THIS, THEN WHAT?

Here I have just focused on the application form, we also had to consider the impact on the ‘user dashboard’ where the applicant would be kept up to date about the status of their application, also the impact on the admin side.

A deeper study into the impact of changes at the start would have allowed us to ring fence various phases of the design and development. As implications were understood and added to the backlog of work it felt like scope creep rather than a second or third phase or work that was required, and factored in prior to initiating the design project.

NEXT STEPS

Due to changes in the structure of the company they focused on rebranding and have yet to implement our designs.

PERSONAL IMPACT

Despite the frustration of not getting to see my work in development (yet) I feel the project was very successful, both I and the clients learned a lot of valuable information during the discover and design process.


Our workflow of using a dual language spreadsheet helped empower everyone on their team to contribute to copy across the site. This helped improve consistency, provided better messaging and tone of voice. The process provided ownership to staff in Ireland and Mexico, bi-lingual or not, to contribute to user success.


Our research with support team and their platform helped inform decision to implement Hubspot as their CRM of choice. This allowed them to manage customer touch-points outside of the website, and a degree of flexibility as the business and its regulations changed.

A demo we created for the client to showace the filters, selection and drag and drop functionality.

A demo we created for the client to showace the filters, selection and drag and drop functionality.

Like what you see?

Lets chat.

Like what you see?

Lets chat.

CONTACT

©2023 by Seamus L