How I Design with Dropbox Paper or How the UX Plan was Born
Hi. I’m Noah and I’m on the Product Design team at Creative Market. The product I work on is a website that supports tens of thousands of independent creatives, giving them a marketplace to sell their creative assets. In short, we help creators around the world turn passion into opportunity. It’s one of the most rewarding products I’ve ever worked on. If you’ve never checked it out before, I encourage you to do so. Ok, let’s talk about how a little something we call the UX Plan changed our product design process for the better.
Product Design Is Hard
Product design is hard. Right?! Some of you are probably like product design isn’t hard. I could design that stuff I see on Dribbble. I can do product design. I design products in my sleep. I’m a unicorn. Yeah, yeah I hear ya. Pixels are easy, but pixels are the last thing you should think about when you’re doing product design. The challenge of making sure that every instance and action has been considered, every user journey has been thought through, and the entire experience fits in with existing design patterns, that product design starts with writing — in Dropbox Paper.
Note: let’s just agree that from here on out when I say Paper, I’m referring to Dropbox Paper and not like a piece of paper and a pencil. Because some folks do design with paper and pencils, and that’s cool and all, everybody loves a good sketch. As an aside to this note, I am listening to Don Henley’s Greatest Hits.
So, why product design is hard? That’s a great question, I’m glad you asked. Here at Creative Market, we serve two main audiences: shop owners and customers. Ok, we have a third, visitors who haven’t signed up at all, but that’s like every product out there so we’ll just talk about the first two: buyers and sellers. Buyers and sellers have different permissions, feature sets and goals on the site, but that’s just the beginning of the various user states that we have to consider. We have new users (on-boarding), existing users, active users, inactive users, signed-in users, signed-out users. That’s just our user states. Make it stop already, right? This is the end of the innocence. Product design is hard.
My Head Is Only So Big
Ok ok. So we have our user states. But we also have page states, page types, user types (yes, this is different from user states), and user flows. All of these are important for us to consider for every product feature we build. My head is only so big, it’s near impossible to keep all of those states and types crammed in there for every project. I’ll be honest and air a little of our dirty laundry here– in the past when we would launch stuff, we’d miss things, and we’d be hustling to push fixes in a New York minute.
It’s simply impossible to hold all of the various states and types in your head when you’re planning, scoping and designing a product feature. We realized this internally and decided that we needed to come up with a better solution — a way for us to bulletproof our product design efforts so that we could design, build and ship with confidence. We came up with something that we call the UX Plan.
The UX Plan
This is the part where I get to talking about Paper. I know a lot of y’all were all like, when is he going to get to Paper. WELL THIS IS THE PART RIGHT HERE. Gosh.
We now start all our projects in Paper. We systematically build a UX Plan using a template that helps us consider every user state, type and every page state. Here is how we do it (super scientific stuff coming up, raise a hand if you can’t keep up):
We start with the most common user state and type. We then list every element and interaction on the page. Any user states that differ from the most common is listed below with only the elements or interactions that are different/specific to that user. Then we go onto the next page and do it again. It can be tedious at first. But the practice of writing out what every piece of copy should say, what every button should do, how every interaction should behave forces you down a path where no stone is left unturned. So while it is tedious to get started, it quickly becomes evident that this type of discipline can help ensure quality work.
Let’s stop and take a breather here, maybe head down to the Sunset Grill. I realize the above explanation may have been hard to follow without an example, so why don’t I show you an example.
Example UX Plan
Let’s use an example that we’re all hopefully familiar with–posting a tweet via Twitter’s website. Below, I’ll outline what a UX Plan would look like if we were to write out everything related just to the specific action of posting a tweet — we’ll disregard all the other elements on the page. Let’s say that our user state is a signed-in, active user and our user type is a member of Twitter. Our page state is our own personal feed and the page type, for posting our tweet, a normal web page.
Phew, and that was just an example of posting a tweet. I’m sure I missed some things, like error validation, micro-interactions that happen within some of the contextual menus and many others. But you can start to see how things take shape within our UX Plan.
Along with the basic bullet/indentation, there are patterns that we use, almost like a syntax, that make the plan easy to scan. For example, each element from the page is underlined, the text within a button is wrapped in brackets [Click Me], labels for text are wrapped in parenthesis (placeholder), etc. Additionally, we use emoji to highlight areas that need copy work, design comps, analytics tracking and brand/illustration work.
How We Build a UX Plan
As the product designer I build the UX Plan, but from there I take it to our Project Manager and to our developers and together we review, and question, and iterate and perfect the plan. We provide feedback via the (most excellent) comment system built into Paper. Comments that require changes that can be checked off as resolved, and if at any point we need to go back and reference a change we made, we have the Comment History provided by Paper.
By the time we’re done with feedback and iteration, the UX Plan is owned by everyone and we all know it inside and out. It’s our bible; something we can reference now, and well into the future.
By starting in Paper, we have 110% confidence that we have covered every instance of the project before we even start with comps. I don’t touch Photoshop until we have a buttoned up UX Plan. (I will admit to using Adobe XD side by side while creating a UX Plan sometimes when I need to visualize everything in a layout, but other than that, it’s just Paper. And also, a title like How I Design in Dropbox Paper But Sometimes Alongside XD doesn’t really have that ring to it, you know?)
Every comp now becomes infinitely easier to create because I have the UX Plan to reference. I no longer get stuck in Photoshop trying to think of how the feature should function, and no longer am I defining functionality based on some sexy pixels. More importantly, gone are the days of shipping and mid-celebration with the boys of summer realizing that we missed a critical interaction.
Taking You Home
Some of you may look at this and say, I don’t need that and you may be right. Some of you may say, that sure does look like some form of a project scope, and you may be right. For us, our team at Creative Market, this process has become essential.
Our Head of Design, Gerren Lamson, goes into much more detail about how the UX Plan came about. If you’re interested, you can read that here. The heart of the matter is, it’s helped us reduce mistakes and ship with confidence. We no longer have to try to solve all the real challenges of product design in our minds or in our graphic tool of choice. This is just the beginning of the processes we’re developing for ourselves at Creative Market.
If you think you could benefit from something like this, you can see a larger example of a UX Plan here. I sincerely hope it helps you build better product. If you don’t think you could benefit from it, then I hope you at least enjoyed all the Don Henley references.
Edit: Gerren Lamson has published an article with a more step by step approach for how to write your own UX Plan, appropriately titled How To Write Your Own UX Plan.
We’re always looking for amazing people to join the Creative Market team. We value our culture as much as we value our mission, so if helping creators turn passion into opportunity sounds like something you’d love to do with a group of folks who feel the same way, then check out our job openings and apply today!
