Citi
Citi is in the process of a complete digital revolution business wide. Mobile and web are being completely redesigned and overhauled to better serve our customers, as well as, create first in class financial solutions. Starting with a design thinking philosophy, each segment of the consumer banking division(s) are being reengineered. As part of the global design team, I am responsible for meeting with product owners and other stakeholders to solve the needs/requirements and deliver architecture, wireframes, lo & hi fi mockups and working prototypes for user validation and testing to fine tune the final product.
The sad beginnings
Preliminary designs for dashboard and money movement
First round designs were created to establish a jumping off point, as workflow progressed, features were fine tuned and requirements introduced that created a more user first result. There will be several rollouts over time and these sections represent those flows. The first steps were to eliminate redundant flows and bad user experiences and create a simple, clean designs and use AI to help clarify the goals of each user.
Additionally, a new visual design language had to be developed to replace the outdated design system.
Ideation
Final Dashboard & Money Movement
Adding Payees and Bills
Transfer Money
Pay Multiple Bills
Unified Transaction History
User feedback isn’t always pretty.
After launch we were able to get feedback that we were unable to attain through user testing and user feedback suggested we needed to solve for a disconnect in how user interacted with the product.
This proved to be valuable insight and was able to adjust the payment dashboard and further enhance visually by adding a custom header for each rail of money movement.
Time for mobile to sync with desktop.
Mobile App
Send Money
Ug, not again?
After launch more feedback showed that users were still struggling with cross border transfers in mobile.
New Cross Border Transfer
A more robust and forward thinking approach allows users to navigate and execute a task via a shallow nav, pop-up sheet structure, thus allowing them to complete their transaction seamlessly and with less friction without having to leave the entry point.
With more ideation and rapid prototyping, I was able to get user testing and feedback which proved to be successful with a 56% increase success rates for transfers!
Digital Wallets
The BAU for credit cards was the card control hub. It only utilized a portion of what can be accomplished with card management, like basic lock card, replace etc. The Digital Wallet is a whole new element that allows users to manage their card, add it to vendor wallets lie ApplePay & PayPal or Amazon. Users can also track transactions and renew subscriptions with ease.
Adding a new into animation proved to educate the users.
Transfer Between Accounts
Transfer between accounts was always clumsy and users had to navigate multiple screens. The new unified transfer allows users to seamless navigate from an entry point, choose internal or external accounts to transfer between, enter amount and date, and complete transfer.
This reduction in friction led to a 22.4% increase in transfers using the mobile app.
All New Advanced Bill Pay
Nice to get a win!
Additionally, a completely revamped experience for adding billers and paying bills. Users now have the ability to quickly search through 75M vendors in the data base, and with predictive search, users can quickly add them to their roaster and pay bills in no time.
🏆 This work earned Citi a J.D. Power’s #1 ranking for digital bill pay.
Time to keep pushing and evolving the experience.
New Credit Card Mobile Evolution
A more robust and forward thinking approach allows users to navigate and execute a task via a shallow nav, pop-up sheet structure, thus allowing them to complete their transaction seamlessly and with less friction without having to leave the entry point.
AI, Machine learning & the future of Dashboard and Money Movement
Technology & Data – Personalization
To further enhance the personlization, utilize an AI / ChatGPT to develop custom, unique experience with the use of imagery to reflect customers regional location, time zone etc.. use language that that shows we are engaged with them all the way thru.
Develop the AI to present as a bank representative so that the user feels engaged to the bank, this AI can reflect any number of data points including geography or time zones.
Creating rich visuals and lifestyle photography can add to the overall human experience. Utilizing photography, branding logos, enhanced avatars while also focusing on new iconography and micro animations to further add to the enjoyment of in app use
Micro animations can include page load or tap interactions to trigger (ie twitter likes)
Enhance the pay functions to a slider row with option to pay or “more” options to snooze, manage, view history etc… (like gmail)
Technology & Data – Personalization
The opportunity exists to partner with other business to implement geo fencing or proximity beacons so when users are within range of a Starbucks, McDonalds, 711 etc… the app is pinged with an offer for them to get a discount when paying with their Citi cards.
To further enhance the personalization, utilize an AI to develop custom, unique experience with the use of imagery to reflect customers regional location, time zone etc.. use language that that shows we are engaged with them all the way thru.
ie jennifer lives near california coast or chicago….and also know time of day they login, imagery can be in a night mode, include micro animations of grass moving or lights twinkle.
Technology & Data – Predictive Personal Touch
This personalization will continue by analyzing her habits and behavior, a pattern can be found that jennifer has a new payroll direct deposit or an increase in her current deposits, we can use this as an opportunity to congratulate her and offer her ways to invest the extra income in a savings account or a CD.
By analyzing her past spending habits and behaviors, we know Jennifer takes a ski trip every Feb-Mar, offer up a partner cross promo, in this case, AA advantage miles she can use to book or receive discounts on travel for the upcoming trip or partner with a VRBO, Air BNB or Hilton to utilize discounts on lodging or prompt to set card up for travel.
If she doesn’t have the aadvantage card, this would be a great time to open one to use on this trip.
Making a payment will open the quick action modal with preloaded info ie date, min amount and primary account, she can simply tap pay and be done and right back where she left off, or engage to change the parameters.
Can add an account analysis w/ viz bar (health meter) to indicated where the user is at in the ebb & flow of their account in regards to income to debt ratio & based on those results can determine and recommend that now is a good time to pay more towards the balance w/o a negative impact to their budget monthly budgets
This can further be enhanced with a deeper assessment of their accounts and where those are in the spend cycle and make a recommendation as to which account makes the most sense to pay with
Viz amount wheel and show the savings impact to interest with a higher payment as well
By peppering small micro animations throughout the app we can really enhance the overall experience and bring some personality to liven it up, ie twitter like, door dash wiggle of icons…
For instance, the viz bars, like a digital dash on a car can load to full and edge back into position
Input wheel can load on and the anchors fan out into position
Window panes bounce slightly
Success thumb can show “thumbs up” as screen loads ie teams thumb
Done cta when tapped can pulse color
etc…..
Desktop
Users could simply interact with the AI who would then address the user with human interaction, the user can input the task they want performed and the site will take them directly to that screen for them to enter input and complete the transaction. The AI is always available with a simple click.
There is also the opportunity to surface offers that are relevant, ie new direct deposits from a payroll would be a great time to provide investment offers.
To further enhance the personalization, allow users to upload their own images and customize what account features they utilize the most to avoid adding clutter of unused banking features.
Technology & Data -AR/VR
Looking at the future of AR & VR there is an opportunity to allow customers to interact with their money and accounts like never before, to be able to see money moving between accounts virtually, or finding a Citi ATM when traveling. Users can view their Credit Cards thru the AR to see details and balances or evaluate the current spending cycle. Even initiating a balance increase in real time to make a larger purchase.
AT&T
AT&T is launching a new internal enterprise solution to create a central location for data scientist, analyst and other stake holders to allow quick and easy access to powerful data tools and information. The site will flow users through a simplified process that allows them to choose the right tool & find the best data to pair with it. By building communities around this information, business groups can share their insights with a larger audience and keep their departments and teams running on the latest information available.
It also unifies a larger global community for chief data by creating global nav and a cart/profile function across the global site. Generating the site map and user flow was task 1. Creating lofi and hifi wireframes and prototypes allowed for user validation and testing to fine tune the final product.
