Stoplight.io
Stoplight is a design-first API development platform that helps dev teams collaboratively build, document, test, and govern APIs using OpenAPI standards.
Case Study: Component Libraries
JUMP TO SECTION
Introduction
API developers needed a more consistent way to design and maintain high-quality APIs. But without a centralized, reusable set of API-design elements—like models, parameters, responses, and security schemes—developers were duplicating work, introducing inconsistencies, and struggling to scale their efforts across multiple APIs.
Problem statement
Proposed Solution
Build an API-specific component library: a shared system of reusable API-design elements that streamline collaboration, reduce redundancy, and improve the overall developer experience within Stoplight Studio.
3 months for research & design (Q1 2022), 3 months for development (Q2 2022), launched in beginning of Q3 2022.
Timeline
Primary Persona
Modeling Melvin
Secondary Persona: API Program Managers
Business Goals & KPIs
Improve Developer Efficiency & Speed
Reduce the time it takes for developers to build and update APIs by enabling reuse of standardized components.
Time to publish a new API (before vs. after library adoption)
% reuse rate of components (e.g., models, parameters, responses)
Reduction in manual duplication of schema or design elements
Ensure that APIs across the platform follow consistent design patterns, naming conventions, and documentation structure.
% of APIs using standardized components from the library
Decrease in design-related QA issues or API review revisions
Increase Consistency & Quality Across APIs
Foster better collaboration between product, design, and engineering by centralizing reusable API design elements.
# of teams actively contributing to or consuming from the library
# of shared components adopted across multiple projects
Improve Cross-Team Collaboration
Make it easier and more appealing for external developers to adopt and stick with Stoplight’s platform.
Increase in active API projects per customer
Retention rate of customers using the component library
Positive feedback from customer interviews and surveys
Enhance Platform Adoption & Retention
My Role
As a Product Designer (1 of 2 for the company) I collaborated with the Director of Technology & Product Manager to drive this project from design to delivery, as well as a series of other incremental enhancements to improve the user experience of Stoplight Studio.
Research
Led user research with both current and prospective customers.
Also, gained insights from Amplitude and Data Dog to understand user pain points and journeys.
Design & Testing
Translated insights into low- to high-fidelity mockups and interactive prototypes.
Conducted user testing and feedback sessions through usertesting.com and live sessions with existing users.
Collaboration
Collaborated closely with Project Managers, engineering teams, other designer & head of product to ensure solutions were both technically feasible and financially viable, satisfying user needs and meeting business goals.
Testing
Designs were tested through usertesting.com and live sessions with existing users.
Delivery
Ensure designs are followed and necessary adjustments made during development process, seen to completion.
Designs, Testing & Iterations
Process
I worked collaboratively with PMs and engineering team to design and develop this feature from concept to delivery.
I led user testing with 8 current customers, translating insights from low to high-fidelity mockups and interactive prototypes.
These designs were tested through www.usertesting.com (5 additional participants) and 5 additional live sessions with existing users.
Tools used
Figma, Jira, Notion, Usertesting.com, Zoom
Changes made based on feedback
Final Designs
Outcomes & Metrics
Improve developer efficiency & speed
Average time from API spec creation to public availability.
Baseline (before)
5–7 days
Target (after)
2–3 days
% of shared components (models, parameters, responses) reused across APIs
Baseline (before)
<10% reuse
Target (after)
>40% reuse
% decrease in manually duplicated schema or design elements across projects.
Baseline (before):
Frequent duplication across teams/projects
Target (after):
50–75% reduction in duplicated definitions
Increase Consistency & Quality Across APIs
% of APIs that incorporate components from the shared library.
Baseline (before):
0%
Target (after):
~40-%
(Strong adoption of centralized, approved components across teams)
Reduction in linting errors caused by inconsistent naming, missing examples, schema errors, or non-aligned parameters.
Baseline (before):
~40–60% of issues tied to design inconsistencies or schema errors
Target (after):
~15–25% of QA issues tied to design
# of cross-functional teams (e.g., product, backend, platform) either reusing components from or adding to the shared component library.
Baseline (before):
0%
Target (after):
30%
Improve Cross-Team Collaboration
# of standardized components (e.g., models, parameters, responses) used in 2 or more API projects.
Baseline (before):
5–10 shared components, mostly reused informally or duplicated manually
Target (after):
25–50 shared components reused in 3+ projects each; Top 10 components reused across 80% of new APIs
Enhance Platform Adoption & Retention
Average number of actively maintained or published API projects per customer.
Baseline (before):
~2–3 active projects per customer
Target (after):
4–6 active projects per customer
% of customers who continue using the platform (12 months after lauch)
Baseline (before):
~43% retention
(Higher churn among customers who struggled to scale or enforce standards)
Target (after):
didn’t get to measure due to acquisition-based layoff
% of customers reporting satisfaction with reuse and standardization via interviews and surveys
Baseline (before):
30% satisfaction on feedback related to consistency and ease of use (survey comments mentioned "hard to manage specs," "duplication," etc.)
Target (after):
80%+ report improved ease of use and consistency
Other feature enhancements
Gutters & Tabs - Information Architecture
JSON Schema Editor
Cord - 3rd party platform integration
UserWay - 3rd party platform integration
Proptery Description editor
Billing Page
Stoplight Docs Redesign
Responsive Documentation
I led the design of a mobile- and tablet-responsive documentation experience to support our Governor Gabby and Consumer Carry personas, enabling users to easily access APIs and their endpoints during meetings or on the go. This MVP prototype addressed a top user-requested feature, and adoption was immediate following release.
🚀 *fully built and launched April 2023
The future of Stoplight Studio
As a Product Designer, I believe it is essential to have a clear vision for where we wanted to guide users, and to design incrementally toward that vision to reduce risk and ease adoption.
The following screens illustrate how I envisioned evolving the Studio experience, including:
✅ A best practices checklist to support design-first workflows
✅ Component-first approach that guided users to build reusable components before defining APIs (reflected in the tabbed sidebar layout)
✅ Universal box component with left-side nav to simplify complex API design and ensure a consistent, scalable UI across the platform
Landing Page
API Overview Screen
API Design Screens
Personal Impact & Learnings
Working at Stoplight was a pivotal experience in my growth as a product designer.
Designing for a Technical Audience
Designing for a deeply technical audience of API developers challenged me to balance usability with precision, and to speak the language of my users while advocating for simplicity and clarity.
Start-Up Mindset & MVP Thinking
I learned the value of investing in a minimum viable product (MVP) over fully polished features—building the ‘skateboard’ instead of the ‘Ferrari.’ This mindset helped me deliver value quickly, get feedback faster and make better decisions on whether to iterate, pause or deprecate based on real adoption and value.
Understanding the API Lifecycle
My time at Stoplight gave me a deeper understanding of the full API lifecycle, from design and mocking to documentation and governance. Collaborating closely with developers and product teams, I saw how each stage connects and where users encounter friction.