The whiteboard miracle

Sketch, iterate and measure as much as you can.

After a month and a half of validating our idea, market and users, we started designing what we wanted to build.

There are many guides on how a product design cycle should be, but this won’t be one of them. This is a journal and it has a clear message: Draw more. Talk more. Sketch more.

Let the wireframes begin.

Map your mind—and others’

The whiteboard is your idea’s best friend. Use it daily.

If you are planning on getting a whiteboard for your office, make sure to get it as big as you can. Whiteboards saves lives, and startups. I think we used both sides of the whiteboard every single day since we bought it. Tons of photographs converted into wireframes, technical requirements, a user journey and tweaks to a prototype. It makes you face the issues and gives you the ability to solve them with no constraints.

1. — Fast prototyping

Bootstrap is a great way to get started with fast prototyping. Another great alternative is Foundation 5 by Zurb.

I started prototyping with HTML/CSS and Bootstrap 3. We wanted to have the final design quick (within 48 hours) so I moved to Photoshop and, with the help of Invision, I designed the remaining interactions. The iteration party had begun. It had just started.

2. — Quick iteration

Break what you made. Re-think it again. And then break it again and see how it feels. That’s iteration.

We commented every single screen. Some new screens were added and other were drastically changed. It is not a surprise that after designing the user journey you discover new, hidden corners of the app. Maybe a field you forgot or a link to the legal terms.

Set tight deadlines to force you to iterate faster. They will help you work better -more productively- and even learn from yourself.

Interaction is a must while testing your idea. You need to touch it and use it to know what really needs to be changed. Interaction accelerates this process a lot.

3. — Designing validations

Be data-driven if possible. Follow every step of your users to understand what they need and how you can improve their experience.

There is only one main reason to work on an alpha demo of your product: To know more about your users. How can you achieve this? Test. Validate. Repeat. You will get really valuable information.

We are using Mixpanel, Google Analytics and database queries. I just counted, and we’re tracking more than 50 metrics on a simple 3 main screens demo. Now is the time to learn and break things while programming. You will need this later on the MVP.

We have individual stats for each user session. In this case, the sessions are periods of activity until the user stops using it for 4 hours. The product is something you can use for 20 minutes, do other work, and then come back... but that is not another real session for the user. We want to know what happens when the user comes back and re-uses the app.

Next steps

Ruby on Rails for back-end, Backbone.js for front-end and some Elasticsearch sugar for the database. These are the main ingredients to make this happen.

Now the best part comes: Making things happen.

See you in the kitchen!