Enabling students on the browser

Company – Microsoft

Product – Edge, the new browser

Year – 2020, 2021

Role – Product Designer

OVERVIEW

After the failure of Internet Explorer, Microsoft took on the task to reimagine the browser. I chose to work on the education division of Edge, along with another designer, my design manager and two PMs. Our goal was to reimagine education on the browser. I worked on tools such as Immersive Reader (making reading and learning language accessible for special education kids) and Collections for Edu (making online research easy for students). I also did a lot of strategy and visioning work around topics such as co-browsing, classroom mode, etc though it is confidential. Here are some user personas and journey maps that I can share:

Let me take you through one of the features I worked on that was released- Citations. As part of the effort to make online research easier for Higher Ed students, we discovered that the current workflow for creating (complete) citations in the right format was inefficient involving a lot of inadequate tools and steps and a miss would easily put students at risk of plagiarism. We thus set out to make citing the research done on web quick and accurate.

The final solution presentation can be found here. This feature was released in Nov 2021.

This feature is great for students using Edge to research – Business Insider in 11 Best Microsoft Edge Tips & Tricks

PROCESS

PROBLEM DEFINITION

Having never created citations myself, I started the project by first understanding what they were, the different formats, requirements and the current tools used by Higher Ed students. I replicated the steps followed by the students and recorded a video to demonstrate the inefficiency of context switching. Here are the problems I discovered:

Students struggle to write citations in a specified format

Sometimes citations have wrong info or missing fields which students have to correct by editing

A lot of back and forth to find missing fields

Current web tools show ads

Some students forget to cite and commit plagiarism

I then defined the user goal and the business goal to be achieved.

SOLUTION DESIGN

The PM and I came up with the jobs to be done:

Turn citations on and off within the Collections side panel (a Edge feature that allows collection of webpages, images, text, etc from across the web)

Copy or edit citations to fill the missing fields

Export citations along with the resources in Collections to a word doc with correct inline references and bibliography

Access citations on any page through the right click context menu

The PM and I took a hard look at our constraints which were

Everyday consumers of the web were Edge’s top priority and primary user group. We should not come in their way of using the browser.

Integrating within other Edge features such as Collections and Context Menu as well as with Microsoft Word meant we were going to be in a lot of alignment meetings and would have to make a lot of compromises to fit seamlessly into their design system.

These helped me define the design principles to adhere to while designing.

I then worked on a proposal for the workflow.

I dived straight into high fidelity designs, thanks to our design system. I created prototypes with multiple workflow options to facilitate discussions and usability tests.

After several late night meetings over design system, many compromises and a good bunch of socializing, spanning over several months, we were able to arrive at a solution that all teams and leadership agreed upon (phew!).

I then meticulously created the components and specs as well as an accessibility spec in figma to handover to the developers.

High fidelity screens