Gmail App Case Study

The challenge: improve on something I use everyday
Time to make: 1 day
Tools used: Principle and Sketch

Ideation Process

The way I see it, when dealing with an existing product, you can either Add Features, Remove Features, or Re-arrange Features.
You can use the same mental model for visuals. You can either Add Color/Shapes, Remove Color/Shapes, or Re-arrange Color/Shapes.
With these two models in mind I looked at which tools I used absolutely every day. Because I'm more skilled with mobile apps I limited to products to Apps. I chose Linkedin, Principle, or Google Maps.
Then I asked myself these questions:
What is something I usually do?
Why do it do it?
How do I do it?
Ideally is it possible for me to have a better experience?
I finally ended up choose Gmail.
The Problem

Whenever I apply for a job, I find myself sending out my resume and it's very tedious. Most of the time I'm on my phone and the process of finding the exact file takes too long. Google drive is really smart and Iʼm sure my files are indexed really well, but it still takes too long even with the native apps. Searching for the file is easy...once I actually get to the searching part. However, I'm always attaching the same file. I wished that there was an easier way to attach the same file to an email.
current way of doing things

What if you could type a colon “:” followed by the file youʼd like to find and instantly search for it? Would this speed up the time it takes to find a file? What if you could set up contextual links based on keywords you define? Would this improve the experience?

Step 1

The first thing I usually do is to prototype the initial interaction. In this case, that
interaction is a colon “:”. Also, I want to keep the motion and design material.

Step 2

The next thing Iʼll do in this this case is fit in a persisting design. Using Google Drive's current design makes sense and keeps you focused on the task which is finding a file. Youʼll notice that if you hit the space bar after the colon, it stops searching. I learned this from showing my roommates the design and asking around. I like to get feedback as early as possible in a project.

Step 3

I posted this video to several design Facebook groups Iʼm involved with and got a lot of great feedback including some great points from a UX Engineer at Google. Nearly everyone was saying that dragging a file into the email was not a good idea. It wasnʼt intuitive and it was unexpected to them. Based on this feedback I had to think up a way to swap out the drag functionality you see below

Final Step

I added tap interaction and added text to make more clear what the interaction was intended for. Below is the final result of the quick 1 day project. The full idea is that in order to add a file, wouldn't it be so much easier to just tap ":" and then search for the file? You can even link the file using a keyword. So, every time I type :zachresume for instance, the file that I've previously linked will be automatically inserted! If only that existed...
Back to Top