Looking to transform KeyBank into a brand invested in emerging technologies and new capabilities, our design team partnered with product owners, developers, and stakeholders to found the creation of a dedicated API Developer Portal. This was crucial because, without it, our external developer partners – particularly those serving businesses banking with Key – faced significant friction. They lacked a direct pathway to leverage KeyBank APIs in their code, hindering their ability to build solutions that would drive success for their businesses. Our core objective was to empower these developers, enabling seamless integration with our financial offerings. This initiative was essential for both our Commercial B2B banking clients and for advancing our position in Embedded Banking, a strategic area focused on innovative financial solutions designed to compete with emerging FinTech products.
My primary task involved leading the end-to-end UX design for KeyBank's inaugural API Developer Portal, a project central to our Embedded Banking strategy. A key goal was to ensure seamless adaptation across six Bootstrap breakpoints for all devices. This undertaking presented distinct challenges. We collaborated with an offshore development team that required meticulous redlining and detailed written CSS specifications due to differing tooling, which prompted my advocacy for integrating Zeplin to optimize design-to-development handoffs. Additionally, navigating stringent technical product owner requirements, securing timely marketing approvals amidst organizational complexities, and aligning ambitious business expectations with cross-functional team capabilities and tight timelines were integral aspects of the project.
Operating with an Agile mindset, I led the visual, interaction, and overall experience design for the API Developer Portal. My process was user-centered, characterized by close and continuous collaboration with product owners, developers, technical writers, copywriters, and fellow designers. I managed the UX design process from initial concept to polished implementation. A cornerstone of this work was leading the creation of a comprehensive, accessible Figma-based design system from scratch, collaborating closely with a principal designer and a junior designer to establish our component library. Early on, our design system resided on a single Figma page to meet tight MVP deadlines. As we progressed into later releases, I took the initiative to evolve our library, setting up new design system files with dedicated pages for each component type. I actively transferred instances between files and created updated component versions. Recognizing an opportunity for efficiency and skill development, I taught myself how to use Figma variants, utilizing this feature as the most effective method to streamline complexity and manage use cases for our designs. I focused on translating user insights into tangible, empathetic design solutions, consistently presenting our progress and design rationale through formal design critiques and sprint reviews to ensure stakeholder alignment.
Our strategic design interventions fundamentally transformed our product development approach and, critically, the user experience. The Embedded Banking Design System effort significantly accelerated our design-to-development cycles by 90%. This generated substantial efficiency and ensured crucial consistency across all platforms. This foundational work directly facilitated the successful launch and adoption of KeyBank's emerging API Documentation and Developer Portal products, providing developers with a robust and intuitive platform for seamless integration with our APIs. While specific user adoption metrics are proprietary, the clear improvements in streamlined experience and enhanced efficiency for both our internal teams and external developer partners represented a significant advancement in KeyBank's digital journey, establishing a strong, user-centric foundation for future innovations in embedded finance.