Microsoft

M365 Marketing Page Redesign

Background

I collaborated closely with researchers and stakeholders from Marketing, Design System and Plans teams to redesign the M365 marketing page. My role focused on bringing clarity, structure, and visual polish to the experience, ensuring the designs are aligned with evolving product messaging while supporting user needs and business goals. The redesign was informed by experiments and user insights, and aimed to create a more engaging and conversion-driven first impression.

CONTEXT & MY ROLE

Comparing to the previous design, the primary goal of the redesign was to improve the visual and content hierarchy of the page, making it easier for users to understand plan options and take action. We aimed to reorganize the information, increase visibility of different plans based on stakeholders’ needs, boost engagement and conversion rate by modernizing the visual design, and guide users more effectively through the decision-making process.

GOALS

Previous Site

The previous design highlighted 4 main plan offerings: Family and Personal plan Yearly and Monthly subscription, Business plan and Perpetual plan that requires only an one-time payment. And throughout the site there are 6 major sections:

  1. Hero section contains Family plan CTA

  2. CTA to Business plan

  3. Family and Personal plan chooser with Yearly and Monthly offerings

  4. Benefits of Microsoft 365

  5. Comparisons and features of Personal, Family and Perpetual plan

  6. Perpetual plan that requires a one-time payment

Customer Pain Points & Research Insights

Users have high cognitive load.

New and existing Consumer and SMB customers experienced significant friction on core web surfaces. The design demanded too much mental effort, which contributed to a 40%+ drop-off before purchase.

Discovery journey is fragmented.

The customer journey was non-linear and segmented across multiple touchpoints. Users often had to piece together information themselves, leading to confusion and disengagement.

Overwhelming number and detail of offerings.

There were too many plan options with complicated differences between them. And each plan was described with long lists of details. This overwhelmed users and made it difficult to quickly compare options.

Reassurance improves engagement.

Providing clear reassurance about the next steps helped users feel more confident in their journey. This reduced uncertainty and directly improved overall website performance.

Focused hero increases clarity.

A single focal point in the hero section improved readability, hierarchy, and navigation. By simplifying the entry point, users could more easily follow intended paths.

Redesigned Version

  • Visual storytelling approach

  • Updated overall style to be more modern, utilized components from Microsoft Fluent Design System

  • Introduced video and animations to create a more engaging, story-driven experience that highlights value

  • Eliminated the feature comparison table and condensed the information into Plan Chooser

  • Redesigned the Plan Chooser to visually align with Fluent Design System, and added icons to allow users to easily compare plans and features at a glance

  • Turn the feature section into feature highlight cards to dynamically showcase value

  • Added an interactive carousel that lets user discover the full suite of M365 apps, Combined left-hand list navigation for fast scanning, with hero carousel for visual storytelling.

First A/B qualitative test against the original:

Conducted over 30 days in the US, UK, and Australia to identify the most engaging sections, and gather insights for improving the user experience.

Focused on key KPI: orders, and desktop users because it represents 86.8% of traffic.

Test Heatmap

Optimizing CTAs and badges in high-exposure areas significantly guides users.

Interaction with the SKU was 5%+ higher on the redesigned page, interaction with the ‘buy’ CTA was 20.5% higher on the redesigned page.

Significant increase in “Trys”.

Trials were boosted by 56.1% due to high placement of the CTA in the hero section. But it’s important to balance between “Try” and “Buy”.

Low engagement in the hero video and feature cards.

The hero video pushed SKU below the fold. Only 3% of users interacted with the video in the hero section. Need to balance visual appeal with simplicity.

App carousel was highly engaged.

Even with a placement below the fold, the App Carousel section had 4.7% click rate and 4.5% recurrence.

Iterated redesigned Version

  • Simplified the layout by reducing white space and removing low-engagement sections (e.g. hero video, bottom feature cards).

  • Condensed content to keep high-engagement sections closer together.

  • Emphasized the value of the Family Plan and prioritized the “Buy” button over “Try”.

  • Moved CTA to purchase Business plan up to the top, per stakeholder’s request.

  • Added a feature card to highlight the rollout of Copilot Pro.

Second A/B qualitative test against the original:

Over 30 days in the US, UK, and Australia. Awaiting testing results…

Conclusion

This redesign emphasized the value of continuous testing and iteration. By analyzing user behavior across markets and variants, we gained critical insights into what content users engaged with most, where they dropped off, and what motivated action. Testing helps validate design decisions, challenge assumptions, and surface opportunities we haven’t considered. Understanding user preferences and behaviors is essential in creating designs that not only look better but also perform better.