A Cross-Platform UX System for Educational Tools
Crafting Consistency: The 0-1 Journey of Building a Design System
Project Background
I led the design a remote device management system (Bytello DMS) for school IT administrators, establishing a scalable design system to enhance usability, efficiency, and cross-platform consistency. As the sole designer, I built the system from the ground up, refining and testing key features through 13+ iterations. Finally, I executed a new design standard for the product line.
Product
Role
UX designer
Responsibility
Visual design, Design system, Usage guideline, 0-1 building
Duration
2 months
WHY build a design system at that moment?
BUSINESS
We opened the ODM (Original Design Manufacturer) business.
→
Supporting part of UI customization
TEAM
Team expansion increases collaboration complexity
→
Onboarding new member
Development
Redundant work slows down development
→
Eliminate developer redundant work
Problem statement
As our multi-device management platform scaled, inconsistencies in UI design, inefficiencies in development workflows, and the absence of a unified framework created bottlenecks. Without a structured design system, developers repeatedly built redundant UI components, enterprise clients lacked clear customization guidelines, and onboarding new team members required excessive manual alignment.
Challenge
Results
Inconsistent Cross-Platform Experience
The platform needed to support both smart device and website interfaces, but variations in navigation, interaction patterns, and styling caused friction in usability and workflow efficiency.
→
Visual element consistency
Standardize typography, colors, spacing, and breakpoints to maintain a unified look and feel across devices.
Lack of Responsive Design
Handling complex data-heavy interfaces across different device sizes required more than simple responsive design.
→
Responsive complex tables
Develop a scalable responsive grid and component system that ensures data-heavy interfaces remain clear, usable, and efficient across different screen sizes.
Inefficient Collaboration in Design & Development
Without a structured component-based design system, developers faced challenges translating UI elements into code, leading to inconsistencies and repeated work.
→
UX Patterns
Tokenized design principles for typography, spacing, and responsive breakpoints, enabling automated updates and seamless developer integration into front-end workflows.
Challenge 1
Pixel-Perfect consistency is impossible across devices
Different devices come with different features, like screen sizes, interaction methods, and user habits. Instead of forcing pixel & interaction consistency perfection, we need an approach to maintain a cohesive experience.
14“ Laptop
75“ Smart board
Macbook Air
Using visual elements to create a seamless experience across platform
Rather than enforcing rigid pixel-perfect, we establish consistency system through core brand elements: color, illustration, iconography, animation, and typography.
Color
Illustration
Icon
Animation
Aa
Font
Challenge 2
Complex tables lose efficiency & optimal display for different screens
Complex data tables interactions require prioritization
Select command
Dynamic content demands adaptability
maximum
240px ~ 360px
Different data tables for unification
Pro Table
Small Table
A responsive framework to keep complex tables visible
We established a responsive table framework to ensure consistency across large and small tables by defining fixed widths, stretch ranges, and display rules.
Keeping clear operation hierarchy
Standardizing side menu Collapsing, column adaptability, etc.
Ensuring consistency between Pro Tables and Small Tables
Challenge 3
Multiple developers cause redundant & replication work
Inconsistency everywhere
Details*
Submit
99+
Table A and Table B have different interactions—Table A allows click outside to dismiss, while Table B requires button action. Please update Table B to align with Table B.
Additionally, there are UI inconsistencies in shadow, modal size, and position.
Communicated with developer found:
modals were being developed independently by different engineers, without a shared guideline.
Hey, 👋 I noticed that this modal behaves differently from the one on the homepage.
Also the close button is missing, and the way it opens feels different.
Designer
Oh, I didn’t actually build this one. This modal belongs to another feature, and a different developer worked on that page
Developer
Got it. So there’s no shared component for modals? ...
Designer
To eliminate redundancy and ensure consistency, we established unified modal dialogs components:
Listing all Modal Types → Ensured uniform behaviors for opening, closing, and user actions → Implemented a shared modal component for every developer
Modal - small
Message
Modal - big
Drawer
Results
Reducing Visual Fidelity Issues
🧑💻 It has significantly decreased developers' time spent on visual and interaction reviews
🧑🎨 It reduced design-reported "visual fidelity issues" from over 100 to fewer than 30 for each release, enhancing efficiency and minimizing rework.
Improved development efficiency
🧑💻 It accelerated feature delivery by 15% through component reuse, while reducing code debt.
🧑💼 It laid the foundation for our ODM product customization business, strengthened client partnerships and expanded opportunities📈
A visual Evaluation
I spent nearly two months independently exploring and building the 0.1 vision design system, marking my first time fully leading such a project.
The entire design process was driven by design value and time constraints. I started by defining visual design principles and interaction guidelines based on our product’s user persona. Then, I modularized key elements into components, ensuring flexibility and customizability for B2B product design.
Design principle
Fear of Making Mistakes
Accuracy
Complex & Overwhelming info
Efficiency
Inconsistencies between different devices
Consistency
Based on spatial model
1
L1
L2
L3
L4
Popup
Top menu
Side menu
Content / Tables
2
3
4
Atomic design
I applied Atomic & Molecular Design principles by breaking down fundamental elements like typography, colors, icons, and buttons into atomic units. This atomic approach ensures scalability and consistency, making it easier to build standardized components and streamline future design specifications.
Molecules & Organisms design
I applied Molecules & Organisms Design principles by combining atomic elements into functional components like input fields, lists, etc. And further assembling them into complex UI structures such as forms, navigation bars, and modals (Organisms).
Created template 50+
I created more than 50 templates for the control and controlled ends of the product, which can be quickly reused in specific scenarios to enhance efficiency and consistency.
Key Takeaway
🧑🎨 Building from Scratch
Independently developed the 0.1 vision of a design system, gaining hands-on experience in structuring and scaling a foundational design framework
📑 Atomic to Organisms Approach
By applying this method, I gained a deeper understanding of interface composition—realizing that all info structures are basically built upon contrast, alignment, repetition, and proximity, reinforcing clarity and usability in design.
🧑🎨 Scalability & Reusability
When organizing the B2B design system, scalability of information and reusability in development were my main goals. Many UX patterns were “similar” but never considered for reuse, leading to redundant work and higher cognitive load for users.
👄 Cross-Functional Collaboration
Although organizing the component library—sorting through 13 versions, refining details, and replacing inconsistencies—was tedious, TBH I wanted to give up many times. Finally I mad it, so proud of myself 🎉
Reference
Thanks a lot!