Project
BBVA
Open Platform
[UX] User Experience
Take a journey with me
Project
BBVA
Open Platform
[UX] User Experience
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
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
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
