Fostering focus for small screens
How we redesigned Dropbox mobile for rapid work
Think about what it’s like to do work on your phone. Your attention is fragmented. Your chubby thumbs keep hitting the wrong letters. Often times, you just want to get back to real life, whether that’s sitting down to dinner with your partner or picking up a conversation with your gregarious lunch buddy.
If you start with that vision, the solutions you come up with for mobile work become rather unique. You’re no longer designing to extend engagement or keep customers in the app. Rather, you’re helping people get in and out and done. You’re zoning in on the problem of focus and empowering customers to get the most out of that little moment on a small screen. You’re designing for rapid work.
Over the past year, we’ve revisited our mobile experiences with rapid work in mind. Here are a few things that we’ve done to make our customers more productive AND more present for their gregarious lunch buddies. We hope it’s a help and an encouragement for others who might be looking to do the same.
Find familiarity between platforms
A decade ago, Dropbox took advantage of converging patterns on desktop operating systems. By leveraging the commonality of desktop file browsers, Dropbox was able to present the same “magic folder” experience on Macs and PCs.
With our recent mobile redesign, we’ve taken advantage of a similar convergence that’s happening on iOS and Android. By utilizing patterns shared by both operating systems, we’ve created an experience that feels familiar on both platforms. Customers can switch phones and hit the ground running without having to learn a new UI. Teams can use different operating systems without troubleshooting divergent interfaces. Fostering familiarity enables fostering focus.
Distill icons
Seven months ago we released a new set of file icons designed to improve readability and focus when retrieving files. We asked ourselves questions like, “What makes an icon recognizable? How are icon types differentiated? How can we distill shapes and forms so that customer’s eyes don’t have to work so hard?” Guided by the same questions, we’ve updated all the icons in the mobile app to reduce complexity and increase readability. Small details like these add up to improving focus when completing quick tasks in the app.
Expose entry points
Moving between screens on mobile takes a lot more work than on desktop. Without multi-window support, every view on mobile takes up the entire screen. So when it comes to navigating across multiple screens, it can feel like a tedious dig to get to where you’re going. If you’re trying to get work done fast, that can be frustrating.
That’s why we’ve exposed the commenting input field right on the file preview (previously, you had to tap a speech bubble icon). By elevating the entry point higher in the navigation stack, we’ve revealed a valuable utility and decreased the amount of time it takes to respond to collaborators.
Simplify surfaces
Not long ago we released a new Home screen in our app. The goal was to help customers jump into work by surfacing sections of timely content. But the way we were showing the information was problematic. By increasing the number of distinct sections on the screen, we had inadvertently increased the time it took a user to make a decision (see Hick’s Law). And by structuring the sections in a vertical stack, the most used section (Recents) was often pushed off the screen by other sections!
Our newest version of Home fixes these problems by defaulting to a full page of recent files while the other sections are accessed via tabs. Now, customers can focus on the most valuable method of retrieval from the moment they open the app.
Spell out significant actions
When you want to share a folder with collaborators, you shouldn’t need to interpret icons to figure out how. That’s why we’ve shed extra light on sharing by providing a prominent button at the top of each folder and replacing the share icon with the words “Share.” Just another simple change to get you in and out.
Centralize changes
As the place where customers keep their most important files, Dropbox has the ability to keep track of all the activity happening on those files. Today, we’ve exposed that ability through a new file activity feature. This means that you never have to ask your teammate again if they’ve “made those updates yet.” With this feature, you’ll know everything that has happened on a file. No need to sleuth through email threads or Slack chats. And no need to break your teammates’ flow either.
Conclusion
We know how frustrating it can be when the small screens we use for work feel more like barriers than tools. That’s why rapid work is something that we’re always pursuing in our mobile designs. Because when customers can find focus fast, getting work done on the go feels like having superpowers.
We hope the examples shared here encourage you to explore the same approach. Let us know how you’re making people more productive and more present through fostering focus!
Want more from the Dropbox Design team? Follow our publication, Twitter, and Dribbble. Want to make magic together? We’re hiring!
