DevHub_Home_Landing.jpg

API Developer Hub

 Broken up into three phases, my role included:

  • Discovery phase

    • Analytics

    • Gather requirements and constraints

    • Stakeholder interviews

    • Content audit and inventory

    • Set goals and objectives

  • Exploration phase

    • Competitive analysis

    • Build personas

    • User journeys and task flows

    • Card sorting

    • Tree testing

    • Surveys

    • User interviews and synthesis

    • Information architecture

    • Category/sub-category labeling

  • Testing phase

    • Qualitative usability testing of high fidelity wireframes and prototypes

    • Design iteration


Discover

Analytics | Gather requirements | Identify constraints | Stakeholder interviews | Content audit and inventory | Set goals and objectives

Looking at qualitative data we could glean where users were dropping off, which pages yielded high and low traffic, where users were missing intended flows. With this information we began to set goals and objectives, and make initial guesses as to where user needs and business needs align and diverge.

With customer and business needs in mind, as well as our design approach, our ultimate goals were to:

  • Encourage users to explore and engage without API offerings

  • Allow customers to leverage our expertise while creating seamless products for their customers

  • Forge scalability partnerships and set expectations for the process ahead


Explore

Competitive analysis | Personas | User journeys/task flows | Card sorting | Tree testing | User interviews | Information architecture

“I want to clearly see the key milestones and timelines of your partnership process – can you articulate your go-to-market strategy?” -Ted, "the Business Developer" (1 of 4 core personas)

“I want to clearly see the key milestones and timelines of your partnership process – can you articulate your go-to-market strategy?” -Ted, "the Business Developer" (1 of 4 core personas)

Implementing task flows and journeys allowed for the clear identification of key goals, as well as and content needs throughout the site.

Implementing task flows and journeys allowed for the clear identification of key goals, as well as and content needs throughout the site.

 
"I can't find my Client Secret"While some developers didn’t understand the difference/purpose between a UserID, ClientID, Client Secret and Auth token (leading to confusion in the sequencing of steps), the most confusion was caused by retrieving/sto…

"I can't find my Client Secret"

While some developers didn’t understand the difference/purpose between a UserID, ClientID, Client Secret and Auth token (leading to confusion in the sequencing of steps), the most confusion was caused by retrieving/storing the Client Secret. The placement of the Client Secret in the top left corner of the page often went unnoticed, stalling developers’ progress.

Phase 1 Testing synthesisFacilitating the synthesis and analysis process with researchers, strategists, designers, copy writers to define key principles for designing the new pages.We subsequently carried out further user testing with international …

Phase 1 Testing synthesis

Facilitating the synthesis and analysis process with researchers, strategists, designers, copy writers to define key principles for designing the new pages.

We subsequently carried out further user testing with international participants to validate designs and iterate.

 
Pathway mapping - participants took in order to make an API call on the Dev Hub from the first round of user testing.

Pathway mapping - participants took in order to make an API call on the Dev Hub from the first round of user testing.

From tree testing we gained a number of key insights regarding site content - specifically that labelling was inconsistent, pathways were convoluted when users attempted to create a new app, retrieve keys and copy sample code. Users also had trouble figuring out the necessary steps for Authorization. This provided opportunities to re-organized and re-label content. This also revealed a clear need to provide more educational and instructional content across the site.

Previous IA structure

Previous IA structure

Updated IA structure

Updated IA structure


Test

Qualitative usability testing of high fidelity wireframes and prototypes | Design iteration

We hosted 3 rounds of testing for each page in the site. Based on the feedback received we then went back to the drawing board to adjust key task flows accordingly. With each new design iteration there were multiple rounds of 90-minute task-based remote user testing sessions. Representing 3 out of 4 core personas, our developer pool spanned the globe. Test subjects were located in Singapore, Malaysia, Taiwan, Australia, Hong Kong, Mexico City, Miami, San Francisco, Indonesia, Thailand and the Philippines.

OLD_Doc_Landing_short.png
Documentation_landing.jpg

The new Documentation designs were highly regarded by all users for its clean structure and thorough display of all the necessary information.  Users were also able to find specific information easily when given a task.

In the previous design, users were forced to select a market before they could view any API documentation. This cumbersome process was frustrating for users, but unfortunately this was a system limitation. Working within the system's constraints users preferred our proposed solution of a "default market selection," rather than pogo-sticking back and forth between navigation levels. Additionally users are given the option to adjust their market or API selection contextually, which was greatly appreciated by developers who worked across multiple markets.