OneDrive Web Performance Experience
Using principles of psychology and design to craft OneDrive's initial page loading experience that is fast and delightful. I joined an effort led by a large group of engineers to decrease load time by half and design a natural and harmonious loading experience.
Brand new loading experience showing elements loading in a purposeful way to improve perceived performance.
Problem and Goals
The OneDrive loading experience on web was extremely janky, had a random loading sequence, and took ~8 seconds to load resulting in a net promoter score of 30%. Besides the actual load time, the jank of the experience made the perceived performance a lot slower than it actually was, which was detrimental to the customer experience.
My goal was to design a loading experience that is perceived as fast regardless of actual load time, has a natural and harmonious flow, and is comfortable to the eye.
OneDrive web loading experience before improvements with a total load time of 8+ seconds and elements appearing in a random order.
- 0–1s: Left navigation silhouette
- 0–1s: Files
- 0–1s: Folder icons
- 1–2s: Left navigation items
- 1–2s: Sites in the left navigation
- 3–4s: Suite navigation
- 4–5s: Command bar
- 5–6s: Suite navigation content
The Team
As mentioned earlier, this was a really large, two-year-long effort initiated by a group of 15+ web engineers. I stepped in as the lead designer to define the loading experience with the help of a design researcher, who led user studies, and the support of a project manager.
The Psychology of Web Performance
It was important to understand the psychological impact that performance has on user interaction. Visual stimuli trigger emotions – while some put us at ease, others can make us anxious. I partnered up with a researcher to test different loading patterns and understand which loading pattern was perceived as fast and delightful by our customers to design a stress–free experience.
Patterns tested:
- Full page progress indicator – Outlook
- Sequential loading – Google Drive and Box
- Shimmer – YouTube
Loading patters that were tested against OneDrive. 1) Full page loading with app logo, 2) sequential loading in a purposeful order, 3) full page shimmer.
We recruited 16 participants via UserTesting.com and each participant viewed 10 clips comparing the loading pattern of OneDrive against other sites and loading patterns.
Web tool used to compare OneDrive's loading experience to other sites such as Google Drive.
Findings
Naturally, OneDrive was perceived to be the slowest. Most customers perceived the sequential loading from top to bottom and left to right as fast performing, regardless of actual load time. Although OneDrive and Google Drive had similar loading times, Google Drive was perceived faster because of their carefully designed sequential loading experience.
“The menu should load first to create the frame, like a picture frame, then you have the contents in the middle. To me that makes the most sense.”
– study participant
Principles
The research study helped me put together principles to follow as I continued my design process:
- Give people something to do while they are waiting for their content to load, it gives them confidence that something is happening and improves perceived performance
- Use grouped and sequential loading for a natural flow
- Absolutely no jank as it triggers negative emotions
Proposed loading pattern with "outside" elements such as the header and navigation appearing first, followed by user content.
Loading Pattern Details
The loading pattern starts off with the silhouette of the site (suite and left navigation) to give it a skeleton and a foundation.
Then we start introducing content from top to bottom starting off with the waffle menu, search, and commands in the suite navigation in order to create a frame.
We continue creating the frame by loading content from left to right starting with the left navigation, commands, and the page header. The commands below the suite nav appear at this timing in order to ease the huge transition of a large amount of content coming in.
Lastly, we see all files loading all together as a group to avoid any possible jank and shifting of elements.
Challenges
One of the biggest challenges was really understanding how many calls were being made for each element that is loading on the site and how that would affect my designs. I spent a lot of time alongside engineers learning the ins and outs of API calls on the OneDrive site.
Another challenge was that the suite navigation was owned by a separate team – for over a year, the team didn't have the resources to improve the performance of the suite navigation. Fortunately, that issue has been resolved since I've left the project.
Final State
The proposed loading pattern was implemented in the product and the engineering team continued to improve the load time afterward. Initially, it took ~8 seconds for content to appear on the page. Now, the OneDrive site loads in ~5 while maintaining the proposed natural loading sequence of elements appearing on the screen.
Brand new loading experience with loading time of ~4.5 seconds.