Bank of APIs

RBS Group 

Skills: information architecture, user research, competitor analysis, paper & Sketch wireframing, stakeholder approval, copywriting, InVision prototype, data visualisation, metrics charts, UX guidelines, onboarding, regulatory compliance

What's open banking?

Three years ago I had no idea what an API was. Now I can tell you they’re like a translator, or at least that’s how I explain it to my mum. Rather than calling it an application programme interface, I describe APIs as translators. They let an app like Uber talk to Google Maps for locating you, Twilio for messaging you, and Braintree for securely transferring payment from your phone to the driver. This is revolutionary stuff, and it's all enabled through the use of technology and readily accessibly data. 

Until recently, people’s financial data was closed off to developers by the Banks. Many countries including the UK have recently launched open banking initiatives to free that data. The goal is to stimulate innovation in the finance sector, benefitting customers who are free to opt in or out of sharing their personal finance data in exchange for financial services such as a budgeting app.

I’ve been on the Open Banking team in RBS which designed and developed the Bank of APIs website. The idea is to showcase all the APIs that the brands within the RBS Group turn out, encouraging devs to work with us on innovation. The site needed to cater to devs as well as less tech-savvy crew.  We had regulatory requirements that we need to comply with, representing all the brands under RBS (including NatWest, Coutts, Ulster Bank). We looked at our competitors to see what features and designs were a standout, as well as asking our own UI team and back-end engineers for their impressions. They gave great in-depth feedback, which we fed into the design and throughout the build. 

 

BoA competitor analysisBoA competitor analysis

Preparation of a competitor analysis report done in Sketch and distributed to the Bank of APIs design and development teams for discussion. 

Usability & designUsability & design

Process

I worked on the navigation, API catalogue strategy, information architecture, user onboarding and support, code documentation, functionality, and the UX guidelines for mobile and web responsive design. I designed wireframes which were built on by the visual design team. The design team talked regularly with the UI team to discuss issues that cropped up along the way of the build. 

My favourite part of the work was writing up the UX guidelines, since it was a great change to distill what I know about UX into small chunks of information for easy and informative reading for busy people. 

1.0 Home page1.0 Home page

Wireframes I worked on for the Bank of APIs, incorporating the information architecture, navigation, interaction and copywriting.

Metrics x3Metrics x3

It's a requirement for us to display the metrics for all the brands and APIs. Work in progress for showing the average time over a month. 

A selection of the wireframes I worked on to briefly explain what UX is and why it's important. 

Here's a closer look at one of the wireframes showing the UX guidelines overview, navigation and sign up CTA that I worked on. 

JourneyJourney

I sketched the wireframes for the onboarding journey, creating a prototype and report to share with stakeholders and front and back-end devs for their feedback. The Bank of APIs has a fun visual style that branches away from the corporate side of the RBS Group. 

Sketching documentation options. I looked at a variety of ways to present the API documentation pages, based on the competitor anaylsis and discussions with our devs for their preferences, but also what we could deliver wtihin the regulation timeframe.

The 'finished' product

You can check out the Bank of APIs yourself to see what it's all about. Of course it's still a work in progress and it's evolving as the open banking initiative progresses.