Brief & ChallengeDesign Outcome
True Digital Group is a largest technology and digital innovation company in Southeast Asia, specializing in AI, IoT, cloud computing, data analytics, and enterprise solutions. As a subsidiary of True Corporation, it plays a pivotal role in driving digital transformation across industries, including telecommunications, retail, healthcare, and finance.
With a strong focus on digital connectivity and customer experience, True Digital Group offers a diverse ecosystem of B2B and B2C solutions, ranging from smart business services and AI-driven analytics to content platforms, fintech solutions, and digital marketing technologies. Its IoT innovations enable businesses to enhance automation, operational efficiency, and security, while its data-driven platforms empower companies to make smarter business decisions.
Expanding beyond Thailand, True Digital Group has a growing presence in multiple countries across Asia, positioning itself as a key player in regional digital transformation. Through continuous innovation, it aims to bridge the gap between businesses and technology, providing cutting-edge solutions that enable organizations to adapt to the rapidly evolving digital economy. With a commitment to technological advancement and customer-centric innovation, True Digital Group is shaping the future of digital ecosystems and smart industries in the region.
True VWORLD is a virtual conferencing and collaboration platform developed by True Digital Group, designed as a cost-effective alternative to global platforms like Zoom and Google Meet. By creating its own localized virtual communication ecosystem, True Corporation and CP Group can significantly reduce licensing costs while ensuring a customized, data-secure solution tailored to regional business needs.
Unlike foreign software that requires continuous subscription fees and external data hosting, True VWORLD operates on True’s own digital infrastructure, allowing for better cost control, seamless integration with existing services, and enhanced data privacy. This in-house development enables True and CP Group to optimize operational expenses, eliminating the reliance on third-party video conferencing tools while fostering technological independence.
True VWORLD offers advanced virtual meeting features, including AI-driven interactions, real-time translation, customizable digital environments, and interactive collaboration tools. Its localized design ensures better language support, user-friendly interfaces, and alignment with Thai corporate workflows, making it an ideal solution for businesses, educational institutions, and government agencies seeking a more cost-efficient, secure, and scalable communication platform.
By investing in True VWORLD, True Digital Group and CP Group not only achieve long-term cost savings but also strengthen their position as leaders in digital transformation, promoting self-sufficiency and innovation in Thailand’s tech ecosystem.
The True VWORLD Design Tribe consists of five designers, structured into two main squads:
Despite their efforts, the team faces significant challenges due to the lack of a unified design system, leading to inefficiencies, inconsistencies, and communication gaps between design and development.
To streamline workflows, ensure consistency, and improve collaboration, True VWORLD needs a scalable design system that:
By adopting a design system, True VWORLD can increase productivity, reduce technical debt, and create a seamless, scalable, and user-friendly virtual experience.
To address the inconsistencies, inefficiencies, and legacy design issues within True VWORLD, I built a comprehensive design system named "Dimension", based on the Atomic Design methodology. This system was specifically adapted to align with True VWORLD’s product architecture, ensuring scalability, consistency, and seamless integration across browser and application teams.
Since True VWORLD operates across multiple devices and interfaces, the design system was customized to align with product architecture and development workflows:
Component-Driven Development – Worked closely with developers to map UI components to a centralized repository, ensuring real-time design-to-code alignment.
Cross-Platform Scalability – Defined a responsive framework that allows the same components to adapt across web, mobile, and VR interfaces.
Automated Updates & Repository Integration – Connected Figma design libraries with development tools, eliminating manual file updates and reducing errors in design handoff.
Design Tokens for Theming – Established global variables for colors, typography, and spacing, allowing for customization and brand flexibility.
"Dimension" is the design system built for True VWORLD, crafted to ensure consistency, efficiency, and scalability across all digital experiences. As True VWORLD expands, maintaining design cohesion across multiple platforms—web, mobile, and virtual environments—becomes increasingly complex. "Dimension" was created to address these challenges by establishing a structured, component-based system that aligns design and development, streamlining workflows and ensuring a seamless user experience.
The name "Dimension" perfectly encapsulates the essence of True VWORLD’s design system, aligning with both the immersive nature of a virtual world and the structured approach of systematic design. In a virtual environment, users experience multiple layers of interaction, depth, and spatial navigation, moving through different dimensions of digital space. Similarly, the design system itself operates on multiple levels, from foundational elements to complex UI structures, ensuring a scalable, adaptable framework that evolves with the platform.
Beyond its connection to virtual worlds, "Dimension" also symbolizes structure, consistency, and scalability, which are core principles of a well-built design system. Just as a dimension provides form and boundaries to space, this system provides guidelines and cohesion to True VWORLD’s growing digital ecosystem. It ensures that every interface, across all platforms—web, mobile, and VR—is unified, intuitive, and visually consistent. By bridging design and technology, "Dimension" becomes more than just a name; it represents a foundation that supports the expansion and evolution of True VWORLD, allowing it to scale seamlessly while maintaining a cohesive user experience.
In True VWORLD’s "Dimension" design system, we have implemented a Global Token System to maintain consistency, efficiency, and scalability while keeping the structure lightweight and manageable for our small design team. By using only global tokens, we ensure that every visual style—colours, typography, spacing, shadows, and motion—is defined once and applied universally across all platforms.
Given the small team size, maintaining a complex multi-layered token system with alias and component-specific tokens would add unnecessary overhead. Instead, a single source of truth—the Global Token Layer—allows us to quickly update, scale, and maintain the design system without managing multiple token sets.
Colour plays a crucial role in creating a cohesive brand identity while ensuring accessibility and usability across all platforms. We carefully selected and structured our colour tokens to align with True VWORLD’s brand guidelines, ensuring they maintain visual harmony, scalability, and WCAG 2.0 accessibility compliance.
To ensure optimal contrast and legibility, we used Leonardo Colour (leonardocolor.io), a powerful tool that allows us to generate perceptually consistent colour scales while meeting WCAG 2.0 contrast standards.
Our colour tokens follow a structured global naming system to maintain clarity and flexibility. Each colour family includes multiple shades to support different UI needs, such as text, backgrounds, buttons, and interactive elements.
Each colour combination was tested using Leonardo’s contrast simulation to guarantee accessibility under WCAG 2.0 AA and AAA standards. This ensures that:
Text remains legible on both light and dark backgrounds.
Interactive elements meet minimum contrast ratios for usability.
Users with visual impairments can navigate the interface effectively.
Typography is a crucial part of True VWORLD’s "Dimension" design system, ensuring consistency, readability, and accessibility across web and app platforms. Since web and mobile applications have different rendering behaviours, screen densities, and performance considerations, we have structured our typography tokens separately for web and app, allowing for an optimised reading experience on each platform.
Typography in True VWORLD’s "Dimension" design system is designed for scalability, accessibility, and platform consistency. Since web and mobile applications have different rendering behaviours, we use rem (root em) units for the web and sp (scale-independent pixels) for apps, ensuring that typography remains responsive and adaptable across devices.
Spacing plays a critical role in True VWORLD’s "Dimension" design system, ensuring a consistent, scalable, and flexible layout across web and mobile platforms. By using a structured spacing token system, we maintain visual balance, predictable layouts, and easy scalability without relying on arbitrary pixel values.
We use:
The grid system in True VWORLD’s "Dimension" design system ensures a structured, scalable, and responsive layout across web and mobile platforms. By defining a flexible yet consistent grid, we maintain visual hierarchy, alignment, and adaptability, allowing the interface to work seamlessly on various screen sizes and resolutions.
For web, we use a 12-column fluid grid with a baseline 8px spacing system, ensuring flexibility across different breakpoints.
For apps, we use a 4-column grid with a standard 8dp baseline grid, ensuring elements align correctly within Android and iOS UI guidelines.
The component library is designed for scalability, usability, and efficiency, ensuring a seamless experience across web and mobile. Each element is built with a full range of states, allowing for smooth interactions and reducing inconsistencies.
The ready-to-use templates in "Dimension" are designed to accelerate development, maintain consistency, and streamline the design-to-code process. Each template serves as a predefined layout that can be easily adapted for different use cases, ensuring a cohesive user experience across web and mobile platforms.
To accelerate design iteration, user testing, and developer handoff, every component in "Dimension" is built as an interactive prototype in Figma, ensuring seamless prototyping without the need for manual linking. By embedding interactivity directly into each component, designers can create fully functional flows faster, and stakeholders can experience realistic interactions without additional setup.
To streamline design handoff, maintain consistency, and reduce errors, I established a documentation governance framework within "Dimension", ensuring that all design decisions, interactions, and assets are well-documented, accessible, and up-to-date for the entire team. By setting up robust documentation governance, "Dimension" delivers a well-structured, transparent, and scalable design system, making design delivery smoother, faster, and more reliable.
To ensure clarity and consistency in design handoff, flow documentation in "Dimension" captures all screens within a user journey, detailing interactions and dependencies. Each document includes a header section specifying the designer, target persona, and linked JIRA ticket, ensuring accountability and seamless tracking. Every screen within the flow is mapped, covering default, error, success, and edge cases, reducing ambiguity for developers. Interactive components are annotated with states, transitions, and expected behaviours, ensuring that development aligns with the intended experience. The documentation also provides accessibility considerations, platform-specific guidelines, and design rationale, helping teams make informed decisions. By maintaining a structured, centralised system, this approach minimises inconsistencies, accelerates iteration cycles, and enhances cross-functional collaboration. With flow documentation embedded into the workflow, True VWORLD’s "Dimension" design system enables a scalable, efficient, and transparent design-to-development process.
The design are annotated with states, transitions, and expected behaviours, alongside ARIA-compliant naming conventions for accessibility. This ensures that assistive technologies can interpret UI elements correctly, enhancing the usability of True VWORLD for diverse users. The documentation also provides contrast ratios, keyboard navigation guidelines, and screen reader-friendly labels, aligning with WCAG standards. By integrating accessibility documentation into the design system, "Dimension" guarantees that digital experiences remain inclusive, scalable, and development-ready, fostering a seamless and compliant design-to-code workflow.
To ensure widespread adoption of "Dimension" across True VWORLD, I conducted in-depth research and compiled success cases demonstrating the tangible benefits of a structured design system. By showcasing real-world examples where design systems improved efficiency, consistency, and scalability, I built a compelling case for adoption, addressing concerns from stakeholders across product, engineering, and leadership teams.
Beyond advocacy, I developed a clear roadmap for implementation, outlining phased integration strategies, training sessions, and support structures to ease the transition.
By combining success-driven research with a structured implementation plan, I secured stakeholder buy-in, ensuring that "Dimension" became a core foundation for True VWORLD’s design and development ecosystem.