Identifying the Scalability Gap
Overview
Perceive Now is a B2B SaaS startup, that uses advanced AI to analyze millions of patents and market reports, providing business with clear reliable data for better decision making.
While my main focus was the AI-powered platform, I also led the creation of a scalable design system. I built reusable components and clear design standards to keep the product consistent, helping designers and developers work faster and stay aligned.
The Challenge
As Perceive Now scaled, the existing style guide lacked clear structure—such as grids, spacing rules, and component standards—needed to support a complex, data-heavy platform. As the MVP grew, this led to an inconsistent UI and increasing technical debt, making the product harder to scale and maintain, and slowed down shipping speeds.
I advocated for a transition from one-off designs to a scalable system. My goal was to create a shared component library and visual standards to simplify handoffs, ensure consistency, and speed up iteration.
My Role
I started by auditing the existing style guide. While it covered basics like colors and typography, it lacked grids, spacing rules, and standardized components. As the product scaled, these gaps became more apparent. Without a reusable component library, development slowed because each new feature required custom work, making it difficult to scale the MVP efficiently.
Key Decisions
I applied Atomic Design principles to structure the system, breaking the interface into small reusable elements that made the design more consistent, easier to maintain, and faster for designers and developers to scale across the 50+ pages.
Atomic Principles
Atoms
I applied Atomic Design principles to ensure that the system remained flexible, yet disciplined. By creating atoms like spacing, color styles, and grid scales, I replaced “gut-feeling” design choices with a set of reusable values. This allowed the team to stay consistent as we added complex data features.
Molecules
I prioritized molecules to create functional, repeatable patterns from the basic atoms. By combining a search input, a filter drop down, and a primary button into a standardized “Search Molecule”, I ensured that complex data interactions remained consistent and easy for the team to deploy across every new page.
Organisms
I used organisms to build distinct sections of the dashboard. By grouping several molecules together into a single organism, I created a “plud-and-play” architecture. This allowed the team to launch entire new functional pages in a fraction of the time.
Accessibility
All components met WCAG AA standards, with built-in contrast ratios, clear error states, and keyboard navigation, making the system more inclusive.
Active Syncing
To maintain consistency without any formal documentation, I established a high-visibility feedback loop. I launched a dedicated Slack changelog to push real-time updates and hosted bi-weekly “Sync-and-Show” sessions with the developers. This proactive approach kept the team synchronized, ensured the component library stayed relevant to code, and prevented any design drifts as we scaled.
Implementation
This product page illustrates the design system in action, showing how it ensured consistency while demonstrating its flexibility and real-world implementation.
Impact
Faster delivery through consistency.
70%
Reduction in design-dev back-and-forth after system adoption
35+
Reusable components built across atoms, molecules, and organisms
50
Pages unified under one system by two designers in 3 months
AA
Color contrast compliance
across the system
My Role
UX Designer
Client
Perceive Now
Duration
2022 - 2023