M. Adlan Ramly
Interaction Designer & UX Researcher

Google Drive

October - November 2018
Role: UX Researcher & UX/UI Designer
Research Methods: User Interviews & Usability Tests
Featured on Google Top Results (as of November 2021)

Project Overview

A case study about getting an embed link on Google Drive. An analysis on current design and my design attempt from user research to prototyping.

The goal of this case study is to address occuring issues with the current state of the application, perform user research on potential stakeholders, and redesign the application based on the results of the user research.

Introduction

One day, I was updating my portfolio with demo videos of my previous projects. Uploading a video on Youtube will usually take a long time and I have no reason to upload it on Youtube, which is why I made my decision to upload my demo videos on Google Drive instead. It turned out it was a lot more difficult than I thought.

Problems

Surprisingly, it took me around 15 minutes just to get an embed link of a video. I had to search online how to get an embed video link on Google Drive. I found numerous sites, discussion boards, and videos, but unfortunately all of them were outdated. I couldn’t find the embed video link until I found it on my own. Here are the steps to find the embed video link as of mid October 2018:

  1. Open video
  2. Select “More Actions”.
  3. Click Share, Get Shareable Link
  4. Open the link in a new tab/window
  5. Select “More Actions”
  6. Click “Embed Item”, Get embed video link

Other than the lack of updated resources, I was curious about what other factors led me to be confused in doing such a simple task. I analyzed and listed down multiple factors that affected me when I tried navigating the system.

Confusing Procedures

To see where the problem occurs, I made a user journey map. This is a good approach to understand user behavior, to identify the system functionality at a high level, and to demonstrate the way users interact with the system. From this user journey map, you can see there are 2 pain points.

The first one occurs after generating the shareable link. I was confused to find where the embed video link was located. I thought I would find it if I clicked the “Advanced” button on the bottom right, but it wasn’t there. Later, I opened the shareable link on a new tab. I thought it would open the exact same page as the previous one, but it turned out that the page was actually different.

The second one occurs when navigating the options on the shareable link. When I opened it in a new tab, the options look very similar to the other page. The buttons on the top menu are very similar with minor differences, but the “More Actions” button have different settings. This confusion happened because the interfaces of 2 different pages are difficult to distinguish.

Indistinguishable Interfaces

The gestalt principle of similarity says that similar elements are perceived to be more related than elements that are dissimilar. Similarity is useful in organizing objects through their characteristics within a group according to their shape, color, size, and orientation.

Google Drive retains a great consistency in its design. But in this case, it is too similar that you can’t tell the difference other than by looking at the URL of the page. The page that has the embedded video link is the one on the right screenshot where you open the shareable link in a new tab/window. If you don’t open the shareable link, the “Embed item” option will not show. It is not possible to get the embed video link on my Google Drive without opening the link in a new tab/window. The system should have explained the reason why you need to open the link in a new tab because forcing user behavior without telling the purpose of the action is not a good practice.

Design Inconsistency

Youtube is a product under Google’s ecosystem that primarily supports video sharing. When you select the “Share” button on Youtube, the “Embed” option shows up below the option where you share videos to your friends through email. After clicking the “Embed” option, it will show you the embed video link. This process is more structured and is more straightforward compared to Google Drive which requires you to perform several clicks before you get the actual embed link. Products under an ecosystem should have consistent flow, layout, & visual hierarchy.

User Testing

Curious to see if anyone has difficulty with finding the link, I decided to conduct a user testing session. I picked a combination of 5 Information Systems & Computer Science students in Penn State who are familiar with web development and have at least 1 year of experience as a web developer. I created a persona that I used as a reference which could represent the respondents for this mini case study.

Task

Find an embed link of a video on Google Drive.

Goal

To see how intuitive Google Drive is when it comes to embedding a video for web developers.

Method

Think-aloud testing: let the respondents say what they are thinking, doing, and feeling at each step. If the respondents took more than 30 seconds, they are free to ask the answer.

Results

None of the 5 students were able to find the embed video link under 30 seconds and they asked me how to do it. My assumptions were correct, they were lost in the first pain point: getting confused after generating the shareable link.

“Wow, didn’t expect it would be that difficult.”
“Why there were a lot of unnecessary steps?”
“How come Google has not addressed this problem?“

My Design Attempt

I made a wireframe design on my sketchbook before I recreated it on Photoshop. I wanted to make the process to be very simple and straightforward, which is why the process could be done in one page without opening a new tab/window. In my design, when you click “Get shareable link” where anyone with the link can view, the embed video link is automatically displayed underneath the option where users can share the video to email addresses. The layout is consistent with Youtube’s share video layout and also faster than Youtube’s share video layout in getting an embed link.

After I created the wireframe, I created a high-fidelity prototype to make it more realistic. Since Google Drive is using Material Design as its design system, I have to use the same design guidelines to preserve the consistency of the existing system. My design removes all the pain points described earlier which saves a lot of time and the process is faster, easier to understand, and more straightforward. The process can be done in 4 steps instead of 6 steps.

Conclusion

After I finished my design, I asked the 5 respondents again how they liked the design improvement that I made. All of them agreed that my design is more straightforward and is not confusing like the current design. I hope Google would be able to read my mini case study and redesign the method of getting an embedded link for a video to make Google Drive more accessible for web developers. Getting an embed link of a video on Google Drive will no longer be a hidden feature that becomes an urban legend on the internet!

“It’s a lot easier to navigate than before and it saves me a lot of time!”
“Very simple and easy to learn.”
“This is a small but great design improvement, you should be hired by Google for this!”

As of November 2021, this article shows up as the top results search on finding an embed link on Google Drive.

Read More