Consumer Finance: A Flexible Mobile Framework for Dynamic Content

I contributed to a redesign of the Citi Mobile® App, which introduced a mobile-first modular tile design system in early 2019. The redesign gave me the opportunity to take a holistic look at motion design and micro interactions to enhance the user experience.

Challenge

The goal of this project was to bring customers the right information about their accounts and finances at the right time. To do so, my team redesigned the Citi Mobile app dashboard and account screens to introduce a tile design system. We also aimed to make the app feel more friendly with animation, by introducing smooth transitions and taking advantage of opportunities to delight users, from the initial app launch to micro interactions for day to day tasks.

My Role

I led the motion design for this project to enhance the user experience. I also contributed to the UX and UI design. I created an engineering-friendly animation specification template for handing off the requirements to our developer, and worked closely with him to finesse the final animations. I also documented rules for using a new interaction pattern we introduced—Quick Links—which we tested through user research.

That’s cool, with this I have the option of locking it for a while, just in case I don’t find after searching, but I still have the option of reactivating with tap to unlock.

— Layla, Citi Customer

It’s [the greeting] not obtrusive and it’s sort of a comforting thing I like... So this makes it more personal.

— Tom, Citi Customer

I like these, quick, action buttons... because you don’t have to dig for it.

I designed the animations on the accounts screen. For single account customers, we deliver a time-appropriate greeting. We introduced a new UI pattern, Quick Links, which appear at the bottom of the screen and provide easy access to commonly used and critical functions. The user can access more account details in an overlay. Based on user research, the image of the card was moved off of the main screen, where it took up valuable real estate, into the overlay. The card animation orients the user to this panel as an overlay and highlights the customer’s card for recognizability.

Example Animation Specification

After designing the animations in Principle, I created this specification to communicate the desired animation details to developers so they could create the animation in native code for iOS or Android. I then worked closely with the developer to refine the motion in code while viewing it on the target device.

A Mobile Design Framework

I created design guidelines for Quick Links to ensure they were used properly and consistently, which were part of the overall Mobile Dynamic Framework. For example, I documented the experience for a messaging pattern (“snackbars”) specific to the Android platform, adapting elements of the Material Design Guidelines.

Android Snackbar and Quick Links Animation

To complement the static guidelines, this animation shows how Quick Links interact with Android Snackbars. It was essential to communicating the animation details to the engineering team.

Android What's New Animation

I designed this “what’s new” animation to introduce the new app design to customers on app launch. It includes an initial animation concept followed by the final design, which focuses more on right to left motion to show forward progress.

Apple Watch & Rich Notifications Concepts

I created these concepts to explore how the dynamic content framework could extend to the watchOS platform. I also explored how to take advantage of the new Siri Shortcuts and Rich Notification features in iOS 12. These concepts are my own and do not necessarily reflect the views of Citibank.

Extending the Framework to the Desktop Experience

I am leading the UX for the desktop Citi.com web browser experience after completing the initial version of the mobile dynamic framework project. I led an exercise to prioritize content based on customer and business needs. This then led to exploring different layout concepts exploring how the hierarchy would translate to desktop.

Outcome

This project resulted in a dynamic and scalable framework for Citi’s iOS and Android apps. The framework allows us to deliver the appropriate content in the right context, enabling efficient servicing through simple interactions. The animation specification template and animation design guidelines increased efficiency for developers and consistency for customers resulting in a more polished app experience. We are now exploring how we might adapt this framework for citi.com.

★★★★★Great update!The new update is really cool. There’s some easy to find buttons at the bottom that let me lock my card or deposit a check. The new look is also very cool.