Citi: Core Services


the challenge

Citi customer service agents use a multitude of disparate tools to service a customer’s account when they call in, running many programs and windows concurrently. 

Our challenge was to:

  • Get the Citi agents on to the same platform their customers were using

  • By understanding the challenges faced by the call center agents 

  • And integrating new functionality into the existing site


My Role

I was the lead designer on the project, overseeing other designers work as needed. I worked closely with our UX designer to solve the extremely complicated needs of call center functionality. I was also involved in the day to day interactions with the client and presenting work on a weekly basis.


User Testing

After creating several design concepts that we hoped would unify the experience for users and call center agents, we conducted user testing with both audiences. 

We were glad to see many of our assumptions were correct and our preferred solution won out, however the user testing provided so many insights that many updates were still made to the preferred design.


User testing was conducted with prototypes I designed and built using InVision and the Craft plug-in for Sketch. Testing was conducted for both mobile and desktop breakpoints and included over 400 screens. 


design system library

To maintain consistency with the existing Retail Services product, we utilized a global design library shared by multiple teams. The library contained everything from icons to complete page elements. I helped maintain this library and create new elements.


Product Sample


enhanced account summary

In speaking with call center agents, we learned that they needed to quickly understand the customers account status and key information within moments of answering a call. We redesigned this module to house far more information to help the agents quickly gather an account snapshot. 

make a payment without leaving the page

The longer you spend on the phone with an agent, the more money it costs the company. We learned that the number one reason people call Citi is to make a payment, so we added a way for users and agents to quickly make a payment without even leaving the page.

predictive and dynamic

Wherever possible, we looked for opportunities to adapt the page to user behavior. To help customers avoid accidentally making a double payment, the AutoPay module moves above the Make a Payment module and shows information about your next payment if the user is enrolled.