MiniWallet Notifications on Edge
My Role
Product designer and UX researcher
Design system documentation support
Design project scoping and product strategy
Final design
Product goal
Create an entry point to the Microsoft Edge wallet and notifications system that informs, delights, and is coherent with the rest
of Edge.
Customer goal
Customers need timely and relevant notifications about their saved cards and Microsoft offers in their Edge wallet.
Success metrics
Increased DAU of MiniWallet by 70%
Increased CTR to Wallet home by 20%
Increased value awareness
Previous UX research & Design
Prior to my joining the team, the placement of the entry point had been decided through research - some Edge customers expected their wallet assets to be in their settings area, but once they were provided a design of the profile identity flyout with the assets, their understanding of the flyout shifted and wanted to see more.
The Wallet team wanted a fast, and integrated approach so we didn’t have to build an Entry point from complete scratch.
The previous design handed to the team was not socialized and coherent with the Edge team. The designer prior to me had not gotten the designs approved by the necessary teams, so there was a lot of collaboration and coherency to meet with the right teams - design system, Edge’s design team, the profile identity team, notifications, Cashback and Rewards - at the right times.
Previous design of the wallet in the profile identity flyout on Edge
How might we provide engaging and timely information about an Edge customer’s
wallet assets?
Current audit and competitive analysis
I looked at a few different profile identity areas, all consistently showcasing an entry to passwords, payment methods, and personal information together. Some had wallet assets present on L1, others had assets or entry points on an L2.
I wanted to have assets the customer associates with Microsoft and cares about in the Mini-Wallet area for easy access, as an L1 with important notifications on the Profile Identity flyout.
Notifications flow
A/B test customer feedback
Design B
Design A
Findings:
Most customers liked both balance designs, but 7/12 users preferred the row Design B, to Design A.
9/12 customers preferred Design B’s notification style.
“Get paid” link and flow match the customer’s mental model.
Recommendations:
Even though customers liked the more descriptive notification design, upon alignment with design systems teams, the row notification design was more scalable. We moved forward with the row design, Design A.
Design system documentation
I partnered with the Commerce UI Kit and Edge designers to add the MiniWallet as a part of the Commerce and Edge design systems.
I worked with the design system engineering team to ensure the designs work in different variations and with the existing code structures for the various notifications.
We also worked with the accessibility team on semantic order documentation of the correct screen-reader user customer path.
These designs were made before the variables tool was created in Figma.
Final design and success metrics
Increased daily average users of the MiniWallet by 70%, which shows that Edge users are seeing the notification and taking some type of action.
Increased click through rate to the wallet home by 20%, which shows us that Edge users are interested in learning more about the wallet.
Increased value awareness, found through additional UX research and feedback.
What I learned.
Working with so many teams and designers has been a challenge, but has been rewarding once we all came to an aligned design strategy.
This product was just launched in November 2022, so there is a lot of growth to be had over the coming months and year(s). It would have been beneficial to create a better qualitative tracking cadence before this product was launched to compare awareness.