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