iOS & ANDROID UX/UI DESIGN | MOTION DESIGN | USER RESEARCH | DESKTOP UX/UI
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.
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.
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 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.