How I helped Microsoft redesign its coupon extension

Using UX insights and design to refine the Microsoft Shopping experience to be more efficient and user friendly

Project Overview

Challenge

There is a lack of savings integration on the Edge and Safari browsers, leaving business on the table for Microsoft. We are trying to fix this by building an extension that addresses this.

Objective

Design an easy to use interface for users in Safari to browse their favorite shopping sites, while helping them save money!

Project Scope

Building a brand new application to be used as an extension for Safari

My Role

UX Designer in charge for research, visual and interactive design, user testing, as well as the primary UI Designer

Tools used
Team Input

Primarily self directed, with input and feedback from peers, engineers, as well as Microsoft upper management

Duration of Project

2 months

1. Research

Accomplishments

Through our research, we were able to determine many of the existing issues with the implementation of the shopping experience, such as learning that many users preferred not to click more than two buttons, as well as learning about legal issues surrounding auto application of coupons, which would change the flow of the application, resulting in a restructuring of the user flow

Research Plan

Understanding user needs for the new service by focusing on their frustrations, abilities, limitations, goals, and preferences.
Given that this was my first time working on a big client project after joining my company, I wanted to make sure I sat down with my team first and we came up with a plan before starting anything.

Research Goals

  • Learn about the competition
  • Identify the target audience
  • Understand average spending habits and online shopping experiences
  • Conduct my own experiments (Go shopping for myself :P)

Basic Project Assumptions

  • Users prefer minimal clicks
  • Users are interested in saving money (Who isn't?)
  • Users don't manually search for coupons.

Research Practices

  • Market Research
  • Competitive Analysis

Preliminary Research

Market Research

Given that I am designing an extension that will be used by just about anyone that would do shopping, its really important to understand user behavior, as well as primarily used features, and also business reasonings as to why certain functionality is in place. As such, we took the following steps:

  • Conducted market research to understand the coupon industry and user behaviors.
  • Explored legal requirements influencing design, like mandatory popups for consent.
  • Analyzed top competitors (Honey, Rakuten, Karma) for market positioning and strategies.
  • Focused on user preferences for simple, efficient shopping experiences with coupons.

The Legal Elements

One of the first things I wanted to address was why certain elements were so big and, for a lack of a better word, intrusive. The biggest reason I found was mainly because there are some laws in place that would limit what actions consumer products are are allowed to perform in a single action, specifically due to data privacy laws.

  • No one- click coupon applications; There has to be a popup of some kind that allows the user to consent to coupon/savings application.
  • All coupons and savings agreements are legal contracts between companies, so that means that some stores just don't have any coupons even if Microsoft pushed for it.
  • Because of the no one-click rule, certain buttons must be clicked before the savings can actually be applied, so it forces the extension to be a little intrusive and guide the user to click it.

User Behavior

Research revealed users are more likely to use prominently displayed cashback options, ignore pop-ups until checkout, and prefer a simple UI with fewer options. They spend a short amount of time on extensions and predominantly shop on computers rather than mobile devices.

Competitive Research

Now that we've established a baseline, its important to actually analyze the competition thoroughly and understand what each of them do right and what could potentially be seen as a weakness. This isn't to say any of these options are particularly bad in any way, but its more so that we can take what's already working, and potentially expand on or improve upon with our extension.

Here are the three major players in the space once again, Honey, Rakuten and Karma, and a main strengths and weaknesses of these three industry giants.

User Research

User Interviews

This is probably the most fun part for me, since it lets me just talk with people and get a bunch of new perspectives on the research I've conducted up until this point.
The goal of this bit of research is to get a better understanding based on the assumptions I have so far and see what all matches up and what all is new information that I can use to build the persona.

Findings based on earlier assumptions

  • Most people will want to click as few buttons as possible. Confirmed; 6/8 Users confirmed that they would rather spend as little time clicking buttons and more time shopping or researching the product
  • The average user of this extension would probably care a lot about saving money whenever possible. Confirmed; 8/8 people confirmed that they would at least USE a coupon, but 3/8 people reiterated that they wouldn't spend more than a few minutes looking for one on a website outside for food specifically.
  • Extension users probably don't spend a lot of time scouring the internet for coupons manually. Busted; Surprisingly, most people actually sit down and focus when they shop, and 5/8 people said they take their time whenever shopping for expensive items

2. Planning

Accomplishments

Through the planning phase, we were given the opportunity to sit with the executives at Microsoft and plan out of the goals of the projects, and find a balance between business and user goals. Through this, we landed on three main points of focus:

- Build a product that spends less time searching for coupons
- Create a cohesive shopping experience that will guide the user through the process
- Provide coupons for many stores in the Microsoft Partnership program

Implementation Questions

  • How do we make it interactive?
  • How do we make it as efficient for the user as possible?
  • How do we make it as readable as possible to prevent confusion?

Debriefing with the Team

One of the first things I wanted to address was why certain elements were so big and, for a lack of a better word, intrusive. The biggest reason I found was mainly because there are some laws in place that would limit what actions consumer products are are allowed to perform in a single action, specifically due to data privacy laws.

Pain point analysis

Taking a quick trip back to the market and competition, we sat down and addressed some of the major concerns people have with other extensions such as Honey. Interestingly, a lot of them have different issues, that each play a role in why they aren't used over another option.

  • Analyzed issues with existing extensions: Honey's lack of deals, Rakuten's feature overload, and Karma's UI inefficiency.
  • Identified Honey's popularity but limited deal variety.
  • Noted Rakuten's rich features but user are left overwhelmed
  • Recognized Karma's visibility issues with offers.

Goals

3. Design

Accomplishments

In the design phase, we were fortunate enough to get a lot of opportunities to sit down with the executives, engineers, and senior designers and go over multiple flows and even wireframes and get their thoughts and feedback.

We created multiple task flows and user flows, and applied the findings from the research we conducted to help narrow down the optimal flow that catches all of the main objectives from the planning phase, which landed us the final wireframe.

Task Flow

Time to get into the actual production of the project, starting by taking all the information we've gathered up until this point into one task flow. Based on the established tasked, I have mapped out a task flow, which will give us an example of the ideal flow the user would go through, although this is going to be omitting all the choices, or at least the ones that would affect the outcome.

User Flow

Now that we've created a task flow, we can now apply this to an actual user and see how it works when we have less favorable elements. Unlike the task flow, this one takes the less favorable outcomes into consideration as well, as the task focuses on the actual process, while the user flow will focus more on the project reality.

Wireframes

Using ALL the previous information gathered, through all the data and the interviews with various users, as well as the Microsoft Team, it was FINALLY time to start building out some low-fidelity wireframes. I drew these screens out as a rough way to build a layout of all the necessary screens in the project, and some screens were revised and reiterated upon, so some of the wireframes reflect that as well.

4. Prototype & Test

Accomplishments

In the design phase, we were fortunate enough to get a lot of opportunities to sit down with the executives, engineers, and senior designers and go over multiple flows and even wireframes and get their thoughts and feedback.

We created multiple task flows and user flows, and applied the findings from the research we conducted to help narrow down the optimal flow that catches all of the main objectives from the planning phase, which landed us the final wireframe.

Prototype Variation

With the baseline established, it was time to start actually assembling some prototypes to present to the clients. Technically, this section and the high-fidelity prototyping section go hand in hand, but in this case, I'm going to be using the high fidelity section to show off the near finished products. Given that we went through almost 15 different iterations, testing out various styles, colors, and layouts, it makes sense to show the change in the design elements.

With each iteration, various changes to the format were made, such as rearranging the coupon layout, the color, as well as adding or removing features such as the gift card feature. Some of these changes would come and go, with one example being the the color changes to the coupon tags.

Here are some of the different iterations we went through for the cashback buttons, testing out various colors and styles at the request of the client, most of which we immediately vetoed due to the contrast issues, such as having a yellow button with white text. Or the red themes in general given that they didn't match the rest of the style of the project.

High-Fidelity Prototyping

Finally, we have the finished version of the design! 15 iterations and many meetings later, we came up with a UI that we were happy with. Now that this is finished, it was time to begin working on testing the usability of this design in order to figure out any additional errors or flaws in the logic of the design.

Usability Testing

Conducted usability tests using demo versions of the design, aided by a skilled development team. Expected a 100% completion rate and over 90% error-free user interaction, as the extension's flow was straightforward. The testing, performed on various websites like Macy's, JCPenny, Nordstrom, Walmart, Crate & Barrel, and Target, confirmed an almost perfect user experience, attributed to the effective simulation of the purchasing process in the prototype.

The chosen websites were selected for their extensive range of coupons and promotions compatible with Microsoft's criteria. This choice allowed users to apply coupons on familiar platforms, ensuring a natural testing environment. Despite varying website preferences among users, the navigation flow remained consistent across all sites, involving browsing the landing page and subsequent user actions.

During usability testing, 4 out of 5 participants immediately clicked "apply" on the first coupon pop-up, streamlining the process as consent was given for automatic coupon application at checkout. The final participant engaged with the pop-up at checkout, underscoring the system's effectiveness. This positive response confirmed the design's logic, leading to the project's completion and subsequent handover to Microsoft's internal team for final implementation.

Style guide

To wrap things up, we have the final style guide which combined two different color schemes into one design. This style guide encompasses the color and style choices of both dark and light mode, and kept itself consistent with many of Apple's own design language choices,

Final Thoughts

With this final prototype completed, I finally got a chance to look back and reflect on my work. I believe I was able to meet the goals of the team, and meet the standard that Microsoft was looking for in a preliminary build for the Safari extension. We made a streamlined version that took many of the best elements from market competitors, while keeping a great deal of the focus on the existing implementation.

If I had been given the chance to continue working on developing more features for this project, I would've definitely looked into implementing features I personally use in a shopping extension, such as price history, in stock checker, and maybe even adding things like price comparison directly into the page so you can compare prices while looking at an item.

It was an awesome experience and my first real project in a professional setting, working with a big fortune 500 company like Microsoft, and really opened my eyes on different aspects to the UI and UX process.

Relief Factor Logo

Relief Factor

Learn more!

KidZscore Icon

KidZscore

Coming Soon!

Back to Top