Uncountable is a cloud software company focused on research and development optimization. Its software helps enterprise lab teams manage experimental data and collaborate, replacing the patchwork of spreadsheets many scientists rely on.
Company:
Uncountable
Date:
2024
Team:
Product designer (me), Product managers (2), Front-end (1)
Our goal was to establish a custom-made design system in 2.5 months, built around the product and roadmap.
The platform was losing users due to inconsistent UX and lack of design system foundations.
A niche R&D company with an estimated annual revenue of $4.2 million and about 2,000 users, 60% of whom are in the United States, was experiencing an increase in its churn rate. Scientists liked the idea of a digital R&D workbook but found it hard to use, a classic case of poor UX leading to attrition.
Dense, complex data tables
Fragmented UI patterns
Lack of system-wide consistency
Accessibility gaps
Over an intensive 2.5-month project, I drove the end-to-end creation of Uncountable’s new design system. I took full ownership from the initial UX audit to final design delivery and implementation support. I served as the design lead and coordinator, ensuring the project generated high-fidelity assets and launched as a living product.
To structure the entire Uncountable component system I used the Atomic Design approach.
Tools
Figma, Bootstrap 5, and JSON-export plugins for token handoff.
Process
Defined token architecture, built reusable components using atomic design principles, and released them in weekly design reviews.
Adoption
Worked with Front-end developer to ensure design-code parity and easy implementation.
Token architecture
I designed a token system as a cognitive model for scientists, matching how they structure experiments, compare variables, and track states.
Component building
It is important that components are developed to be modular and reusable. Bootstrap contains numerous components, which I have tailored to our platform by aligning them with our token architecture.
Pages
I structured pages around how scientists actually work: setting up experiments, adjusting variables, comparing datasets, reviewing results, and iterating. This meant optimizing each screen for long-form inputs, complex tables, and side-by-side comparisons.
Documentation
I focused on creating clear documentation that made the design system easy to adopt. Each component and token was described with usage rules, responsive behavior, and implementation notes directly in Figma.
I delivered developer-ready specs and hosted walkthroughs to ensure smooth handoff and future scalability.
This project gave Uncountable a scalable, modern design system that dramatically reduced complexity and improved consistency.
Product
The interface became more intuitive and consistent, leading to a decrease in the learning curve and a boost in productivity, as reported by users.
Scalable component reuse
Up to 30% reduced implementation time for new features thanks to the design system.
Related work
