Introduction
There comes a time in any product’s lifecycle that it needs a boost. The product may have an outdated look and feel, need added functionality or the competition has caught up to the product. While it is true that by redesigning you start from a much more informed and stable base, working with an existing product and an existing user base has its own specific challenges. Let’s investigate exactly what those challenges are by going through the redesign process stage by stage.
This case study is about the UX/UI redesign process of a major company backoffice system consisting 10 interdependent products aimed at many different types of users with numerous systems relying on one another to work in harmony.
Below you will read about the design challenges we faced - how we assessed the current system and conducted user interviews, created Atomic design library from scratch, collaborated closely with 10 different departments, created workflows and prototypes, conducted usability testing, etc.
Below you will read about the design challenges we faced - how we assessed the current system and conducted user interviews, created Atomic design library from scratch, collaborated closely with 10 different departments, created workflows and prototypes, conducted usability testing, etc.
The Company & The Products
BetConstruct is a software development company that offers a wide range of development, integration and support services in the field of betting and gaming industry. The company provides backoffice tools and all-inclusive Bettings and Gaming Software Products, and also Data Feed, Land-Based, AI-Based and Marketing Solutions.
1. Affiliates System - A tool for engaging new players by the help of affiliate network. Allows to create and manage marketing banners, and work with customizable commission plans.
2. Agents System - Allows operators to expand their player base, especially in geographies where gaming access is limited or where affiliate marketing is not an option.
3. CRM (Customer Relationship Management)Â - This is a web-based tool for running data-driven marketing campaigns and customer journeys. The key component is the direct and two-sided interaction with customers through a variety of touchpoints.
4. Risk Management Tool - Also called "Umbrella" is a semi-automated tool developed to detect risky players and decrease financial loss for the betting operators.
5. CMS (Content Management System)Â - Is designed to manage the creation and modification of digital content for web and mobile platforms.
6. Fantasy Sports - Gaming management system that allows players building multiple fantasy teams and take part in various contests.
7. Odds Feed - Designed to provide the most responsive system possible odds, linked to the needs of partners’ businesses to the latest and most accurate information.
8. Predictor - Tool for making the most accurate predictions based on different betting factors to help place the bets wisely.
9. Skill Games - Backoffice product for skill games such as Chinese Poker, Backgammon, Belote, Farkle and Checkers.
The Challenge
During the company’s 9 years of activity different departments separately developed the products opportunistically, primarily in response to market changes and partners requests. As a result, little software and design consistency existed across all the products and significant development efforts were invested in problems already solved in different divisions.
So the main problem was that all products on the platform looked and felt very different, which resulted in users having to relearn how to use the platform whenever they tried another one of the tools. As the company was maturing, it needed a unified UX design and a brand-consistent look and feel.
So the main problem was that all products on the platform looked and felt very different, which resulted in users having to relearn how to use the platform whenever they tried another one of the tools. As the company was maturing, it needed a unified UX design and a brand-consistent look and feel.
The Goal
Product Goal
The purpose of the redesign was to increase the brand awareness across all the backoffice platforms and accelerate user productivity by extending its features adapted to modern trends. As a result we would have
.Decreased user errors
.Decreased training costs
.Savings gained from making changes earlier in design life cycle Decreased customer support costs
.Decreased training costs
.Savings gained from making changes earlier in design life cycle Decreased customer support costs
Design Goal
From the design perspective the redesign aimed to overcome the UX/UI design inconsistencies by creating an Atomic Design System - a collection of rules, principles, constraints and best practices, which would be applied to the UX of all the products.
Roles & Responsibilities
We started with 5 UX/UI designers working closely with 10 departments - Products Owners, Developers, QA Engineers, Support Specialists, etc.
Our Key Contributions:
Create core components for Atomic Design System
Conduct user interviews to get in-depth knowledge of the users’ goals Design low-fidelity wireframes
Provide pixel-perfect UI Design
Provide functional prototypes with micro interactions
Conduct iterative usability testing
Conduct user interviews to get in-depth knowledge of the users’ goals Design low-fidelity wireframes
Provide pixel-perfect UI Design
Provide functional prototypes with micro interactions
Conduct iterative usability testing
The Process
Getting To Know The Products
Since my colleagues and I were unfamiliar with the products, first we needed to understand what those were exactly, how they worked, what was the value they provided to the company and the customers, the impact those had on the company. So for the first 4 weeks we spent investigating each product in detail. We started from the main backoffice product - Spring, then the other products by turn, as their functionality logically depends on the first one’s data.
Interviewing Stakeholders
Every day we had interviews with the stakeholders who were somehow involved with each product. It was important to work closely with them throughout the processes to make sure that what we were going to redesign was always relevant. They introduced us to the main idea, role, various services and specifications about their products, and also what their hopes and fears for the product were, who the competitors were, and how they would measure success after launch.
Competitive Research
After the stakeholder interviews we made some internet research trying to find competitor products on the market. The research included both Affiliates marketing, CMS, CRM, financial reporting platforms and other types of backoffice products in the betting industry, and our team started to investigate competitors’ features and user experience solutions to look for inspiration beyond our domain.
Thus, by observing our competitors and deeply understanding our products we got the big picture, based on which we could start the actual design processes.
As a result of the study, it became clear that all our tools had similar UX patterns and requirements, such as the repeatitive data tables with filters, actions and various functionalities. But before moving on to the actual user experience redesign of the products, we needed to quickly start building a UI Library (Core components) and provide them to the development team.
As a result of the study, it became clear that all our tools had similar UX patterns and requirements, such as the repeatitive data tables with filters, actions and various functionalities. But before moving on to the actual user experience redesign of the products, we needed to quickly start building a UI Library (Core components) and provide them to the development team.
Creating Atomic Design System
The purpose of maintaining product consistency led us to create an atomic design library. Providing consistent user experience across different products and modules of the product would boost the usability. Once our users would learn how to interact with a certain pattern in the system, they would assume the same workflow could apply on the other parts of the software. Maintaining product consistency would not only reduce the learning effort for our users to navigate within the platforms, but also benefit the whole product development cycle, from design, engineering, to QA testing and documentation.
So here the goal was to create a well-structured and sustainable design system, which contains five distinct levels: Atoms, Molecules, Organisms, Templates, and Pages.
So here the goal was to create a well-structured and sustainable design system, which contains five distinct levels: Atoms, Molecules, Organisms, Templates, and Pages.
By focusing on our visual system first and taking an atomic design approach that started with the smallest elements and then scaled out, we were able to build the system in a smart, scalable way. We started by creating some basic core elements(atoms), and we shared the prototypes with the stakeholders. After detailed conversations about colors and fonts, and other components our team settled on a direction.
Next our team built out an element collage - molecules based on the chosen colors and typography. The molecules included buttons, tags, tabs, stepper, progress bars and other navigational components.
Each time stakeholders reviewed and approved designs before the team moved forward.
We were also working directly with the development and QA engineers team to implement changes faster. It was a very collaborative effort for us often sitting side-by-side with them and discussing all the components in detail.
Each time stakeholders reviewed and approved designs before the team moved forward.
We were also working directly with the development and QA engineers team to implement changes faster. It was a very collaborative effort for us often sitting side-by-side with them and discussing all the components in detail.
Exporting detailed specs for front-end development
Our team uses "Adobe XD"Â for creating the UI Library and "Zeplin"Â for providing detailed specifications to front-end engineers.
Currently we have 80 reusable core components (with different states and functions) developed in React JSÂ and we continuously improve and add new components in the growing design system.
Currently we have 80 reusable core components (with different states and functions) developed in React JSÂ and we continuously improve and add new components in the growing design system.
