UX Case 2
Company: Autonomic
Teams: UI team
Duration: 6 months for initial launch and continuous update
Target devices: desktop and tablet
Role: UX and Visual Design
What is the developer portal
The developer portal is a collection of references, tutorials, and examples. It is built to help the first-time developers understand TMC services and get up to speed on the platform, and for more experienced developers to use for reference and troubleshooting. It is the place the developers return with questions and find answers about syntex or functionality.
Project description
As a start-up company and a pioneer of the transportation industry, the Autonomic services were not easy to understand for the new users. So at the early stage, the users needed hand-held support using TMC APIs. This ends up that Autonomic developers spent most of their time supporting customers not to build new products/services. So to help Autonomic developers out of support roles and to provide the customers' self-learning and self troubleshooting place, I was given the project to design a portal like AWS documentation. The main objectives of the project are to help developers learn TMC services and quickly get started as well as to let them find answers to their questions easily.
Challenges and solutions
There are so many challenges while designing and building the portal.
The first challenge was the s
ervice-oriented documentation we are referring to.
We referred to AWS and initially grouped TMC dev portal references b
y services and it was not an easy concept for the new users. After user research and interviews, we learned the users' pain points and reorganized it use-case-oriented, and helped the new developers walk through the step-by-step process.
The second challenge was the lack of consistency on terminology and doc structures,. Each team owns the MD doc creation and we have to provide guides/templates and educate developers to follow doc structure.
The third challenge was the large-scale services. It was hard to find the API endpoints and examples for the new developers. To make it easy to explore huge amounts of API documentation, we provided an easy navigation system combining a breadcrumb and a table of content. Each header in the table of content has a proper link for easy sharing.
To help the users quickly find the API-related information mentioned in several documents, I designed an advanced global search on the navigation bar that helps the developers find syntax quickly.
Steps:
1. User interview and Personas
2. Design - User flows, mockups (low to high fidelity)
