DIGITAL PROTOTYPE
PREFERENCE CENTER
Preference Center was a complicated flow that I inherited that needed a full redesign. The previous implementation was clunky, difficult to navigate, and only about 50% of users managed to save their changes, due to a floating save button that was easy to miss.
During the redesign, we moved the “Contact Preferences” section and notification groups to separate pages. We performed between 5-10 rounds of user tests to find the best solution for selecting a contact method within the notifications table. This feature was complicated, because we allow up to 10 different numbers and email addresses to be saved to contact methods. While this may be an edge case, we needed to ensure that our design was flexible enough to accommodate this scenario.
In the end, we landed on a design that tested well with users and simplified the flow. In a perfect world, I would have implemented auto-save (with toast notifications) when a user makes updates; or a sticky table footer with the CTAs at the bottom of the screen, but unfortunately we were not able to implement either solution due to technical constraints.
PREVIOUS DESIGNS
Original Designs
Original designs - edit
Original Designs - Mobile (scrolling broken up into 3 frames)
Original designs - edit, mobile
UPDATED DESIGNS
Contact Preferences - default view
Contact Preferences - edit email address
Billing and Payment Notifications - default view
Billing and Payment Notifications - edit contact method
Billing and Payment Notifications - default view, mobile
Billing and Payment Notifications - edit contact method, mobile