The path from idea to layout. Thinking about product concept

I am writing this article on the seashore, to the music of composer Brian Crane, away from the Moscow office, where work is underway on new projects. On vacation, I had a little time to share my experience.

My main profession is related to the design and design of interfaces for web applications, but I am also immersed in the development of the product itself from the idea to the final implementation. When designing, I had an understanding of how the product formation process should take shape. This is not a dogma, but my vision. This process can be compared with the creation of a picture. With each stroke of the canvas more detailed, outlines and colorful shades appear. The longer the artist works, the more detailed and more complete the picture becomes.
')
I formed several rules that help me in creating a product, from an idea from one sentence to a folder with dozens of layouts, a description of a business model and a user-story of the product.

1. Decide on the concept

Many people come up with good ideas, but only a few know how to implement them. An experienced artist will paint a picture much better, faster and more colorful than the person who took the brush for the first time. Gain experience, make mistakes, learn from mistakes - and with each picture you will improve. But before approaching the canvas, you need to think a little about what you have to work on.

At the initial stage, describe a few ideas. Any product can be developed in different directions, it is very important to decide on one of them and focus on the audience for which you are creating a product. In order to form a concept, use brainstorming sessions in which several people will take part - this will allow you to look at the product from different angles. When choosing an audience, hit right on target. You need to clearly know for whom the product is created, how people will use it, what tasks it will solve.

Think about what goals you are pursuing when creating a product. If the goals are blurred, it may not be worth starting. It is very important to understand what needs it will meet, study the relevance in the market. If this is a web application, study requests from search engines - this is a simple and fast way to find out if an idea is in demand. Check if there are competitors in this market, learn the features of their activities. Even if they work in the same segment, you can slightly change the concept, directing the needs to a different audience.

The business model of product monetization is one of the most important factors. The exceptions are social products invested by the state, or products created as a tool that works within an existing business process, for example, a software package that coordinates the operation of oil trunk pipelines — such products are created for a specific customer and do not have demand from other audiences.

From the point of view of the business model, the most profitable are unique products that are in demand. Such products and technologies quickly shoot and grow at a good pace. For example, the first iPhone, which laid the trend of modern phones; dropbox used a great idea, which was very popular, and due to this "shot". People need technologies that change the world, for example, cellular communications, the Internet, wi-fi, etc. Sometimes I wonder: it’s a pity that wireless transmission of electricity is not yet developed, because technology is in great demand, but it’s in its infancy stage for about 100 years and there is almost no competition.

Stand-alone products must be self-sustaining. You need to understand exactly how the product will be profitable. No investor will invest in a product that has no chance of profitability. Now there are several common ways to monetize the software products:

1. Mediation

The product is an intermediary between two audiences, the commission is taken for intermediation or internal methods of monetization are used (virtual services, advertising). Examples of such projects: ad placement, freelance projects, etc.

2. Advertising

This method of monetization is now perhaps the most popular, but I would not say that it is effective. Only projects with high attendance are able to pay for themselves and develop with the money received. Plus, this way of monetization can use projects with a different business model as an addition.

3. Implementation of a software product

This is the oldest way to monetize software. In the Internet sphere is rarely used. This model is aimed at the private consumer (B2C), now the segment of the sale of mobile applications is growing. In sales to companies (B2B), highly specialized software products designed for a specific industry or designed to improve the process in any organization, such as TASK managers and CRM systems, will always be popular.

4. Product Subscription

A good way to monetize online. This method is essentially a replacement for the implementation, but it also gives you the opportunity to receive a steady income.

5. Trade in goods or services

This is not an independent way to monetize, but only a tool to automate trading activities. But I decided to include it in the list, since these software products are very much in our lives and are often a means of attracting customers and automating the buying process. In this area, online shops, ticket services, hotel reservations, tours, insurance, etc. are flourishing.

6. Virtual services

Often this method of monetization is in addition to the above, but sometimes the main one. It is concluded in the sale of services such as raising to the top of the list, highlighting in the list, selling virtual gifts, etc. Once you have decided on how to monetize the product, you can proceed to the next step.

2. Collect information

Michelangelo studied anatomy for a long time, in order to achieve perfection in the image of the human body, he had to dissect the corpses with an anatomical knife. Fortunately, we do not need to go to such extremes, but still need to be able to obtain information. Before you start working on a product, you need to collect materials about the industry for which you will create an interface.

Projects related to the automation of any existing activity require the study of the scope for which the product is created. An example of such products is specialized software for the automation of various professions: accounting, logistics, air travel, etc. To create a good tool, you need to understand the needs of the audience in a particular area. There are several ways to study the scope of activity or the part that you need to automate.

1. To conduct an interview

Perhaps this is the easiest way to get information about a business that you are automating.

First, try to get into the matter yourself, read the materials and make a list of questions. Ask questions to find out what the whole business process looks like, then go into details. Always focus on the audience for which you are creating the interface, think of the person who will use it. If this is a consumer, you need to think from his point of view, if an employee of an organization using a product to automate activities (for example, a call center operator), you need to put yourself in his place.

Filter information. You do not need assumptions about how the interface will look like, from the point of view of a person from this sphere, you need to find out what needs it should meet and what tasks to solve. Coordinate on questions, try not to go away from the topic - you should act as a professional journalist writing an article or preparing a video describing the process of work.

2. Put yourself in the consumer’s shoes.

If you are improving an already created product or studying similar products, try working independently with all the functions. At the same time, record all the mistakes and discontent that prevent you from reaching your goal. You will get a significant effect using the interface for the first time. You will be like a baby entering an unknown field and sobbing because of a collision with an obstacle. When you reuse you will bypass this obstacle, but you need to see and eliminate it.

3. Study similar products.

Try using similar products, if any. People have already eliminated a number of flaws, tested technology, it will be easier to understand how to make your product. But never blindly copy the interface (I have repeatedly encountered such situations). Each interface is created to solve some problems, it is aimed at a specific audience, each element matters, and if it is not thought out from the point of view of its needs, it will be ineffective.

4. Collect product handling cases

The more cases you describe, the better. Different audiences work with the product in different ways; you need to understand this and look through the eyes of all consumers. Perhaps the interface will need to adjust to a specific audience. A simple example: calculating the city of an online store visitor and displaying a list of products in this city. If a product does not belong to areas outside the Internet, such as a social network, it suffices to study similar products. If there are none and the product is unique, collect information on the Internet from similar areas and independently think over the work of the product.

3. Make pencil sketches.

Design activities before the design development stage I call back-end design. At this stage it is necessary to work out not the appearance of the project, but its internal structure, to understand the product map, what blocks it consists of and what information should the blocks be filled with. All this information is needed by back-end-programmers - they will deal with the internal structure of the project. Programmers have long divided the profession on the back-end and front-end, as the industry grows and in each of these areas from the professional requires more and more knowledge and skills.

To determine how the product will be, you need to visualize its internal structure. The first step is to make a block diagram of the map of your product, where each block will be a screen or a page. This is necessary in order to see the scale of the product being developed and to understand in general the concept of how the interface will work.

You can also display the ways in which people using the product will navigate the screens. The paths may differ due to different entry points and audiences; by this, you will at the very beginning designate the division of the product into different audiences and will adjust the screens for them.

4. Apply large strokes

The second step is to work on each screen indicated in the block diagram. But do not go into details. At this stage, it is important to determine which functional blocks will be on the screen. Do not draw elements in blocks. You will spend a lot of time on something that can be discarded.

Make a few choices. And get together again for brainstorming. It is very important at this stage to collect as many user cases of product use as possible from different people.

The more cases you collect, the faster you will gain an understanding of the product's work and the less you will be later asked to address with questions by programmers, testers and end users. It is very important: the creation of non-detailed prototypes should not take a lot of time, work them out after discussion.

Cases are collected, and we have a superficial understanding of how the user will work. Now you can start filling the blocks with elements.

This problem can be solved in two ways - simplified and detailed.

1. Simplified method

Just list with text what elements should be inside the blocks.

For example, let's consider the online store page, the category - “SLR cameras”. The block of one of the sentences should include the following elements:

• price;
• a brief description of the goods (basic parameters);
• the photo;
• adding to the comparison of goods;
• add to cart.

2. Detailed method

Describe what elements will be in the block, and make sketches of the elements of this block in the prototype.

Not so long ago, I used the detailed method, created the interface elements in the prototype, but now I increasingly use the simplified method. When working on a detailed way, the time for creating a prototype increases as you begin to work out the forms of the elements, indents, some even make color prototypes.

This work is useless, because when creating an interface design, the designer does everything the same, and, most likely, the elements will not be arranged the way you placed them in the prototype. Change the font size, grid, form elements, color accents are placed. If the designer is experienced, he will find the best ways to visually design the interface. Another disadvantage of the detailed method is that, visually designing the elements of the blocks, you limit the designer to certain frames and do not give freedom to create a better solution. If you design the product yourself and work on the design of the interface - again, there is no point in doing double work.

But there are exceptions when you still need to use a long way - for example, you work with a customer who asks you to visually show how the interface will work in the prototype, or you work with an interface designer with poor ui-design knowledge. There can also be many variations of the interface visualization, and you do not know which one to use, in this case, it will be faster to implement them in the prototype, and give the final version to the designer.

In addition to the prototype, you may need to create additional tables with statuses, flowcharts of the interface behavior depending on user manipulations, a list of notifications and alerts. As a result of the work, the concept and concept of the product will change. You do not need to work clearly on the selected non-detailed prototype, feel free to make changes if you consider it necessary.

At the exit you should get:
• prototypes with blocks;
• lists of elements in these blocks or detailed prototypes;
• a brief description of the behavior of the interface, depending on user manipulations;
• additional specifications (tables, flowcharts).

5. Work out the small details

Now the principle of the product is clear, it's time to start the final stage - the creation of interface design. I do this on my own, but many people divide the process of design and design into different artists. If you use another executor, explain in detail the concept of the product, monitor the process of execution, check intermediate results.

I call this stage front-end design, or visual design. At this stage, the list of information in the blocks sometimes changes, but not significantly - mainly when new cases of product use emerge. At the stage of visual design, all work is done on color, the shape of elements, indents between elements, text. The display of information can be processed many times, the main thing is to achieve a quick understanding of the screen. This is the task of the interface designer.

Visual design affects the first feeling of the product, the speed of perception of the page (screen), the feeling of using the product. The same information with the same functionality can be represented in different ways. First, make it easy to grasp the screen, decide on the elements you need to emphasize, and select them with the help of size, color and indents, divide the information into proportional blocks and columns, use the grid.

After you go to the emotional part, add “sexuality” to your interface, this will help the person decide whether to use the product or not, and in the future it will be a pleasure to work with it. As they say, meet on clothes. This proverb applies not only to people, but also to products.

Control the uniform design of the product, but it does not need to stop, the design of the product should progress. You just need to keep a balance between the improvements in the design and uniformity of design of all elements. Try to recycle the concept for all the elements to feel the integrity of the product. I will not describe the technique of designing the interface, I have written a lot about it, and it’s better to look at it with real examples.

The text is a separate topic, it helps a lot to quickly understand the essence of the screen.

People do not read the text in applications, but scan the screen with a look, since the information does not consist of solid text that can be read while having a cup of coffee, but of headings and short hints. The fact is that reading and scanning with a look are two different types of activity. Short headlines do not force to penetrate deeply into the meaning, and the screen is quickly perceived. When meeting long texts, a person must switch and ponder, and this is an unexpected obstacle that must be overcome in order to return to scanning again. I compare this process with a runner who runs a distance and does not suspect that around the corner there will be a barrier across the entire width of the road that needs to be jumped. The more you set such barriers, the more negative emotions you create.

Use short headlines and blocks of text - the shorter the better. When scanning a person, it will be much quicker to snatch information, respectively, an understanding of the screen will come faster. At the same time, do not lose the meaning in the headings, if the heading is incomprehensible, it will be ineffective. At the end, at a minimum, give mockups for proofreading to the proofreader.

Development of models, as well as prototypes, will consist of several iterations. With each iteration, the layout will become better and clearer. I call this the pencil effect when you improve the product with each cut chip. It is rarely possible to get a good result right away, from the first iteration, as a rule, these are layouts with a small number of user cases. The more cases, the more iterations you will need to do.

After you decide that the result satisfies you, show the layouts to a colleague working with interfaces for a project review. At this stage, you can get critical comments. It hurts many, but you need to learn to analyze criticism, write down the correct arguments and make changes to improve the product.

Carry out corridor usability testing on mock-ups, first explain how a person gets on the first screen, for what purpose he came. Further, without prompts, observe how he will navigate on the screen, making transitions from one screen to another. Do not talk about the functional, let the person comment on what he wants to do and what he wants to receive as a result.

Hold a presentation to the customer

You are lucky if you make a product for yourself. In most cases, you have to carry out a project for the customer. During the presentation, try to convey the whole point of the product. At this stage, you must be confident in the project, know what questions the customer can ask, and not hesitate to answer them. If the customer has any wishes to improve or dramatically change the concept, analyze and write down comments. If the comments are irrational, defend your point of view, give examples and analogies. Otherwise, by agreeing with the wrong arguments, you can overwhelm the concept, and it will take more time to fix it, since the product will go into development.

It is advisable to conduct intermediate presentations at the prototyping stage. Many customers do not accept prototypes, in this case you need to tell in detail about the project. As an option - to make detailed prototypes, with indents, accents on the elements in the blocks, at least rework these prototypes faster than the final layouts in Photoshop.

Hold a presentation for developers. Perhaps at this stage you will reveal some more cases or technical notes. Describe the user-story or technical task. Try to be concise - no one likes long descriptions, especially when there are already ready layouts and prototypes.

After development, check the functionality of the product, use it yourself to achieve the goals that it performs. You will immediately receive comments that you need to write, modify the design of the interface, the texts and send to developers for improvement. When the product goes through several development iterations and is ready for use, attract users and collect statistics. Perhaps you could move in a different direction, analyze and refine the product. Do usability testing, see how other people work with a real product. I am sure that you will collect even more useful information to improve the product.

I hope you have gathered useful information for yourself, although I briefly described each stage. In subsequent articles, I will reveal in detail the individual stages of product creation.

The article used paintings by artists:
Paul Mathey - Felicien Rops in his Studio
Alois Heinrich Priechenfried - Der Connaisseur
Michelangelo - La Cappella Sistina
Karin Wells - Gwyneth
Norman Rockwell - Girl running with wet canvas