Google Doc Concept: Format Mode

Editing on the Go — Google Docs for the iPhone

Google Doc’s platform encourages people to create with others. Teachers share feedback with students. Teams collaborate on projects. And these projects grow from a variety of people.

Any person can start a project anywhere on any device: Laptop, tablet, and phone

People work from a variety of devices because we love the ability of being able to work anywhere. Whether we’re on the commute or our couch, we like the feeling on constant access.

A constant connection.

With COVID19, our dependency on collaborate platforms exploded due to social distancing measures.

As a student, there were many times when pulling out my laptop to work on projects was inconvenient. But, I still did it. Why? Because, I never enjoyed using the Google Doc app. It always felt faster to jot my ideas in Notes and transfer the information later. Google Doc’s app had more features but they took longer. I wondered if others shared this tainted experience?

Was it truly a struggle to edit from a phone?

User Research

First, I needed to identify how people use Google Docs on their phones. Do they write on their phone? Do they co-write with others? Google Docs is a function rich application. I wanted separate the moments of frustrations and gratifications. I had to discover the people’s needs.

But, who uses Google Docs on their phone? A lot of people do:

With a variety of users, Google Docs cam hold a variety of documents. Homework, notes, resumes, meeting minutes, essays, scripts, newsletters, etc… Each document has its own reading and writing process.
From my interviews, the I deduced the general writing process.

This writing process also matches the current user flow of the mobile app.

The desktop experience feels “spacious”, “fast” and “efficient”. Users can see everything. And if they can’t see a function, they search for it.

These opinions did not translate to the mobile app. Simply to put it, users found the app unpleasant. It’s “claustrophobic”, and “a last resort.” It’s “hard to use” beyond typing.

• Functions — that feel effortless on their computers — “take too long” on their phone.
• The mobile app was convenient but they weren’t confident in their edits.
• They didn’t feel comfortable submitting because they “don’t know how it will look on the computer.”

Throughout my interviews, users felt productive when they first opened Google Docs. Finding their documents was straightforward and fast: They were ready to write. But, many became confused they started to style what they had just written. They struggled to identify functions: Their initial bouts of productivity dwindled into frustration

They felt awful after trying to format.

But, what is Formatting?

Format: The way in which something is arranged or set out.

In the context of Google Docs, formatting is the styling of content in a document.

From these trends and insights of user interviews, I concluded:

People want to read and write on the go but can’t because they struggle to switch between typing and formatting functions.

Voila: The Final Interaction

To better the mobile editing experience, I separated the formatting functions from typing.

Meet Format Mode: The new home for formatting functions.

My Journey to the Paintbrush

Brainstorm

The brainstorming session left me a mountain of post its. But, it also plastered my wall with 6 potentials solutions:

1. In App Guide: A guide users can click through.
2. Two Toolbars: A formatting tool and typing toolbar both at the same time
3. User customizable toolbar: Users can set their favorite functions on a toolbar. The default would be they can see their most use functions
4. Vertical toolbar: The phone as more height than width. A vertical toolbar would be the longer toolbar but on the side.
5. Two Modes + Toggle: A new separate mode for formatting functions with a toggle entry point.
6. Search Feature: Incorporate the search feature for functions from the web version.

I narrowed my six main solutions to three after a feasibility and impact matrix.

From there I performed a SWOT analysis on the Mode Toggle, Vertical Toolbar, and User Customizable Toolbar. With the negative perception towards the mobile app, I needed a feature with high impact.

Breaking Convention: My Decision

The mode toggle did not have the highest feasibility nor impact. Its requirements, however, best tackled the people problem.

The mode toggle:

• Aims to reduce the struggle between completing typing and formatting functions.
• Separates functions by categories to highlight the functions that users felt were “missing.”
• Focuses on the functions for customizing more visual complex documents.
• Affirms Google Doc’s representations for creating professional docs.

The feasibility is lower than other solutions. But it address that users want to locate functions fast.

Users use Google Docs on the go for quick fixes. They love sharing on Google Docs because it feels effortless and easy. On their phones, users want things to be simple, mobile and feel fast.

All six potential solutions catered to bettering the app. But the mode toggle best catered to the needs I discovered in my interviews.

And, my intent is to design features that meet the needs of the users.

New Mode T̶o̶g̶g̶l̶e̶

Entry Point Explorations

Toggle: A key or command that toggles between two modes, such as the caps lock key.

My initial idea for an entry point was a toggle. The mode toggle meant to separate the two components of editing: typing and formatting. Since editing was binary in that sense, I felt binary function would best represent the entry point. Also, toggles were not foreign to Google Docs App. The toggles for “Print layout,” “Suggest changes,” “Available offline,” and “Star file” are hidden under more functions.

However, I also experimented with a direct button in many locations on the home screen and the opened doc screen.

For user testing I selected one from each category:

1. Direct Button: I chose this entry point for Flow 2 of my user testing because it mirrored the entry point for creating a new google doc (blank or template). It’s neither prominent or hidden: It’s highlighted as a subset functions before uses start editing. Visually, the smaller icon also communicates formatting as secondary. Format mode should be seen as an extension of editing.
2. Primary Toggle: It’s prominent on the screen because it’s blue and located on the upper tool bar. I was concerned with its distance from the thumb. I thought the Google Blue would create a contrast and signal what mode they could switch to.
3. Secondary Toggle: Most users open Google Docs to perform quick text edits. Thus this toggle operates on the users performing text edits first and formatting later.

After user testing, I had three core revelations about the entry point:

1. Users responded best to a direct button
2. Users would prefer a smaller entry point if it meant more space for functions on the toolbar
3. Users struggled to identify the toggle as the entry point for format mode

Okay, so a toggle was not the best the entry point

Elevating with Visual Design

I kept the direct button in my final prototype flow based on the well-received response from user testing. However, I now needed a second entry point that was explicit and created more space for functions on the tool bar.

So I switched to an icon. The icon met two out of the three conditions: it was a secondary entry and allowed more space for other functions. But, I needed to be sure that it was explicit.

I conducted polls on Slack and WhatsApp

In my earlier user interviews, I noticed that users sometime struggled to identify what functions certain icons represented. I wanted to avoid this issue so I asked users to best identify which paintbrush best looked like a paintbrush but also matched the current pencil icon.

The final result:

Integrating Format Mode

In both my typing and format explorations, I considered: 

1. What functions should be in each mode?
2. How can I fit as many functions as possible?
3. Should I change the document view?
4. Would both modes have the same upper toolbar?

I answered question three immediately: Typing mode should keep the mobile view, but Format mode should have the print layout. When users style their documents, they want to know how it will print. Thus, format mode will automatically have the print layout toggle enabled.

In both modes, I experimented with different toolbar layouts and secondary entry points.

Benefits of Format Mode:

• Text coloring/highlighting and list would be extended automatically in the adjustable gray space

Solves: These functions requires the clicking of multiple pages which makes the process seem longer. A user commented it’s not easy to format lists on Google Docs.

• Make the functions more clear, present; therefore, more accessible to the user.

For user testing I selected:

After user testing, I learned:

• Users expect the blue checkmark for saving to be in the upper left corner
• From Flow 1, Users prioritize access to function over white space
• From Flow 1, Users look for functions starting from the bottom or the middle of the screen — not the top
• From Flow 2, Users prefer to do things quickly
• From 3, Users spent more time trying to find entry point when it was a toggle

In short, buttons are best when they’re direct and their effect is immediate. My feature should not alter any pre-existing function locations in the Google Doc app.

In my revisions, I ditched the toggle and concentrated all the functions toward the bottom half of phone. I also included the insert toolbar based on feedback in user testing with flow 3 and past user interviews. The upper toolbar in format mode mirrors the open doc toolbar because users usually perform those functions when styling the document. Also many upper toolbar functions from typing mode moved the bottom in format mode.

The final result:

I could have kept the original typing mode in my final flow. But I believe in order to better integrate format mode into the current Google Doc ecosystem,

both modes should complement each other.

The Final Flow

One Last Iteration

UI Kit

Conclusion:

Looking forward

The rapid shift to remote work during COVID19 pandemic emphasizes the growing dependence on collaborative platforms. Google Docs is a very feature rich applications in the word processor workspace. Its application expands past education with templates for personal branding and business development.

Google Docs prioritizing the app experience would improve how people edit on the go. While we are currently stuck at home, I’m very interested to see how the use of app will change once the pandemic is over.

One UX experience I’m generally looking into is making text selection easier on the phone. It was dislike more specific to the phone than to the app. But, it also affected how people viewed commenting from the mobile interface.

Self-Reflections

Before Introduction to Digital Product Design, I had a very superficial understanding of what makes a good product. I loved spending hours perfecting keynote slides. I love ideating with post its. Colors and implicit communication fascinated me.

This case study captures my first encounter with product design in a formal setting. I enjoyed the research, the interviews, mocks and — especially — prototyping. Most importantly, I learned how to design for users people. I also look at physical products — packaging, shipping, cosmetics, food — in a different light. I’m able to better deduce the decisions that created the objects I use everyday.

Thank You Introduction to Digital Product Design.

I am beyond grateful for every mentor and friend I met throughout this project.

Want to learn more?

If you’d like to become an expert in UX Design, Design Thinking, UI Design, or another related design topic, then consider to take an online UX course from the Interaction Design Foundation. For example, Design Thinking, Become a UX Designer from Scratch, Conducting Usability Testing or User Research — Methods and Best Practices. Good luck on your learning journey!

You made it to end. Thanks for reading. If you liked the article, give it a clap and a share!

About me: I’m a freshman in Cornell’s College of Engineering. I hope to be a full stack engineer who “creates, designs, codes and builds for everyone.”

This is a case study for Introduction to Digital Product Design class. I have no affiliation with Google. I’m always open to feedback: Leave a comment or shoot me a message.