What an Actual Product Design Process Looks Like

Cap Watkins, Design Manager at Etsy shared his and his team’s design process a while ago and I consider it to be one of the most invaluable posts on the topic by far.

I came across his 3-part series before reading Etsy Creative Director Randy J. Hunt’s seminal book Product Design for the Web, but revisiting it afterwards really clarified so much for me. I hope to apply these principles towards my own process and make it work for myself and our team.

Below are a summary of his steps (along with suggested tools), but I highly suggest checking out his entire series because it’s pure gold top to bottom.

1. Product Definition #

• What are you doing?
• Why are you doing it? (Problems you’re trying to solve)
• What does success look like? (Qualitatively and quantitatively)

Create your own document answering these questions then pass it around for everyone to scrutinize and discuss with; once a consensus is reached refer to it frequently throughout the process to constantly remind everyone of the problems and goals to design for.

Suggested tools: Any text software eg. MS Word, Evernote, iA Writer, etc. Use whatever as long as you print it out to distribute to every individual so they can reflect on each bullet point and mark it up with their own thoughts for discussion. When everyone agrees after discussion, send it to everyone AND put it up where everyone in the design team can see and refer to throughout the process.

2. Competitive Analysis #

Gather products with similar features and flows you’re trying to solve for. The most crucial part is to screenshot each step and print everything out so the entire team can evaluate every page with pros and cons and what you can you improve or avoid. Make sure to write all thoughts next to it.

If an existing version exists, you have to do the same: screenshot everything, print it all out, put it up on a board for everyone to see, and evaluate honestly just like you did with other products. Use the design history as a data point to improve upon.

Suggested tools: What’s important here is a central way to discover, gather, and share visuals with each other quickly and easily. Screencasting product flows also help: X-Mirage is awesome for that. Most of all: PLENTY OF PAPER AND INK, A PRINTER, and MARKERS. Scrutinize the crap out of every single step, your current designs included. Also, get a foamcore to pin all those pages on.

3. Map The Flow #

• What are the entry points to your design?
• What are the exits and edge cases?
• Are there decisions a user needs to make before moving forward?
• Do people land on the page from outside your product?
• Is it different than discovering the page/feature inside a product?

Important thing here is to map it all out; it doesn’t have to be fancy, but something that can be understood easily by everyone on the team.

Suggested tools: Pen & paper, Lucidchart, Google Docs, and/or a ton of Post-It notes. Low fidelity is okay as long as it’s very easy to understand.

4. Design #

Get something clickable as quickly as possible. Do competitive analysis here as well and find where the weaknesses and strengths of the design. Solicit feedback regularly and consistently and toss away dead ends and iterate it until it feels right.

Again, print everything out because “using physical artifacts makes for less bandwagoning” and closer inspection of flows since all the pages are visible all at once.

Suggested tools: Marker and paper, Sublime Text, and only when it’s necessary ie. you can’t directly code the design into working prototypes yet, there’s Photoshop, Illustrator, Balsamiq, or Sketch. (No worries, I’m in that boat, but hopefully not for long.)

5. Prototype #

After filtering to a few solid options, put something together that’s functional (using the notes from your analysis with flows, and entry & exit points). Share with the team, get feedback and critique.

Suggested tools: Invision, Marvel, Flinto, RelativeWave Form. But it’s always better to have live code with live data. The goal is to get as real as possible without losing momentum, an as simply and quickly as possible. What’s most important is having something you can actually test with.

Note: Randy J. Hunt argues:

One of my strongly held beliefs is that there should not be much difference between prototypes and the end product itself. You might sketch things out on paper very quickly, just to capture your idea, and show it to others for input. But the very next step should be prototyping, during which you try to use the exact same tools (software, platforms, code) that you would use to build the actual product.

6. User Research and Testing #

Get users and talk to them. If strapped for time and resources, get people you know or people from Craigslist who somewhat match your user profile and bring them in for guerrilla usability testing.

Suggested tools: Silverback, Lookback, UserTesting.com

7. Build #

It’s highly preferable to code and work with your engineer/s. Why?

The ability to implement your vision is the hallmark of great craftsmanship. It teaches you both the limits and possibilities of your medium.

— David Cole, Director of Design at Quora

This is also when the visual polishing happens. Now you’re free to obsesses over typefaces, shadows, and gradients. BUT if you can’t live code (yet) you should learn to (like I am right now!).

Suggested Tools: Whatever your team uses for visual design and development.

8. Launch #

QA and dog-food like crazy. Use your product under real live conditions (and preferable in multiple places and scenarios.) Gather feedback and make adjustments. Make sure you address everyone who must know about design changes:

• Is support prepped to answer questions about your new thing?
• Is your community team prepped ready to engage your most passionate users with confidence?

You MUST get involved in the entire process and make communication solid with everyone. Get everyone involved and excited. Be there every step of the way.

9. Watch the Graphs #

Gather and watch the data agains your measurable hypothesis that you defined on step one. Whatever the result may be, ask WHY it might’ve happened, form a new hypothesis, tweak the design, and re-launch.

The most important part here at the holy-crap-this-is-live-right-now stage is to not let yourself get discouraged when you don’t get the win you wanted on your first try. Accept that, more often than not, you’re going to be wrong and that you’ll need to iterate your way to success.

Suggested tools: Kissmetrics, Mixpanel, Appboy, Google Analytics

Conclusion #

Keep your focus on the user. Do whatever it takes to:

• Provide an amazing experience, that
• Helps your users accomplish their goals, and
• Enables your product and company to flourish

Again, much thanks to Cap for providing amazing insight. This is largely an extraction from his posts with some paraphrases here and there. I’m still trying to apply these into my own workflow and I couldn’t be more thankful that amazing designers are willing to share their valuable knowledge and experiences about the topic. In Randy J. Hunt’s words:

What you’re trying to figure out may be unique to your situation but it’s probably not unique to the world of product design. Stand proudly on the shoulders of other designers.

Photo: Everlane (I couldn’t find an Etsy Design Team photo at work so I used the next best I could find.)