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.