top of page
MICROSOFT EDGE PDF READER

How might we enable users to type anywhere on a PDF document?

INTERACTION DESIGN

The problem

Microsoft Edge PDF users are unable to fill digital forms.


As paper forms become less common, users need an easy way to fill scanned forms digitally. This need has been especially intensified during the Covid pandemic when offices shut and with that, printers became inaccessible.

My role

I worked as a user experience designer and collaborated with a product manager and a team of 3 developers.

PROJECT DURATION:

4 months

PLATFORM:

Web

TOOLS:

Figma

PDF document.png
SECONDARY RESEARCH

User feedback and competitor analysis

In order to understand user needs better I went through the user feedback we had received. This led me to understand why people need this feature and how it might help them.

​

I also looked through all competitor PDF readers in the market to understand how the feature worked.

​

Key user scenarios:

  • Filling non-interactive PDF forms

  • Completing / Assessing PDF assignments

  • Typing notes on PDF documents

Design principles

Before starting the design, I put together these principles to align with the team and help guide our decisions:

User in control

Intuitive to use

Quick access to tool properties

Design Explorations

I spent some time exploring each element and interaction that would be required for the experience:

Cursor explorations
Secondary menu.png
Primary menu explorations
Tertiary menu.png
Secondary menu explorations

User testing

We showed an early prototype to 7 people to find out whether they are able to discover and use the feature. Below is a summary of our findings:

Insert.png
  • 'Insert' was well understood by most users. When asked to fill the form, they clicked on the insert button to complete the task.

  • All users were familiar with 'text' but they did not understand some of the other shapes provided in the toolbox. Users mentioned that they don't need 'text' label, the icon itself is familiar to them.

  • They expected the tool picker menu to be floating on the PDF document and moveable.

  • Users also mentioned that they would close the menu by an explicit close button or by clicking on 'Insert' again.

  • The arrow cursor in the prototype was confusing to users. They did not know where exactly to click.

Solution

After various iterations based on internal and external feedback, we launched the feature which ended up being used by millions of people.

 

Here's a glimpse of the feature in action. You can try it by opening any PDF document in Microsoft Edge.

Cursor.png
  • Cursor changes as soon as the text tool is selected from either the toolbar or right click menu.

  • On clicking anywhere on the document, a text box appears. 

  • This text box changes its width automatically as the user types. It can also be moved around the document.

  • Properties menu for the text appears along with the textbox.

  • Users can change some properties (colour, size, spacing, etc) of the text either before or after typing.

Typed text.png
  • Text is saved as soon as the user clicks outside the text box.

  • The cursor then chang back to text mode so that the user can continue typing.

Next steps

Since this feature was extremely interaction heavy and difficult to test with a design prototype, we decided to release it and then monitor the usage to ensure we fix all bugs and challenges that people might face.

 

In future, the team's plan is to add more tools such as adding shapes and signature to PDF documents. â€‹

CONCLUSION

Outcome

With this feature, we enabled users to add text on any PDF document. This helped them with various use cases such as taking notes, filling forms, etc.

This was my first interaction design project and I learnt about all the details that go within building such a feature. 

bottom of page