From the Ground Up

A full-stack UX project for a Fin-Tech API Developer Portal

What better way to kick-off my first UX job than a project where I started from the ground up?

My team and I were tasked with conducting research and design of a new API developer portal for a commercial bank and their financial tech team. Coupled with little understanding of the basics of APIs, API banking, and developer portals, we were challenged to build this new portal in 4 months while working in 1 week agile sprints. This culminated in an easy to use and unique API developer portal that is currently in use today and rivals other API developer portals.

TOOL

Figma, Mural, Adobe Illustrator

TEAM

Who’s the client?

My client was a provider of industry knowledge, connections, financing, treasury management, corporate investment, and international banking services to their own clients worldwide. They work with a variety of industries, including technology, life science, clean tech, venture capital, private equity, and premium wine businesses.

What the heck is API banking?

API banking gives developers access to data and payment operations to enable direct integration with their own platforms and fintech apps of choice. The client offers an API portal where developers can access APls and the tools, documentation and guides needed to implement the APls into their platforms and apps.

So what’s the problem here?

The client’s is a commercial bank who needs the ability to effectively market their API offerings as well as provide clear documentation and developer-friendly features in order to improve customer satisfaction, increase API adoption rates and scale their product.

The client’s existing API portal held a large amount of content that was not intuitively organized or presented, and lacked many of the tools and features that leading API portals were offering.

How do we know we’ve done our job right?

In order to make sure we had done our job successfully, my team and I came up with a success criteria:

Piecing it together

Current state analysis & landscape review

One of the first key steps to understanding API portals was evaluating the current state of the client’s API portal. We could identify which features already existed vs. which would be net new, and what areas were in need of improvement the most. As a group, my team and I segmented the different areas of the portal out and individually noted our thoughts and questions.

A large part of my contribution to the research stage of this project was focused on the current state analysis & landscape review. I took a look at about 16 different API portals to gather information about the tools and structure of API portals. With the little knowledge of API portals my team had to begin with, both of these exercises helped the team get a sense of what other API portals were like, and what features and characteristics some of the top-notch API portals included. Ultimately, it informed the direction we would go with our designs.

Interviews, synthesis, & personas

To help better understand the portals users, we first analyzed the four main personas that the client brought to our attention. We then held interviews with the client’s current API banking customers as well as their Sales, API Banking Product Management and Technology teams. The information gathered from our interviews was then synthesized in order to identify what was most important to users.

“The experience just feels so disjointed. Between the log in and interacting with the APIs, there’s a disconnect between identities across the site.”

— User Interviewee

4 main principles

Using our interview findings and synthesis, we established four main experience principles to describe our ideal outcome and to inform our design strategy.

Information architecture & sitemap

I created two different sitemaps: one as a reference of the past and one as a blueprint of the future. These site maps would visualize how each page would connect with the overall architecture of the site. Because it was created in the early stages of our project, the sitemap of the new portal continued to change and evolve during our design phase as we uncovered more about what was most intuitive for users regarding navigation and site organization.

Adapting to the client

Based off of our client's target audience, we designed a content model which was primarily a tool to align our designers with our client's engineers. Since content models mimic how programmers think about objects, it really helped the client think through all of their needs for the portal.

Design system

As the client already had an existing design system, our first step was to migrate the design system to our workspace and get familiar with it. As we worked through the project, there were instances where existing styles or components didn't align well with the API portal, as well as situations where entirely new components and styles needed to be established. 

This resulted in a design system that was changing and growing throughout the project. We were initially provided with an existing design system that provided a foundation for styles and components. As we designed, many of the screens we created required us to create new components and styles that were unique to the API portal.

We had a process…

Broken down into one week agile sprints, our team spent the first portion of each sprint reviewing the expected deliverables and success criteria, and using those to create initial designs. After reviewing those designs with the client, our team would use the client's feedback to iterate and improve. We would then hold a final client review at the end of each sprint which would ultimately result in finalized designs.

Final Designs

  • App Notifications & Status

    From the home page, users can quickly see the status of the APls they're currently utilizing as well as their apps that have the most recent notifications. Upon clicking an API status they can view the main API Status page, and clicking into a specific app itself will bring the user to the main app page where they can view more details about the app and any notifications.

  • Profile & Notification Management

    Users can easily create and sign into their accounts, and from the top navigation bar they have the ability access their Profile & Settings panel where they can view notifications, manage their profile and log out.

  • API Documentation

    The API Documentation section contains in-depth information on each of the available APls. Users can access Getting Started guides, API overviews, and the documentation they need to implement APls.

  • API Explorer & Integration Checklist

    Users can track the steps they need to take to complete their development process using the Integration Checklist. Another tool, the API Explorer, allows users to input and test out their unique parameters on a certain APl and run the code.

  • Support & FAQs

    Within the Support section users can find answers to frequently asked questions via searching for a specific question or browsing by category. They can also use the Contact Support form to ask the Support team any additional questions.

  • Publishing Business Documents

    Publishers can create new FAQs and business documents. The publishing tool was designed to allow users to utilize templates and easily add different "blocks" of information depending on the needs of their business documentation.

  • Admin Queue Management

    Users with the "Business Admin" role are responsible for managing requests from developers to promote their apps to other environments as well as to make modifications to their apps. These requests vary from a simple to quite complex, and many of them require multiple levels of approval.

  • Logs, Insights, & Changelog

    Users can view logs for API status' as well as for any changes that have been made (by them or other teammates) to their APls. Additionally, the Insights page provides users with valuable insight charts measuring error rates, error codes and latency.

  • Managing & Creating new apps

    Users can view logs for API status' as well as for any changes that have been made (by them or other teammates) to their APls. Additionally, the Insights page provides users with valuable insight charts measuring error rates, error codes and latency.

The challenges

Our solutions

Reflection

The client’s development team brought our designs to life. They began with our MVP designs and will continue to add on additional features as they release more versions. As of writing this case study, our designs have been published by the client and are in use today (see my team’s designs live on the client’s website).

This was a challenging project, particularly due to the time limitations and the continuously changing goals. Ideally, we would have ample time to do more research starting off, pull in more professional opinions as we design, go through more than 1 round of revisions per sprint, and check our designs via user testing. However, with the scope and timeline provided to us, my team and I came together to deliver a new product that made our client happy and boosted customer sales.