HOW TO MAKE MOCKUPS OF YOUR PRODUCT and HOW TO CONDUCT USER INTERVIEWS Michael Karpov Follow Mar 2 · 5 min read

Prototyping has become an imperative stage in modern professional web development projects. They make life easier for all the people involved in the process of creating the project: the client, managers, designers, and developers. Aside from helping to visualize the final product, prototypes help identify serious problems in the early stages of development, consequently helping to avoid problems in the later stages when a lot of time and resources have already been spent on the project.

Imagine that you are the product manager of an application or web service and want to conduct a user survey.

Where do you begin?

You need some sort of a product interface that can be given to the user to interact with and evaluate.

The survey can be conducted in the form of a text interview — this requires making some assumptions and then asking the users questions regarding an existing or future product.

The second option is to conduct an interview with the help of a product prototype (for example, a mobile application). Let’s look into the second option.

So, let’s suppose the application is not yet fully functional, but there is an idea (prototype, design). Then you can create a mock-up or even several mock-ups of the application and conduct interviews with the users based on their experience working with the model app.

The first step is to draft the product idea. The second step is to create a prototype for users, possibly one that’s interactive.

What is the easiest way to create a mock-up of a product?

No one says you can’t use, say, the original paper sketches that layout the designer’s first ideas. But to move the process along, especially for a project that will involve all workgroup members, it’s best to move forward with the help of special software that supports editing, version control, and collaboration.

Below is a list of very helpful prototyping tools:

Balsamiq

Moqups

Powerpoint

Photoshop

Sketch

Whiteboard

HTML

Flinto

InVision

Marvel

Figma

In this article, we will look at an example mock-up creation using Flinto.com

We also held a workshop on this subject, which you can watch here.

This is an excellent and relatively simple service for creating a service model. You will be able to continue after registering on the platform. Then, imagine that our application already exists as a series of separate images, and try using the example of Booking.com to create an interactive application model.

Transfer the images to Flinto.com/light and then link certain areas of screenshots to each other.

For example, clicking on the “Book a hotel” button goes to another screen, where you can click on “Leave a review” or go back. This is intuitive and even fun, just as the Flinto developers promise. In preview mode, you can switch from one screen to another, just like in the real app.

What else?

You can also send a link to this prototype via e-mail or to someone’s smartphone, and the mock-up will look like a real application.

Feel free to be creative and innovative! Come up with unique elements to help improve the users’ experience. Add new widgets, but don’t forget to inform visitors about how they should be used.

HOW TO CONDUCT USER INTERVIEWS

The basic guidelines for conducting interviews:

Find the relevant audience.

If your goal is to evaluate a job search site then, naturally, you need to find people who are looking for work. At this stage you can ask a candidate, something like, “have you visited any job sites in the past week or the past month” and if a person answers “no”, then you can safely assume that this is not the right person for your survey.

2. Prepare a script and a list of questions to ask the user during the interview.

Many questions will start with “why,” which is really important and will help you to better understand your product. When conducting a survey, don’t ask about the site’s functions, but rather ask about the challenges that the person faced. What fears and worries does someone who is currently looking for work face?

3. It is essential to implement a practical assignment.

For example, to give the task of finding work using the site, fill out a resume, leave a review, etc.

Typically, a user survey lasts 30–60 minutes and is divided into two parts: - For the first part, ask about past experience with similar applications or with yours specifically. Discuss for about 10 to 15 minutes; - For the second part, ask questions about the interface in order to establish a set of problems with the application or site.

Interview script, step-by-step:

Introductory small talk: “How are you? How is the weather?” to establish that the person being interviewed is feeling alright.

A couple of test questions to find out whether this is the right person needed for the interview; that your product is relevant to him or her at this moment in time.

The main part — cases and questions. You can open the completed site, application or layout. Observe how the user behaves while on the site or while using the application. Ask what he or she currently sees on the screen and to describe the main page.

While the person is using the service, ask: 1. What do you think the purpose of this screen is? 2. What do you think will happen after pressing this button? 3. Why did you decide to use this method?

Usually, a Product Manager conducts an interview with a user by himself or herself, but sometimes it can be very useful to invite developers to participate. It really helps the team to be in the user’s shoes, especially if the user finds it difficult to understand the product, its features or functionality.