Partner Integration Toolkit
The integration toolkit is a brand new product build from scratch, designed for Citi Open Banking team to provide basic project management service to our partners. The goal is to accelerate the partner onboarding process and streamline the planning and testing phases for our internal relationship manager and partner representatives.
My role
Lead UX designer
Duration
10 months
Time
2019-2020
Platform
Web browser
Background
Project overview
Problem
Target audience
Inspiration
User flow
Ideation - wireframe
Testing
Iteration
Merge platform
Design deliverables
Hand off
QA process
Takeaways
We envision the Partner Dashboard as a new tool for the Citi Open Banking team to streamline and scale our partnership integrations. This would function as a single source of truth for both Citi and external partners to track tasks and measure the health of our APIs. Moving forward this platform has the potential to support other regional teams, like APAC and EMEA, as well as form the foundational elements for Banking as a Service (BaaS) at Citi.
This tool is designed to offer a Partnership Migration space dedicated to increasing project efficiencies,
increase velocity to go customer-live and enable Citi managers to scale to larger partner portfolios.
In the past three years, our average period of time to go live (excluding contractual phase):
• Intuit – 1 year (many variables held up the project)
• eMoney – 5 months (fragmented sharing info, UAT delays)
• Expensify – 7 months (Security process, delays from partner)
Project goal is to reduced migration timelines to 2 months (kick-off - customer go-live), consolidating our Metrics Frameworks across the Open Banking Program. Aggregate Site Catalyst & Splunk data into internal & external dashboard views.
Longer-term perspective, position Partner Migration tool for BaaS initiatives & apply mechanisms for commercialization to other line of business.
Today, our internal Partnership Engagement Team has been managing 3rd party partnership integrations with a very fragmented toolkit: Powerpoint, Confluence, Excel, email and external metrics platforms. This creates difficulty and strain on resources when expected to operationalize the engagement and scale to support more partnerships. Tools to manage migration today are fragmented, often causing:
• Delays in communication between teams
• Ambiguity of project status
• Lack understanding of next steps with the partner
With the significant growth of upcoming partner pipeline for 2019 both in Asia & US, the current fixed capacity, not uniform process across regions & locally is causing the issues of scaling.
How might we
Create a standardized capability for faster partnership integration at scale?
This initiative is going to impact each partnership Relationship Manager in Fin-tech (and ideally core Citibank RMs more broadly), along with the respective third party partnership teams.
What’s their need?
When partners are evaluating against other Financial Institutions in the market, they’re looking for ease in onboarding their teams to the APIs and other resources, getting the migration mobilized quickly, testing in stable and secure environments and leveraging existing insights to solve customer problems.
Partners look for a single source of truth – whether it be a person or program – to help streamline management efforts on their side, as they too could be managing a number of partners at once. They also need to coordinate with a varied team of stakeholders.
Project goal
Allow a Citi relationship manager to clearly determine when the partner is ready to move to production.
Eliminate the need for engagement managers to manually track and record the status of test cases. Enable partners (in a self serve manner) to track the status of their test cases and validate when they've successfully completed them.
Operationalize the integration tool and eventually free up more time for RMs to take on more partners in their portfolio.
After weeks of discussion to define the MVP, to do list, API commercial readiness, metrics, sandbox tools, support ticket etc, without landing a solid conclusion, I started to draft the potential user flow to help the team kick off the project and estimated level of effort of the features.
overall flow exploration
Set up a project
MVP scope
Defined the MVP to prioritize Onboarding Tracker and Testing Environment along with Partner/Project Setup. Because when partners are evaluating against other Financial Institutions in the market, they’re looking for ease in onboarding their teams to the APIs and other resources, getting the migration mobilized quickly, testing in stable and secure environments and leveraging existing insights to solve customer problems.
Followed by mock up all the major screens, page by page, feature by feature, and reviewed with product and dev team weekly, to iterate the site structure based on usability and tech limitations.
Below are the example of the initial ideas for key screens of Partner Dashboard Landing, Project List, Project Dashboard and Navigations.
Objectives
Evaluate resonance and appeal of design concepts and features and what we might need to build for greater utility with partners
Unearth ease of use, clarity and efficacy and how we can enhance our dashboard for more seamless task completion, self-service and momentum throughout partner onboarding
Methodology
90 minute in-person IDI’s and focus groups
4 relationship managers and Citi partners from xxx and xxx
12 relationship managers and non-Citi partners
A/B Testing - Onboarding Tracker Navigation
Findings
“How easy was it to identify project phase” yielded and average
Option A scored 3.8/5 Option B scored 3.4/5
Most were able to identify completed stages, current stage and upcoming phases, some struggled to delineate between “groundwork” and “getting started.” A couple partners expressed Sandbox, UAT and FUT should fall under groundwork.
Recommendation
Pursue alt language or descriptors for steps for clarity / Use more standard project terminology
Enable Nav and tracker to be clickable and navigate to to-do list
CRITICAL: Explore alt solves for NAV
Based on the learnings and user feedback, the iteration focus is to balance tracker’s edibility with process indicator. As the iteration version showed below, the idea is to allow user clearly viewing their process status on Dashboard. From internal team review, concerns were raised that current display format may mislead user thinking the section can be clicked or interact with. Therefore, it landed on the final solution with process indicator nested to the side navigation, with Onboarding Tacker Tab by default opened if user is within onboarding process. Instead of removing the Tracker Card on the dashboard, still keep the section to alert user with a line of dynamic copy displayed.
Tech limitation design task
Apart from designing the task driven solution based on business goal and user need, there are also other requests to transfer current WIP tools to the new toolkit. Different from designing the ideal journey path, such requests are 1:1 structure transfer with minimum tech effort to our new platform.
Draft versions
In order to understand the tech limitation and feasibility, I have created many versions of potential solution to review with our Dev Team, in order to validate functionality and if the designed interaction is executable.
Final solutions
After rounds of conversation, the final solution successfully matched current code structure to connect each call with each CTA, with major system edge cases covered. Even through the limitation was strict, I still have enhanced the hierarchy of the CTA to make the experience more straightforward, within the limitation.
Key screens
After working closely with Product Team to determine and prioritize features for MVP, and worked with TPM to define each sprint delivery planning, below are the final MVP flow and some key pages I have delivered.
Project list at Partner level
Project Detail Dashboard
Sandbox Testing: Switch App, test cases and result display
Onboarding tracker: to do list
Add and edit team members
There were many file delivered in multiple format , such as PDF version for Legal review, source file of Sketch for developers. And a full InVision prototype with annotations and additional comment for Product, UI and Copy team internally, to reduce confusion on the experience and allow me to onboard other team members.
The final deliverable are separated to Citi Relationship Managers with full capability and Partner View with limited authorization.
Relationship manager journey
Customer journey
After a feature has been fully developed that are ready for QA, I’ve worked with testing account to test the end to end experience, bug bash all possible interactions to make sure it works as the designed.
If any inconsistence accrue, I will log found issue in an excel sheet to review with the assigned developers, then posted to JIRA with ideal design solution attached.
Challenge
The major challenge for this project is understanding project goal and requirement. The first requirement document I received was a 100+ page long playbook with 2 pages highlighted from our partner, asked to transfer it to a product. Then an excel sheet with over 20+ taps content including all related ideas and potential features from our product team. Instead of waiting for an actionable design requirement, I worked with the product team and reached out to TPM to collaborate together in a meeting room with whiteboard for couples of afternoons, to define the MVP and move the project forward little by little.
Learnings
Throughout the design and iteration process, I have learned to prioritize the features that matters the most to our target user. As well as manage my own workload with multiple projects (Dev Hub and multiple toolkit features). It is important to communicate each process and project status with Product Owner and Developers, in order to reduce rework and make sure the expectation and goals were aligned across all teams.
As the lead UX designer for this project, I worked with three UI designers and two copy writers to build the experience together as the design team, it was challenging process to keep all designers aligned with the frequent updated file at the beginning, which caused tedious email threads where many decisions were lost. Therefore, I have spent additional time on prototype out the wireframe to InVision, onboarded all teams to have access and receive most updated file. This has made our communication more efficient and allow us to track down all the decision rationale on each screen.