Ratio Collaborative Design Platform
Ratio is a web-based collaborative design tool, initiated by Douyin UED.
Ratio operates with only two dedicated roles—Designers and Developers—where designers additionally play role of PM, QA and OPs.
Role
Product Designer
Duration
2021 - 2022
Type
Internal startup project
My Responsibilities
In Ratio, I spearheaded core feature design for foundational design tools, along with engineering seamless Lark integrations.
File
Management
Deep Integration
with Lark
Text
Tool
Flow
Tool
Vector
Tool
Comment
Tool
Why build a Figma alternative?
Data Security
As a web platform with exclusively overseas servers, Figma's data handling poses compliance risks for regulated industries.
Inclusive Experience
Figma’s lack of Chinese localization support.
It falls behind product evolution like short-video and AR/VR.
What did I design?
Amidst a proliferating landscape of design tools, Ratio’s defining differentiation lies in:
Extending capabilities beyond designers
Ratio actively enables Project Managers, Developers, and UX Writers through purpose-built workflows.
Building effective workflow
Ratio integrates deeply with Lark and leading work tools, enabling seamless data sync across your ecosystem.
What did I learn?
Architecting permission per persona
Admin security hardening
Child roles inherit parent-level permissions, while parent roles never inherit child privileges
Empowering designers with surgical permission granularity
File owners assign atomic-level permissions per role: view, edit, copy, duplicate, rename, and other granular entitlements."
Innovating through behavioral granularity
Threaded comments anchored to objects
During research, we observed UX Writers avoid direct translation via multi-l10n platforms when localizing designs.
Instead, they leverage contextual comments as a transitional workspace to draft translations before finalizing in CAT tools.
Exploring innovative solutions
through an engineering lens
Font style preview
Font style previews isn't innovative, but the core challenge lies in Ratio's web-based constraints: real-time access to local font packages is impossible. As PM and designer, I must collaborate with engineers to architect a browser-native implementation strategy.
Exploring innovative solutions
through an engineering lens
Convert text CSS properties into functions
Automated text truncation: our novel solution born from a pervasive pain point: designers manually hacking button text + appending ellipsis (...) across countless viewport sizes. Ratio intelligently adapts content to component boundaries.
Architecting design solutions
through engineering-informed constraints
Spotlight Search
When design spotlight search, I had to abstract ranking signals influence result relevance.
Additionally, I need to synthesize organizational context(team/project), collaboration intensity, and file contribution, to assign dynamic weights per signal - delivering personalized ranking tuned to individual behavior patterns
Ratio Beta Drove
From 2020.09 to 2022.04, Ratio achieved 78% feature parity with Figma
Core editor
80%
Smart layout
100%
Design system
100%
File management
120%
Community
50%
Performance
60%
Three mindset shifts from 0→1 building Ratio
Scoping MVP Features:
Cover end-to-end workflows for target scenarios (users must complete core jobs-to-be-done)
Depth deliberately constrained - polish only mission-critical interactions, leaving ‘good enough’ UX for iterative refinement.
Driving Adoption:
Leverage workflow ecosystems: Seed adoption via upstream/downstream role dependencies (e.g. PMs trigger dev usage).
Subtle habit cultivation: Embed lightweight versions in high-traffic surfaces (e.g. replace legacy diagram tools in Docs with Ratio Lite), enabling low-friction migration.
Building V1 Products:
Preemptive benchmarking is non-negotiable—deep-dive into why competitors implement features (tech constraints, user habits), slashing refactoring costs by 50%+.
More…
