Edge + Bing Shopping

Adding savings, bringing delight

Timeline

Aug 2020 - Sep 2020

My Role

Product Designer

UI Designer

Tools

Figma, 

PowerPoint

Skills

User flows, 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

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.

Design question

After figuring out the framework, I moved on to the price comparison and price tracking features. 

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

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 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

...

Price tracking 

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

CONTACT ME

xuyiyun0126@gmail.com

Tel: 425-591-2560

If you want to collaborate on crafting amazing experience for people, get in touch!

I am available for contract, full-time and part-time employment.

Feel free to connect me on LinkedIn or shoot me an email. I am always happy to chat.

  • LinkedIn
  • Facebook
  • Instagram