Microsoft

NOTES SECTION

Improving the notes storage and management experience for over 100,000 users of a Microsoft SaaS-based enterprise application and internal tool.
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.

Archive

An archival feature for delete and restore rather than an absolute delete. This is where users can view and restore deleted files, within 30 days of deletion. This provided them with the option of reverting their action of deletion, giving them more control.

RESULTS
20%
Analytics and Telemetry showed ~20% performance improvement across different modules
60%
Post launch we saw a considerable decrease in the amount of support tickets that were coming in from the Notes section.
10,000
Enhanced user experience for over 10,000 global users.
MY LEARNING
Some of the things that I learned while working on this project.
  • Working in collaboration with others: I learned that you don't need to do the whole design process alone to create an impact on the project.
  • Convincing stakeholders: People tend to resonate better when you tell them a story rather than just hard-core numbers. Show how your new design would improve the matrix after telling the story has more impact.
  • Users are always ready to tell you what is not working in your product: Users are more than willing to tell you where they are getting stuck in the product.
  • Working with technical constraints: Creating and fighting for good UX when there is a technical constraint for the functionality development. Compromises are needed along the way, but there should not be any compromise in the experience that we provide to the user.