Each legacy product had its own login
FIS ran several legacy banking products, each with its own way of logging in and enrolling. The pre-login experience was fragmented across separate product teams: inconsistent flows, duplicated work, gaps no one owned. The mandate was structural. Consolidate authentication and enrollment into one framework that could scale across the company and support a white-label strategy, owned by one team responsible for the whole function instead of a slice of it. It was FIS's first cross-product design effort, and the first to move the team from designing per product to designing per function. Scope shifted constantly as priorities and compliance requirements changed.
Before
Separate login experiences
- Legacy ALoginEnrollment
- Legacy BLoginEnrollment
- Legacy CLoginEnrollment
- Separate product teams
- Inconsistent flows
- Duplicated work
- Gaps no one owned
After
Shared login and enrollment experience
- Legacy A
- Legacy B
- Legacy C
Shared experience patterns
- Sign-in
- Enrollment
Components I added to the design system
- Radio group
- One-time passcode
- Password checklist
- Progress tracker
- One team owns the whole function
- Built on the enterprise design system
- Ready for a white-label strategy
End to end, from the PRD through QA
I owned the design end to end: contributing to the PRD, taking flows and wireframes through to high fidelity, handing off to engineering, then leading QA and post-handoff support. This was also the first project to apply the new enterprise design system across a whole experience, so I was pressure-testing the system as I built with it.
Two calls that held the framework together
When a late change removed the welcome screen, it took the enrollment entry point with it. Rather than block the timeline, I moved enrollment onto the sign-in screen. It solved the problem without adding scope.
Before: enrollment lived on the welcome screen
After: I moved it onto sign-in
The second was a security argument. To avoid revealing which field was wrong, I pushed for generic, form-level error messages instead of field-level indicators. The design-systems team pushed back, so I worked through the form-level versus field-level validation feasibility with engineering, made the security case in their office hours, and got the change supported and shipped.
I also designed for cases before anyone asked for them: tailored error states for users who were already enrolled versus those with invalid credentials, and web layouts alongside the mobile-first work so the later web phase could build on a foundation instead of starting cold.
Single column, after testing three web layouts
Web carried more weight than mobile. First-time users had to clear an external security-token setup on the way in, while we moved the login onto a modern identity platform underneath. The risk was cognitive overload at the exact wrong moment. Instead of guessing at a layout, I treated three directions as hypotheses and let a validation session settle it: single column, two column, and a hybrid, testing first-time login and token setup in each. I recommended single column: it lowered cognitive load, read more clearly step to step, and made the handoff into the security setup feel continuous rather than jarring.
QA treated as design work
Shipping something this large clean meant treating QA as design work. I built a defect tracker that broke every issue down by component, defect type, and responsible team, so nothing slipped between groups.
300+
defects tracked to resolution
19+
designers who adopted the system
4
components added to the design system
The reference for authentication across FIS
The framework became the reference point for authentication and enrollment across the organization, cited in stakeholder readouts and picked up by adjacent initiatives, and it anchored the white-label strategy. The four components I contributed (a radio group, a one-time passcode, a password checklist, and a progress tracker) are still in use across teams.