Edge + Bing shopping

Adding savings, bringing delight

Timeline

Aug 2020 - Sep 2020

My Role

Product Designer

UI Designer

Tools

Figma,

PowerPoint

Skills

Lean UX, Wireframing, Prototyping

Overview

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.

User goals

Save money
Save effort and time
Making better purchase decisions

Business goals

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

About Users

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

Design question

Price Comparison

How can we help users quickly compare the prices of the same product at different retailers?

Price Tracking

How we can help users make purchase decisions at the most competitive price points?

Competitive analysis

I started by looking at how others are providing shopping assistance. I gathered comps from Bing, Google, Wikibuy, and Honey for inspiration. These designs are pretty similar. Doing the competitive analysis gave me a basic idea of the current user flow and helped me draft the emotional journey.

Emotional journey

UX Framework

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.

User flows

Price Comparison

1

User is browsing normally and lands on a product detail page

2

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

3

Clicking the icon in the address bar displays the price comparison results

4

In the price comparison results, users can see images, titles, and prices of the comparison products and navigate directly to them.

Price Tracking

1

User is browsing a product for a few times and Edge suggests the user to track the price of this item.

2

User clicks on the tracking CTA.

3

Edge adds the product into the user's default collection for shopping and begins tracking the price of the product.

4

When the price on the product changes, Edge sends an alert that the price has changed.

5

Edge keeps track of the item price and gives tips to the user when it’s the best time to buy the product.

6

User clicks on see more details / the price trend graph to navigate to the detailed page of the product in the default collection for shopping.

FRE + Price Comparison

FRE (First Run Experience) Framework

FRE - Generic

The very first time the user clicks on the entry-point, I take them through a quick and informative FRE sequence that both explains the value prop of Edge Shopping, but also provides an opt-out for not sharing data through Settings CTA.

If the user takes the tour, I'll walk through a few additional screens, but they also have the choice to skip and see the deals.

FRE - Tailored

FRE flyout that emphasizes price comparison feature. Motion graphic is used to gain more awareness and add engagement.

Flyout Framework

Price Comparison - Lower price available

When users navigate to a product detail page, they are greeted with a signal in the address bar notifying them that there are lower prices available for this product.

Price Comparison - Lower price unavailable

If users navigate to a product detail page when there is no price comparison, or they are already on the lowest price found. The greeting will change to reassure the user that they have found the best price for this item.

Price comparison information is hidden by default to display more useful shopping related information such as coupons, but users can still click on the chevron to see prices from other retailers if available.

See more comparisons

If a user decides to hit “see more” in comparisons, a new tab will be opened with bing shopping results for that product.

Price tracking

An 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

Confirmation toast once an item has started to be tracked.

Confirm tracking success
Provide an easy way to view the “watchlist”
Provide an easy way to undo
Provide an easy way to receive price alerts by clicking the bell icon.

Price alerts being enabled.

Small unintrusive toast at the bottom of the viewport.
Quick and easy access to view this product in the watchlist which will point to a default shopping collection.
Quick way to undo price tracking.

An awareness prompt off of NTP top sites UX. This can be triggered based on frequency of visits to a particular domain. This is also showing an example if the price of an item is higher than usual.

Can auto-pop or be displayed on interaction/hover.
Quick and obvious markers to allow the user to quickly see if it is a price increase or decrease.

A price alert for an item when revisiting the domain. Here I emphasis the change in price.

Can auto-pop or be displayed on interaction/hover.
Quick and obvious markers to allow the user to quickly see if it is a price increase or decrease.

The Shopping flyout when invoked from a price tracking scenario.

Contextual greeting to reassure the user of the price change, and for which item “Bose Noise…”
Price comparison and Coupon sections collapsed for easy visibility to price tracking section.
Snack-size price tracking details inline in flyout.
Quick affordance to stop tracking the item by un-clicking the star icon.
Primary action to ”see more details” which will point the user to the detail view of this product in Collections.

Price tracking in Collections. Additional shopping information displayed.

Quick price trend marker in the title area of the product detail.
Price Tracking pivot automatically selected when coming from a price tracking CTA.
Interactive price graph that correlates to other sellers on the web and historical data for this product. Both on Bose.com and other retailers. This is needed as the user will not gather these products directly from the manufacturer domain.

Example of a user enabling alerts directly from a collected product. Here I am also showing a quick interstitial/upsell to download Edge Mobile for a better E2E experience.

App Store banner which clicks through to Collections.
CTA to get Edge Mobile
CTA to also manage alerts (enable in this scenario.)

Updated Collections L0/top-level. Here the user can see recently used collections, but more importantly see their shopping “watchlist” of products they’re tracking.

Easily identifiable default collections for specific content types. Shopping, reading, etc.
If a user adds an item while Collections is open we’ll confirm inside the pane where it was added to.

Iteration

Based on feedback from the business perspective, additional work is needed to explore different treatments that can drive user awareness, acquisition, and engagement. The following design illustrates a more aggressive treatment that is both informational and interactive.

Different layout that spans entire viewport to gain attention without obstructing the website.
Uses bold colors to grab attention and create separation between shopping experience and website.
Clear & snackable bits of information based on available capabilities inviting the user to interact.
Clear Msg to get the user to take action (explore or dismiss)

Expanded layout to reinforce value proposition.
Dashboard-like feel to provide the user with enough information to make an in-the-moment purchase decision.
Provides clear and clickable entry-points to act and/or discover more.

Additional example screens from my exploration that are more visible to gain attention, reinforce Edge Shopping feature, have clear CTAs to take action and clear message to get the user to take action:

In addition, based on the usability testing feedback, I iterated the design for the price comparison flyout to address the following issue:

When a user is shown price comparison rows, the current views only show the retailer and the price. There is the potential for the product linked to this retailer to NOT be an exact match. Because of this, I need to also provide the user with an affordance to see more about the product before launching into the web page directly – this is done by giving the user the option to see the title and the image of the product before navigating.

Comparisons - card variants

Flyout framework

Examples

Takeaways & Next Step

For this project, I learned to utilize the lean UX process to go through design phrases faster: _Concept → Prototype → Validate internally → Test with real users → Learn from user behavior → Iterate _. Instead of producing typical UX deliverables, I spent more time actively communicating and connecting with people and teams which have already worked on the related products to effectively utilize the exist knowledge and design. By avoiding duplicate work, I can save time for myself and the team, to minimize resource waste. Clear documentation can also help other designers, PMs and engineers to pick up the work efficiently. I learned to create point of references with master components, frameworks, example screens of different varients and flows to make my design documentation detailed and organized.

The next step of the project is to conduct usability testing for the price tracking feature and further iterate design. In addition, there are more features around shopping assistance coming in such as coupons and package tracking, and it's important to ensure the current design framework can fit the growing features. We still want the Edge Shopping experience feels light to users, so it's also worth exploring the visual UX to make the experience fluent and delightful.