Quickly build and validate your ideas with: Sketch, Test, Iterate

It’s not that hard to quickly build and validate your ideas. Especially when you have no luxury in time (and also budget). Here’s a snapshot of our simple yet effective (for us) ways to doing it on our recent project.

Preparation

Gather team consists of UI, UX, and Front-end Engineer guys. Plus add the Product Owner (PO) to join and facilitate the team. Keep the team size small, not more than 5 people, because too many heads can ruin the show.

We usually call this as Design Sprint. But this version is much shorter then the actual design sprint guidelines. Especially on the last step, interviewing real customers. Because you know, we don’t have that time luxury.

Once the team gathered, don’t forget to also prepare these tools:

• Pen and markers. Bring some different colors to make it easier when you want to visualize effectively.
• Blank papers. Or a sketchbook, whichever convenient for you. Don’t waste the paper, you can fold a single paper and make multiple “canvas” from it.
• Laptop (or smartphones). Brainstorming needs ideas, ideas can come from any resources. Use your laptop to find some good reference and examples. I love Dribbble very much, by the way.
• Post-it notes. This is essential for process #2, which we’ll discuss below.

OK, let’s do it now

1. Sketch

PO or team lead will start by giving brief to the team about the goal of the sprint. One thing I learned to make this process effective, don’t try to sketch out all of the pages at once.

Pick one page or interface that has the highest priority, usually the page that will determine the design base for the rest of the product.

This is how the brief typically sounds like: “We’re going to create X feature with Y functions. This feature is…….[answer the question what]. We want to build this because…….[answer the question why]. We have some insights that…….[describe any information that will help the team to understand a little bit more]. Let’s start by creating wireframes for this Z page first.”

Each member then sketch out (see picture below as an example) everything on their head to reach the goal, in the form of a simple wireframe. Don’t forget to set the time-box (common terms used in Scrum), usually 25 minutes. The time-box is essential to make the process efficient and create the sense of urgency and accomplishment.

2. Test

Each member have to present and explain their work of art, time-box 3 minutes each. In this session, they will describe all the design components. Why I’m using this layout and design style, why I put this button here, why I don’t include that information in my design, etc.

After the explanation, the rest of the team have to criticize (say negative points) his/her work, time-box 3 minutes. Say all the nay nays in this session, don’t hold yourself. Remember to keep being objective, focus on the proposed design and the reasons behind it.

Have another 3 minutes to praise (say positive points) his/her work. This time you have to say what’s good on the proposed design. It can be about the structure, the container shape, that awesome navigation, etc.

This practices is following De Bono’s Thinking Hat approach. But again, we only use four out of six hat colors for the sake of efficiency: white (the explanations, facts), black (negatives), yellow (positives) and green (the collaborative solution).

When you’re done describing and discussing all the proposed solutions, decide the final wireframe to use. Usually mature team will find, discuss, and agree for the best solution. If not, take a vote to choose the best design. Or, you can do some mix & match from multiple design solutions. If you see a dead-end, ask the PO or team leader to take decision for the whole team.

3. Iterate

After you done sketching the first page, move on to the next pages/sections. Or, if you still haven’t satisfied with the first sketch, you can start all over again to cover some missing parts or to refine some design solutions. Just go back and repeat process #1 and #2.

Preferably after #2 you should go out and do some rough usability testing to 5 of your other colleagues (Nielsen said 5 is enough) to find some useful learnings. We usually get some new members and also the veterans in the company to get richer insights.

Simple rules for a quick usability testing:

• Prepare the prototypes. It doesn’t matter if it’s low or high in fidelity, what matters is the participants UNDERSTAND your prototype.
• Create task lists. Let’s say you want to test a whole checkout process on e-commerce site, then you have to ask the participants to: (1) search a product, (2) add it to cart, (3) make payments, etc. Run through the list one by one.
• Find for participant’s confusion in each steps. Discuss about it after the participants done completing the task, or when they reaching a dead-end (this is bad, avoid it) in your design.

Do these steps over and over again until you’re satisfied with the results, or until the time’s up (haha). Iteration is the key to create great products, because so many learnings you can get by doing iterations.

Aaanndd….you’re done! After the wireframes are finalized, you can continue the work further. You can now start design the detailed UI such as the color theme, the button design, detailed strokes, types, and so on. Or, you can just jump straight creating functional prototypes (HTML, CSS & JS), if you don’t have much time.

Hopefully this mini article can be useful for any of you. You can share your own methods in the comments section (that would be great!), or maybe drop me some questions. Good luck for your next project!

Feel free to reach me if you have some great ideas for collaboration, or if you just want to say, “Hi!”: trinugraha.com