Philip Makara
UX LEADERSHIP & DESIGN
Thumb-dynamic.png

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

 
Unlock / Lock Card Animation

Unlock / Lock Card Animation

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

 
“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.”
— Jane, Citi Customer
 
Account Screen Greets Customers, Introduces Quick Links, and Provides Essential Details

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

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

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

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

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

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

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.