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 to drive new activation, engagement, and investment through Citi.
The goal was to empower customers to invest their money and create “sticky” behaviors to drive new activation, engagement, and investment through Citi.
Platforms: iOS, Android, Responsive web
Disciplines: UX, UI, User Research, Prototyping
Tools: Figma, Invision
Timeline: 3 months
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.
Disciplines: UX, UI, User Research, Prototyping
Tools: Figma, Invision
Timeline: 3 months
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.
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 to see what was working and identify areas that could be improved. Many of these apps have the recurring savings but are limited in additional financial wellness education.
Qapital: (saving account, investing account,
spend accounts)- houses automated saving rules within a funding section of their app
Point App: houses recurring transfers (Auto transfers) within add funds CTA
Titan App: (investing accounts) houses automatic deposits within their account settings section of the app
Acorns: (investing accounts) houses their investment features within their main account dashboard
Audience
The target customer base of the Ways to Save features 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 learnings.
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?
Learnings
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.
CREDIT CLIMBER
BY CITI
An app to help customers form better credit habits by creating payback goals, tracking credit usage, and seeing the real cost of their spending. Credit Climber by Citi was created in 8 months as part D10x, Citi’s internal growth model. I worked with product owners, researchers, and developers to ensure the product would fit business, strategy, and tech needs.
PROBLEM SUMMARY
Many customers with low credit scores don’t know the root of their problem, making it very difficult to break out of mounting debt. Credit Climber by Citi aims to educate customers and teach them better credit habits.
RESEARCH
I started this project by truly understanding and empathizing with our target audience. I created personas based on what goals our audience had, where they had pain points, and how they liked to receive information. I performed interviews with people in our target market to set our main agenda. The thing that stuck out was that people really didn’t want to feel guilty for having low or no credit scores and to understand why their credit score was calculated. I also conducted market research to see what other platforms offered and how we could stand out.
PROCESS
My team began by brainstorming possible features, and whiteboarding possible screens and user flows. One of the key areas we highlighted is credit utilization because it has a huge impact on credit scores and customers can monitor and control it. I designed data visualizations so customers can understand the bigger picture behind a number; created a calculator so they can plan larger purchases and see the real cost after interest. Credit Climber by Citi also has articles for further learning and payback plans to keep track of calculated payments for the purchases.
![]()
COST IT OUT UX
The Cost it Out tool needed to be enjoyable to use and intuitive. An early iteration was a good start, but results from testing told us that it was too wordy and could be more engaging. We went back to the drawing board and you can see that the final UI is more visual and easier to understand.
![]()
PAYBACK GOALS UX
The first iterations of payment plans were trying to do too much. We discussed levels that customers would hit based on their spending. After testing, we found people were becoming too confused at the many different features. The final result (below!) is much more streamlined and clear.
![]()
LANDING PAGE
Marketing website to inform customers about Credit Climber by Citi and provide CTAs to download the app.
![]()
ONBOARDING AND COACHMARKS
A carousel onboarding of key value props to welcome customers to Credit Climber by Citi and a guided tour of the dashboard.
![]()
![]()
Many customers with low credit scores don’t know the root of their problem, making it very difficult to break out of mounting debt. Credit Climber by Citi aims to educate customers and teach them better credit habits.
RESEARCH
I started this project by truly understanding and empathizing with our target audience. I created personas based on what goals our audience had, where they had pain points, and how they liked to receive information. I performed interviews with people in our target market to set our main agenda. The thing that stuck out was that people really didn’t want to feel guilty for having low or no credit scores and to understand why their credit score was calculated. I also conducted market research to see what other platforms offered and how we could stand out.
PROCESS
My team began by brainstorming possible features, and whiteboarding possible screens and user flows. One of the key areas we highlighted is credit utilization because it has a huge impact on credit scores and customers can monitor and control it. I designed data visualizations so customers can understand the bigger picture behind a number; created a calculator so they can plan larger purchases and see the real cost after interest. Credit Climber by Citi also has articles for further learning and payback plans to keep track of calculated payments for the purchases.
COST IT OUT UX
The Cost it Out tool needed to be enjoyable to use and intuitive. An early iteration was a good start, but results from testing told us that it was too wordy and could be more engaging. We went back to the drawing board and you can see that the final UI is more visual and easier to understand.
PAYBACK GOALS UX
The first iterations of payment plans were trying to do too much. We discussed levels that customers would hit based on their spending. After testing, we found people were becoming too confused at the many different features. The final result (below!) is much more streamlined and clear.
LANDING PAGE
Marketing website to inform customers about Credit Climber by Citi and provide CTAs to download the app.
ONBOARDING AND COACHMARKS
A carousel onboarding of key value props to welcome customers to Credit Climber by Citi and a guided tour of the dashboard.
COST IT OUT TOOL
This flow of Credit Climber by Citi aims to help users plan their large purchases and see the real cost after months of interest. When customers know they’re about to make a large purchase, they can use the calculator tool to map out their plan. After inputting the details of their item, a visual will generate of what the impact will be on the credit usage. Next, they can see the real cost by creating a monthly payment goal and seeing the total cost after interest. To keep customers accountable, they can track whether they’ve met their goals and see their payback history.
We highlighted users’ credit card utilization because it was a major takeaway from research that customers can focus on to improve their credit.
On the main dashboard, users can have a quick view of their current usage. The more usage you have the more pink the graph is. We chose this color because red can be very discouraging to customers.
Users can quickly tap to see a detailed view of their daily spending. The graph is navigable - as the user slides the guide, transactions will scroll to that day so they can see their exact purchases.
PAYBACK GOALS
After setting Payback Goals, customers can match their plan to purchases & chart progress.
![]()
EDUCATION CENTER
Customers can learn about their FICO scores, read articles about credit, & track credit usage.
![]()
After setting Payback Goals, customers can match their plan to purchases & chart progress.
EDUCATION CENTER
Customers can learn about their FICO scores, read articles about credit, & track credit usage.
Next Steps
Credit Climber by Citi is currently in the development phase. We work closely with the developers by giving them detailed handoff work, attending daily standups, and communicating openly to answer any questions that may arise.
This product will then be launched to a limited number of Citi customers for testing and continuously evaluated.
This product will then be launched to a limited number of Citi customers for testing and continuously evaluated.
CDS - Citi’s Design System
INTRO
Project Summary
Citi is a 200 year old bank - bringing forward that institution into the modern design world was challenging to say the least. Citi has many different brands and branches worldwide, but no cohesive identity. Each region had its own Design Language custom to their diaspora, however, no one was using them. In fact, I was on a few projects where I would create a design language for the project itself and distribute around the small team of designers.
Goal
Our work was cut out for us and the objectives needed to be clear. Working with teams from Tel Aliv to Mexico City to London to Hong Kong was a start. I worked to pool the work and resources to come up with our north star.
Citi Design system would be
A team of dedicated UX engineers whose work in creating resuable, scalable, and responsive components drives the point of how essential a design system is for development teams as well. Without them, CDS would be simply a universal style guide. CDS is its own product and it needs to be approached as one. That means constant iteration, user feedback (in this case, the designers at Citi), and testing with data.
My role as a senior product designer was to create themed color palettes, design + test components, and build the community to ensure adoption + create excitement across the team.
Our work was cut out for us and the objectives needed to be clear. Working with teams from Tel Aliv to Mexico City to London to Hong Kong was a start. I worked to pool the work and resources to come up with our north star.
Citi Design system would be
-
Cloud based
-
Themable whenever a new product, partnership, or brand is created
-
Compatible with a dev team from the start
Strategy
A team of dedicated UX engineers whose work in creating resuable, scalable, and responsive components drives the point of how essential a design system is for development teams as well. Without them, CDS would be simply a universal style guide. CDS is its own product and it needs to be approached as one. That means constant iteration, user feedback (in this case, the designers at Citi), and testing with data.
My role as a senior product designer was to create themed color palettes, design + test components, and build the community to ensure adoption + create excitement across the team.
FOUNDATION
Spacing
CDS uses two types of spacing to help designers set a foundation for margins and padding. The spacing scale on the left is for individual components or small increments. The layout scale on the right is for arranging components into a full page layout and large increments. The tokens are for developers to use in the coding process.
Typography
The typography was chosen to be versatile and clear across the system. Interstate is great for these reasons and is versatile enough to be used across a variety of font weights and colors.
Iconography
The icons were designed to be clean, light, and informative. Since many of the icons depict finances in some form, they had to be very universally understandable. The icons were tested across a variety of device sizes to ensure accessibility standards were met.
Themes
The following themes are based on our customer segments and product offerings. Each designer’s responsibility is to properly use the DSM color theming, so as a customer transitions from one segment to another their theming experience is seamless. This also ensures our experiences remain accessible and compliant.
COMPONENT CREATION
For component creation, I’m going to take you through an example of how the pie chart was created.
I went to many different teams across the org to see what types of charts the design teams were using, as well as looking at examples across the industry space. From there, I designed a chart that would fit all of those needs. It was important to first gather information about what’s in production to make sure the global component works for every use case.
After, I designed the pie chart you see on the right. It’s clean, easily customizable, and has an interesting interaction. I worked with a prototyper to develop that interaction on ProtoPie and then with developer to code it for web + mobile.
COMPONENT DOCUMENTATION
Using Invision to house our documentation, I took the lead on annotating each component with it’s anatomy, variations, and use cases. I collaborated with a technical copywriter and received iterative feedback from other design teams. The documentation, along with the design system, is ever evolving.
Below is an example of the calendar component - along with all of it’s documentation.
COMMUNITY
CDS would not be where it is without the community of designers, developers, copywriters, and producers. Collaboration and cohesion are critical to a design system’s success, especially when it comes to a company as large as Citi.
The design system community thrives via weekly open house meeting across the design team, playbooks for specific features of the design system, and a community library. The weekly open house is one hour per week hosted by the design system team. Meetings will consist of details following a release, a forum where teams can bring CDS questions or ideas, and a way to view how teams are using the system across the design org.
Playbooks are important for design members that want a deep dive on a certain aspect of CDS - examples include mobile tile and atomic design playbooks.
Finally, the community library is an open forum where teams can upload components consisting of CDS atoms used in a new way, entire flows for inspiration, and anything else they believe can be used elsewhere or improved upon.
Above: Examples from our atomic design and mobile tile playbooks.
METRICS
The design system was a huge project that reached so many teams worldwide. Now used across hundreds of designers and developers across Citi utilize it daily. Here’s how success was measured:
+ Based on timesheet data design pods are quicker to roll out projects
+ Less time spent of ensuring accuracy and consistency (and increased brand trust)
+ Metric of at least 5 teams using a component in the community library before it graduated to CDS
+ Scripts were built with Anaconda to track usage
LEARNINGS
+ Buy in from many stakeholders: so many humans brought this project to life and it couldn’t have been done without early support and adoption.
+ Develop your components from the start, beginning with naming: it’s so important to keep naming conventions & tokens identical across design and development. Also without working with a dev team, you’ll just have a very thorough style guide.
+ Tracking progress: I developed a progress tracker on the same website as the documentation. This way teams could see what was currently worked on and what was coming down the pipeline. They could also make requests for components if there was a need that wasn’t being addressed any time soon.
+ Constant iteration, testing, collaboration: CDS will continue to grow and improve as more people use it and share their ideas. Treating it as its own product with data driven decisions made the system much stronger at the core.
CDS has come so far since humble beginnings and it’s so exciting to see new features and flows in production using the design system. It’s ever evolving and it will be great to see where it goes in the future.
SideClick
Project Summary
A device designed to tackle the issue of campus safety, intended to be used primarily by students. SideClick was created based on Don Norman's design principles, extensively tested on stakeholders, and developed iteratively. The device pairs with a phone via bluetooth and when the button is pressed twice, the phone sends a HTTP request to our server that uses the Twilio API to send a text message to a predetermined contact.
A device designed to tackle the issue of campus safety, intended to be used primarily by students. SideClick was created based on Don Norman's design principles, extensively tested on stakeholders, and developed iteratively. The device pairs with a phone via bluetooth and when the button is pressed twice, the phone sends a HTTP request to our server that uses the Twilio API to send a text message to a predetermined contact.
Platforms: iOS, device design
Disciplines: User Experience Design, User Interviews, User Surveys, Usability Testing
Tools: Sketch, Axure, Twilio
Goal
We chose to research into campus safety. We specifically looked into whether or not students felt safe on or around campus late at night. With the construction of Square on 5th and University House, campus has expanded and more students find themselves walking off campus late at night. The areas surrounding Georgia Tech are not known for being safe so it is now especially important to investigate the subject of campus safety.
Research
We chose to research into campus safety. We specifically looked into whether or not students felt safe on or around campus late at night. With the construction of Square on 5th and University House, campus has expanded and more students find themselves walking off campus late at night. The areas surrounding Georgia Tech are not known for being safe so it is now especially important to investigate the subject of campus safety.
Research
Prototype + Testing
I created a simple UX prototype of the app to conduct user tester and iterate further.
After conducting heuristic testing, we need we needed to change the way the customer paired the device with the phone (feedback!)
We added feedback to our customers so they would know progress is occurring and when pairing was successful.
During testing, our participants also said they would like each action to be a different color to be distinguishable.
NEBO AGENCY
Web
Design
Nebo is a human centered digital marketing agency that believes great work comes from understanding the needs, wants, and perceptions of the audience. I worked as a Web Designer to create web sites with a team at Nebo Agency using PhotoShop, Wordpress, and Sitecore. The work of the team at Nebo lead to a record number of digital enrollments for the year.
Vapesure Website Redesign
Screen Captures
Vapesure Interaction Demo
Gas South Landing Page & Blog Design
