Constraints, not barriers

A good product doesn’t hinder. It guides.

Published in

The Startup

6 min readApr 28, 2016

This is Part 3 of a 6-part series where we share everything that went into building our product at Crew. Privacy be damned. Building Crew in Public is not just filled with glory. It’s filled with the struggles and doubt we faced creating a product.

I was at a clothing store the other day.

I wanted to try on a shirt but their changing rooms were locked. The only thing standing between me and buying the shirt was making sure it fit right.

The problem was, I couldn’t find someone who worked there to let me into a changing room. I looked around and waited for 5 minutes but couldn’t find anyone.

I said, ‘screw it’ and didn’t buy the shirt.

Maybe I was impatient that day but I didn’t feel good having to wait and ask every time I wanted to try something on. If you have to ask before you can do something, your likelihood of doing that thing decreases.

Asking is a barrier.

It’s probably true that many people try on clothes before making a purchase so it’s a necessary step. But since many people try something on right before they buy, that process should be as seamless as possible. It should be a breeze to try something on. If people are able to try things on quickly, it may increase the chance they buy, benefiting the store.

The ‘trying on clothes’ process shouldn’t feel like a barrier.

If we connect this back to product design, the opposite approach, allowing people to do anything, is often not the best way either. A product that allows people to do everything can make things so confusing that it’s hard to do anything.

There’s a balance that needs to be hit.

Instagram allows you to choose from certain photo filters but doesn’t offer every possibility right away.

Facebook lets you edit your profile and update your status, but you can’t change the colors or fonts.

Instagram and Facebook are two examples of products that give you enough to feel like you’re in control but not too much where it makes it hard to use.

We don’t like to feel restricted or dumb while using a product. We want to feel empowered and confident. Like every decision we make is the right one. Products that successfully balance constraints and feelings of empowerment are the ones that stick.

We’ve noticed spots where our product doesn’t feel as empowering as it could be. In most of these places, our members need to wait or need to ask us for help because it’s not quite clear if they can do something or not.

They are restricted and need to message us to perform an action. In many of these spots, we did this to make sure completing a project went smoothly but our feeling now is there are areas where there are too many constraints that don’t need to be there.

We’re aiming to build a product that provides guidance. A product that shows a clear path to get what you came to Crew for without getting in your way.

These spots where things don’t feel right were put under the label ‘Wait times’ and ‘Projects on hold gum up the works’ in our list of problems:

Since we hadn’t defined where all these spots were and how we were going to solve them, we considered this a ‘hard to solve’ problem.

Our first step was to find all the areas in Crew where our members are waiting.

Where are we getting in the way of what our customers want to do?

We began with the Project Overview page, which is the main page you see every time you login to Crew. The purpose of this page is to show you what stage you’re currently at and what’s next.

The Project Overview page currently looks like this:

There’s a lot of things that could be improved here but we don’t quite know how they should be done yet.

So we took some stabs.

First, the problem. The main thing that’s wrong with the Project Overview page now is there are too many conflicting actions. It’s not always clear what you should be doing next.

For instance, here’s main actions outlined in red for what you could do next:

Having too many choices like this doesn’t make it obvious what your next action should be. Whether you’ve built an app or website before or it’s your first time, you might not know what you’re supposed to do just by looking at this page.

This shouldn’t happen.

So we’re separating every action you can take at each step in the process to make it clear the one action you should focus on every time you login.

We started by re-designing the Project Overview page:

We felt this was a good start. But after we looked at the designs, we still felt something was missing.

We hadn’t made a drastic improvement in making it clear what actions you should do next and we still weren’t sure how every page would fit together.

Understanding how members would go through Crew was the most important part at this stage and we didn’t have that clearly pieced together yet.

When to start over

Instead of designing any more mockups, we moved to minimal wireframes. This would give us a better feel for interactions between pages and better define how members would navigate through Crew.

Here’s some shots of our wire framing process:

1. We took each page and defined the elements that would make up each page:

2. Then, we looked at how you would get from page to page:

This gave us a clearer idea for how you would go through Crew and what would happen when you needed to do an action (make a payment, leave feedback, choose a designer, etc.).

Now that this big picture of how the pages would fit together was better defined, we could move back to designing some of the details of each page.

Building Crew in Public

Privacy be damned. Building Crew in Public is a series of 6 short essays on product design philosophy and the struggles we faced designing our own product. You can read the original, On The Road-inspired version on the Crew Backstage blog.