At Bet Technology I was initially responsible for the transition from Sketch/Zeplin to Figma only (Mar 2021) and for introducing industry standards UX principles and processes. From there, I managed multiple projects and work streams (end user and backend user), implemented gamification on product design, lead a growing product design team from 1 to 4 people. My day-to-day work was along with Product Owners, Frontend/Backend managers and C-level.
This epic had the main challenge of making big chunks of data enjoyable to read (or scan). Sports Insights is a compilation of all types of data related to a specific event or player, such as matches history, line-up, ladder position, player stats and even performance information.
This data serves the purpose of helping the user to make a decision to place a bet or bets. Or simply put, reduce the effort for the user to take desired action.
After some initial deliberation, it was decided to use colour-coding to set better/worse data from each competitor. That way, the user can quickly scan for the green-coloured information: where each competitor is better than the other.
In order to better organise all this data at a high level, we conceptualise at the wire-frame phase quite a few possibilities and ended up choosing a left-and-right (or centre-symmetrical) approach. This is because is the only thing in common that all major sports have: one competitor/team against each other. The gold and old Home versus Away.
For almost every sub-section, we utilise this visual resource of organising and arranging every piece of data aligned with the competitor logos, at the top banner (another component that was re-designed as an additional story/task).
This solution ended up being very adaptive with every major sports market that Palmerbet provided, like Rugby, Footie, Soccer, Tennis, Basketball, American Soccer, Baseball, Ice Hockey and MMA.
To ensure a seamless design handoff to developers, every bit of detail matters. Figma and other handoff softwares offers some good solutions for giving design info to front-end developers, but they are mostly CSS code.
Nothing beats a visual representation of the overall arrangement and how the components should be build to have great responsiveness. These are screenshots from a standard Figma "Handoff" sub-page that I use in my workflows.
This feature is similar to sports related data mentioned above, only for racing. In this case, Greyhound and Harness categories.
Palmerbet racing page has a lot of relevant information being displayed. Each runner has subtantial data to be displayed, not to mention the meeting (set of races) and race information. So how we add all this relevant additional data regarding each runner, on top of everything that is already being displayed?
This is actually a solution used by others in this industry, the information is added to a secondary information architecture level, when the user clicks anywhere on a specific runner row, the information is displayed.
To stand out our solution against what was already being done in the market, we utilised high contrast to visually (and drastically) separate what was the data specific for that runner and what wasn't. The dark blue tone for the container background ended up dictating every other UX direction and UI arrangement.
Utilising a lot of subtle gamification techniques, we included progress sliders, iconified key data and grouped them together and better arranged the data in the Stats sub-section.
This is a good example of a feature that looks simple but couldn't be more far from it. Giving the user the option not only to add or remove favourite runners, but also adding the functionality to other components and pages related to it.
With the goal of promoting the feature from release day, we also created a dedicated home page component which displays the favourites that have races starting soon, to add the layer of urgency.
The user flow below displays every page/section that interacts with the new feature. The main goal for this stage of the process was to make the flow high intuitive.
Most of our effort was to reduce these purple units, which represent every time that the product needs user input (click, scroll, input data).
The home page dedicated component, highlighted in high-level flow above, is a key factor for promoting the feature from day one. Right after concept phase, it was decided to add the dynamic widget in the home page.
To preserve a good experience at the home page, only key information (runner details, prices and time before start) is displayed. With a flick of a switch, the user can check secondary information without having to navigate to the actual event page. All these resources put together speed up the decision-making time for the user. A pleasant experience without too much hassle.
At the concept phase, we tried to port the same UX as the search bar, but it didn't work. First because the regular search functionality was built to search through the entire product, which besides runners also has players, teams and also additional information such as jockey or trainer.
If the user is at the My Stable page and needs a search-like functionality, it needs to be tailored to the favouriting UX: it only needs to search for runners to be added and focus the experience on that part.
By clicking on the Add Runner button, a dynamic search bar is displayed. As the user types, favourited and unfavourited runners are displayed. The experience was focused on clarity and smooth sequence of steps from clicking on the Add Runner to have the runner added to My Stable (favourited).
Here is a "Before and After" compilation about User Interface re-designs or re-arrangements. Most of them had all the shared goals of updating colour palettes, reduce clutter and improve overall readability.
The design system shouldn't be only for designers to use as source of truth, but also as an intuitive and clear design document for non-designers to browse through. Having a "Rated for everyone" design system builds trust with other teams and stakeholders. With Figma recent updates on linking pages with buttons and comments, it also makes easier to start a discussion focused on a specific part, section or component.
