MY ROLE
UX Designer - I created wires to identify the correct content hierarchy and layout for the responsive design. The wireframe designs were then handed off to our Creative Team to apply the UI.
PROBLEM & OPPORTUNITY
Before the responsive redesign, the site was hosting a separate desktop/tablet site and an M-DOT mobile website, which became cost-prohibitive. The previous desktop-only and M-DOT experiences led to UX inconsistency due to suboptimal feature parity. I worked on one of the pages associated with the responsive redesign called bWallet.
ABOUT
The bWallet page is Bloomingdale's wallet page where customers can manage their payment options, rewards and other offers associated with their "Loyallist" Account, Bloomingdale's rewards program.
WHAT IT WAS
Pre-Responsive bWallet Design
The mobile bWallet page had not been made responsive and the content of the current page on both desktop and mobile was displayed using an older coded style guide.
CREATION
Wires: Making The Page Responsive
After identifying pre-responsive design metrics with my product and analytics partners, I designed wireframes to identify the optimal responsive layout that would benefit the user.
Applying The UI
I then collaborated with the Creative team to apply the UI. We also worked through additional use cases, as it pertains to the Bloomingdale’s Loyalty program, with Product.
New User State
This is the landing page for customers who have just created a Bloomingdale’s account and now need to input their information into the wallet. Customers are also prompted to join the Loyalty program.
New Loyallist State
When customers first join the Loyalty program, they will be shown a point tracker in their bWallet. This will track how many points customers earn per purchase.