After validating initial wireframes with users and stakeholders, I hit my biggest challenge, building a flexible, scalable design system. Because TUVU allows users to create 90% of the content they will see on the screen, I needed to figure out how to maintain a consistent look and feel while giving users total freedom.
I built a system relying heavily on component properties, nested instances, and design tokens. This allowed me to create single master components capable of handling countless variations, like a post with a photo, a video, a link, reactions, or even without anything. The color tokens would support color modes for automatic translation to dark mode across all screens.
To build a scalable system that a solo designer could realistically maintain, I designed every component around four core principles:
Optimization
Components must be optimized to include the maximum amount of customization with the minimum amount of variants possible, to reduce the number of components for development and maintenance.
Auto Layout & Modularity
Components must adapt dynamically to their content while supporting multiple screen sizes, allowing us to reuse the same components for the future web app.
Edge Case Control
Component sizes must contain minimum and maximum values. To ensure the UI won't break during extreme edge cases, like unusually long user names or content.
Tokenization
Components must use tokens for everything, starting with colors and font scaling, to eventually expand to all numeric variables (border radius, padding, margins), providing flexible variables to easily modify our ever evolving platform.
