Shopping Insights
Empowering users with data
Opportunity
Microsoft Shopping’s app had a basic “Account” page with a simple usage history, but no way to easily understand how one could maximize their savings and cash back earnings as they continued to use the experience. Our team wanted to expose this data so that repeat users were empowered to keep using the product and learn how to save as much as possible.
There were competitor apps which helped users track their spending and give insights, but most lacked receipt scanning and relied on manual input. We already had receipt scanning as a core feature, and felt we could provide the same functionality as competitors for free AND provide additional savings.
I redesigned the experience to add richer data and allow users to visually see their savings, helping them to understand which types of purchases and stores gave them the most benefit.
Starting point
The existing account page gave users some basic information about their All Time Spend, Pending Cashback, a link to claim their Cashback, and a list of previously scanned receipts.
I felt that the space was used inefficiently and it was unclear which objects and data on the page were actionable.
In addition to cleaning up these usability issues, there were a handful of new features and types of information that we wanted to share with our users.
Total number of receipts scanned
Total cash back earned
Total amount spent
Spend by retailer
Spend by category
Time scoping for all that info
Visual infographics to help understand data quickly
Defining key scenarios
I outlined two main personas to design our updates for.
All data and features should serve one of these user types (ideally both).
The Regular
Frequent receipt-scanner wanting to maximize their cash back and savings They want to see where the app saves them the most money so they can claim those types of deals again and focus on products and stores with the most rewards and savings.
The New Guy
New user who’s interested in data around their spending They want to understand how much they spend on groceries every month in order to measure it against their budget. They also want to know how much they spent at Home Depot and Lowes this summer in order to understand how much their project has cost so far.
Laying out the features
After identifying the goals and key features, I created a new layout that preserved existing features while focusing on better use of space and hierarchy.
I made the new infographics the star of the page and connected them visually with their relevant data.
Different graph designs were created based on the chosen time scope. This helped the data be more clear, as well as differentiating each time scope from each other to help the page be more easy to understand across repeat visits.
Expanding the flows and aligning styles
After discussions with my team and leadership, I simplified the initial dashboard page and reworked the information architecture.
The history feeds were moved one level deeper to be its own “Insights” page which let users dig in deeper and see more information if they wished. The feature set remained the same as the dashboard but offered richer information and the ability to dig in to specific retailers and categories to view history, and eventually specific receipts.
Styles were also simplified to align with the app’s highlight-blue color and create more structure in a card-based layout.
Results
Through tight collaboration with the dev team, we got the redesign implemented quickly with all key features built and exposed to our userbase.
Usage statistics continued to rise throughout the subsequent few months as we improved the app and added various features in different areas.
Monthly receipt submissions increased from ~1.8 million to 5+ million during this time while monthly active users increased over 40%.