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. This included the end-to-end design to Quick Links that give customers better access to the features they use most.
iOS & ANDROID PRODUCT DESIGN | MOTION DESIGN | USER RESEARCH | DESKTOP PRODUCT DESIGN
Challenge
How might we…
Provide customers with the right information at the right time on Dashboard and Account screens
Improve access to frequent and important tasks
Introduce motion to enhance the UX
Make the app more modular and scalable
Reduce customer service calls and increase NPS
My Role
Lead Product Designer
Interaction & motion design
Animation specifications & standards
Quick Links End-to-end design
Invision prototypes for user research
Liaison to prototype developer
Account Screen Greets Customers, Introduces Quick Links, and Provides Essential Details
I designed the animations on the accounts screen. For single account customers, we deliver a time-appropriate greeting. We introduced a new interaction pattern, Quick Links. These buttons appear at the bottom of the screen, providing easy access to commonly used and critical functions. As shown, customers can also 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. The animation orients the user as this overlay panel slides up 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 engineering so they could create the animation in native code for iOS or Android. I then worked closely with an engineer to refine the motion in code while viewing it on the target device. Colocation with the engineer made the development process much more efficient.
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” screen template and corresponding animation to introduce the new app design to customers on app launch. This prototype video shows the initial animation concept followed by the final design, which focuses more on right to left motion to show forward progress. Once again, I worked closely with an engineer to refine and adjust the animation to achieve the final animation design in code.
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, driving up to a 3x increase in access to important features and up to a 4x increase in task completion as compared to the previous design. 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 continue to scale the design and adapt the framework for citi.com.