Role: UX Designer
By providing an easier way for Bloomingdale's shoppers to pay for products, we will provide faster check outs, minimize account look ups, increase in store mobile app engagement, drive higher in-store conversion and improve customer satisfaction while learning about our customers’ spending habits and specific behaviors.
Mobile Pay is a way to allow app users to instantly, securely and conveniently verify their identity and pay for products at the point of sale with a scan of a barcode at the register, reducing time and effort for both the colleague and the shopper.
The User Journey
I gathered design inspiration from several apps that I knew that had a similar barcode scanning feature. Some companies I looked at include Sweetgreen, Starbucks and Apple.
Identifying Scenarios and Requirements
I worked with Project Managers and Product Managers to establish requirements. I created wires that determined more specifications for the functionality of the Mobile Pay feature. We discussed the many scenarios and the intricacies around the security related to scanning a barcode to pay in store.
Visualizing the Scenarios
There were several different scenarios I had to account for when designing these wires. The MVP targeted Bloomingdale's prop credit card holders. The challenge was mapping out all the possible user scenarios such as setting up mobile pay for users with a prop card and for those without one. Another challenge was ensuring the protection of the customer against fraudsters.
Mobile Pay Entry Point Ideation & Testing
An important part to this project was where the user will access the Mobile Pay feature within the Bloomingdale's app. We ultimately decided on two different entry points:
#1: In-Store Guide
Placing this feature on the in-store guide page was obvious due to the fact that it is a feature that would be used while customers are in the store. However, after several user tests, we found that users struggle to locate the "In-Store Guide" page from the app home screen, therefore, we decided to add another entry point. Testing was also done to see if users can distinguish between the other in-store "tools." To avoid confusion between tools, we added explanations under each tool name.
#2: My Account
As seen below, this the Mobile Pay entry point is a drawer that users can slide up to view some info about the feature and how it is used. At the same time, users can slide the drawer down and "hide it" as to not distract them from other important actions they can take on this page. This drawer would only appear on a user's account page if they open the app while in a store.
Below is a wire prototype of one of the many scenarios in this project. The wires are finalized and I am currently colloborating with the Creative Design team to apply the UI.