Credit Card Dashboard

Citibank Dashboard

The client needed a new dashboard to help improve overall customer satisfaction. This single dashboard is the customer’s primary touchpoint with the institution, generating 30 million unique page views per month.

We had two goals: development of a MVP for launch in April 2015, and to explore what could be possible in future iterations.

Existing Dashboard

This is the Dashboard that we were tasked with redesigning. Customers were largely displeased with the lack of hierarchy and sheer clutter that made completing simple goals difficult.

 

"The page is confusing and difficult to navigate, lots of small fonts, lots of busy things, it’s hard to find my balance, which should be right in my face." - Citibank Customer

Research

Citi had previously commissioned various forms of research in the preceding year. 100+ pages of user research and data had been processed.  Extensive competitive analysis showed obvious areas of improvement to be considered, while detailed personas offered even more insights.

Despite all this research, citi did not understand what customers wanted in future iterations of their credit card dashboard, or why they wanted it.

How do we gain these invaluable insights? One last round of research before design...

Co-creation

IMG_0217IMG_0217

We wanted to gain insight into how an ideal bank would communicate with customers. What tone of voice would they use? How should the banking dashboard be styled? Should it show more detailed information, or a fast overview? What data would be a priority for them to see immediately when they sign in?

Your Ideal Financial Helper (Tone of Voice)

To explore tone of voice, we gave the customers a set of archetypes and asked, “If you could build your ideal personal financial helper, what would be his/her personality?”

Customers gravitated towards a specific subset of trustworthy archetypes, who could coach them towards a better financial future and always have their backs.

“I would like tons of automation, with informative touchpoints of humanity in between”

Mood Board Gallery

We created a mood board gallery consisting of three boards, containing minimalist, playful, and complex images. The participants were then asked to define each with pre-written Post-it notes.

The minimalist board proved to be the most popular, being labeled Focused, Effortless, Smart, and Clean—which are all attributes of successful dashboard designs.

 

Initial Sketches & Wireframe

After synthesizing our results, we began whiteboarding a preliminary solution.

Collaborative Sketching

To produce high fidelity prototypes, we met with the Citi’s creative services vendor to bring them up to speed on the overall design direction.

Three Prototypes

We created three designs to test the hierarchy and visual presentation of the various page elements. Option A focused on a side-by-side view of balance and rewards.

Option B focused on a higher placement and hierarchical importance for rewards, while maintaining a clean clear balance and payment area.

Option C emphasized card features and offers messaging above card balance and rewards.

Usability Testing

IMG_1741-copyIMG_1741-copy

Findings

We tested the three prototypes on six customers across a wide age range (20s through 70s), using eye tracking to assess the time required to complete each task.

Some page elements were immediately intuitive, while others needed work. For example, a simple link to “credit score” proved to be confusing: “I don’t want to click on it because usually you have to pay for it.”

The findings showed a clear preference towards account balance information at the top, rewards in the sidebar, strong typography and a friendly tone.

 

Final Product

For the first iteration of the Dashboard to go into production, we focused on better status updates, side-by-side payment and rewards information, typography and consumer education.

RDS_Creative_Revew_121214-6RDS_Creative_Revew_121214-6