Desktop prototyping
How setting plays an important role in designing for desktops
At Dropbox, we design many interfaces that users experience on their desktop computers. What’s special about desktop design is that we can’t predict what the user’s screen will look like — messy desktops, noisy wallpapers, hundreds of Chrome tabs, the list goes on.
Despite knowing that most desktops are cluttered and full of distractions, I’m so often guilty of presenting my work as if it were on display at the MoMA.
Soft-pastel backgrounds, chromeless browsers, and no desktop noise all add up to a beautiful but unrealistic setting.
Designing for the real world
While it’s great to present work in a sanitized format, it’s also important to remember that those scenarios don’t actually exist. In fact, a user’s environment is usually a busy, distraction-prone space.
New emails coming in by the minute, calendar alerts telling you to run to your next meeting, and dozens of Chrome tabs nagging you about tasks you shouldn’t forget. It’s a wonder anyone gets work done.
Simulating a desktop
At Dropbox, we found that simply presenting our work with a realistic desktop environment behind the design surfaced new ideas and challenged the way we thought about desktop interfaces.
So to make it easier for designers to place their work on a desktop surface, we created a Sketch template with a few basic macOS and Windows desktop environments.
This Sketch template made it dead-simple for designers to drop their designs into a believable macOS or Windows desktop environment before printing it out for design critiques. While the added context helped, we found it was missing a crucial aspect — ⏰ time!
Adding the dimension of time
What happens before, during, or after a user interacts with an interface is almost as important as the actual interface. Working on the Dropbox installation flow, here are a few questions we need to ask:
⏮️ Before: Why are they installing Dropbox? Did an impatient client just email them a link to a Dropbox folder and they are installing Dropbox to access the folder?
⏸ During: What applications do they need to access when they install Dropbox? Do they need to switch between Safari and Finder to complete the onboarding?
⏭ After: What distractions pull them away from installing Dropbox? Were they mid-way through the onboarding flow when a Calendar alert reminded them to call a client call in 5 minutes?
Questions about what a user is experiencing before, during, and after they encounter your designs can help you prioritize. For example, if a user is installing Dropbox right after being invited to a folder, maybe the onboarding should point out that new folder.
Prototyping is time consuming and it’s impossible to catch every scenario. Don’t let that scare you off, though. Even presenting work in a single, plausible scenario can focus the type of feedback you get from teammates and can help you uncover new ways to improve your final design.
A kit for prototyping
Having experienced the benefits of presenting my work in a realistic desktop prototype, I wanted to encourage other designers at Dropbox to try the same.
My first idea was to simply expand our Sketch templates and use InVision for the prototyping portion. This didn’t quite hit the mark. The final prototypes didn’t feel realistic and basic system level actions like drag-and-drop weren’t possible.
Since Framer was my favorite tool for creating desktop prototypes and the Dropbox team already actively used it, I decided to make it our go-to tool for desktop prototyping. With the help of our Design Systems team, we built out a kit of reusable Framer desktop components. It included all the building blocks our team might need to prototype realistic macOS and Windows environments.
We released the kit internally a couple months ago and our design team has found it to be a great starting point for quickly creating realistic desktop prototypes. Our hope is that we continue to push each other to ask challenging questions about what happens before, during, and after our users interact with our designs.
Download our Framer Desktop kit
We want to see the design community benefit from the weeks of work that went into this prototyping kit, so today we’re publishing the Desktop Kit on the Framer website! Head over to framer.com/resources to download it.
Here are some tips to getting started with the Desktop Kit:
The Design tab
The first thing to notice when opening the kit is that the macOS and Windows 10 applications are drawn right on the Design tab. This drastically speeds up the learning curve and gives people who are more familiar with Sketch an easy place to start.
In fact, each piece of desktop UI has been hand-drawn in Framer, down to the tiniest of icons. This makes customizing the kit a breeze and is a huge testament to the flexibility of Framer.
The Code tab
For each application, you’ll find a set of corresponding functions on the Code tab. These code snippets allow you to do things like set the operating system, open and close applications, and throw in system alerts.
What’s more is that you can switch between operating systems in seconds. Every application and system alert in the Desktop Kit has both a macOS and Windows 10 version. It’s never been easier to see how your design looks in a Windows environment.
A few examples to get you started
In the Desktop Kit you’ll find everything you need to create the following examples. On the Code tab, just double click on an example and uncomment the code inside to activate it.
1️⃣ Announcing a new feature
Imagine you’re designing a landing page for a new product, like Dropbox Showcase. It can help to understand how a user first gets to your design. For example, what if an alert prompted them to open a promotional email which then linked to your landing page.
2️⃣ Onboarding with distractions
We often assume that users have all day to finish our beautiful onboarding flows, but real life tends to get in the way. This example simulates a busy desktop environment with an alert reminding the user of a meeting in 5 minutes. Seeing an onboarding flow under this light may help you keep your onboarding simple and to the point.
️3️⃣ Multi-window interactions
In this example, a user adds their first file into the Dropbox folder which prompts them to view the synced file on dropbox.com. When designing user journeys that span multiple surface areas, it can be very helpful to see the entire experience in one place.
😊 Download and enjoy!
Download the Desktop Kit and let us know what you think! When your next project hits the prototyping phase, you’ll be well prepared to take it to the next level.
Huge thanks to Gabrielle Matte for creating the perfect image for this blog post, Adam Noffsinger for helping create the Desktop Kit, and John Saito and Angela Gorden for helping write this post.
Want more from the Dropbox Design team? Follow our publication, Twitter, and Dribbble. Want to make magic together? We’re hiring!
