Notes Section

Disclaimer: Due to the nature of the project on which I worked on at Microsoft, I am limited in the amount of work I can show. I have omitted, changed, and obfuscated confidential information in this case study. All information in this case study is my own and does not necessarily reflect the views of Microsoft.

Notes Section cuts across all the modules in Microsoft’s internal tool (SaaS-based application) which supports datacenter build and commissioning activities globally. This is where users upload and manage their attachments for each record. This section was generating 10% of the monthly support tickets due to outdated functionality and poor user experience.

I was part of the team that reimagined the Notes storage and file management to improve usability, reduce the burden on support, and align the feature with current design standards and Microsoft’s design systems.

IMPACT

Analytics and Telemetry showed ~20% performance improvement across different modules.
Post-launch we saw a 60% decrease in the amount of support tickets that were coming in from the Notes section.
Enhanced user experience for over 10,000 global users.
Reduced the minimum number of clicks to start the attachment process from 3 to 1 for critical modules

MY ROLE

Product Designer: Part of the end-to-end design process - discovery, analysis, user research, requirements, design, testing, support through launch

MY TEAM

Team consisting of Project Manager, Engineering Manager, 9 Developers and 1 Designer

TYPE OF PROJECT

SaaS-based enterprise application and Internal Tool: data-based redesign of an existing feature.

The Challenge

1 out of 10 support tickets received was related to the notes feature.

Since the notes feature was a part of every module in the platform it is one of the most heavily used functions. Each month, approximately 10% of all support tickets received were related to issues with the Notes function. When compared to the monthly average of 480 support requests across the whole platform, this was a staggering amount of tickets for a single feature.

This high volume of tickets not only impacted user satisfaction but also strained support and engineering resources.

RESEARCH

If this feature was facing so many usability issues, something must have gone wrong.

I conducted data analysis, user research, usability testing, and stakeholder conversations to figure out what the pain points were.

Support Tickets

Used tickets to help us get started on uncovering some of the common issues that users faced.

Data Analysis

We had telemetry set up for the feature, which indicated that it took users almost 10 minutes to add 5-6 files.

User Interviews

Conducted over 9 user interviews and usability testing to figure out the main pain points.

Stakeholder Interviews

Over 3 conversations on expectations and vision for the feature and where they saw it as lacking the most.

DISCOVERY

6 points of improvement

We can not solve for everything, so six key areas of improvement was finalized, that would deliver the most significant user and business impact. These areas were selected based on their potential to enhance user experience, streamline workflows, and drive overall project success.

01/06

Hidden Actions

All action buttons such as upload, delete and download were hidden.

For example: I saw that the user needed to perform a minimum of 3 extra clicks to start attaching notes.

02/06

File Click = Download

I observed that the user was downloading the notes each time they wanted to view it. Clicking on the file = download.

This caused the user to have to move out of the platform to see the note as well as downloading a lot of redundant material.

03/06

Failures with no context

Users were trying to upload unsupported file sizes and file types. When the error occurred, there was no context on what happened and how to fix it.
‍
There were no guard rails on the upload experience.

04/06

Delete is absolute

Users were not able to restore notes that were accidentally deleted. They had to contact support to restore it. They always kept a backup of all the notes in their system for emergencies.

05/06

None of the elements followed the Fluent UI design system

Opportunity to conduct a design audit for the feature. Most of the internal tools in Microsoft is already following the design system. We needed to catch up.

06/06

Common features were missing

The notes feature should have the common features that the users are used to when going through the attachment flow.

1. Drag and drop upload
2. Multiple file uploads

DESIGN PRINCIPLES

From the areas of improvement, formulating what success looks like for this feature and defining its accompanying product requirements

Sense of familiarity

Ensuring that the experience felt intuitive and familiar and aligned with users' existing mental models and expectations. This needs to reduce.

Product Requirements

Adhere to expectations: Incorporated common functionalities that users were already accustomed to, such as drag-and-drop file uploads and preview options.

Control and Security

Providing users with control and security was key to building trust. Actions have to be clear and reversible. Clear constraints and feedback to reduce confusion and errors by informing users upfront.

Product Requirements

Deleted files archive: Allowed users to recover deleted files, providing a safety net and increasing confidence in using the system.

‍Clear upload constraints: Displayed file size and type limitations upfront to prevent upload failures and improve user experience.

‍Explicit actions: Ensured that actions like downloading and deleting files required explicit user input, reducing accidental operations.

Discoverability

Users were spending a min of 3 clicks and more than 4sec to access basic functions. Enhancing the discoverability is critical for improving usability. Users should be able to find what they need easily and with minimum clicks.

Product Requirements

Intuitive navigation: Designed a clear and straightforward UI with visible and labeled action buttons.

‍Easy access widgets: Introduced a notes section widget on critical pages, allowing users to manage notes without navigating away from their current tasks.

Design System

Adhering to the Microsoft design system that the users are familiar with. From a stakeholder point of view, all things from Microsoft should adhere with the Microsoft design system and guidelines.

Product Requirements

Consistency with design system: Ensured that the redesigned Notes section followed Microsoft's established design guidelines, creating a unified experience across different modules and tools.

DESIGN EXPLORATION

After defining the direction, I dived into the exploration phase

Easily accessible Notes section widget

Adding a widget to all pages of critical features like Issue Management to easily access the notes from anywhere on the page.

This provided an easy way to add and manage notes on all pages and not just on the notes page.

Clear call to action and states

Clear call to action on how to add, download, and delete notes.
The importance is given to seeing all the uploaded notes and the area to add notes and view deleted files has been made secondary.
Adding and deleting actions are carried out by pages dedicated to them.
Search bar at the top for easy search.

New Upload experience

The all-new upload experience provides a better user experience and follows Microsoft Design patterns. Users are now clearly guided on actions.

Before

After

Drag & Drop to Upload

This has been a long requested feature and during this redesign, we were able to finally implement this feature for uploading.

Upload Guardrails

Provide real-time feedback during file uploads, indicating progress, success, or failure with clear messages.

Notes Tab

The widgets are only for critical features like the issue module. I also defined how the notes section would look like for all other records. It would still be in a separate tab but with the new UI that prioritizes discoverability and Microsoft's Fluent UI Design System

Before

After

Notes Preview

We removed the one-click download and converted it into a preview option. Users can download the file if they wish. This eliminated the need for users to leave the platform to view files.

Microsoft

NOTES SECTION