Microsoft Edge Extension Revamp

Microsoft Edge  |  2024

Redesigning the extension management experience to increase user adoption, improve post-installation journey, and reduce extension interference issues for Microsoft Edge browser users.

Why what & how

Why are we solving

Users during their web experience on edge face 2 types of problems caused by extension

Why what & how - showing two user scenarios with jar illustrations depicting extension problems: users needing to disable extensions and extension interference during browsing

What we are solving

'Users who struggle with Extension Interference during browsing and come to the Management hub to get to desired solution'

Business Objective

  • Increase the extensions top of the funnel by bringing in more users with intent*
  • Increase extensions conversion and contain seekers within Edge
  • Reduce user dissatisfaction in post extension installation journey

*Instances - Refers to the individual counts of feedback or issues reported by users. Each instance represents a single occurrence of feedback

Source - ocv.microsoft.com

Design process overview showing the spiral workflow from Business Needs through Research and existing Product Analysis to Designs & Prototype with feedback loops

Experience Audit

An experience audit is a walkthrough of an existing, live experience focusing on a set of core tasks and sub tasks in a feature or a product area.

Experience audit showing three phases: 1) Blocking an extension for particular site, 2) Finding an extension after installing or extension, 3) Removing a set of extensions from the browser

User Goals

Wants extensions to be easily accessible when required

Wants to deal with any unexpected browsing experience conveniently

Wants to deal with their data privacy (around installed extensions) as and when required

Design direction

Launched changes

Launched changes showing before and after UI improvements for extension management interface
Extension installation progress interface showing loading states and user interaction options

The user can click on the progress loader incase they want to view the installation of extension or interact with other extensions in hub

This gives flexibility to the user to interact with extension hub while the progress bar is downloading

Extension installation success confirmation showing tick mark and completion states

The success icon i.e the tick mark, appears after each installation, provides users with confirmation and assurance that their extension has been installed successfully.

Extension hub surface showing site-specific context and enabled extensions with new tags

The hub surface has a title which talks about site's name and is anchoring the hub surface.
The extensions are enabled on the page and the newly installed extension has a new tag to it.

Extension hub surface alternate view with site context and extension management

The hub surface has a title which talks about site's name and is anchoring the hub surface.
The extensions are enabled on the page and the newly installed extension has a new tag to it.

Reload interaction on hub surface - State 1 showing extension management options

The reload interaction on the hub surface - State 1

Reload interaction on hub surface - State 1.1 showing advanced interaction patterns

The reload interaction on the hub surface - State 1.1

*Will walk through detailed internal presentations and draft work during the interview session

Success Metric

Success metric showing before and after UI improvements for extension management interface
Success metric in numbers before and after UI improvements for extension management interface