Header-wider.png

Keep Reinventing

A 12-week internship where I remotely collaborated cross-functionally with the UX Research & Design team, Product Managers, Development team & Analytics team sitting across Asia and North America for user-centered improvements and feature additions to the globally used client-facing DaaS dashboard.

001. Observation & Discovery

Aligning with the global initiative and project undertaken by the Personal Systems group of reducing "time spent in meetings" across HP globally, I observed a habit widely common across multiple teams at HP which (plausibly) compounds for hours added to the "time spent in meetings".

002. Leadership & Initiative

A week left into my internship and with all the assigned work done, I gathered my observational findings, coupled them with the analytics data I had access to, and presented them to my manager. I convinced him to let me pursue the project and conduct some usability testing. 

003. Resourcefulness

Given the constraints on time and resources, I sped up the project by putting my technical background into practice and wrote a reusable ReactJS code for PoC implementation, and conducting usability testing.

Skeleton Loading

 Watching a loader or a spinner while your webpage loads is like watching a pot of water boil. Psychological studies into progress indicators show that our interpretation of them is anything but linear. Our method of processing a delay doesn’t match up with reality. In software design, skeleton screens provide an alternative to the traditional methods (spinners, progressive loaders). Rather than show an abstract widget, skeleton screens create an anticipation of what is to come and reduce cognitive load.

DISCOVERING THE PROBLEM

During my internship, I was a part of the Personal Systems Group at HP. An initiative was taken by the director of the group focussed on reducing the hours spent in meetings (remote and in-person) to foster better productivity and everyone including the interns were made aware of the project, the motivation behind it, and the steps being taken. As an intern, I started off by shadowing my manager and mentor in a lot of meetings (remotely) to understand the workings of the team and the project I was going to be a part of. Most of these meetings involved the usage of a commonly shared web dashboard across teams. During these meetings, especially the first meetings in the morning, I noticed a trend of prolonged chit-chat while the dashboard pages "loaded". Often these meetings ran a couple of minutes (or more) over time.

dashboard.PNG

A snapshot of what the dashboard looks like while the content on the page is loading

BACKGROUND RESEARCH & USER PERSPECTIVE

Skeleton Loading Examples.png

A compilation of how Facebook, LinkedIn, Google, and YouTube use skeleton screens across applications for loading. Google uses a mix of skeleton screens and spinner for loading across the G-suite.

I looked at different loading methods and spinners being used in the current technology and the adaptation of Skeleton Loading by companies like YouTube, Facebook, Google, and LinkedIn. Next, instead of "talking to the users", I decided observing them in their natural environment would be more beneficial. I started attending different meetings, even outside the scope of my internship, just to observe how users interacted with the dashboard especially during the morning meetings and I also tried to time these interactions and meetings to the best of my ability. Instead of asking the users directly about putting a number on the amount of time they think a page on the dashboard took to load, I asked them to rate it on a 3-point (1: Fairly quick, 3: Quite a while) scale. The majority response recorded was "The dashboard page took quite a while to load."

Having worked on the Analytics team for GDPR compliance as one of my projects during the internship, I had access to some Google Analytics data around the web dashboard in question. I combined this data with my observational findings and the informal user interviews and pitched the concept of implementing Skeleton Loading for the web dashboard and conducting usability testing to evaluate the concept. 

PLAN OF ACTION

I collaborated with the Analytics and the Dev team to create some technical workflows around how the Skeleton Loading will be integrated within the dashboard and identified the key components that have contributed to the success of these screens over a loader or spinner. The main characteristics are :

1. Use of motion within the screen components
2. The speed of motion being used 
3. Use of a shade of gray or a neutral color

Considering the time and resources I had to pursue this project and the technical constraints that are integral to the Skeleton Loading solution, I decided to use my coding skills instead of relying on the design team for creating a prototype. I wrote a reusable code in ReactJS and created a Proof of Concept for conducting usability testing

Skeleton Loading - Backup Slides.pptx.png

A video recording of the Proof of Concept of the Skeleton Screens developed for the dashboard in ReactJS

USABILITY TESTING

I ran a usability test with 15 participants across different teams in the Personal Systems group. 

  • The study was conducted on the participant (HP employee) work laptop/PC using a sandbox environment.

  • Each participant was supposed to complete 4 tests and following each test answer a set of questions.

  • The test design sequence was such that the appearance of page spinner and skeleton loading was randomized.

The end-of-test questions were designed to gather information on the following topics:

  • User's familiarity with the concept of Skeleton Loading 

  • Their perception of time taken for the page to load 

An interesting insight that I uncovered was even though about 12 participants reported having seen the skeleton screens before on "some website" they had never noticed them and knew nothing about them.

OUTCOME & IMPACT

Skeleton Loading attempts to improve client experience while using the dashboard by making it act proactively in accordance with user expectations. We started by addressing the gap at the root level and moved our implementation from a generic layout level to a customized component level. The project turned out to be a success in terms of the depth of research and the successful implementation as a POC.

               I was able to identify a blind spot and address it using a user-centered approach thus creating a Leadership impact through the project. I was asked to document my UX process and findings in the form of a report, and the code and styling specifications were documented as a part of Veneer - HP's internal design and style library.

Frame 1.png

An average estimation of perceived loading time as reported by the participants in the study. The table shows that across all the tested pages Skeleton screens are the clear winner.