There are times when we have a great idea that we want to pitch to potential customers, sponsors, subject matter experts, and team who is going to work on the idea to collect their feedback. While most of us do this by just discussing with others, we cannot deny the power of a visual prototyping that makes it easy to interact with the product without investing too much energy or resources. This is where prototyping comes handy. This helps identify glaring gaps that we would otherwise discover late in the cycle and in some cases avoid spending time on ideas for which there is no market. However, the objective of prototyping is not to get close to the final product as much as possible but to have enough fidelity to be able to collect feedback.

Prototypes are not the end but a means to an end

In this article, we will discuss the steps from “I have a great” to “I have a validated idea with real customers”. We will talk about

a) Stages of prototyping : Userflow, Wire framing, Mocks, and Prototype

b) Tools to create a prototype: Paid vs Free (TLDR: AdobeXD is by far the best free tool)

It will be helpful to understand the various design stages that may be needed as one moves from an idea to actual product. The various stages will be:

Interaction design: Focuses on understanding users and their behaviors. What users may want to achieve and how a product can best meet their expectations. This is the most important aspect of how a system would respond to various interactions. The more flushed out this is, the more enriching the feedback we can collect from the users.

Visual design: Focus on everything that users see while they are engaging with the product such as layout, CTAs, color, fonts etc.

Motion design: How things are animated to give the user a sense that her feedback is being heard and that the system is responding. It also helps infuse life to an otherwise inanimate product.

Industrial design: This is the physical aspect of a design such as what material should be used to design MacBook shell, etc.

Accessibility design: Trying to make products usable for all ages, and all physical abilities such as making a product usable by someone with just one hand. This helps understand the universal appeal of a product something that at Apple we use to think about since Apple products are used by both a 5 year old and an eighty year old. The team discussed about cases from designing for people with hearing impairments, cognitive impairments, and motor impairments.

The idea is not to argue for what is more important than others but to put in a spectrum of what we shall focus on in the prototyping phase so that we can get feedback quickly. In that regard, Interaction design and visual design with some fidelity is what we will focus on as part of prototyping. Once the product gets some traction, it may be helpful to hire designers who can focus on other elements of design.

User flow: First stage of prototyping is designing the user flow. This is the path that user will follow on the product (Website or app) to complete a task or objective. Here are the steps to design a user flow:

1. What are the user objectives and the business goals. Ideally they should be aligned i.e. user wants to send money to a friend (in case of Venmo) and for that we want them to add a bank account however, in some cases the two could have some gaps such as user wants to book a stay while Airbnb wants them to create an account so that AirBnB can engage them beyond the first booking.
2. Channel from where your user is coming: Would you acquire users through SEO or SEM or Referral? Different acquisition channels should bring users to a different landing page.
3. Define user journey stages: What are user goals and what are various touchpoints that we want the product to have. Touchpoints could be product tour, collecting email, checkout page, etc.
4. State diagram: What is the first thing that we want users to see. How will we take user from that state to the next state. Mapping the first step to the customer objective to the business goal, which is the end state will help bridge the gap. State diagrams, which are also the user flow, should consider all possible scenarios.

An example of a user flow is given below: TBD

The tools that I find useful are:

1. draw.io: Free
2. Lucidchart: Best tool for flowcharts but not free

Once we have the user flow we can jump to the second stage, which is wire framing.

Wireframing is a low fidelity representation of a design which shows what (Content), where (structure and placement of information), and how (Visual and interaction of various components) aspect of the design. Wireframes could be used for research but ideally should serve the purpose of the team to brainstorm various aspects and avoid any misunderstanding before jumping to the mockup stage, which would be a little more expensive.

A few tools that one could use are:

1. wireframe.cc : Single-page wireframe is free
2. pencilproject: Free
3. wireframesketcher: Free
4. ninjamock: Free for one project
5. Balsamiq: Free for 30 days

Now that we have Wire framing, the third stage is mockups.

Mockups: Mockups take the wireframe, which was more of a informational design to visual stage by allowing the user to see how the final product will look like. In this stage we will be deciding where the log-in button will be, how big or small it will be, what should be the CTA and other visual aspects such as typography, color etc. This could be used to collect feedback from prospective users to understand whether it is a good idea to pursue and whether it solves their pain point or not. We could use this to even evaluate the extent of evaluating affordance (A property or feature of an object which prompts on what can be done with this object. For example, when you see a door handle, it is a prompt that we can use it to open the door.) of various CTAs. In the first iteration though we may just want to use the mockups to validate the idea.

Some tools that I found useful are:

1. Invision: Free for one project
2. Adobe XD: Free (By far the best tool that I have used) Free asset here
3. Origami Studio: Free
4. Pencil: Free
5. Sketch:
6. Zepplin:
7. Figma: Free for 3 project

Finally, we get to the prototyping stage. By this time, we can assume that we have already evaluated the idea. But prototyping takes it one stage ahead and lets people interact with the product.

Prototyping: A high-fidelity presentation of your product. This is clickable and interactive. Even though we could use a paper version of a prototype, I find tools much easier to just create an interactive version of the prototype. Besides this allows us to collect feedback from remote users without us telling them on how they should interact with the prototype.

Tools:

1. Wix/Wordpress: Build and launch websites that are functional, customizable and intuitive.
2. Invision: Free for one project

There are some other tools that will be helpful to bring your product to life. Some of them are:

1. Free high quality images: Unsplash, Stock up, Pexels, Picjumbo, AI Generated faces
2. Canva : Branding/logos
3. Dimensions Guide — Dimensions for products to create design
4. LaunchRock — Get a landing page online fast; build an email list
5. SmartPad TM — a quick flip pad / notepad where you can quickly draw UI / UX screens for use in a PoP App project or just with target customers, stakeholders, etc
6. Sketch2Code: Transform any hands-drawn design into a HTML code with AI
7. Apple Design Resources
8. Interactive Map https://mapstyle.withgoogle.com/

Happy prototyping! Please do share your comments on contactus@growthclap.com if you are aware of any additional tools that can help accelerate the process.

‍

Read our other articles on Product Leadership, Product Growth, Pricing & Monetization strategy, and AI/ML here.

‍