CLIENT
BBVA Open Platform
[UI] User Interface
BBVA Open Platform
[UI] User Interface
BBVA Open Platform
[UI] User Interface
BBVA Open Platform
PROJECT
Fintech Website
Dev API Portal
YEAR
17-2020
ROLE
Lead UX/UI Designer
SUPPORT
- Business / Stakeholders/li>
- Product Team/li>
- Brand / Marketing Team/li>
- Development / Engineers/li>
- QA / Brand Quality
Revolutionizing
Fintech Futures
Designing for BBVA Open Platform
INTRODUCTION
Discover BBVA Open Platform, an API-driven development platform empowering businesses to seamlessly integrate banking and payment services into their offerings. Crafted by Fintech entrepreneurs for developers, it’s a pioneering solution, backed by the products, infrastructure, and compliance framework of a leading Madrid, Spain bank.
Embark on a journey through the dynamic evolution of BBVA Open Platform’s UI design examples, where innovation meets interface in the ever-evolving landscape of financial technology.
CLIENT
BBVA Open Platform
PROJECT
Fintech Website
Dev API Portal
YEAR
17-2020
ROLE
Lead UX/UI Designer
SUPPORT
- Business / Stakeholders/li>
- Product Team/li>
- Brand / Marketing Team/li>
- Development / Engineers/li>
- QA / Brand Quality
Revolutionizing Fintech Futures
Designing for BBVA Open Platform
INTRODUCTION
Discover BBVA Open Platform, an API-driven development platform empowering businesses to seamlessly integrate banking and payment services into their offerings. Crafted by Fintech entrepreneurs for developers, it’s a pioneering solution, backed by the products, infrastructure, and compliance framework of a leading Madrid, Spain bank.
Embark on a journey through the dynamic evolution of BBVA Open Platform’s UI design examples, where innovation meets interface in the ever-evolving landscape of financial technology.
PROBLEM
Navigating UI Turbulence: Crafting Consistency Amidst BBVA Open Platform’s Evolution in White-Labeled Financial Services
BBVA Open Platform faced a significant challenge in establishing a cohesive and visually consistent UI design. The brand was undergoing transitions, and the UI needed to align with the global brand while adapting to the dynamic needs of the evolving platform.
The overarching goal was to create a front-facing website that effectively communicated the services offered by BBVA Open Platform, showcasing its streamlined API for businesses to white-label and build their financial services on BBVA’s robust infrastructure.
PROBLEM
Navigating UI Turbulence: Crafting Consistency Amidst BBVA Open Platform’s Evolution in White-Labeled Financial Services
BBVA Open Platform faced a significant challenge in establishing a cohesive and visually consistent UI design. The brand was undergoing transitions, and the UI needed to align with the global brand while adapting to the dynamic needs of the evolving platform.
The overarching goal was to create a front-facing website that effectively communicated the services offered by BBVA Open Platform, showcasing its streamlined API for businesses to white-label and build their financial services on BBVA’s robust infrastructure.
OBJECTIVE
The objective was to design and implement a UI that not only reflected BBVA Open Platform’s brand evolution but also catered to the requirements of businesses utilizing the streamlined API. This involved creating a user-friendly front-facing website to market services and establishing a developer API environment for clients to build and test their applications. The project unfolded in multiple phases, beginning with the creation of a working rendition for stakeholder pitches and securing funding, followed by iterative developments and pilot/mvp versions to accommodate the growing needs of Fintech clients within the BBVA ecosystem.
OBJECTIVE
The objective was to design and implement a UI that not only reflected BBVA Open Platform’s brand evolution but also catered to the requirements of businesses utilizing the streamlined API. This involved creating a user-friendly front-facing website to market services and establishing a developer API environment for clients to build and test their applications. The project unfolded in multiple phases, beginning with the creation of a working rendition for stakeholder pitches and securing funding, followed by iterative developments and pilot/mvp versions to accommodate the growing needs of Fintech clients within the BBVA ecosystem.
BRAND EVOLUTION & UI DESIGN TRANSITIONS
Navigating Through Corporate Shifts
Understand the challenges of designing during corporate transitions and the evolution of BBVA Open Platform’s UI. The project aimed to address the complex task of creating a visually consistent UI that aligned with BBVA’s global brand while accommodating the evolving needs of the platform.
The ultimate objective was to develop a front-facing website that effectively communicated the services offered, showcasing the streamlined API for businesses to white-label and build their financial services.
The journey unfolded in multiple phases, from securing initial funding through stakeholder pitches to iterative developments and pilot versions that adapted to the dynamic landscape of
Fintech clients within the BBVA ecosystem.
2017
(Pilot & Demo) Hinge to Open Platform
2017-18
(Beta) Open Platform as a Part of BBVA Group
2018
(Full Launch) Transition to BBVA Open Platform
2019
(Many New Clients) BBVA Open Platform
2020
(New Partners) Enhancements & Decoupling
2020
(Oct - Dec 2020) PNC's Acquisition of BBVA USA / BBVA Open Platform
Added Life
VISUAL CONSISTENCY
& FLOW
Creating a Visual Language
In a race against time and budget constraints, I creatively leveraged royalty-free resources, establishing a cohesive visual language through strategic mood, lighting, and adept manipulation of photography. This approach ensured a consistent narrative without stretching the financial limits
- Mood boards and theme discussions
- Utilizing free resources creatively
- Managing the process from exploration to final output
Storyboard examples below: (Drag & Click)
Added Life
VISUAL CONSISTENCY
& FLOW
Creating a Visual Language
In a race against time and budget constraints, I creatively leveraged royalty-free resources, establishing a cohesive visual language through strategic mood, lighting, and adept manipulation of photography. This approach ensured a consistent narrative without stretching the financial limits
- Mood boards and theme discussions
- Utilizing free resources creatively
- Managing the process from exploration to final output
Storyboard examples below: (Drag & Click)
Illustrate
ICONOGRAPHY & ILLUSTRATIONS
Molded Unique Visuals to Services
Amidst challenging timelines and the intricacies of design-by-committee dynamics, I strategically acquired existing icon sets. Through adept redesign and the incorporation of new illustrations, I crafted a distinctive iconography aligned with BBVA’s global brand, tailored specifically for fintech services. This approach not only ensured a seamless fit with our brand but also provided a swift and cost-effective solution, sidestepping the need for extensive rounds of refinement.
- Customizing global icon sets
- Creating new iconography and 3D sets
- Incorporating illustrations into API mappings
View some of these examples below: (Drag & Click)
Illustrate
ICONOGRAPHY & ILLUSTRATIONS
Molded Unique Visuals to Services
Amidst challenging timelines and the intricacies of design-by-committee dynamics, I strategically acquired existing icon sets. Through adept redesign and the incorporation of new illustrations, I crafted a distinctive iconography aligned with BBVA’s global brand, tailored specifically for fintech services. This approach not only ensured a seamless fit with our brand but also provided a swift and cost-effective solution, sidestepping the need for extensive rounds of refinement.
- Customizing global icon sets
- Creating new iconography and 3D sets
- Incorporating illustrations into API mappings
View some of these examples below: (Drag & Click)
Color Theory
COLOR USAGE
& EVOLUTION
From Global to Platform-Specific Colors
Crafting color schemes & better color theory to the evolving brand needs and platform-specific requirements.
- Building upon global brand colors
- Organizing content through color separation
- Evolution of UI colors, patterns, and shadow sets
- Separation between backend portal vs application
- Print collateral & Fabric sets
Color Theory
COLOR USAGE
& EVOLUTION
From Global to Platform-Specific Colors
Crafting color schemes & better color theory to the evolving brand needs and platform-specific requirements.
- Building upon global brand colors
- Organizing content through color separation
- Evolution of UI colors, patterns, and shadow sets
- Separation between backend portal vs application
- Print collateral & Fabric sets
UI Design System
Building a Scalable Design System
Establishing a comprehensive and scalable UI design system in collaboration with BBVA’s global design framework.
UI Design System
Building a Scalable Design System
Establishing a comprehensive and scalable UI design system in collaboration with BBVA’s global design framework.
UI Design
FLOWS, FEATURES, & CONTENT
Crafting Better Reading Experience
Navigating the ongoing refinement of UI elements, unveiling inventive features, and polishing content to elevate the overall user experience.
Collaborating with development teams to streamline API documentation, help docs, and dev code snippets for enhanced content flow and an improved reading experience.
View some of these examples below: (Drag & Click)
UI Design
FLOWS, FEATURES, & CONTENT
Crafting Better Reading Experience
Navigating the ongoing refinement of UI elements, unveiling inventive features, and polishing content to elevate the overall user experience.
Collaborating with development teams to streamline API documentation, help docs, and dev code snippets for enhanced content flow and an improved reading experience.
View some of these examples below: (Drag & Click)
Strategic Improvements, User-Centric
Navigating Transition Successfully
Examples from Sketch > Zeplin below: (Drag & Click)
Cards Issued
Customers
API Calls (per wk)
Cards Issued
Customers
API Calls (per wk)
RESULT
Proven Success Through Transition
Kyle successfully managed the evolution of BBVA Open Platform’s UI, demonstrating an unwavering commitment to user-centric design during a period of rapid corporate transitions.
Successfully steering BBVA Open Platform’s UI through rapid transitions and challenges!
Brought a 6-month delayed project on track, secured funding in Dallas, TX within 8 months.
Increased transaction volumes and revenues
Attracted new clients and partnerships, including Google
Acquired by PNC Financial in 2020 for 11.6 Billion
AWARDS & MENTIONS
- 2017 Excellence Award for Commitment and Delivery
- 2019 Excellence Award for UX/UI Design
- 2020 Celent Model Bank Award
RESULT
Proven Success Through Transition
Kyle successfully managed the evolution of BBVA Open Platform’s UI, demonstrating an unwavering commitment to user-centric design during a period of rapid corporate transitions.
Brought a 6-month delayed project on track, secured funding in Dallas, TX within 8 months.
Increased transaction volumes and revenues
Attracted new clients and partnerships, including Google
Acquired by PNC Financial in 2020 for 11.6 Billion
AWARDS & MENTIONS
- 2017 Excellence Award for Commitment and Delivery
- 2019 Excellence Award for UX/UI Design
- 2020 Celent Model Bank Award
What others had to say...
”Kyle, our main UX/UI lead for the BBVA Open Platform web project, is a hardworking and passionate professional. He consistently exceeds expectations, delivering high-quality work in UX, wireframes, prototypes, UI design, branding, and more. Kyle stands out for his creativity and exceptional self-management skills, ensuring deadlines and expectations are consistently met. A true asset to any project!
Macarena Peña GarcíaNew Digital Businesses @ BBVA Global
”Kyle is a valuable asset to our design team, impressing us with his expertise in UX/UI and his passion for art. His ability to excel both as a team player and independently has greatly contributed to various client projects. Kyle's self-motivation, amiable nature, and design prowess make him a standout member of our team.
Shalia AinaHead of User Experiences & Design @BBVA Dallas
He has been a great team player yet can effectively excel on projects on his own. He is self-motivated, a cool guy, and a great designer.
”Kyle is an exceptionally talented designer, demonstrating strong initiative and expert problem-solving skills in tackling complex UX and UI challenges. His ability to manage multiple projects simultaneously, collaborate seamlessly within a team, and excel in client relationship management makes him a valuable addition to any team.
Ryan TreesGlobal Director of Experience Design @ BBVA Dallas
