docs_icon-removebg-preview
Macbook-Pro-Flying-Mockup

 

Google Docs- Add a Feature Project 

Project Background

What: I designed the ability to add multiple documents within a single Google Doc, like you can with Google Sheets

Google Docs' Business Objective: To make the user experience less frustrating trying to organize and locate information 


User Problem: It is not easy to access many documents related to each other within the current Google Docs design.

Design Solution: I updated Google Docs for users to have the ability to be able to have multiple pages, that pertain to the same topic, within one doc

Assignment:  Add a new feature to an existing product  

Tools Used: Figma, Whimsical, Maze.co

Areas of Highlight in this Case Study 


Iterating

Material Design 

Prototype

How about we see what problems people that use Google Docs face?

Survey Results (out of 13 respondees) 

Too many open docs really slow down my computer

I love that they [Google Docs] save all of my work, but I dislike having to "go back" every time I select a doc and want to open another. I wish there was a way to have multiple docs open at one time in the same tab/window, or at least a way to navigate between them without having to exit or clicking back in the browser window to access all of my files.

These days it's gotten harder to find docs I need in google drive. I don't always understand the sharing options, either. If I have a table entered at the top of the page, there's always a space above it I can't erase. Copy/paste doesn't always work. You have to "insert drawing" to add shapes/lines instead of doing it directly on the doc.

Quickly open a new file while working on something, would be great if it could open something in a new tab as I often reference a few files at a time.

Key Result from Survey  

Problem: It is not easy to access many documents related to each other within the current Google Docs design.
Within Drive, you have folders with docs, or simply docs standing on their own, related to each other where you open a new tab within your browser, and you toggle back and forth between the tabs to view/edit the docs


Examples of Problem: 

Drive-screen-shot-1

Two documents of the same subject matter within a user's Google Drive. If the user has not opened each document recently, they would not be positioned together within Drive. 

Tabs-screen-shot-1

The two documents opened from Drive in separate browers that the user has to toggle between to see and edit. 

Why not create a single file/page/document that can hold multiple docs within the same file? With each tab, you can create a new doc?


     

First Iteration

MacBook-Pro-34

My first iteration was designing Google Docs' ability to add multiple docs within a document, as the same layout, you add a sheet within Google Sheets. I followed the same rules and task flows as Google Sheets. 

Testing Results of First Iteration

  • Out of 17 test-takers, 12 were able to complete the task without giving up.
  • I did not include a ToolTip feature. I gave people the set of tasks to see how intuitive it would be with just the tasks and to understand what Tool Tip features I would need to include.
  •  If the person was familiar with Google Sheets the flow was understandable, otherwise it was not intuitive for users.
  • The language of adding a doc within a document (like adding a sheet within a spreadsheet) was very confusing for people.

Responses when asked if they would use this feature: 

"Probably - it's less cluttered than having all your notes together."

"Yes, because it would save time."


"I guess overall I wonder whether this is a doc or a set of documents. Like, I understand the pattern because it reminds me of Sheets and I think this is a clever way to see documents in a way that's better than Tabs, but I'd feel hesitant to do this because I'd worry that I wouldn't have the same flexibility to export/save view each "page" within the doc separately. "

Thinking Further

My mentor asked me to explore other ways to add page hierarchy. Notion’s hierarchy layout seemed to be a popular alternative method that people used besides Google Docs. 


The next question was thinking about how to add this feature? In what way would it be intuitive for the user, and also maintain the current design features of Google Docs? 


MacBook-Pro-17

The Document Outline feature for Google Docs takes up significant space but is a valuable component to viewing a doc, so I wanted to make sure both features were apparent to the user.

More Iterations Considering Page Hierarchy

MacBook-Pro-30


My first version was adding the page hierarchy to the right within the side panel where the Calendar/Keeps/Tasks live with the ability to expand/collapse the panel.

After designing this way, my tutor correctly pointed out that it would not make sense to have the hierarchy live within the side panel as the other tasks are unrelated to Docs.

MacBook-Pro-45

I then iterated where the page hierarchy was located to the right of the main page, but was not part of the side panel.

After doing an A/B test with someone, they stated it seemed redundant to have the Document Outline on the left and then the page hierarchy to the right. They suggested adding a Document Outline icon within the page hierachy frame

MacBook-Pro-54

Then, due to lack of time, I did a few slides of other iterations. 

One version has the Document Outline icon within the page hierarchy, along with the Document Outline being displayed to the right of the page hierarchy frame. The current doc that is being edited is slightly further to the right of the screen, and the comments overlay the current doc more than usual.  

In the other version, the Document Outline is always displayed within the page hierarchy when the pages are expanded. The Document Outline is not displayed to the right of the page hierarchy frame/to the left of the current doc being edited. 
There is also the ability to view the entire parent document outline at the same time.
This would make it easier to jump between the various pages in the case some pages were collapsed.

google-sheets-icon-png-29

SME Interview: UX Researcher for Google Sheets 

I interviewed a UX Researcher for Google Sheets hoping to gain insight on why Google Docs hasn’t implemented the ability to add docs within docs, like you can add sheets within sheets.

Key Takeaways from Interview:

1. Google Drive, Google Docs, Google Sheets, and Google Slides are very siloed because they all have their individual roadmaps. This is a major issue in general to implement cross design processes 

2. Roadmaps have to be more strategic on where to put engineering efforts 

3. Google Docs’ roadmap is more interested in connecting shared users 

4. This segment of Google has a lot less staff compared to Microsoft because this segment doesn’t make any direct money for Google (to give more explanation as to why changes aren't easily implemented). Indirect revenue is generated by collecting people’s data. Therefore it’s not as easy to make changes within the platform. 

5. If you were to be able to add docs within docs, the whole user flow of the ability to find docs within Drive would need to also be redesigned 

6. Google is very aware of the poor discoverability of files and documents within Drive


One of Eva’s main comments was:

"What does it look like to be a holistic suite?"

Post Mortem: Thing to Consider

Does Docs need document hierarchy or is the ability to add multiple tabbed pages within a document enough?


The idea of being able to add Slides/Sheets within a Doc as well and toggle between them is another thought. Essentially being able to have a folder all within a document without needing to have multiple tabs open within a browser.


There was a lot of banter of what exactly to name the new “‘pages” within the docs. If this design was implemented, Google would likely need to change the jargon across the platform to make finding files easier. 
Sheets>Spreadsheet>Add Sheet/Insert sheet / Docs>Document>Add Doc/Insert doc

This was designed for MacBook Pro 1440 screen size. The layout would need to be adjusted in order to fit smaller screens, so it wouldn't look cluttered, like being able to collapse the page hierarchy panel. 

 

As a new designer, I approached this as a quick design to be able to add this feature, and then when my mentor rightly suggested to design with the nested page layout it opened a whole can of worms. It made me learn a lot of the considerations that are taken into account when implementing design. As someone that uses these products it made me realize why some things aren’t just already “fixed”, and now understand the overall process better.