FrontGate is a startup company aiming to set best practice in API documentation methods through their API management platform
At the start of the engagement, FrontGate was building on a vision to create an API management platform for small to enterprise-scale companies. However, setting a best-practice around API documentation rules across various clients was proving to be a complex task.
Through this acceleration sprint, I created a design system that enabled the product to scale with ease. The design system adopted an approach where we prioritised creating the common feature, to then grow it requirement after requirement as the client model got more complicated.
The process
Define the problem space and product vision
Cross-collaborate and discover the common denominator in this design system - API Technical Reference Page
Generate easy to duplicate components that are easy to white label but still look unique
Expand the reusable design system across more complex architectures for API documentations.
Creating the "atom"
By creating an information architecture with the client, we quickly discovered that all clients would need a Technical Documentation Page. So we prioritised conceptualizing a well-designed technical reference API page where all information would be easy to access.
From a good design framework, we could easily come up with an admin platform where we could define a default experience, claim the technical reference page to be the mandatory page for API management, and build custom experiences over the top of that (depending on account complexities).
Technical reference design
The custom branding, customisable tabular menu and changeable column counts per page were soon discovered as the necessary self-serve functions that were a must in the admin platform where the API pages could be easily generated.
The admin experience
The approach for the portal design was to develop the core functionality to more complicated features that were nice to have. The way we approached that was through
Understanding the two core features: things you do for setup & things you do for operations
Slowly add functionalities as per use. This is based on the complexity of the client model.
As a result...
Establishing a flexible design system enabled the client to develop the product at a lightning speed
The initial technical reference designs enabled the client to sell their product to multiple clients which funded the development process
The client is now available to market and is engaging with enterprise level clients and tying deals with large business models
