Citibank 

Razorfish

Product Launch

Product Design

Citibank
Citi pay

Creating a new digital credit payment platform experience for Citi customers and integrating it with some of the most popular retail brands

Role & Team:  Designer, Citi Pay Demo Team
Setting:  Razorfish ATX
Members:  Clara Heimsath, Skye Griffin, Michael Brandt, Dave Tobin

challenge

Citi asked our team to create a way for customers to checkout with financing options through a new Citi digital payment product while maintaining the visual language of the brand.

work

Our team went through iteration after iteration of making a seamless checkout experience integrated with major retailers and offering quick sign-up to reaching payment confirmation.

result

A new Citi digital payment platform product that allows new and existing customers a way to flex their purchases with convenient financing options

Research

Gaining an understanding of Citi Pay in relation to other digital payments

Out first task as a team was to gain a better understanding of not only the new Citi Pay product, but also the landscape of digital payment options. These sort of options include PayPal, Clarna, Afterpay, Affirm, Apply Pay, and many others. Citi Pay would be available to current and new Citi customers as a way to finance their online purchases. Though it was only the initial rollout of a product that would be further developed as time went on, we understood that it would be hard for Citi Pay to stand out from the crowd, and we thought this would put more emphasis on branding and a smooth sign-on or application process.

Flow Mapping

Integrating the Citi Pay pay flow with online merchant checkouts

The next problem we had to tackle was how this Citi Pay product would work, especially as it integrates with the online merchants that we would be hoping to partner with. This lead to some thinking though the information architecture and user experience through the flow from merchant product page to checkout. We found that each merchant experience would be slightly different in the way it brings in the payment options, but we created a solution for this that would allow customers to be sure that they could find the Citi Pay option and either sign in or sign up with ease.

UI Buildout

Creating the look and feel of the new product through Conversational UI

The final important piece to bring into the product was the branding and look and feel. Paired with the range of blue colors and new Citi Pay logo, the messaging-style bubbles in the application flow, what we called a 'conversational UI' approach, would bring to the product a more personal touch as well as an ease of use factor. As has become customary on product pages and checkout flows, we also included small pieces of marketing and affirmations of the Citi Pay product throughout our partner prototypes to illustrate where we could drive home the value proposition.

Citi Pay: A new digital payment platform from Citi

After going through many rounds of review and concepting, we came to set of  solutions for the new Citi Pay digital payment platform that would result in a well-integrated and effective mechanism for customers to complete payments. The UI system would be distinct and recognizable, and the conversational nature of the application process would provide a welcoming tone for new customers. We could then prototype this experience and take it to potential online merchant partners to make the case for adding Citi Pay to their payment options.
See the clickable prototype

Citi Pay Mobile
Application

Citi Pay Learn
More Page

Google Store
+ Citi Pay
Integration

Result

We got Citi Pay off the ground, but there's always more room to grow.

As a team we felt proud of the fact that we had met complex problems such as integrating with online merchants and accounting for variances in available financing options, but we recognized that this would only be the first iteration of Citi Pay. Online digital payments was already a crowded field when we were making this product, and it will only continue to grow, especially with more digital currencies coming into the mainstream. There seems an opportunity for Citi to continue to develop Citi Pay beyond the MVP shown here into something more versatile, more of a value-add to the customer, and more encompassing of the financial technology coming down the road. For the time being though, we felt we'd made something that would be usable and useful.