Project

BBVA

Open Platform

[UX] User Experience
Take a journey with me
Project

BBVA

Open Platform

[UX] User Experience
Client
BBVA Open Platform
Project

Public & Private
Website

Year

2017-2020

Role
UX/UI Hybrid Lead Designer
Supported
  • Business
  • Product Team
  • Brand/Marketing Team
  • IOS Team
  • Android Team

CREATING A BRAND NEW

Banking as a service business

OVERVIEW

BBVA Open Platform is an API-driven, unified development platform that enables any company to embed banking and payment services into their own customer offering.

Built by fintech entrepreneurs for developers, it’s the first development platform to offer banking and payment services that companies can white label and offer under their own brand that’s backed by products, infrastructure and compliance framework of a leading US bank.

Client
BBVA Open Platform
Project

Public & Private
Website

Year

2017-2020

Role
UX/UI Hybrid Lead Designer
Supported
  • Business
  • Product Team
  • Brand/Marketing Team
  • IOS Team
  • Android Team

CREATING
A BRAND
NEW

Banking as a service business

OVERVIEW

BBVA Open Platform is an API-driven, unified development platform that enables any company to embed banking and payment services into their own customer offering.

Built by fintech entrepreneurs for developers, it’s the first development platform to offer banking and payment services that companies can white label and offer under their own brand that’s backed by products, infrastructure and compliance framework of a leading US bank.

GROUNDBREAKING NEW INDUSTRY

Design & Innovation

CREATING FROM THE GROUND UP

When Kyle took on the project to design from scratch the website for BBVA Open Platform, a new subsidiary company, it was already five months behind. He organized team processes for multiple simultaneous workflows and ultimately delivered front-end and back-end solutions that created a powerful user journey within the technology and security framework of a bank.

User Experience Delivery
  • Collaboration & Information Sharing
  • Gathered /Sorted UX Cases / Personas
  • Research & Discovery
  • Storyboarding / Journeys
  • Lo-Fidelity Mocks and Flows
  • Development Process / Revision Process
  • UX Design System
  • Augmenting & Creating New Flows
GROUNDBREAKING NEW INDUSTRY

Design & Innovation

CREATING FROM THE GROUND UP

When Kyle took on the project to design from scratch the website for BBVA Open Platform, a new subsidiary company, it was already five months behind. He organized team processes for multiple simultaneous workflows and ultimately delivered front-end and back-end solutions that created a powerful user journey within the technology and security framework of a bank.

User Experience Delivery
  • Collaboration & Information Sharing
  • Gathered /Sorted UX Cases / Personas
  • Research & Discovery
  • Storyboarding / Journeys
  • Lo-Fidelity Mocks and Flows
  • Development Process / Revision Process
  • UX Design System
  • Augmenting & Creating New Flows

Research &
Discovery

Taking initial research and models produced by external design studio and making them workable and deliverable in house.

Solutions / Delivery
  • Green, Yellow, and Red paths of sets of our users
  • Competitor studies
  • Personas created
  • Team workshops weekly
  • Juggling site maps and deliverable tests
  • Whiteboarding and being apart of building everything from scratch

Research &
Discovery

Taking initial research and models produced by external design studio and making them workable and deliverable in house.

Solutions / Delivery
  • Green, Yellow, and Red paths of sets of our users
  • Competitor studies
  • Personas created
  • Team workshops weekly
  • Juggling site maps and deliverable tests
  • Whiteboarding and being apart of building everything from scratch

Mapping &

Personas

Kyle was instrumental in mapping pages, flows, and creating persona journeys throughout the website.

Wires, Planning, &

Content Breakdowns

Kyle collaborated with the project owners and content team on content development, while also providing mapping and visual demos.

Demos, Added Features,

& Evolution

Kyle constantly juggled demos and the addition of new features as the company’s offering grew and its corporate strategy evolved.

INTERNAL UX DESIGN SYSTEM

Kyle built an internal UX design system to manage the process of adding new features and refining the site. This provided continuity over the lifecycle of the project saved the company time and money and supported communications and development across different teams and departments.

INTERNAL UX DESIGN SYSTEM

Kyle built an internal UX design system to manage the process of adding new features and refining the site. This provided continuity over the lifecycle of the project saved the company time and money and supported communications and development across different teams and departments.

Development of Technical Sections

CONTENT IMPROVEMENTS & NAVIGATION

BBVA Open Platform’s API Reference documents and user guides were geared to developers and engineers that were using Open Platform’s identity verification, payments, bank account and debit card APIs to build in-house banking and payment services for their own customers.

In collaboration with the product and content teams, Kyle created new layouts for these technical documents that were far easier to read, digest, and navigate, easy to update, mobile-enabled, and integrated with the look and feel of the whole site. He overcame the hurdles of designing layouts for features that were still under development and worked with a number of technology restrictions, including set WordPress parameters and JSON content that was dynamically driven to these pages.

The examples below show how Kyle created a technical section that was both functional and engaging.

Solutions / Delivery
  • Articulated design vision to leadership
  • Worked with the product owners, content team, & front-end development team
  • Incorporated feedback from users, with improvements
  • Fought for clean content & typography
  • Created Lo-fidelity wires
  • Organized documentation
  • Created hi-fidelity demos
  • Pushed for improved navigation & behaviors
  • Streamlined components, patterns & color usage within pages
  • Built content hierarchy through design

Development of Technical Sections

CONTENT IMPROVEMENTS & NAVIGATION

BBVA Open Platform’s API Reference documents and user guides were geared to developers and engineers that were using Open Platform’s identity verification, payments, bank account and debit card APIs to build in-house banking and payment services for their own customers.

In collaboration with the product and content teams, Kyle created new layouts for these technical documents that were far easier to read, digest, and navigate, easy to update, mobile-enabled, and integrated with the look and feel of the whole site. He overcame the hurdles of designing layouts for features that were still under development and worked with a number of technology restrictions, including set WordPress parameters and JSON content that was dynamically driven to these pages.

The examples below show how Kyle created a technical section that was both functional and engaging.

Evolution of
Case Studies

UX/UI CYCLES & BUSINESS IMPROVEMENTS

Working with the product, content, and front-end development team, Kyle completely reworked the section of the site that presented case studies of how BBVA Open Platform’s clients currently used its APIs. The resulting mobile-enabled redesign, complete with a dynamic home page, encouraged users to explore the section and related links, clearly demonstrated how each client used Open Platform, including appealing photography and graphics, and was easily scalable to cope with the influx of new clients.

The examples below show some of the development processes, from low-fidelity wires and annotated examples to the final product that was endorsed by Open Platform’s leadership and its clients.

Solutions / Delivery
  • Produced annotations, mapping, research, and breakdowns
  • Sold concept to product owners, marketing, & stakeholders
  • Collaborated with product owners & content team (weekly workshops/InvisionApp demos)
  • Created lo-fidelity wires
  • Created hi-fidelity comparisons/beta test pages
  • Created & documented templates
  • Created / organized online output (in Zeplin)
  • Worked with front-end developers & QA
  • Created final UI templates for the front-end team
  • Created UI components
  • Iterated future UI process

Evolution of
Case Studies

UX/UI CYCLES & BUSINESS IMPROVEMENTS

Working with the product, content, and front-end development team, Kyle completely reworked the section of the site that presented case studies of how BBVA Open Platform’s clients currently used its APIs. The resulting mobile-enabled redesign, complete with a dynamic home page, encouraged users to explore the section and related links, clearly demonstrated how each client used Open Platform, including appealing photography and graphics, and was easily scalable to cope with the influx of new clients.

The examples below show some of the development processes, from low-fidelity wires and annotated examples to the final product that was endorsed by Open Platform’s leadership and its clients.

Project Stats

200m

Payments Processed

225

Customer/Business's Onboarded

1

API Calls (Per Wk)
Project Outcome
SUCCESSFUL LAUNCH

After five months of beta testing, BBVA Open Platform’s site was publicly launched at the end of 2018 to great acclaim, sharing its suite of innovative banking and payments APIs and the clients that used them with the world.

Our greatest weakness lies in giving up. The most certain way to succeed is always to try just one more time.

Alan Adams – CEO, Essential Company

Awards & Mentions
  • 2017 Excellence Award – Hinge/Open Platform – “Unwavering commitment & Delivery”
  • 2018 Certified Scrum – Mountain Goat
  • 2019 Excellence Award – BBVA Open Platform – “UX/UI Design”
Project Outcome
SUCCESSFUL LAUNCH

After five months of beta testing, BBVA Open Platform’s site was publicly launched at the end of 2018 to great acclaim, sharing its suite of innovative banking and payments APIs and the clients that used them with the world.

Our greatest weakness lies in giving up. The most certain way to succeed is always to try just one more time.

Alan Adams – CEO, Essential Company

Awards & Mentions
  • 2017 Excellence Award – Hinge/Open Platform – “Unwavering commitment & Delivery”
  • 2018 Certified Scrum – Mountain Goat
  • 2019 Excellence Award – BBVA Open Platform – “UX/UI Design”
Personal Stats

90

1st 6 Months of Wkly. Hrs.

15

Juggling Multiple Hats

2

Coffee