Windows 10 Campaign Landing Experience

Client: Microsoft

PROCESS

Every month, Microsoft's analytics team presents a detailed analytics report to us including heat maps to show user engagement, details of where customers are coming from, and many more aspects that help us iterate the page's design to increase retail referrals.

Microsoft has a component library for UX Designers to use to ensure all of their pages have a consistent look and feel and to help developers save time. After seeing the monthly report, I would discuss what changes to the site with the account team, find components on Microsoft's component library that best fit the experience, and then present wireframes to the client and developers for implementation.

Click the images for more details.

View Example Wireframe Presentation >

Analytics Report

Analytics Report

The analytics team presented detailed reports about how the page was already doing when I first started on this project. In this slide, we can see that users care a lot about the price of the device when making their decision.

Engagement Heat Map

Engagement Heat Map

I saw an easy optimization we could make by looking at the engagement heat map. Users were clicking on the device that was already selected because there was no indication it was selected.

Existing Page Breakdown

Existing Page Breakdown

My first step was to break down and label each component on the existing site to fully understand all functionality and where engagement could be improved.

Research

Research

I researched how similar companies present prices to users and determined that we should display the original price of devices before a deal to show the user exactly how much they save.

Desktop Wireframe Option 1

Desktop Wireframe Option 1

I designed different options to optimize the page and presented them to the client.

Desktop Wireframes Option 2

Desktop Wireframes Option 2

I then used components from Microsoft's component library to design different options on how we can update the page.

Mobile Wireframes

Mobile Wireframes

I created and presented wireframes for different optimization options for both desktop and mobile layouts.

Compare Blade

Compare Blade

I also designed a new component for Microsoft to add to their library that could help show the differences between the devices in a different way.

OVERVIEW

Microsoft is one of MRM's consistent client. We do updates to their sites often based on detailed monthly analytics reports and to promote new products. I am the main UX Designer for their Cloud and Windows 10 websites. For this project, we updated the generic campaign landing experience for Windows 10 ads. The page' purpose was to inform users about four Windows 10 devices, easily allow users to compare them to Macbooks, and increase retail referrals.

OUTCOME

Our updates to the page increased engagement rates, time on page, and retail referrals. We continue to update the page and improve with each iteration.

View Website >

RELATED

jaime.fraina@gmail.com | 845-445-7430

Mobile Wireframes

I created and presented wireframes for different optimization options for both desktop and mobile layouts.