Google Suite Design Exploration

An exploration of how access to the entire Google Suite can be integrated into Google Suite apps.

✍ How did this project get started?
Due to my teaching responsibilities I am a frequent user of the Gmail and the remaining Google Suite. I am usually replying to doubts, setup appointments and taking notes all on the go. This experience in-turn has made the designer in me keen to explore how the app can be improved for professionals like myself in the field. Below is one such exploration I completed. 
Timeline: 1 day
Team Members: 1 (Just me)
My role: Rapid Prototyping, UI Design
Tools used: Adobe XD
📨 Gmail Gets an Update
I recently opened Gmail to notice that it had received a design update to match the design update it gave its web version last August.
💻 A missing feature for productivity
I liked the approach to achieve consistency across platforms but noticed something was missing. You did not have the ability to access your Calendar or Keep (Notes) or Tasks right from Gmail App itself as on the website. I did understand the constraints and space, but felt this was a feature which could be extremely helpful to users.
🤔 Why did I want to explore this problem space?
I liked the challenge of tackling a space constraint for introducing access to productivity tools. After all, I had explored this space earlier in August 2017.
At that time, Google had released new bottom navigation guidelines on it's Material Design website. Excited by the new guidelines, I was motivated to explore integrating productivity features by introducing a bottom navigation bar for Gmail (image below). At the time I had shared it on my Dribbble account and on Facebook design groups and did not think much about it after.
However this seemed like a perfect opportunity to re-open this exploration.  

A design exploration I had completed in 2016 made me motivated to revisit this topic

📝 The Plan
This was an exploration during my time at college, I did not have enough time to do an extensive user research sprint. To overcome this I decided to conduct short interviews with friends, read the Gmail forum, conduct a heuristic evaluation of the current mobile application, after which I would prototype. This by no means is a recommended substitute for user research in a large scale design project. 
💬 Rapid User Interviews
I conducted short interviews through chats and video calls with five friends of mine. This was a good opportunity to understand their needs and frustrations and also asked them for their thoughts about my previous design exploration. 

Some of the feedback I received for my previous design exploration

👨‍🎨 Design for Customization and Productivity
One recurring theme I noticed through my interviews, online research and my own personal experience is that we all have different preferences and desires for our workflows to make us more productive. The desire for different tools was evident. It would be foolish to try and add all the tools and call it a day, however, we can definitely consider features users could opt-in for. Therefore, I decided that the theme for this design exploration would be to Design for Customization and Productivity.
🚫 Why a No to Bottom Navigation?
In my previous design exploration, I had already explored the use of a bottom navigation bar to incorporate access to Google Drive, Calendar, etc. This time I wanted to think of something new. This was because it caused clutter and not every user would want all of these functions.
🎨 A trip to the Stationary Store
Google’s Material design language has been inspired by the use of stationery. This is exactly where I found inspiration for my first idea of function flags. I was looking around my room and noticed the post-it flags we use when tagging something important or our favorite ideas when sketching. I felt what if we could introduce these into the Material UI of Google.
Each user would have different desires and functions they would like to access. What if a user could add in functions of their choice by adding function “post-it like flags” on top of their already existing paper presenting their email?
✏️ Low-Fidelity Ideation
I spent the next thirty minutes making a low-fidelity prototype of this idea to try and answer this question. I wanted to focus on the core concept and wanted to see how this would scale depending on the number of functions a user wanted to include. 
While the above redesign was similar to introducing a navigation bar, it seemed interesting to me because of actions being customizable. More importantly not every user would have the same number of flags with some users opting to have no flags at all. However, I did realize these flags compromised the readability of all emails. This worried me initially but I realized that a user cannot have everything and there needs to be some form of compromise if they wish to get these features. I hence decided to go ahead and create a high-fidelity prototype of this design.
🖥️ High-Fidelity Ideation
Exploring the Shape of the Switcher
Shape and form for me are key when transitioning from paper to screen. I hence started by exploring the different shapes in which I could hold the buttons in a drawer and hence made different shapes for the switcher.
The rounded corners design (to the right) was more in-tune with the direction the new Material design team was taking. 
Exploring the Position of the Switcher
I continued by then exploring the positioning of the post-it tags further and created four iterations placing an app switcher on different sides of the bottom half of the screen. This helped me in identifying that the right position was most optimal to continue exploring as it was the most non-intrusive to the user scrolling. 
It would also be the easiest solution for the user to swipe left which mimics the horizontal direction of opening a draw of items. 
Exploring how the switcher would look in different Google apps if introduced
I then continued to explore how this could look in different Google apps. One key challenge I noticed was the contrast. Google had shifted to an all white approach in their Material Design revamp and hence was a trade-off I made to ensure consistency.
Making the Prototype Interactive with motion!
The last challenge was exploring the motion of the switcher. Adobe XD had recently launched it's Auto-Animate feature which I was a big fan of and I thought this was the perfect opportunity to put it to the test. 
You can interact with it yourself below!
Back to Top