Stoplight.io
Stoplight brings an intuitive interface and thoughtful features to power the complete API design lifecycle. By using a tool that offers a design-first approach, API developers can save time in development and documentation. With clear definitions, cross-functional alignment, and reusable components, designing a successful API is easier from start to finish.
Who’s it for
Primary persona: API Designers
Secondary Persona: API Program Managers
My Role
Enhance the user experience of Stoplight Studio through an incremental series of changes and feature enhancements.
My role is Lead Product Designer on two engineering teams wherein I led user research with current and prospective customers, mocked up low to high-fidelity mock ups and prototypes, put them in front of users via usertesting.com as well as current customers. In addition, I worked with Project Managers to ensure designs were technically feasible and viable financially, making iterations accordingly. Lastly, I worked two engineering teams to make sure designs were followed closely and approved all user-facing PRs in GitHub before code was merged.
New Features
📚 Component Libraries
Component libraries are projects that contain data modes that users can reuse across API projects in their Studio workspace.
Create reusable API models in a library project
Consume reusable models in API projects or in other models
Update reusable models so they're available in all consuming projects
Review and accept updates to assets in consuming projects
Masking: when consuming a model from a component library, a user can hide or change some aspects of the model via a ‘mask’
🚀 *fully built and launched February 2023
Feature Enhancements
📱 Responsive Documentation
This video is an MVP prototype for making our Documentation experience mobile and tablet responsive for our Governor Gabby and Consumer Carry personas to easily access APIs and their endpoints in meetings and on the go. This was a much asked for feature request by our users.
⚡ Other Feature Enhancements
JSON Schema Editor
BEFORE: Type editor for JSON Schema Editor
AFTER: Type Editor for JSON Schema Editor; includes tabs for components
Gutters & Tabs - Information Architecture
Designed Tabs for ease of use mimicking Integrated development environment (IDE) behavior.
Designed Gutter on the left for growing feature set, also mimicking Integrated development environment (IDE) behavior.
Cord - Chat Integration
Led the design integration of third-party tool called Cord for commenting & team discussions
UserWay Accesibility Widget
Added ‘UserWay’ Accessibility widget, bottom right (open)
Billing Page
Before: We were adding more roles and plans, and therefore the Billing page needed to meet those needs and be easier to understand plan limits for self-service customers.
After: Added a visual aid in the pie chart, as well as a table below to explain the rules and usage limits in detail.
🔮 The Future of Studio
As a product designer, it’s very important to have a vision for where we want to take the users, and design incrementally toward that so as to mitigate risk, and get our users familiar with new and improved interactions slowly instead of all at once.
The screens show where I would like to take the Studio experience from an API design perspective, including:
Best practices check-list
Driving users toward component-first design before jumping into API design (hence API and components being tabbed in the sidebar)
A general ‘table-like’ flow with lists on the left (see below) and form input in the center.
The easier and more intuitive we can make form view (as opposed to code view), the quicker APIs can be designed, tested and standardized across API programs.
