Google Docs- Add a Feature Project 

What is Google Docs?

Per Google Support:  
Google Docs is an online word processor that lets you create and format documents and work with other people.

Google Docs' Business Objective: To make online collaboration easy, with the ability to store all documents online within Google Drive


The Problem

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

The Solution


Press Play to see the user flow. 

The Solution in More Detail 


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

Design Solution: I redesigned Google Docs for users to have the ability to be able to have multiple documents, that pertain to the same topic within one doc, like you can with Google Sheets 

Design Process

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.

Affinity Map from Survey 


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: 


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. 


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


Whom are we designing for? 


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


Google Sheets example in which I am basing my first Google Docs re-design from. 


My first iteration was designing Google Docs' ability to add multiple docs within a document, as the same layout as adding 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 Tooltip 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? 


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


The above 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.

Next Iteration


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 hierarchy frame

So, I did a few slides of other iterations.


This version has the Document Outline icon always displayed on the same line of the page hierarchy. The user clicks on the Document Outline icon to display the page's outline. 
This gives the user the ability to toggle between expanding or collapsing the outline or quickly jumping between doc outlines in different documents. Here the main page is 40 pixels to the left than normal and the comments section overlays the main page more so.


In the above version, the Document Outline is displayed within the page hierarchy only when the pages are expanded. 
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.


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.