Skip to main content

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 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 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. 

Popular posts from this blog

4 Techniques to Make Your UX Review Meetings Successful

As a product manager, I often need to sit down with the executive management team to get their feedback on the new designs. It can be a frustrating process and many times I found that I cannot get things down in the time I am allowed to have.
Nevertheless, not having the sign-off from management is terrible for the team, we face high risk of having to re-work (yes, we always need to re-work, but it feels better if it is an improvement), schedule get delayed etc.
Over my 200+ review meetings, i've came to understand the reasons and learnt skills on how to stir the meeting towards an efficient completion, and I want to share them with you.
There are 4 key reasons of an unsuccessful product review meeting: 
1. Audience Lack the Background Knowledge: especially when introducing a new function, executives don’t know what they are looking at, or how the end users will be using such function, you may have sent the presentation before and again in the meeting invite, it doesn’t matter;

2. T…

What Changes will Machines Bring to us - As Employees

Machine learning to the employment has been a topic in debate. Darrell West, in his paper titled "What happens if robots take the jobs? The impact of emerging technologies on employment and public policy” suggested a list of actions government should take to ensure people whose job has been replaced by machines can live a decent live. The general sentiment seems to suggest a turbulent era as work force transform.

Growing up in China during the time of State owned enterprise reform, I had real experience living through the time of large group of people being laid off because the jobs were suddenly gone. My parent’s generation had to learn new skills for a completely new industry at their 40s and 50s. Few of them made it and even became millionaire, many of them didn’t and the family suffered a lot. I followed the news of Detroit Car manufacturing industry lapse and it shows familiar traits. The fact is, jobs come and go all the time, employee as a group will constantly adapt while …

21 Tops on How to Write a Successful Blog

Hubspot and General Assembly came together to offer a 10 week planner for successful blog. The type of blog discussed in this plan are corporate blogs used to bring people to the site and explore what the company is doing, potentially generate a lead.

Identify Your Target Persona: talk to sales team and research contract dataStart Building Evergreen Content: start with evergreen contents that stay relevant though time; do keyword search to see what people are searchingChoose the Right Content Management Tool: a good tool is easy to use and allow users to track metrics such as conversion rate, page view, and where traffic come fromDesign Your Blog: consistent layout; Focus on Your Content Strategy: basically it is depending on what you wantSet Subscriber Path: there needs to be a workflow for emailing the subscriber, a subscription form and an unsubscribe form. Hubspot is towards the "don’t email your subscribers too often” group while I also heard UI Breakfast Jane Portman talked …