Edge + Bing Shopping
Adding savings, bringing delight
Aug 2020 - Sep 2020
User flows, Wireframing, Prototyping
As a response to “Make educated purchasing decisions” being a top JTBD opportunity for customers to switch browsers, the Edge team partnered with Bing team on the Edge + Bing shopping integration project, exploring how we can use richest Bing shopping data and learnings available to up level some shopping assistant features into the forefront of the browser.
Edge has the content and ability to offer unique shopping capabilities natively increasing experiences adoption rate & overall daily active usage. We want to minimize cognitive load, ensure the experience is there when customers needed and it is easy to use, so that we can not only catch customers, but retain them over time. For Q1, I focused on optimizing around customers’ current flows for price comparison and price tracking.
Save effort and time
Making better purchase decisions
Edge as the best browser for shopping
Edge as a smart browser where finding the right info is effortless
Increased Edge share and Bing revenue
Our primary target users are those who:
Researches products on the browser
Primary shopping method is through the browser
Is looking to purchase items at the best price
To quickly set the lay of the land, I wanted to find the most appropriate entry point for Edge Shopping experience.
I considered two options, the first being in the address bar building on the framework for site capabilities and actions, that is transient and contextual to the specific site the user is on. The other was in the toolbar region that is synonymous with core features, extensions, and provides a semi permanent placement for a user to quickly find and interact with.
Through discussing with other designers in the team, I ultimately choose the address bar for the MVP experience for it’s contextual and transient feeling.
The second point I need to think about was since we have a bunch of capabilities coming in such as price comparison, price tracking, coupons and deals (which Bing team was focusing on), package tracking (on feature list for Q2) and etc, when users interact with the entry point, what's the structure going to be? How can we ensure that if there are multiple shopping capabilities available at once, users can still quickly parse those and understand without having too much strain? I sketched several layouts and finally picked the one below.
After figuring out the framework, I moved on to the price comparison and price tracking features.
How can we help users quickly compare the prices of the same product at different retailers?
How we can help users make purchase decisions at the most competitive price points?
To solve the problems, I started from looking at how others are providing shopping assistance. I gathered comps from Bing, Google, Wikibuy and Honey for inspiration.
.... to be continued... expected to be finished by 1/25
User is browsing normally and lands on a product detail page
An icon is shown in the address bar indicating either – we've found a cheaper price from another retailer, or we've confirmed that this is the best price
Clicking the icon in the address bar displays the price comparison results
In the price comparison results, users can see images, titles, and prices of the comparison products and navigate directly to them.
Awareness flyout for Price Tracking based on frequency of visits to a specific product.
Reinforce Edge Shopping
Highlight item to track (image)
Display real-time tracking info
CTA to add to “wishlist” which will start tracking the item but also create a duplicate item in a default Edge collection list
Opt-out with Settings CTA