Citi’s Ways to Save

Citi aimed to provide a new product offering to customers with little or no savings, called Ways to Save. I was tasked with leading the UX/UI design for the project and create a vision for what savings tools could be created. I worked with partners across product, development, and research to ensure every perspective was applied to WTS. The goal was to empower customers to invest their money and create sticky behaviors through gamification to drive new activation, engagement, and investment through Citi.

Role:  As the lead UX/UI designer on Ways to Save, it was my role to spearhead the creation of personas, user flows, wireframes, and visual design.

Platforms: iOS, Android, Responsive web
Disciplines: UX, UI, User Research, Prototyping, Testing
Tools: Figma, Invision
Timeline: 3 months

Research

Through research, reports about the emotional & psychological aspects of financial wellness kept showing up. It’s a very personal topic that can be quite stressful.

One amazing finding from my research were the Pillars of automated saving. They are a combination of psychological and behavioral traits humans have naturally. If Ways to Save can tap into some of these habits, we can leverage them for our customers success.

Some standouts included:

  • Minimize customer decisions

  • Provide ongoing proactive advice

  • Reinforce savings commitment

Competitor Analysis

Taking stock of what currently exists in the market helped us see what was working and identify areas that could be improved. Many of these apps have recurring savings but are limited in additional financial wellness education.

Qapital: houses automated saving rules within a funding section of their app

Point App: houses recurring transfers within add funds CTA

Titan App: houses automatic deposits within their account settings section of the app

Acorns: houses their investment features within their main account dashboard

Audience

The target customer base has recently begun to increase their savings, but are not comfortable with investing their hard earned money. We are looking to help the customers learn more about investing and see how their money can grow without any consequences of investing.

Problem Statement

How might we improve customers savings habits & financial literacy to help them achieve financial wellness?

Feature Ideation

With help from product partners & other stakeholders, the three offering of Ways to Save were defined:

• Spend & Save – ‘round-up’s’ merchant transaction to the nearest whole dollar to drive incremental transfers to savings
• Earn & Save – customers can transfer a portion of their direct deposits into their Citi savings account
• Set & Save – recurring transfers to savings drive consistent savings strategy

Sitemap

WTS needed to be integrated with our existing Citi dashboard. There was also another project coming down the pipeline, Ways to Invest, that would need to flow with Ways to Save. Creating the sitemap was important to note how the two products would interact and be able to plan in advance. On the right you can see the product designed from the entry point on the main dash board, then the WTS dashboard, and finally each feature landing page.

Wireframes + UX Exploration

Wireframes were important to flesh out the sitemap and mock up customer interactions. I also conducted a graph exploration audit to be tested.

Testing

Usability testing on the prototype provided so much information to guide the final UI. Below are the testing questions and the lessons.

Testing Questions
1. How does the user perceive the enrollment flow?
2. What is the most important information a user needs to see on the WTS landing screen? What would you like to accomplish on this screen?
3. What is the most important information a user needs to see on each individual WTS Landing Screen? What would you like to accomplish on these screens?
4. What value does the customer gain from the graph on the WTS landing screen?
5. Would the customer enroll in multiple Ways to Save?

Lessons
1. Cut down steps and simplify the enrollment experience.
2. People want to see all their information at a glance and not see too many words.
3. The stacked graphs tested the best as the customer can see all of their WTS enrollments at once.
4. Customers wanted to enroll in multiple Ways to Save, but found it difficult to locate how to do so.

I used these findings to go back to the prototype make some edits inspired by an iterative design process. Then, the final UI was ready to be shown.

Final UI

The final onboarding experience is much more simplified and smooth. I designed each screen so the user would clearly see what step they’re on & how many are coming. I also worked with a developer to create an upward scroll animation as the customer completes each step.

WTS & Individual Dash

The Ways to Save Dashboard (shown in mobile & desktop) is very visual so it doesn’t rely on copywriting too much. This screen was iterated based on the testing findings so that customers could easily locate the Ways to Save features they aren’t enrolled in. The stacked graph that customers loved from testing is included as well as all of their recurring desposit information. Giving a nod to the research findings, I also included educational tiles to help customers improve their financial knowledge.

Reflection

After many hours of research, testing, design, and development the final Ways to Save is out to Citi customers worldwide! I’m passionate about design that helps people improve their lives so creating a product that helps people improve financial literacy through recurring savings was an awesome experience. Below are the results once Ways to Save went live