Citi and Razorfish partnered together to design a new Digital Welcome Kit experience for new-to-bank Checking customers. The goal was to build a strong relationship with these users early on by helping them familiarize themselves with their new account and help them get the most out of digital banking with Citi. The initial ask was to design the site around Citi Priority, one of Citi’s premium checking accounts, but the site needed to be flexible enough to serve as a template for future account and card welcome kits.
Creative Team - UX/UI Designer: Kara Konop ACD: Angela Hovis CD: Derek Montgomery
Before jumping into design, we needed to understand our objectives and narrow our KPIs.
To better understand our demographic, we gathered data on what new users want and expect when they open a Checking account with Citi.
We were then able to narrow our goals for this project down to 4 key principles.
Using these findings, we were able to design a sophisticated, user-centered welcome site that makes it easy for new customers to digest important information. This site is also flexible and adaptable enough to be re-skinned for other Citi products.
‘Citi Priority’ accounts are reserved for premium account holders, so the design needed to be tailored to this more affluent, mature demographic. The use of rich colors and sophisticated full-bleed imagery in the hero speaks to the clientele who will be receiving these welcome kits. On mobile, the image is scaled down and the copy is enclosed in a card to make it more accessible.
The full-bleed imagery continues in the ‘set up your account’ section with drawer style cards overlaid on top. On mobile, the background image is turned off and a light grey background highlights the expandable cards.
In this section, the bulk of the copy is divided up between individual cards to make it more digestible. Within the cards themselves, copy is further simplified by using bullet points. To prevent too much scrolling on mobile, the majority of the body copy is put into a drawer. The user is already familiar with this interaction pattern from the ‘set up your account’ section above.
Since the creation of the initial ‘Citi Priority’ site, two other Citi products have been skinned into this template.