iOS & ANDROID PRODUCT DESIGN | MOTION DESIGN | USER RESEARCH | DESKTOP PRODUCT DESIGN
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 was a Lead Product Designer on this project, with a focus on leading the end-to-end motion design and Quick Links design. I created a process to consistently hand off design requirements to our developer, who I partnered with to ensure the motion design specification could be implemented to finesse the final animations. I also contributed to the documentation of the design framework—interaction pattern guidelines for Quick Links and motion design guidelines. I also created prototypes in order to validate the designs 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 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.