Back

API Developer Portal

PROJECT BRIEF

The Problem

In recent years, chemical business partners in the Supply Chain business in ExxonMobil have experienced bottlenecks in accessing data due to the rigorous manual process. 

Project Team

22 ( UX Designers, Solution Architects, Product Owners, Change Management Advisors, Digital Marketing Lead, Product Owners, Product Manager, Supplier Business Leads, Project Manager, Security Advisor)

My Role

Product Strategy, User Research, and analysis, Wireframing, Visual Design & Prototyping, Usability testing

I was tasked to design an easy-to-use portal where business partners can consume our APIs,  get access to API tools and documentation to integrate with their applications.

The Process

My approach varies based on where the project is in the UX design process. For this project, I applied design thinking principles to my UX design process to focus on users and their needs:

  • Understand – understand our brand and our users
  • Research – validate hypothesis and pinpoint the user challenges that need to be solved
  • Analyze – aggregate data from research and analyze
  • Design – prototyping solutions; initially low fidelity, but increasing fidelity through iterations
  • Validate – testing solution prototypes with end-users

01 Understand

Getting started, I needed to understand who the users are and ExxonMobil’s goal in this project. What problem are we trying to solve? Who are the users are and what goal our company is trying to accomplish?

Stakeholder Interviews

I interviewed key people in the company to gather insights into the problem to be solved, user needs, and business goals.

2500+ Customers: Customers & Distributors, Service Providers, Material Suppliers, Carriers

Business Goal

Creating a developer portal where business partners can find tools to enable B2B integration allows self-service to scale offerings, increase agility to market, and access accurate data in real-time.

 

Thereby reducing order handling costs, offering flexibility to our customers for higher quality relationship/ capital for both parties involved, and increasing customer loyalty.

Anticipated impact: $4+ Million in operational costs savings and increase in margin sales

Hypothesis

Business partners need access to developer tools where they can find tools to enable integration with their applications without the need to depend on customer service or a person.

02 Research

User Research

10 User Interviews

I conducted user interviews with people with no API experience, Novice, Intermediate, Experienced to prove my hypothesis and gain useful insight.

Insights from the research:

  • Users want an easy-to-use interface that requires no setup costs
  • Ensure the right data goes to the right supplier
  • Users expressed concerns for data accuracy
  • Need clarity and guide on how to use the portal
  • No clear info about the data access request process.

On average, participants share that access to APIs in the developer portals, as well as relevant information about the APIs, should be easy, simple, and intuitive. Resources should be made available for everyone including non-API users. on how to access it.

Impact of the problem: a massive increase in operational costs both for both parties, delays in business processes, and a decrease in customer loyalty.

Empathy Map

To align the qualitative data gathered from user interviews, I created an empathy map to identify patterns across users, uncover insights, and generate needs.

Empathy Map

Competitive Research

I researched competitors such as Shell API Portal, Visa, etc already in the space with similar product offerings to understand industry standards and identify opportunities for our product within its particular niche.

Problem Statement

Each year, business partners contact customer service to request orders and supply data so they can retrieve information about their orders. Many have complained about errors and inaccuracy in the data due to the manual handling, wrong supply data sent to another supplier as well as delay in having access to this data. 

03 Analyze

Personas

I drew insights from data collected during the research phase, moving from “what” users want/think/need to “why” they want/think/need it. During this phase, I confirmed the business’s assumptions and created user personas to represent the target audience.

User persona

User Journey

I mapped out the users’ steps to see how I could simplify their journey to help them reach their most important goals with the product.

04 Design

Information Architecture

I mapped the application flow based on the information gathered from the research and in collaboration with the Solution Architects leading the implementation of the project.

Homepage - Information Architecture

User Flow

I mapped out pathways a user can take when interacting with a product. This allowed me to evaluate and optimize the user experience.

API Developer Portal - User Flow

Site Map

API Developer Portal - Site Map

Wireframing

After capturing the UI requirement containing the user flow, I started sketching low-fidelity wireframes for testing purposes. I also presented my wireframes to the Stakeholders to ensure it meets the business requirement.

API Portal - Homepage Wireframe
Wireframing - API Detailspage

Visual Design - Home & API Details Page

After capturing the UI requirement containing the task user flow, I started sketching low-fidelity wireframes. Then presented my wireframes to the Stakeholders.

From a technical standpoint, I also checked the feasibility of my designs with developers to ensure there are no technical limitations to developing the API Developer Portal.

API Deve Portal Specification Page
API Developer Portal
API Developer Portal

Accessibility considerations

01 – I ensured links are distinguishable by something other than a color like an underline.

02 – I kept the hierarchy and layout logical and organized.

03 – I also there is sufficient contrast between text and its background.

Refining the design

I got some feedback where certain use cases were not considered in the design. This was important as I acted quickly, creating for those use cases and validating them in an iterative process. I also captured some feedback regarding the API Details and refined my design.

05 Validate

User testing

To ensure the designs work for the 5 users, I conducted user testing with high-fidelity wireframes, evaluated the usability based on System Usability Scale (SUS), and captured valuable feedback.

With the feedback, I went back to my designs and refined them.

0

Iterations

0

Meetings

0

API Endpoints

What Have I learned?

Simplicity is a strength. The simpler the better.

Accessibility should be considered at the beginning of the design process for it to be inclusive, not at the end.

Expect mistakes.  You are humans and are going to make mistakes, so expect and plan on mistakes.

Appreciate the feedback you receive, even if it’s negative.

The Portal a portion of the product. The API and API documentation is the main product.

To design better APIs, leverage the UX design process. It can save you a whole lot.

Next Steps

API Design/Documentation

Continue evaluation and Content Design of API documentation based on the principles that influence good user experience such as Useful, Usable, and Findable. 

Observe users and capture the behavior of users engaging with the API documentation and API error response.