UX DESIGN

ABC SUPPLY CONNECT

Connecting partners to ABC API Endpoints through the design of an API Documentation Site.

ROLE:

UX Design intern

DURATION:

05.2023 - 08.2023

TEAM:

Michael Mitaritonna - Integrations Lead
‍
Ron Rowland - Senior UX Designer

OVERVIEW

ABC Supply works with contractors to supply them with their necessary building materials and equipment. At the start of my time at ABC, the integrations team had just wrapped up the development of ABC APIs as a part of the ABC Connect Partners initiative. While the development and backend work was almost completed, there was no marketing work nor website for customers to access ABC’s developed APIs.

TASK

I was tasked with designing a website for partners to register and access ABC APIs for their own use. Over the 3 months, I worked closely with the integrations team to build a knowledge base that was both accurate and accessible to partners.

[data-wf-bgvideo-fallback-img] { display: none; } @media (prefers-reduced-motion: reduce) { [data-wf-bgvideo-fallback-img] { position: absolute; z-index: -100; display: inline-block; height: 100%; width: 100%; object-fit: cover; } }

RESEARCH

Unfamiliar with API documentation, I first met with the integrations lead to understand what the goal for ABC Connect was. After hearing the vision he had for the program and site, I went to widely-used API resources like Google and Uber to gain an understanding of common practices for documentation. Mike often referenced a few resources he enjoyed the interface of, so I utilized them to gather best practices that could be employed in ABC’s own resource.

In addition, the ABC Connect Partner was a completely new product in ABC’s ecosystem and therefore had many marketing implications. I met with the ABC marketing team at the start of my project to understand their goals and visioning for the site as well.

KEY FINDINGS:

1 CONSISTENT ORGANZATION

Due to the high volume of content in API documentation, consistency in organization of information is key in readability.

2 QUICK ESCAPE ROUTES

Having contextual awareness of where the user is in a long page helps reduce fatigue and frustration when reading long pages.

3 VISUAL CALL-OUTS

The use of minimal but highly contrasting color indicators can help users quickly identify what they are looking for. Keeping them consistent and few in number strengthens this use.

DESIGN PROCESS

Referencing my learnings from researching existing API documentation and the unique elements of ABC’s own APIs, I first created a wireframe of what the ABC Connect Site would look like.

I shared these sketches with the integrations and marketing teams, and then took their feedback to design the final prototype. Throughout the process, I presented my iterations at ABC’s weekly meetings with business stakeholders to receive feedback and understand the business goals behind the website. One want the business expressed was the inclusion of strong imagery and strict adherence to the brand style of the company, so I included multiple iterations on visual elements to accommodate for these needs.