B2B Customer Game Lobby & CMS Design
Year
October 2018 to June 2024
Overview
Designed a CMS platform that enables business customers to quickly configure and customize their product lobby without engineering support. This reduced time-to-market for new launches and increased customer retention through localized experiences.
Problem
Regional partners needed unique lobbies with tailored categories, branding, and languages. Previously, customization required engineering requests, creating bottlenecks and slowing down deployments.
Solution
Built a self-serve CMS console that allowed partners to:
-
Customize lobby templates (themes, logos, layouts).
-
Manage categories, banners, and language settings per region.
-
Assign different templates to downstream customers, enabling scalable localization.
Growth Impact
-
Reduced lobby launch time from days to hours by empowering customers to self-configure.
-
Increased customer satisfaction and retention by supporting regional requirements.
-
Lowered support ticket volume related to customization, freeing up internal resources.
What I did
-
Defined website structure and set the overall visual direction.
-
Designed UX/UI for the lobby and CMS, including responsive web layouts.
-
Delivered UI designs for enhancements and new feature development.
-
Managed project milestones and coordinated with cross-functional teams.
-
Audited visual consistency and asset quality to maintain design standards.
Simplifying Lobby Customization with a Powerful CMS
This project focused on designing a B2B customer game lobby that enables business clients to customize their own lobby experience quickly. Through a simple back-end setup, clients can adjust basic elements, such as dark/light themes and logos, and seamlessly publish their games.
The corresponding CMS allows operators to manage multiple lobby templates for different downstream clients, define lobby categories, banners, and languages, and assign different head offices. These features make it possible to tailor lobbies for different markets and regions with ease.
Wireframe
Wireframe Prototype
Wireframe Testing
Enhancement
New Function Development
Research
Wireframing
Mockups
Evaluation
Competitor Analysis
Function map
Mockup
Mockup Prototype
Mockup Testing
Research
A structured comparison of visual styles, UI patterns, and user flows across competing titles—identifying industry trends, differentiation points, and insights to inform strategic design decisions.
A visual function map—designed to validate alignment, highlight gaps, and ensure every feature works toward player goals throughout the user journey.
Demosite Wireframing & Mockup
Style Guide &
Design Components
We provided both dark and light themes, allowing enterprises to choose their preferred style, along with customizable lobby options through logo uploads. The style guide and design components define a unified visual language across demo websites—covering typography, colors, icons, buttons, and modals—to ensure consistency, reusability, and a cohesive user experience.
 |  |  |
|---|---|---|
 |  |  |
 |  |  |
 |  |  |
 |  |  |
 |  |
UI Flow & Wireframe / Mockup
The UI flow maps out the complete user journey and screen transitions—ensuring interactions feel intuitive before moving into development. High-fidelity mockups and interactive prototypes were delivered to validate the final user experience, align stakeholders, and reduce iteration costs during production.
 |  |  |
|---|---|---|
 |  |  |
 |  |  |
 |  |  |
 |  |
CMS Wireframing & Mockup
Style Guide &
Design Components
The style guide and design components defines a unified visual language across demo websites—covering typography, colors, icons, buttons, and modals. It ensure consistency, reusability, and a cohesive user experience.
 |  |  |
|---|---|---|
 |  |  |
 |
3D Virtual Fitting Design
UI Flow & Mockup
The UI flow maps out the complete user journey and screen transitions—ensuring interactions feel intuitive before moving into development. High-fidelity mockups and interactive prototypes were delivered to validate the final user experience, align stakeholders, and reduce iteration costs during production.
 |  |  |
|---|---|---|
 |  |  |
 |  |  |
 |  |  |
 |  |  |
 |
Evaluation
Enhancements & New Function Development
Improved existing features based on marketing and AM feedback, and collaborated with business teams to define and implement new requirements. Introduced new CMS and lobby functions, including banner management, HO management, colourful and animated category icons, category list, and a new lobby template.
 |  |  |
|---|---|---|
 |  |