Redesign API Tryout for Developers to Test APIs on Developer Portal
Product
Developer Portal
Company
Precisely
Role
Lead UX designer
Device type
Responsive website
Team
1 UX designer
4 Product managers
6 Engineers
2 QAs
3 Content writers
Sales engineers
Time
7 months
Status
Under development
Overview
Background
Enhance API Tryout user experience
"API Tryout" is an essential functionality in the Developer Portal, which allows developers to directly test API calls within their browsers by reducing development time by avoiding setting up complex testing environments.
Challenge
30 minutes spent from authenticating to trying out API
Currently, the usual time developers spend on completing the authentication and trying out the API is around 30 minutes or more. Users are frustrated about jumping between different platforms throughout the process and spending time finding the API documentation to understand the parameters used in the code.
Solution
A 2-panel-layout interface with sign-in authentication method
A sign-in mechanism is introduced to the developer portal for developers to complete the authentication by simply signing in to their accounts. Besides, I adopted a 2-panel-layout for the API tryout page with the documentation on the left and the code panels on the right; so then users could easily reference from the documentation while interacting with the codes.
Impact
Reduce 40% of time spent on trying out the API
The time spent on authentication and trying out the API dropped from 30 mins to 10 mins. It significantly enhances the API tryout experience by easy-authentication-process and accessing the documentation more efficiently.
Project Context
Context
Developer Portal provides developers with the tools and resources to explore and use our APIs.
Precisely sells multiple sets of APIs, such as Address Autocomplete, Address Verification, and Address Geocode, etc. To help customers understand and interact with our APIs, we created a developer portal, where they can learn about the business use cases, try out our APIs, and access API reference documentation.
Vision
Transform into a self-service platform
The project kicked off with the vision of transforming our developer portal into a fully self-service platform, where it's not simply API reference documentation but a central hub that allows developers to easily understand and interact with the APIs without additional support.
Business Goals
Increase API adoption
Attract new potential customers to gain revenues.
Save Support Resources
Reduce the needs for users to contact supports while exploring and implementing APIs.
Research
01 Understand Users
Focus on Developers as primary user
Developer User Journey
02 Understand Space
Prioritize features based on impact and efforts
I investigated other companies' developer portals to figure out the essential features and content they provide. This helped our team to set our long term strategy by identifying the features we would like to add and prioritizing the most impactful but with less efforts features to start with.
Focus on enhancing Authentication and API Tryout experience
We prioritized focus on simplifying authentication and API tryout, ensuring developers could quickly test APIs and motivate them to purchase our APIs.
BENEFITS
1
2
3
03 Understand Our Product
Users spent over 30 mins completing authentication and trying out APIs
We observed developers going through the entire process, and he struggled significantly, spending over 30 minutes to complete the tasks.
AUTHENTICATION
Require users to jump between 2 platforms
Developers had to leave the developer portal and enter another workspace environment to generate an API key, then return to input the key for authorization. There was a lack of guidance on where to go or what to do.
API TRYOUT
Difficult to access API documentation
Users lose access to the documentation while defining the API request. Besides, they need to scroll the page back and forth to access the response field documentation, which is inefficient and time-consuming.
Design Challenges
1
How can we simplify the authentication process without jumping between platforms?
2
How can we make documentation easily accessible and readable while developers are testing APIs?
Final Design
Design Solutions
AUTHENTICATION
Streamline Authentication Process
The first part of my design solution is to streamline the authentication process. We introduced a new sign-in mechanism that allows users to sign in and authenticate directly within the developer portal.
Provide Authentication Instructions
I added an “Authentication” section at the beginning of the page, guiding users to complete the process first. I collaborated with our content writer to make the instructions clear and simple.
The usability testing shows that the info box caused users to wonder if they were authenticated or not. To fix this, I added a status field that clearly indicated whether authentication was successful, and the info box disappeared once authentication was complete—providing clarity and reducing anxiety.
API TRYOUT
Adopted 2-panel-layout
The information architecture, showing documentation on the left and code panels on the right, aligns with the developers' reading sequence and interaction flows, allowing them to access and reference from the documentation more efficiently.
Enhance Documentation Structure
Initially, I used a table format to display parameters, but developers typically view code hierarchically, so if the information was presented with equal emphasis, it would be difficult for them to absorb it at once.
As a result, I switched to an accordion-style nested structure, making the documentation easier to digest.
Accessibility Design
Design for different API types & screen sizes
Impact
We conducted an usability test survey with the internal stakeholders, including PMs, developers, and sales engineers from various APIs teams.
40%
reduced time
81.8%
task success rate
5.8
easy/difficult score
Total: 20 responses, Scale: 1 = very difficult, 7 = very easy
"
I like the interactive structure of request and response body along with document information, so easier to navigate and understand the parameters at the same time.
By Sales Engineer
Next steps
Measure success with quantitative user data
The design has already been handed off to the engineering team and is currently in development. The next step for me is to analyze user data to measure our success.
Authentication success rate
Tryout rate for each API
API adoption rate
Continue towards a self-service platform…
Demos feature for business managers to understand API without interacting the codes
Explore APIs and API product pages to help users easier navigate and understand each API
Reflection
My superpower from this experience…
Stakeholder Management
With 4 product managers and multiple stakeholders involved, I scheduled regular sync-up meetings to ensure incorporating different points of views and keep everyone aligned on the same goals.
Strategic-Thinking
I guided the team to develop a product strategy that aligns with our vision, business goals, and user needs, delivering a consistent and successful user experience in the long term.
User-Centric Research
I conducted the user-centric research by engaging with internal developers through interviews and usability tests, which really helped shape the direction of the design.
