The only API documentation solution that helps developers feel at home - UX Case Study

API Documentation is basically a set of instructions that has all the information required to work with API, including tutorials, endpoints etc. Developers read API Documentation to understand the functionalities of API. Every developer has a favorite programming language or you can say the one they specialize in, so they prefer to work in the respective IDE(Integrated development environment). For example Xcode for iOS developers and Visual Studio for .Net developers.

Problem Statement

An API Documentation tells developers the crux of the API but there’s a missing piece. It doesn’t guide the developers how to get the project started in their favorite IDE.

Solution

We at APIMatic have always worked on providing seamless developer experience and now that we knew something was missing, we wanted to bridge that. After a number of brainstorming sessions with the team and research we narrowed down to the decision where we wanted to show developers a step by step guide on how to get started in respective IDE through graphical representation.

Make developers feel at home by providing everything in their favorite development environment.

We wanted to work on a solution which covered even the minor details. To achieve that we decided to reflect API name in the IDEs too.

We were talking about reactive UI graphics. At this point SVGs came to our rescue. We decided to draw UI of each and every IDE from scratch keeping it all vector so that we could export them as SVGs.

Crazy, right? That’s the amount of effort we were ready to put in to improve even a slightest bit of developer experience.

So basically, we recreated UIs of 10 different IDEs from scratch and exported them as SVGs. Handed them over to our dev team to make them reactive by programming them in such a way that whatever the name of the API was it got reflected in the IDEs in each step as if it was actually imported in that IDE.

“Remember that a person’s name is to that person the sweetest and most important sound in any language.” -as Dale Carnegie wrote in “How to Win Friends & Influence People.

In API Documentation’s case API name and programming language are the sweet spots of any developer.

In this way we helped developers feel at home not only by

1- Providing them platform specific graphical walkthrough.

But also by

2- Reflecting API name into the walkthrough UIs.

Till date APIMatic’s Developer Experience portal is the only API Documentation solution that helps developers feel at home by providing tailored tutorials in their favorite development environment.

Later on usability tests proved that Usage instructions in respective IDEs and Tailored Tutorials helped us decrease time to first “Hello World”.

See it live here