Account Settings Redesign

ROLES -

UI Designer

UX Researcher

UX Designer

COMPANY -

Walgreens

SUMMARY -

Modernize, condense, and clarify the settings options within the myWalgreens account feature.

GOALS -

Our primary objectives were to enhance and unify the overall user experience of updating, adding, or deleting account information, while simultaneously modernizing the look and feel with current Walgreens brand guidelines and components.

CHALLENGES -

There were several portals across Walgreens' lines of businesses for customers to view and update their information that were not in sync with each other. This caused customer data and information across their respective portals (retail, pharmacy, etc.) to become inconsistent.

Quickly into our research, we discovered that we would need to incorporate several new states into information editing and deletion processes, due to both outdated flows and updated design components.

Ensuring that information would be updated and synced across customer’s respective portals (retail, pharmacy, etc.) would require additional development effort to ensure it would be appropriately captured and synced in this new, consolidated location

COMPETITIVE ANALYSIS & FINDINGS -

We looked at a few different companies, some direct competitors, and some outside of our industry. We wanted to expand our search to see how popular tech websites & apps handled their account settings portals. And for competitors within our industry, we wanted to see how they captured and processed information updates if they had multiple types of accounts. Below are a few examples:

PREVIOUS DESIGN & FLOW -

Here's an example of the original design, components, and UX flow of the account settings. Previously, it would take several clicks or taps to traverse through the multiple pages, modals, or links required to make just a few updates, as well as pages having different, out-dated components or styling.

WIREFRAMES -

Working with my Sr. UX Designer, we established that a tile/card system would be the strongest direction for the settings landing screen, as it greatly improved the experience and transparency of specific setting locations. In addition, it aligned with both our app & other areas of our website's component stylings.

Within the recently rebranded Walgreens brand guidelines and component library, we were able to utilize the new and streamlined component-based UX library to mock up great-looking wires. The new UX component library really trailblazed a path to expedite the process of taking wires up to fully designed UI comps.

Here's an example of some of the basic wires for the tile/card page, as well as a unified roadmap for the individual settings pages.

And here's an example of some slightly more iterated wires that included additional states for settings that we discovered required additional steps:

VISUAL DESIGN & PROTOTYPES -

Utilizing Walgreen's relatively new and rebranded UI component library, we achieved a unified and cohesive look throughout the several account settings screens on both mobile and desktop.

As of Q2 2023, this redesign hasn't gone live yet, but be on the lookout sometime in Q3-4 of 2023. In the meantime, check out the prototypes for both mobile and desktop!

(If you're on mobile or if the embedded prototype gets buggy, just tap here and swap between breakpoints via the left panel🤘.)