Design of a self-service API hub at a top-tier financial institution.

Intro

This international institution has hundreds of APIs allowing its internal programming teams to develop innovative customer solutions.

With a growing competition landscape, they’ve created a self-service platform for client companies. This would enable internal & external developers to integrate their systems so that the information can be seamlessly transferred.

Due to signed NDAs, I cannot disclose the bank’s name.

Key Goal

Create a cohesive API and toolkit portal for developers. Enable them to build innovative client solutions at ease.

Use the bank’s existing UI design systems.

The end result was an internal platform that includes a dashboard, a multi-step creation flow, and a page to manage deployed apps.

Scope

  • Requirement gathering
  • Competitive analysis
  • User Journeys
  • Personas
  • User Flows
  • Wireframes and rapid prototypes
  • UI Design
  • Usability test plan

Roles & Responsibilities

Consulting team + bank's internal team

As the sole UX designer, I was responsible for every step of the project: from gathering project requirements to prototyping wireframes.

This was a large scope initiative between a consulting firm and a bank. During the project, I was at the bank’s uptown office where I conducted all research and ideation.

I’ve worked closely with a business analyst and a product owner of Developer Portal to grow its ecosystem. Additionally, there were many internal teams who provided feedback on every aspect of every page and user flow.

Process

Empathize

Limitations

Unfortunately, due to time and resource constraints, there was no preliminary research.

Financial institution’s API hubs are very common. Most, if not all, major banks have them. Smaller Fintech companies even allow limited access without a verification process. That is all to say I’ve signed up for about a dozen of them. Because I could not interview end-users, I checked competitors for patterns in information architecture, usability, and any common verbiage.

Define

Lotus bloom workshop

After I transformed one of the meeting rooms into a war room, I dived into identifying the problem. I meet with internal and external stakeholders to understand the requirements.

I lead a brainstorming workshop using the Lotus Bloom Technique (*). Instead of solutions, we focused on each page’s requirements. This was helpful for team alignment and avoiding scope creep later on.

Proto-personas

I conducted a workshop to create personas. There were 4 participants, and our task was simple: to discover who would use the ecosystem. Figuring out their goals and expectations allowed us to focus on user journeys.

Proto-personas(*) are a variant of the typical persona, with the important difference that they are not initially the result of user research.

Ideate

User journey

User journeys take users on a path to meet their objectives. Here, it connects Jane with innovative tech solutions.

I spent a few days with developers and business analysts gaining an understanding of all the steps involved.¬†After a few hundred of post-it notes, we met with the bank’s stakeholders to ensure we were on the right path.

Sitemap

I created user journeys in conjunction with information architecture. While the stakeholders discussed minor details of the flows, I created quick sketches trying to wrap my mind around the flow.

Prototype & Test

High-fidelity prototypes

After iterations and sign off on wireframes, I created high-fidelity designs. Using the bank’s internal UI toolkit allowed for a quick turnaround. Furthermore,¬†InVision prototypes allowed for immediate stakeholder feedback and further changes.

Testing

I had put together a throughout testing plan at the beginning of the project. Unfortunately, all of the work was expedited. High-fidelity prototypes were delivered to a front-end developer, bypassing usability testing.

Outcome

Impact

Since its inception, this developer portal has surpassed 100 million annual data requests. There were 20+ more APIs added, allowed for greater customization.

Retrospective

This was a complex project. Usability testing early wireframes could have reduced the risk of overlooking problems for the end-users. It could have saved precious time and effort.

Footnotes

“The Lotus Blossom Creative Technique” Thought Egg

“Using Proto-Personas for Executive Alignment” UX Magazine