Duration
August 2021- May 2023
Type
UX/UI Designer in a team of 2 designer at FansUnite Entertainment
Responsibilities
Ideation, wireframing, design system, prototyping, testing, interaction design
Overview
Backoffice (BO) is a comprehensive SaaS Dashboard platform aims to create a smooth content management experience for brand operators. The BO controls all aspects of the whitelabel product: Chameleon Sports Book and includes management tools for customers, sport & esport markets, bets, payments, casinos, financial reports, security, promotions, and much more.
The Challenge
Large, Complex Data
The BO operates multiple B2C brands and B2B software in different jurisdictions, each having their own rules and regulations. This results in tracking massive amount of data across site performance, customer performance, payments and gross revenue. Data information and insight are diverse and unstructured that need to be organized and displayed correctly.
Ongoing New Features & Updates
New features and verticals are continually added to the BO to match the ever evolving Chameleon Sports Book. As we add new features, we need new toolsets and also gain additional data to track and analyze. With every new toolsets designs, we need to adhere to the current design system to work with the existing app and maintain consistent aesthetic and user experience as the overall platform.
The Solution
Adaptive Framework
The team designs the BO framework to easily adapt to new features and verticals so we can launch and then iterate on the product overtime. This allows the BO to be iterative, scalable, and not get stuck in development.
Visualizing Data
The team analyzes the complex data and determines how it can be visualized using charts, graphs, tables, and other visual representations. Visualizing the data helps us see patterns, trends, and insights hidden in the raw data, which we can turn into actionable insights and make data more accessible and understandable.
Ideation
My team and I are engaged in conceptualizing potential solutions that are in line with the roadmaps established by the PMs for various sectors and functionalities, as well as incorporating client input and feedback. My primary focus lies in the design of tools related to Market, Promotion, and Casino Management, alongside enhancements to Design System, Advanced Searching, Customer, and Activity reports.
We also collaborate to pool our ideas and jointly work on implementing shared elements, such as the headers and footers of editing panels and modals. Given the diverse nature of our platform encompassing numerous sectors and pages, it’s imperative that we consider all these aspects in order to create a unified design.
Subsequently, I proceed to generate quick mockups within Adobe XD, experimenting with different elements and styles from the components library that could potentially work best. This approach enables me to select the best idea from each mockup and identify the optimal configuration both within and in relation to the current layout.
User Stories
As the various components and mockups converge, the PMs have compiled extensive collections of user stories corresponding to each feature. These user stories essentially represent tasks or objectives that users might seek to accomplish while utilizing the application. These user stories served as the foundation for evaluating the designs, ensuring they facilitated the successful completion of these tasks.
Given our time limitations, conducting a comprehensive user experience test for all of these stories isn’t feasible. Therefore, we strategically select specific stories to create prototype flows for. These prototypes are used in conducting user studies aimed at validating the designs and observing how potential users navigate through the platform and undertake these specific tasks. Here’s a glimpse of what these user stories encompassed regarding to Casino Management.
- I want to move games to specific placement
- I want to move games to the top
- I want to filter games by Feed Provider
- I want to filter games by Studio
- I want to filter games by sub-category
- I want to filter games by status
- I want to hide games
- I want to unhide games
- I want to favorite games
- I want to unfavorite games
- I want to activate maintenance for games
- I want to edit maintenance for games
- I want to remove maintenance for games
Below is an example animation of Casino Management and the user story:
UI Iterations
Following several quick iterations of mockups, I proceed to develop prototypes from the most best design flows. I then showcase these prototypes to our PMs and other relevant stakeholders. This step serves to validate that the feature requirement are met, user scenarios are accounted for, and the designs can be seamlessly translated into implementation easily.
High Fidelity Prototypes
With the completion of the final UI iteration, I then move forward to designing the remaining screens and constructing fully operational prototypes. I use our established design system and incorporate the appropriate components into each screen. This approach ensures that the high-fidelity screens have a cohesive appearance and the same aesthetic as the overall product.
Reflection
I’ve gained valuable insights into the significance of establishing a framework that can readily accommodate new features and verticals. This approach enables us to launch and then iterate on the product over time, avoiding prolonged development cycles. The Backoffice is a constantly evolving project, with a steady stream of forthcoming features and tools in the pipeline. Constructing these tools also comes with the advantage of obtaining direct user feedback, which we can leverage to iterate and enhance the offerings.
Overall, the user-friendly nature and easily approachable learning curve is a point of pride for the team. Our demos have played a pivotal role in supporting our sales team’s efforts to attract new whitelabel clients to our platform.
STEVE FENG 