Razorfish is Citi bank’s agency of record, and is responsible for designing and developing the credit card platform that Citi’s 50+ retail partners use.
With many brands from numerous industries using our product from the credit card application micro-service to the end-user online portal, my team existed to ensure consistency in the product experience across all brands.

Citi Consumer Credit Cards: Design System

Problem

50+ retail partners from numerous industries needed many bespoke needs from our credit card portal. Tracking unique changes, scaling and increasingly large design system, and ensuring UX  consistency were challenges.

Role

UX Designer

Time

4 months (MVP)

Solution

Contributing to the evolving design system called Fusion, to track the various  needs of our brand partners, and creating over all UX consistency from interaction to content.

Client

Citi Bank

Sub teams comprised of UX designers, a content writer, and project managers were distributed to ensure platform consistency across a subset of retail partners. Overseeing these teams was our experience director and art director

Team Structure

Matt Rife, Experience Director
Joe Wagner, Art Director
Cathlin McCullough, Sr. UX
Jose Miranda, UX
Jearold Hersey, UX
Patrick Ree, Associate UX
John Kolenda , Project Manager

Fusion Design System

As the name suggests, the fusion design system was made out of a need to serve a wide range of designers and developers building Citi’s retail partner credit card products and experiences. The goals of the system included improving UI consistency and quality, making the design and development process more efficient and focused, establishing a shared vocabulary between designer and developer, and providing clear, discoverable guidance around design and development best practices.

User Flow

Credit card application experiences would launch into a fusion micro service that was templated for retail partners.
‍
One of my responsibilities was to outline the application approval, pending, and decline paths for each partner brand.
‍
In this example, in addition to users wanting to clearly understand the status of their application, our partner brand wanted to drive their live chat assistant to provide more support.

Wireframes

Wireframes were provided at medium fidelity for developers to reference placement, some content, and interaction notes.
Desktop and mobile breakpoints shown.

Content

Our content delivery system required designers to also take the responsibility of diagraming the content hierarchy their relation to the UI specifications.
‍
This asset would be handed off to our copy writer to input into the CMS and work in tandem with development.

UI Specification

I was also responsible for illustrating the  standardized interaction design of common components such as the one seen here. Working with our development team to apply these standard interactions was essential for scaling consistent patterns across our partner experiences.

Product Tour

Deliverable

This mockup illustrates the concerted efforts of my team, scaling the fusion design system to create UI consistency across numerous brand partner's credit card portals.

Sensitive partner branding information is blurred out.

Retrospective

This was an incredible opportunity for me to understand the importance of design systems, and how to evaluate the efficiencies in the ways design teams work with development.