uxdesign.cc – User Experience Design — Medium | Darren Head

Rethinking Google Drive’s “Move to…” feature [UX Challenge]

🎁 Freebie: Download Sketch & Principle files for Google Drive

Redesigned “Move to” feature in Google Drive

TL;DR

What fascinates me most as a UX designer is how there are many approaches and ways to solve a design problem. Most of what I’ve learnt throughout my career has been attributed from what other designers has shared within community, particularly “Process”.

For that reason, I’d like to share how I improve my design process by setting UX Challenges.

I’ll go into details on how I designed a new interaction for Google Drive’s Move to feature. I’ll take you through my UX process from start to finish, detailing how I researched, designed and animated the solution as well as the tools used throughout.

I’ll also give tips and tricks on how you can set UX challenges to improve your interaction design skills.

I noticed there’s no 🎁 Sketch or Principle freebies out there for Google Drive, so find download links at bottom of this article 🤑 ⬇️

The Back-story…

Google Drive is a tool I use everyday, both at work and for personal use. I’d even go so far to call myself a 💪 Power User. However, I can’t help but feel that one interaction in particular has been overlooked, the “Move to” feature.

How does “Move to” work now?

Move to allows users to relocate folders and files anywhere in their Drive. The easiest way to access this feature is to right click on any folder or file and select the Move to item in the dropdown menu.

Pied Piper’s Drive 🤓

A small pop-up then displays enabling the user to select a folder to move their selected file to.

The pop-up is so small you’re expected to navigate through your entire folder structure by clicking tiny left and right arrows. FAIL!

This is a problem… my folder structure is so complex that some paths can go 9 to 10 folders deep!! Clicking and navigating in this tiny panel is beyond tedious, and in my eyes takes an age to find the exact folder I’m looking for.

Move to’s Pop-up

Ultimately, I can achieve my end user goal (moving folders and files), but it takes a significant amount of time.

Call me curious 🕵 ️but I think there’s a better approach to this interaction.

I can see 3 problems with this interaction:

1. Lack of space and screen real-estate
2. No recommendations or search —🤦 c’mon Google
3. Loss of productivity & time

For that reason, I’ve set myself a UX Challenge.

✍️ UX Challenge

Create an experience where users can quickly move folders and files through recommendations and search using Google Drive for Web.

Before taking you through my solution, there’s some things to note…

This is a specific, personal use case, and I have no data or research to support that this is a real problem the Google Drive team need to solve.

At this stage, I can only assume that other Google Drive users are experiencing this problem. Of course, I’d love to undertake user interviews, surveys, questionnaires etc. to identify if this is a valid problem to solve. But for the sake of brevity… I’ve used my personal experiences with Google Drive to provide an alternative solution for moving folders and files.

UX Process

For this challenge, I’ve used common UX practises to research, construct, craft and explore new approaches to solving the problem. To give you some background, my typical UX workflow looks like this:

UX Process

As mentioned above, its quite hard to justify without any real user data that this is a significant problem to solve. For that reason, User Surveys, Personas, Stories, Cases and Scenarios are based on my own personal experiences—biased data I know, but at least it’ll give you guys a chance to see how I work through these steps 🤓

UX Toolset

I like to use a variety of tools throughout the UX process, but most of all I aim for speed and productivity—I find the tools listed below work seamlessly together.

Try experiment with new tools — efficiency and productivity is important.

1. Swipies: An awesome mini whiteboard to quickly sketch ideas. A must have in any UX designers toolbox ✍️
2. Sketch: The #1 UI design tool that designers have come to adore ❤️ it just keeps getting better and better with every update 😍😍. Nested symbols is a game changer✌️
3. Craft + InVision: Props to these guys, they have x10 my workflow with their integration with Sketch. Prototype, sync, collaborate, inspect… just so many awesome features to maximize your design workflow. Definitely a must when it comes to speed and productivity.
4. Principle: Quickly… and I mean quickly create awesome looking animations and motion designs. Import Sketch designs directly to Principle and create animations in seconds by simply moving components on artboards. Unfortunately there’s no symbol support for Sketch imports but I’m sure this is on the horizon 🌅

OK, back to the problem at hand “Rethinking Google Drive’s Move to feature.”

Research & Inspiration

Before undertaking any new design challenge, I like to gather as much information as possible.

Yes, UX designers need to undertake desk research too 👨‍💻

“I probably spend more time researching and analyzing information than actually pixel-pushing.”

To do this, I first understand what current solutions are being used and adopted. I zoned in on how apps use recommendations and search in their products. I put these inspirations into an InVision board to quickly scan and identify patterns.

Click here to view the board `Google Drive’s Move to…`

As Drive is a Google product, I had to ensure the solution I put forward was consistent with the current experience. I decided to take a deep dive into Google land, researching how they’re innovating with design and technology.

The great thing about Google, is that they have tons of free resources available, the below came in very handy:

• Google Design
• Material Design guidelines
• Google YouTube channels
• Google Blog
• MaterialUp (not Google but great for material design inspiration)

But, one resource in particular really caught my eye, a talk from Google Cloud Next.

Mike Procopio, explains how Google Drive uses Machine Learning to create a smart feature called “Quick Access”.

The dudes at Google found a way to show, in the moment, recommended files to users inside Drive.

Quick access files are shown above your files list—front and centre

For example, if you always have a sales report to publish on a Friday, they’ll show it front and center to access on every Friday—simples! There are some other smarts that Mike goes on to explain but one finding in particular was very interesting:

“Quick Access gets users to their files 50% faster.”

Woahh, what a metric! If I could incorporate similar functionality into my solution it’d help me tackle the problem of lost productivity and time when moving folders and files.

Inspiration from Inbox by Gmail

From the get go I wanted my solution to be familiar to all Google users—UI consistency was paramount. As Drive adopts Material Design I researched how other Google products did the same.

Inbox by Gmail gave me some great inspiration, particularly the expansion panels and carousel items within email messages.

Users can quickly open and close email threads while previewing attachments through a carousel.

I blanked out some emails as they have personal information 🔕 (crappy gif, sorry!)

I thought this could help solve two of my main problems, by:

• Expanding the screen real-estate when navigating folders
• Offering folder recommendations using Quick Access’ carousel navigation

Assumptions & Questions

Moving on, the background research coupled with my inspiration boards helped me craft user assumptions and questions.

Assumptions

1. Users want to move files quicker.
2. Users want recommended folders to move their files to.
3. Users want to search for the exact folder they’d like to move their file to.
4. Users want more screen real-estate when moving files.

Questions

1. Can users move files quicker than the current solution?
2. Can we provide recommended folders in 300ms or less for speed and efficiency?
3. Can we use existing material design components for UI consistency?

Setting Key Performance Indicators (KPIs)

“On average it takes me 20-seconds to find, locate and move a file to a selected folder.”

Could my solution do that in under 20-seconds? I tried to be ambitious and match Quick Access’ 50% faster metric:

Core KPI for the redesigned Move to…

“Users can find, locate and move any file, to any folder, within 10-seconds.”

Always measure your designs through KPIs, it will help you validate your assumptions and questions, especially when it comes to user testing.

User Surveys

After defining a few assumptions and questions, it’s good practise to undertake a user survey to truly understand what users think of the current feature and how they interact with it.

I’m using myself as a survey respondent, but check out this Google form for the types of questions I would usually ask in this situation:

Typically, for surveys it’s good to use open-ended questions to gain more qualitative data rather than closed questions. Nielson Norman Group comment:

“The most important benefit of open-ended questions is that they allow you to find more than you anticipate: people may share motivations that you didn’t expect and mention behaviors and concerns that you knew nothing about. When you ask people to explain things to you, they often reveal surprising mental models, problem-solving strategies, hopes, fears, and much more. Closed-ended questions stop the conversation and eliminate surprises.”

For more info on user surveys, check out NNGs great article on when and how to use open and closed questions in surveys.

User Personas, Stories, Use Cases & Scenarios

The survey (on myself 🤣), coupled with my competitive analysis and inspiration links helped me craft user personas, stories, scenarios and use cases. This task enables me to empathize with potential users, thinking from their perspective. It helps me understand what steps users actually go through when moving folders and files in Google Drive.

I have added Google Doc links below for your review:

1. User Personas →
2. User Stories & Use Cases →
3. User Scenarios →

The main premise is to expand your UX thinking and critical analysis, while trying to remove any personal bias and opinions.

💡Ideas are brimming…

By determining the above user scenarios I was already beginning to visualize in my mind how to approach this challenge.

A primary goal of mine was to integrate existing Google infrastructure and design into the final solution. From my research, I recognized an opportunity to include Quick Access’ file recommendations as well as Google Inbox’s expandable panels to maximize screen real-estate.

Example of a material design expansion panel

At this stage, I thought that combining both these aspects into a single, expandable list item could be a possibility. Something definitely to experiment while sketching and ideating.

Horizontal Carousel Items

Currently, Quick Access only shows a maximum of 5 recommended files, however, what if there were more folder recommendations to show in my solution?

Similar to Inbox’s Carousel, Google Search for web had a similar UI interaction. Results show a horizontal scrolling carousel with mini-fab buttons to move results left and right. I thought this would be a great way to show more recommended folders that don’t actually fit the width of the UI.

Carousel in Google search results for web

My thinking was that through Machine Learning, folders would rank most appropriate from left to right, and if users wanted to see more they could click the mini-fab buttons to scroll further.

Side note: Technical implementation would need to be researched and discussed with a SW engineer, mainly to confirm load time, recommendation rankings and maximum of folders to show. Mike Procopio explains more on this in the NEXT video as posted above ⬆️

Expanding Search Bar

For Search, I also thought this could be included into the expandable list item, although I needed to think of a way to swap to a search state, especially when the list item is expanded.

This animation from my inspiration board came in useful, and thought could be a possible interaction to consider when ideating.

Expandable search in one component

User Flow

Consolidating the above ideas, I prepared a user flow to understand the end-to-end process for a user to complete the task of moving folders and files.

This step helps me understand the amount of clicks, interactions, components and screens needed for the entire interaction.

Low Fidelity Designs

After determining the user flow, I began sketching quick wireframes to visualize how an expandable list item could work, while including a carousel and search function inside.

I used Swipies to sketch by using a technique called Crazy 8’s (inspired by Design Sprints). This process enables me to remix and improve ideas, helping to get to the best possible solution, lightning fast!

Running design sprints in the past has helped me realize that remixing and reworking already successfully designed interactions usually garners the best results. A technique I learnt from the folks at GV and authors of the Design Sprint Book: Jake Knapp and John Zeratsky—great tip 🙌

I used my inspirations from Quick Access, Inbox by Gmail and Google Web Search Carousel to remix and improve the functionalities for my solution.

After about 30mins, I had sketched over 35 screens, with about 4–5 designs that I thought could work.

Expansion Panel — Drawn with Swipies

A quick snap on my smartphone, I imported to Sketch and began the next step of creating hi-fidelity designs.

Visual Design & Prototyping

Now, you wouldn’t be reading this article if there wasn’t something in it for you. I recreated the Google Drive UI in Sketch exact to the Material Design guidelines—yes 8px grid and all. Download at the bottom of this article.

No Symbols are included in the Sketch file as they don’t work with Principle. If you’d like a symbolized version please sign up to my UX Challenge Club newsletter or email me 📨 hello@uxchallenge.club

Sketch & Design Systems

I won’t go into the details on how to use Sketch, there are tons of resources to get you started. Although, I will say, Sketch’s nested symbols has paved the way for creating simple, consistent and easy to manage design systems.

See below for a list of great resources:

• Atomic Design →
• Creating a design system →
• InVision Sketch Tips & Tutorials →
• UX Power Tools →
• Sketch Repo →
• SketchApp Resources →

High Fidelity Designs

I created 5 core functionalities from my lo-fi sketches into hi-fi, clickable prototypes, directly in Sketch.

1. Expanded List Item
2. Selected Carousel Item
3. Search Expanded
4. Search with an Empty State
5. Move Completed

Expanded List Item + Search + Move to Complete

Can you spot any Silicon Valley easter eggs in the designs?

👀 Self Critique & Feedback 💬

If I find an interaction is not working, I’ll take a step back in my UX process, either adjusting the user flow or lo-fi sketches.

The goal is to design the best solution, not the fastest! If you find something out of place, or uncomfortable with what you’ve put forward, then you’re user will too. Speed can only take you so far!

Always self-critique and benchmark against your earlier assumptions, questions and KPIs.

Asking for quick feedback from your friends and co-workers helps too 😀

User Flow → Visual Design → Prototyping

I recommend creating screens for each step in the user flow, mainly as this sets up all your interactions for prototyping with InVision.

Clickable Prototypes 🎯

Prototyping allows you the designer, as well as the end user, to experience a “mock interaction” of the solution. There are many prototyping tools out in the market, although none are as integrated into Sketch than InVision.

InVision is a all-in-one prototyping, collaboration and workflow platform. They have even created a Sketch plugin called Craft that integrates directly with their prototyping software. They say it “Supercharges your screen design”, and I’m not lying, it actually does, x10 in fact. The plugin is so helpful I can do all my design and prototyping directly inside Sketch.

I’d recommend experimenting with new tools when you can, but only if it adds value to your process (e.g. speed, time, learning curve…).

“The faster you are at the tool and the quicker you are at doing things that are boring, the more time you can spend on real design problems and actually innovating and solving the things that the computer can’t solve.” — Jay Wong

Spend more time on the design problem than actual pixel-pushing!

So how does Craft work?

Craft has 7 core features, but in truth I really only use two:

1. Craft Prototype
2. Craft Sync

Craft Prototype helps me create clickable prototypes by linking layers to artboards, while Craft Sync helps me upload artboards from Sketch to InVision directly.

Previously, I found the InVision app quite frustrating to create clickable hotspots, as it was really buggy🐞—but using Craft Prototype directly in Sketch, it has easily saved hours off my work.

I’d recommend linking up your artboards this way rather than using the InVision webapp.

Linking components and artboards using Craft Prototype

Pablo Stanley from Sketch Together gives a great tutorial on how to use Craft Prototype, definitely check it out:

Using Craft Sync

Craft Sync helps you take your linked up and hotspotted artboards and turn them into a clickable prototypes in InVision.

Again all the heavy lifting can be done in Sketch where you can create new InVision projects or even update existing ones. Hit sync and automatically watch your screens appear in InVision.

All that’s left to do now is review, share and get feedback on your prototypes.

Syncing Sketch Designs to an InVision Prototype

InVision recently published a tutorial too, I’d recommend giving it a read also → http://ift.tt/2sLw5lQ

Prototype for Move to…

Check out my InVision Prototype for Move to, notice how we can mock an interaction for moving folders and files in Google Drive.

Click here to view the project `Google Drive – Move to…`

You’ll be able to:

• Expand Drive list items into an expansion panel
• Navigate through folder recommendations in a carousel
• Search for folders inside the expansion panel
• Complete the move to action from within inside the expansion panel

You’ll see that InVision does a great job mimicking a static interaction, however, they’re still just screens connected through hotspots. The interaction is quite jumpy.

To take it that one step further in it’s fidelity, I want to see what the transition will look like from list item → to → expansion panel—that’s where animation and motion comes next.

Animation & motion with Principle

My go to tool for UI animation is Principle for Mac. I’m amazed at how anyone can create awesome interactions in seconds.

For your bookmarks checkout these awesome tutorials and guides on how to get started with Principle:

• Principle Repo YouTube Channel →
• Maex YouTube Channel →
• Article: Designers Guide to Principle for Mac →
• Principle Repo →

For my Move to interactions, there were three in particular I wanted to experiment with.

1. List item to expansion panel transition

1-click to close

2. Carousel scrolling for recommended folders

Recommended folders using a carousel with mini fabs navigation buttons

3. Expanding Search inside the expansion panel

Search + Empty State + Result List

Final Result 🏁

With this redesign, there are two ways to complete the Move to action.

1. Move to… Recommended Folder

2. Move to.. via Search

I’d love to get your feedback in the comments, please leave a reply and let me know what you think 🙏

In the end, I felt I could solve 2 of my problems:

• ✅ Larger screen space & real-estate
• ✅ Recommendations and Search
• 🚫 Increased productivity & time

Unfortunately, I cannot completely say if I can speed up the process of moving files. I’d like to say Yes I can, but to truly get validation I’d have to actually use real data, code up a solution and get feedback.

🤗 2 out of 3

I know it’s partial (biased) validation, but I think there is still room for improvement, plus some trade-offs to discuss.

Trade Offs & Improvements

There could be a better way to display exactly where a selected folder is when moving files. By this I mean, when you are in move mode, the folder you select doesn’t show where exactly you’re moving to. Right now I’m thinking that using breadcrumbs could be a solution, but that would be assuming.

I created a quick design concept, but would like to experiment further.

Breadcrumbs Selected Folder Concept

Starting the process again…

I’d like to go back in my UX process, particularly to the research and inspiration step. This will let me see if there are other possibilities to experiment with breadcrumb navigation.

This is what I love about interaction design, it’s never finished… you come across new problems or challenges that didn’t exist before, and a lot of the time it’s because of your own doing.

It sounds so cliché, but interaction design is a lot like fashion—it’s never finished!! There are numerous possibilities and ways of solving a user problem. As designers we always need to experiment, test and repeat.

📱What about Mobile?

I never explored Move to for mobile. Google Drive on iOS and Android are very similar, perhaps this could be a UX challenge for the future…

User Testing + Validation

Well to be expected, I tested the solution on myself, so a lot of personal bias. Although, if you would like to leave your feedback, please let me know what you think in the comments. It will help validate a few of my earlier assumptions and questions.

So can I validate my core KPI?

“Users can find, locate and move any file, to any folder, within 10-seconds.”

Unfortunately, no 🚧 I only tested on myself and it is just an interactive prototype—no real data. However, if my user testing did show positive results e.g. my assumptions and questions were met, then this would represent a strong case to move to the next stage of fidelity 🚀 actual code ⚒

Again, if I couldn’t validate, it’s back to the drawing board, returning to the competitor analysis, research and inspiration phases in the UX process.

User Testing

It’s imperative to undertake user testing, particularly to remove any personal bias and opinions. You’re building products for users, real people, humans! They help validate if the solution your putting forward is really solving a problem for them, that is the crux of validation.

You might ask yourself, well how many users do I need to test with? Neilson Norman Group analyzed 83 studies and plotted how many problems were discovered after differing interview sample sizes (10, 20, 30 people etc.)

They found that:

85 percent of the problems were found just after 5 people

http://ift.tt/1k9B8DI

This is a great starting point for any product or service! I always try use a minimum of 5 user testers when I can.

However, ensure the users you select, fit your target. The User Personas I created before helps determine who these types of users could be.

How can I get started with user testing?

I’d recommend reading Michael Margolis Medium articles, he’s a partner at Google Ventures and gives great insight into how to recruit, schedule and interview participants for user testing.

🎁 Sketch & Principle Freebies

And that’s the end of my UX Challenge. Please download Google Drive freebies below:

Sketch Download 🎉

Principle Download 🎉

These files are also available for download on my Dribbble and UpLabs profiles.

Setting your own UX Challenges

Looking to 🔝 up your Interaction Design skills? Try setting yourself a UX Challenge. I find it has 3 main benefits:

1. Improves technical skills and UX process
2. Broadens your perspective and critical UX thinking
3. Improves how you communicate and describe your design thinking

Job Interviews

If you’re searching for UX jobs, companies such as Facebook, Google, Amazon, UBER are setting UX Challenges as part of the interview process. This is to gauge your understanding on how you solve design problems. I‘d recommend setting yourself a UX challenge as practise, you’ll only get better over time. If not, it’ll be a great piece to show on your portfolio.

How do I set UX Challenges?

I find the best way is to recognize problems you experience in your day-to-day life. It can be absolutely anything!

For example, I’m considering for my next challenge to design an experience where people can find open seats in coffee shops ☕️

👱 My Personal Experience

I live in Tokyo🗼 and it’s extremely busy — like all the time! 35 million people in one city, seats in public places are in high demand!

For me who loves working in coffee shops, I always find it difficult to locate open seats 💺 If only there was a way to search for coffee shops with seats that are open in real-time? I’ve done a bit of research, and with the rise of IoT devices, there is already a way to detect when someone is sitting on a seat. If I can take this data and create an experience around it, I have myself a starting point. There are many technical questions to consider, but I’m a UX Designer, so will focus on this aspect.

😡 Identifying Pain Points

You’ll notice I’ve identified a personal pain point, conducted some research on it’s feasibility, and then translated that into my skill set that is UX Design.

Similar to the Move to challenge, I recognized a pain point with Google Drive, identified it was affecting my productivity, and translated solving that problem with my skillset.

🚀 What can you do to get started?

Think about your personal experiences in your day-to-day life and write a list of your pain points. I try to write at least one pain point a day. After a week, I review the list and choose the ones I’m most interested in solving. I usually select challenges that will personally help me, or ones that are quite differentiated, hence “Rethinking Google Drive’s Move to… feature” and “Finding open seats in coffee shops”.

👹 Selfish Promotion

If you enjoyed this read, please ✍️ sign up to my UX Challenge Club newsletter.

My goal is to complete one UX challenge a month, while sharing as much UX related material with the design community.

All challenges come with 🎁 Free Sketch and Principle files for you to download. By doing these challenges, I hope to share in my learnings and connect with awesome designers across the world ✌️

🤷 Who is Darren Head?

I’m a UX Designer at AIR.

Currently, I’m working on a new project with the aim to create better people connections at work through the use of short team games 🕹️ 🎲. If you’d like to be a test user for this MVP, please get in contact with me or register with this Google Form →

I also work on another product called Vibe, a team morale meter for Slack. Sign up now and get free access to Premium for 1-month. Understand how topics, emotions and people are all connected 🤑🤑 try it for free →

And Finally… Thank You 🤞 有難うございました

🙇 Thanks for stopping by, I know it’s a long post, but I hope you managed to take something away from this (especially my mum who thinks I design the entire internet).

See you next time 👋 また今度ね 👏

Rethinking Google Drive’s Move to… feature [UX Challenge] was originally published in uxdesign.cc on Medium, where people are continuing the conversation by highlighting and responding to this story.