We learn to make prototypes

Why do you need this?

• If you know how to make a website, this method will help you to convince the customer why you offer him this option.
• If you order the site, you will save from 2 to 10 hours of explanations of what you need and why.
• If you are a startup, then your entire team will be able to participate in creating a new site or landing page. The same case, when one head is good, and the team is better.
• If you teach startups, you can help them look out of the “I know how to” position and, without resistance, lead them to the beginnings of CusDev.

Why am I writing all this?

(If there is not enough time, go directly to the “Method” item)

For the last three years, I have had the opportunity to actively and extensively communicate with web-studios, start-up accelerators, start-ups themselves, designers, programmers and business owners.
In addition to having arms and legs, they have one thing in common - sooner or later they all need to order or make a website.
The main problem with this is that the ideas about its appearance are always very different for the customer and the performer. Even if the functionality they imagine is relatively the same.

The technique given below does not belong to me. I heard about her at the workshop of Olga Pavlova from St. Petersburg sobakapavlova , which in turn compiled it from her own experience and the book “A mental hospital in the hands of patients” by Alan Cooper.
My merits here are only repacking the seminar in a shorter and more dense format, for which I spent it twenty times in front of real listeners.
The reason for writing this article was the fact that in the last month after the seminar four people asked me to describe the sequence of this methodology in detail and accurately and undertook to hold similar seminars before I even started writing the article. Assuming more questions in the future, I decided that it would be easier to give a link to Habr.

The technique of "logical prototype"

The minimum required number of participants is two. The best results showed groups of four people.
The ideal number of groups is two or three. In no case more than four groups.
If you are “lucky” to teach 60 people, divide them into 4 groups of 15 people. The negative consequence is that at least half of the participants will not participate directly in the work.
')

Stage 1. Idea

Give the task to the group members to come up with any business idea for which the site is needed. The idea should concern the mass b2c market and be at least as interesting to the group members.
Have 3-4 ideas ready for groups that are not at all ready to include imagination (from my practice these are mostly students). The usual options are “Travel Agency”, “Order of Santa Claus”, “Room Cleaning”, “Gadget Shop”. It is better not to accept especially original ideas, otherwise originality will overshadow the learning process itself. (As an example, at one of the seminars, I asked the idea of ​​a site for online exorcism to be transferred to a site for ordering prayers online. Make the first business idea easier, more understandable for more mass markets.)
Stage time is five minutes.
After creating the idea, let each group in two or three sentences describe it, and you will write them all on a flipchart.

Stage 2. Character

Ask groups to come up with a character who can be a potential buyer on their site.
A character should not be an alter ego of one of the group members and should not be written off from an acquaintance. It also does not have to be an “ideal average customer.” Just someone who may need your product or service.

In each group, one person should take a paper and a pen and, having discussed with colleagues, write down the following data about the character:

1. Name.
2. Age (exact, not from 30 to 35, but, for example, 32 years).
3. Place of work (including the city and the scope of the company, ideally the name of the company).
4. The position of the character and the salary received by them.
5. Marital status (wife / husband - name, age, salary, children - gender / age).
6. Place of residence. Apartment / house Number of rooms / metric area. A specific city, district, ideally - the exact address. Approximate cost. Owned or leased. If the lease, how much is per month. If the property, then redeemed in full or in a mortgage. If in the mortgage, how much it pays per month and how many years left to pay.
7. Car. Exact brand, color and year of release. Bought new or used. If a loan, then paid in full or else pays the loan. If a loan, then how much it pays for it per month and how much is still left to pay.
The same thing about the car spouse, if any.
8. When, where and with whom was the last time on vacation. How much money spent. What liked / disliked on vacation the most.
9. How to spend the weekend. I would like to spend them.
10. How to spend the evening. If you regularly watch TV, which channels and programs prefers.
11. Favorite alcohol.
12. Favorite now.
13. Do sports. If so, how and how often.
14. Does computer games play, if so, in which games and by how much per week.

Questions can be supplemented, it is desirable that there should be no less than 10 and no more than 20. After answering these questions, the character should be presented visibly and prominently. For example, students love to invent a peer-major, the owner of a nightclub with an income of 500,000 rubles, leaving for work 2-3 times a week and promiscuous sex. Especially interesting, when they had previously decided that they would make a website about economy tours of the Golden Ring.

The stage takes fifteen minutes , but it can take up to twenty, if there are many people in the group and they cannot agree on any item. In this case, invite them to create two characters.
At the end of the stage, each group reads a description of the character.
Ask other groups to find contradictions in the description and do it yourself. For example, a very expensive car owned by a medium-sized clerk should eat a fair share of his income, which in this case will not be left for expensive tours.

Stage 3. Internet

Give the groups five minutes to describe which device from which time and on which sites their character is regularly. Specific devices should be described (if iPhone, then 4S or 5S, if Android, then Samsung Galaxy S5 mini or Nexus 4, the same about tablets and laptops). Sites visited at work and from home should be at least a little different. Reading mail and chat in messengers also applies to the use of the Internet. Specify in which social network he spends the most time and how many friends he has in it.
The groups read aloud the results of the third stage.

Stage 4. Situation

Over the next five minutes, groups should come up with two situations offline, in which the character will need to have a product or service offered by your site. It is important that as a result of this situation, he still does not have to find out the address of your site and it is advisable not to go online at all.
Situations are read out in groups to each other.

Stage 5. Search query and website header

The group should come up with a search query that the character uses in the search engine in two of his situations. The search engine let them choose.
After that, ask the group to enter invented requests in the selected search engine and look at the result of the issue.
After that, the group should come up with a snippet header, which for their site will show the search engine after the search query. Ask them to come up with a headline better than the ones they saw when they entered the invented request in the actual search results.
It happens that for both situations the request and the header are the same. This is normal.
Requests and headers are read in groups to each other.
Time to think of five minutes.

Stage 6. Questions

This is the most important stage. For his sake everything was started.
When you click on the link, the character gets on the fictional site of the team.
Ask the listeners what question arises first from the person who is on any new site. Let them give 3-5 answers.
The correct question will be any of the options "What is it?"
This will be the first question.
Then the character will click on the site or leave it.
Explain to the audience that all human behavior on the site can be interpreted as questions such as “What is this?”, “How much?”, “Is there delivery?”, “What guarantees?”, Etc.
Invite the group to describe the sequence of questions (without giving answers to them so far) according to which the character will use the site.
Questions should be from 8 to 15.
It will take fifteen to twenty minutes.
The group should write the questions in order.
After this stage, ask the groups to read the questions.
Make sure the first question is “What is this?”
If in the further sequence of questions you see illogic, do not correct it. The time for this has not come yet.

After the groups finish reading the list of questions, please note that among them must also be the questions “How much?”, “Why should I trust you?” And after sending the order or making a purchase “What to do next?”
If the list does not include these questions, ask the group to add them.
Explain that dissatisfaction with the site’s answers to the questions “What is it?”, “How much does it cost?” And “Why should I trust you?” Is most often the reason for leaving the site. Let the group pay special attention to these questions at the next stage.

Make sure that questions are fully formulated in the form of questions.
“Price” is not a question at all. “How much?” Is an incomplete question. The correct version of the question here is "How much is your product worth?"
"Customer feedback" is also not a question. There should be the question “Why can I trust you?” Or “Who else used your services?”

Stage 7. Prototype

After clarifying the list of questions, distribute 2 sheets of flipchart and two markers of different colors to the groups.
Invite the group to sketch on paper the prototype of the site, where each element of the site should answer the question from the previous step. Site elements are text, a button, a form for entering information, a picture, video, slider, etc.
This should be a one-page site, even if it is overloaded with information and it would be more logical to break it into 5-7 pages. Site elements need to be drawn schematically.

It is important that the elements of the site are located on it from top to bottom exactly in the sequence in which the questions of step 6 are compiled. For certain part of the teams will change the elements in places, pay their attention to this at the stage of demonstration of the prototype. Most often, this means that the sequence of questions has been composed incorrectly. Insist that the groups arrange the elements in accordance with the sequence of questions. If they made a mistake, let it be clear.
Stage 7 ends with a prototype demonstration.
Elements that do not answer any of the questions listed in step 6 are ruthlessly removed from the prototype.

A sheet with a prototype is hung on a flipchart; one of the team members goes to it.
The second team member briefly recalls for which business they were doing the site, describes the character and the situation in which he found himself.
After that, he reads the questions in order, after each question the second team member silently points to the element of the site that is the answer to the question.
If someone from the team tries to add a description of the response item (site element) by voice, cut off its explanations, explaining that no one can say anything to the average site visitor beyond the one shown on the site.
The remaining teams catch inconsistencies between the character, the situation and the prototype.
The stage takes fifteen minutes.

The reason why there should not be more than 4 teams. Three alien prototype teams can watch, starting from the 4th guaranteed to stop listening. Because the same 2-3 teams are much more effective training option.

Stage 8. New threat

These were only the basics of logical prototyping.
Now you should do one of two things.
Or give all teams the same task (if they do not have their own).
Or give teams to prototype a real project of neighbors (works well with startups). In this case, you need to add 5 minutes to explain the essence of the project.
Until the third run, teams should not make a prototype of their own project.
You give twenty minutes for the groups to go through all the stages for the project: an idea — a character — where and how much happens on the Internet — an offline situation — a search query and a snippet header — a sequence of questions — draw a prototype.
Projects are drawn prototypes to each other.

Stage 9. Homework

Suggest projects to sketch out a prototype of their project according to the scheme proposed above. Even if they already have a ready and working site, the prototype will often be very different from the current site.
Of course, at this stage you need to draw several pages of your site, not trying to shove them all into one.
You can continue the seminar and analyze prototypes of your own projects in person.
But I do not recommend it. Own project causes much more controversy and coordination in details and takes much more time. And by this time the teams had been doing about the same thing for 2-2.5 hours and were tired.

The time specified for each stage is the time for the team to work independently with the task. Time for presentation of the results of the stage and corrections is not included here.

findings

It is necessary to explain to the teams that a full-fledged methodology involves the creation of 2-3 characters and from 3 to 10 situations for each.
For each situation, an individual character needs to make up their own sequence of questions. Questions in different situations may be the same, different, or put together in a different sequence.
If the question occurs in more than 50% of situations, then the answer to it must be present on the pages of the site.
If from 20 to 40% of the sequences contain a question, then I recommend making a separate landing page for the sequence that includes it.
If the question is found in less than 10% of sequences, then most often it can be ignored, if you are not the Sberbank site, of course.

Despite the fact that the work looks like a painstaking and rather boring, the effect of the result still impresses me.
The team suddenly begins to understand why this or that element should be on the site or what can be removed from the site without serious consequences, although it seemed that the element is in its place.
Creating a prototype and the structure of the site ceases to be a rocket science for an accountant, programmer or sales person. As for the state management, I still doubt, but the cook’s site prototype can certainly do, knowing this technique, and not particularly looking up from the cooking.
And the first four stages gently force the team to get into someone else's skin and look at it from the outside world.
You will need both intuition, and a sense of beauty, and AV tests, and much more, to make a quality website. But for understanding its structure you have enough logic and common sense.
If this is generally the first version of your site, then usually there is enough sequence of questions, structure and suitable Wordpress-template for launching.
Good training in my opinion should remove barriers. This technique removes the barrier of misunderstanding how a site should look and why.