Duration
August 2021- May 2023
Type
UX/UI Designer in a team of 2 designer at FansUnite Entertainment
Responsibilities
Competitor analysis, ideation, prototyping, interaction design, testing
Overview
Chameleon Sports Book (CSB) is a one-of-a-kind complete iGaming platform, with a sports and esports focus geared for the next generation of online bettors and casino players. The CSB includes products for pre-match betting, in-play betting, daily fantasy, content and a certified RNG to produce casino style chance games.
The Challenge
White Label Platform
The CSB is a white label platform and operates multiple B2C brands and B2B software for the online gambling industry. Brands that are launched on the Chameleon Platform require their branding be used and adapted through out the app, so the design needs to be flexible and be adapted for any brands.
Ongoing New Features & Updates
New products and improved functionalities are regularly added to the platform that need to be properly designed using the current design system to work with the existing app and maintain consistent aesthetic and user experience as the overall platform.
The Solution
Addressing Client Requirements
The Project Managers (PMs), Architect, and Product Owners provide rough, general requirements based on features requested by clients. Then I meet with the team to discuss expectations, insights and overall design. This gives me clarification on what was expected of the design team, how we would fulfill the client’s goals, and developing a project plan.
Competitive Analysis
The discussion withe team gives me a better idea on who the competitors of CSB would be. The team and I compile our three main competitors: Bet365, PaddyPower, and Skybet. We work on researching to discover more about each app.
I focus on finding strengths and weaknesses that CSB could take inspiration from or do improve upon. We make sure to include screenshots of the three to get a better visual on what standard iGaming apps looks like in today’s market.
Customizable Modular Design
The team designs the CSB to be simple to use where the information is organized and displayed with great legibility, and to have a modern looking modular structure. This allows existing designs and layout to be customized easily and new features to be added efficiently.
Ideation
The team and I work on ideating potential solutions that align with the PMs needs. I mainly focus on designing for the Sport Competition and Event screens and ensure that all the screens would be similar in style, as well as adapting the client, Dragonbet, branding across the entire platform. It is important for me to make sure the screens were consistent to avoid any possible confusion for users. We also gather all of our ideas and bounce off of one another’s screen to implement the same features such as the navigation panels.
Since our platform has multiple products and pages, we have to take all of them into consideration and create a cohesive design. This is where the project plan comes in handy! It helps outline areas that are more complex, determine possibilities for cross-functional features, and visualize how everything comes together.
From there, I create quick mockups in Adobe XD, playing with different components and styles that could be used as the base model. Doing so allows me to pick what features I like within each mockup and figure out what would mesh well together, but also with the existing format.
Design Approach
From the mockups, I combine the features and components that would potentially work best. I look at how these new designs would flow together and how it would flow with the layout of the product.
Since there are a lot of areas that intertwine, I need to make sure new features and functionalities are designed to work with the existing system and to be intuitive. I look at the mockups with these questions in mind:
- Does the feature address user needs?
- Is the feature easy to use?
- How do these features work?
- Does the feature create any confusions or uncertainties?
- How should the feature be displayed?
- How would these features work with the existing designs we have?
- What new data and functionality are attached to this feature?
Answering these questions help show what I was constrained by and what direction(s) would be possible.
UI Iterations
After several quick static iterations, I create basic prototypes with the main screens and components based on the best design flows. I present the prototype to our PMs and other stakeholders. This ensures the feature requirements are fulfilled, user cases are addressed, and designs can be implements without hurdles.
High Fidelity Prototypes
After having a finalized version of our UI then it is time to design every other screen and create a fully-functional prototype. I make use of our style guide and design system to apply the correct components to all the screens. Consistency is kept by making sure I refer back to the UI iteration we chose as our final selection. This keeps the overall design for high fidelity screens to look cohesive as an overall product. Colors are applied to all screens to match client’s branding, and additional tweaks and adjustments are made based on client requests.
Dev Handoff
The developer handoff includes us providing notes to make certain they understand our design thoroughly and providing specs. The specs allow the developers to have an overall view of all of our measurements for the UI and general padding. This way, even without a prototype, anyone viewing our high fidelity screens know how one screen will move on to the next. I make sure to clarify clearly any call to actions or special features that would take place on a screen. This gives the developers a better idea on how to build on top of our design as well.
Reflection
I have learned a lot about how crucial it is to develop a proper and robust design system. The project is on-going but quite a few areas took much longer than we anticipated due to the lack of a scalable components library, colour system, and design system documentation, but the team really pulled through to always meet deadlines. The team also was collaborative and very willing to work with one another which I greatly appreciated. I have made sure to keep the team informed often on any changes I’d make or share any new knowledge that could benefit our design. I believe this helped push us to be more productive with any down time we were given. Overall, it was an experience that inspired me to share more of my ideas and encourage collaboration with one another.
STEVE FENG 