Citi’s ‘Buy Now, Pay Later’ is an entirely new consumer funded short term lending product offering the customer access to interest-free financing for purchases divided evenly between 4 payments. It is positioned to be a competitor to existing short term lending products like Klarna, Afterpay and Affirm. This digital experience required a smooth and intuitive application and sign up process along with a streamlined servicing dashboard. Since this was an entirely new product for Citi, we were able to create a brand new visual language and design system specific to the ‘Buy Now, Pay Later’ brand.
Creative Team - UX/UI Designer: Kara Konop ACD: James Guest CD: Michael Brandt Experience Leads: Bretagne Abirached & Skye Griffin UX Designers: Shufen Wang & Clara Heimsath
In order to login to any existing Citi accounts, a user currently has to create a username and a password. To expedite the account creation & login process for Buy Now, Pay Later, we introduced a new way of authenticating a user - through one time password. We wanted the product to remember a user once they’ve used the service once before, so we realized we would need two different user flows for a new user vs an existing user.
Once the general user flows were established, we began to solve for screen layouts. Our team had regular ideation sessions to talk through possible design solutions and we kept track of our UX decisions through wireframes in Invision. Because of our condensed timeline for the project, I also began ideating on different visual design languages that we could use to ‘brand’ the product.
We also solved for a couple of ‘unhappy path’ scenarios that might occur. This solution solves for a user who is unable to receive OTP verification texts or calls.
One other ‘unhappy path’ that we solved for was a user logging in with a new email address while using an existing phone number.
After several rounds of design reviews with Citi stakeholders, it was decided that we would minimize the branding and use Citibank’s standard color palette. Since we built our page components in a design system, we were easily able to replace colors for elements across all screens. Below, you can see the final acquisitions flow skinned in the selected color way.
The acquisitions flow for an existing customer is much more streamlined than the new customer experience. We initially proposed a simplified OTP experience where the user would only need to verify their identity with a code sent to their phone, but after rounds of review, Citi legal required us to request an SSN as well.
We focused on making the Buy Now, Pay Later experience minimal, intuitive, and clean. Chunks of information are easily digestible because they are divided into cards and our iconography and typography remains consistent throughout. Small touches, like the cloud graphic and pops of neon green, add personality to the designs.
We designed this experience to be optimized for mobile use. In order to make the development process even easier, we decided to select a smaller max width for the content on desktop, rather than spanning it the full width of the browser. The widest that our content could expand on desktop was 448px.
We created an entirely new design system for this product. Below you can see all of the symbols in our new library. We also developed a UI kit which contained more detailed specs on breakpoints, spacing, typography, and the like. Also, to make managing any design changes to this product even easier on our end, we divided the acquisitions and servicing flows into smaller modules. This allows multiple designers to make edits on multiple modules at one time.
We went through several rounds of design iteration with the client before they decided on a final color palette. Some of our earlier visual languages were a bit more adventurous but Citi wanted to lean on their existing branding rather than making a jump to something new. Below you can see some of these earlier designs.