5 Steps to Bring Your Ideas to Live, Create Mockups and Prototype

Fantastic, now you are equipped with 2-3 candidate solution resumes. 

And you would like to see the market reaction to choose which to go ahead with.

In this article, I want to talk about … steps you can use to produce quick and dirty prototypes you can use to test how the target consumers would react to them.

Step 1: Write Down Key Steps for All Main Flows

Here, you will need to be very specific and detailed. A detailed flow is critically important for the development of the prototype. Imagine it really happen and you are recording down what the user is going through.

For example, I helped design the sales flow for a company which provides building examination service for people who wants to buy the house (check if the pipes are in good condition; if there is ant etc) and users who want to use huh service needs to pay online, and I wrote the checkout flow as the following steps:

• Step 1: Select “Building Examination Service"
• Step 2: Enter apartment details (Address, floor, flat)
• Step 3: Select time slots
• Step 4: See the price of service
• Step 5: Enter payment details
• Step 6: Press the “Pay” button
• Step 7: See confirmation page

There are 4 principles you can use to determine what are the key steps for your products: 

• Any steps needed to complete the flow (e.g. Step 1 which is “Select “Building Examination Service”" and step 6 which is “Click “Pay” Button")
• Any steps you consider to be different from from you competitors (e.g. usually the experience is the user will fill in the apartment details online and then pay offline, so here, Step 3 which is “ elect Time Slot" and step 5 which is “Add Payment Details” select or add payment method are key steps)
• Any steps that provides inputs needed to enable a later key step (e.g. step 5 which is “Enter Payment Details" is thus a key step) 
• Any steps that provides outputs for any key steps later on (e.g. step 4 which is “ See the Price of the Service" that users need to pay is thus a key step)

Following the 4 principles you should be able to come out several flows on how the candidate solutions should be working like. Now, what you need to find out is what users need as they go through these steps. 

Step 2: Sketch it First, It Saves Your Time

Awesome! You have the flows ready. Now we need to draw them out. 

It is not able pixel perfect. No, No, No, not at all. What is it about is you need to visualize the flows. No matter it is a software or a hardware, eventually, real people will be using it. 

Let me show you some the sketches I made for this flow above, as you can see, they are nowhere near perfect, things are missing, there is no color. But you don’t need that to test, in fact, adding them in at this stage will only complicate the matter. 

                                                                                                  

I do have 1 tip for you, which is about how to start. I always try not to start with a blank piece of paper. You can put frames, boxes to demonstrate flow, a title, whatever, but put something there. Our brain is at its lowest efficiency when it first gets on with a task, you have to get it ready with a hint on the point to start. 

Antonio from Placeit.net wrote a great article "Great Products Every UX Designer Should Own” that you can just click and buy exactly has he suggested (you don’t actually need to read it, the products are very intuitive to use anyway)

If you think products on Antonio’s page are too expensive or you don’t like how it looks like. Jason Robb’s article on “Tools for Sketching User Experience” provides very good search terms and you can do your own shopping. In theory there are templates (Like Sneakpeekit) you can just download and print it out. 

You probably have noticed both articles I recommend is about software products. Well, what if your idea are physical products? Say, a new type of pen that records what you wrote and automatically creates notes on Evernote or Dropbox. 

Well, I would say that is even easier as you can always find something similar in life. A pen is a pen that exist today, take one and draw it on paper then go ahead and modify the parts that need to be changed for your creation. 

Step 3: Enrich the Flows with What Users Need to Have or to Know

Here, what you want to do is to get the minimum (maybe a bit more) contents. Error message, notifications, the LOGO print on the T-shirt, don’t let them get in the way (you may want to capture these things in a separate place but just do not spend time on them yet).  

Let’s go back to the building examination service checkout flow for a minute. Now that I have already identified the steps, I will extend them into:

• Step 1.1: Read the service description
• Step 1.2:Click the “Get Building Examination Service” button on the company’s website homepage
• Step 2.1: Select the city, district, enter street and flat address 
• Step 2.2: Share the current location by tapping on “share current location” button and “confirm” on the pop-up
• Step 3: Select the date (YY-MM-DD) and the slots available on that date
• Step 4: See the total price and (if there is any) discounts
• Step 5: Enter card details (cardholder number, card number, expiry date and CVV)
• Step 6; Press “Pay” button
• Step 7: See confirmation page that shows “what’s next” content

Congratulation! We are almost done here. 

The rest is about execution so as to produce what is needed for testing. 

Step 4: Create Pre-totype and Prototype

The word “Prototype” are now used by many to mean many different things.There is an interesting article on Nesta.org that explains all the spectrum of pre-totypes and prototypes. You can decide what you need for test based on your skills and budget, 3D printing can also be a good and cheap approach to create prototypes.

You are realizing you are faking a lot of things. Take my auto-recording pen for example, I will probably just use a real pen, prepare some texts for people to write on and pre-record them onto a mockup tool and schedule them to appear one after when I conduct the user test. The point is I got my idea though, and the key steps covered. 

Step 5: Check the Outcome of Step 4 Against Step 2 and Correct Mis-alignments

In a perfect world, this step is not necessary. Where it is likely that your idea has involved during the pre-totype and prototype phase and at the same time, you may have lost a bit of consistency. Thus the last step is important to make sure you do not find problems you can easily avoid just giving it a simple review.

It is also not a bad idea to give your friends a sneak-peak view on the product. It is not likely that they will sign the Non-disclosure Agreement with you so you have a risk they will disclose the idea to somebody else that will pick it up to market before you can. A friend of mine got his half-done product stolen because he shared with a friend who brought it to a competitor. And sometimes it may not be intentionally, nevertheless, it is a risk that I would like to remind you of. 

At the end of the step 5, you will have a testable prototype you can use to test out with your users and you have a good sense that it should work without too much difficulty. In the next article, I would like to give you some advice on how to recruit usability testers and conduct productive usability sessions.