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 in the design and design of interfaces for web applications, but I am also immersed in the formation of the product itself from idea to final implementation. When designing, I got an understanding of how the process of product formation should be formed. This is not a dogma, but my vision. This process can be compared to creating a picture. With each stroke, the canvas is more and 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 proposal to a folder with dozens of layouts, a description of the business model and user-story of the product.

1. Decide on a concept

Many people come up with good ideas, but 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 you approach the canvas, you need to think a bit about what 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 correctly target the audience for which you are creating a product. In order to formulate 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 precisely at the target. You need to clearly know for whom the product is being created, how people will use it, what tasks it will solve.

Think about what goals you pursue when creating a product. If goals are blurry, maybe you shouldn't start. It is very important to understand what needs it will satisfy; study the demand in the market. If this is a web application, study the queries from search engines - this is an easy and quick way to find out the relevance of the idea. Check if there are competitors in this market, study 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 exception is social products invested by the state, or products created as a tool that works within the framework of an existing business process, for example, a software package that coordinates the work of main oil pipelines - such products are created for a specific customer and are not in demand by other audiences.

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

Independent products should have self-sufficiency. You need to understand exactly how the product will be profitable. Not a single investor will invest in a product that has no chance of profitability. Nowadays, software products have several common ways to monetize:

1. Mediation

The product is an intermediary between two audiences, a commission is taken for mediation or internal methods of monetization are used (virtual services, advertising). Examples of such projects: posting ads, 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 off and develop on the money received. Plus, this method of monetization can be used by projects with a different business model as an addition.

3. The implementation of the 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 sales of mobile applications is growing more and more. 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 in the Internet sphere. This method is essentially a replacement for sales, but at the same time it provides an opportunity to receive a steady income.

5. Trade in goods or services

This is not an independent way of monetization, but only a tool for automating trading activities. But I decided to include it in the list, since these software products have become very influential in our lives and are often a means of attracting customers and automating the purchase process. Online stores, ticket services, hotel reservations, tours, insurances, etc. are flourishing in this area.

6. Virtual services

Often this method of monetization is in addition to the ones listed above, but sometimes the main one. It consists in selling such services as raising to the top of the list, highlighting in the list, selling virtual gifts, etc. Having decided on the ways of monetizing the product, you can proceed to the next stage.

2. Gather information

Michelangelo studied anatomy for a long time, in order to achieve perfection in the image of the human body, he had to dissect corpses with an anatomical knife. Fortunately, we do not need to go to such extremes, but still it is necessary to be able to get 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 automating 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 a field of activity or that part of it that you need to automate.

1. Conduct an interview

Perhaps this is the easiest way to get information about the business that you automate.

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

Filter the information. You do not need assumptions about what 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 satisfy and what tasks to solve. Coordinate on issues, try not to get away from the topic - you must act as a professional journalist writing an article or preparing video material describing the work process.

2. Put yourself in the shoes of the consumer

If you are improving an existing product or studying similar products, try to work independently with all the functions. At the same time, write down all the mistakes and grievances 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 unexplored field and weeping because of a collision with an obstacle. With repeated use, you will already circumvent this obstacle, but you need to see it and eliminate it.

3. Explore similar products

Try to use similar products, if any. People have already eliminated a number of shortcomings, tested the technology, it will be easier for you to understand how to make your product. But never blindly copy the interface (I have already encountered such situations more than once). 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 in terms 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 be tailored to a specific audience. A simple example: calculating the city of a visitor to an online store and displaying a list of products in that city. If the product does not belong to areas outside the Internet, for example, a social network, it is enough 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 product.

3. Make pencil sketches

Design activities prior to the design development phase, 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 blocks should be filled with. All this information is needed by back-end programmers - it is they who will be involved in the internal structure of the project. Programmers have long divided the profession into back-end and front-end, as the industry is growing and in each of these areas the professional needs more and more knowledge and skills.

To determine what 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 have a screen or 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 paths that people using the product will navigate through 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 no need to go into details. At this stage, it is important to decide which functional blocks will be on the screen. Do not draw elements in blocks. You will spend a lot of time on what can be discarded.

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

The more cases you collect, the faster you get an understanding of the product and the less programmers, testers, and end users will subsequently ask you questions. Very important: the creation of non-detailed prototypes should not take much time, work them out after discussion.

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

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

1. The simplified way

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

For example, let's look at the page of the online store, the category is “SLR cameras”. The block of one of the proposals should include the following elements:

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

2. Detailed method

Describe what elements will be in the block and outline elements of this block in the prototype.

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

This work is useless, since the designer does the same when creating the interface design, and most likely the elements will not be located in the way you placed them in the prototype. Fonts are resized, mesh, element shapes, 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 by visually designing the elements of the blocks, you limit the designer to certain frames and do not give freedom in creating the best solution. If you are designing a product yourself and working on an interface design - again, there is simply no point in doing double work.

But there are exceptions when you still need to use the long way - for example, you work with a customer who asks you to clearly show how the interface will work in the prototype, or you work with an interface designer who has poor knowledge of ui-design. There may also be many variations of the visualization of the interface, 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, flow diagrams of the interface’s behavior depending on the user's manipulations, a list of notifications and notifications. As a result of the work, the concept and understanding of the product will change. No need to work clearly on the selected non-detailed prototype, feel free to make changes if you consider it necessary.

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

5. Work on small parts.

Now the principle of the product is clear, it's time to start the final stage - creating an interface design. I do this on my own, but many share the design process and design into different artists. If you involve another artist, explain in detail the concept of the product, control the execution process, check the intermediate results.

This stage I call front-end design, or visual design. At this stage, the list of information in blocks sometimes changes, but not significantly - mainly when new cases of product use pop up. At the stage of visual design, all work is done on the color, shape of the elements, indentation 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 impression 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, achieve ease of perception of the screen, decide on the elements you want to focus on, and select them using size, color and indentation, divide the information into proportional blocks and columns, use a grid.

Then go to the emotional part - add “sexuality” to your interface, this will help a person make a decision whether to use the product or not, and in the future it will be a pleasure to work with it. As they say, they are met by clothes. This proverb applies not only to people, but also to products.

Control the uniform design of the product, but do not stop there, the product design should progress. It is just necessary to keep a balance between improvements in design and uniformity of design of all elements. Try to redesign the concept for all elements so that the integrity of the product is felt. I will not describe the technique of developing the design of the interface, much has been written about this, and it is better to consider this with real examples.

Text is a separate topic, it helps to quickly understand the essence of the screen.

People do not read text in applications, but scan the screen with their eyes, because the information does not consist of solid text that can be read with a cup of coffee, but of headers and short tips. The fact is that reading and scanning with a look are two different types of activity. Short headers do not make you delve deeply into the meaning, and the screen is quickly perceived. Encountering long texts, a person must switch and ponder, and this is an unexpected barrier 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 there will be a barrier around the corner for the entire width of the road to be jumped over. The more you place such barriers, the more negative emotions you will create.

Use short headers and blocks of text - the shorter the better. When scanning, a person will grab information much faster, and accordingly, an understanding of the screen will come. In this case, do not lose the meaning in the headings, if the heading is incomprehensible, it will be ineffective. At the end, at least give the layouts to the corrector for verification.

The development of prototypes, as well as prototypes, will consist of several iterations. With each iteration, the layout will become better and more understandable. I call it the pencil effect when you improve the product with each cut chip. Quite rarely, you can 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 the project review. At this point 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.

Conduct corridor usability testing on layouts, first explain how a person gets to the first screen, for what purpose he came. Then, without prompting, observe how it will navigate on the screen, making transitions from one screen to another. Do not talk about the functionality, let the person comment on what he wants to do and what he wants to get as a result.

Make a presentation to the customer

You are lucky if you make a product for yourself. In most cases, you have to complete the project for the customer. When conducting a presentation, try to convey the whole point of the product. At this stage, you should be confident in the project, know what questions the customer may ask, and not hesitate to answer them. If the customer has any suggestions for improvement or a sharp change in the concept, analyze and write down comments. If comments are irrational, defend your point of view, give examples and analogies. Otherwise, agreeing with the wrong arguments, you can fail the concept, and it will take more time to fix it, as the product will go into development.

It is advisable to hold intermediate presentations at the prototyping stage. Many customers do not accept prototypes, in which case you need to talk in detail about the project. As an option - make detailed prototypes, with indentation, emphasis on elements in blocks, at least remodel these prototypes faster than the final layouts in Photoshop.

Give a presentation to developers. Perhaps at this stage you will find a few more cases or technical notes. Describe user-story or terms of reference. Try to be concise - no one likes long descriptions, especially when there are already ready-made layouts and prototypes.

After development, check the functionality of the product, use it yourself to achieve the goals that it fulfills. You will immediately have comments that you need to record, modify the interface design, texts and send to the developers for improvement. When the product goes through several development iterations and is ready to use, attract users and collect statistics. Perhaps you could move in another direction, analyze and modify the product. Conduct 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 some useful information for yourself, although I briefly described each step. In subsequent articles, I will detail the individual steps in creating a product.

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