Citi: Retail Services

 
retail_services.jpg

the challenge

Citi partners with many retailers to offer customers a credit card branded specifically for the retailer, such as the Best Buy Card. 

Our challenge was to:

  • Create a responsive, modular white-label site to acquire and service these credit cards

  • With the flexibility to look like any of our 30+ retailer partner’s existing sites 

  • Effectively creating a seamless experience for customers

My Role

I worked on this project across multiple phases that included designing new functionality and page templates as well as creating partner branding for many retail partners such as Macys, Best Buy, Home Depot and many more.

 
 
 
 

many brands, one experience

To create a seamless experience from the originating partner site to our product required interpreting each partner’s brand and looking for elements to replicate. 

Elements like logos, font styling, color usage, container and button styles, even input field shape and shadow styling were used to create a consistent experience.

UI kits were created for each partner to keep track of all of these elements and shared with Citi’s development team.

accessibility

Making the site accessible to all audiences including the visually impaired  was a not just a goal, but an expectation. This meant:

  • Ensuring that all font styling needed to meet ADA requirements, including proper color contrast outlined by the WCAG 2.0

  • We needed to never rely exclusively on color to convey a message

 
UI_kit_collage.png
 
fusion_system.png

A Giant Ecosystem

It’s no simple task to maintain a product that allows users to apply for a credit card, pay their bill, enroll in AutoPay, add payment sources, download statements, and much more.

Beyond a fierce attention to detail and intimate knowledge of the product, it means thinking through the impact of each change. A partner wants their new card art angled with a shadow? We need to check all places throughout the product where card art is shown to ensure spacing won’t be an issue. Citi decides that autopay is now written AutoPay? Time to find every location the word is used throughout the product. A partner is now offering their credit card in Canada? Every address field needs to be updated to accommodate an international address.