Serious design serious sites. Part 1. Analytics
Almost 4 years ago we wrote one of the most popular articles in runet about designing large projects with the same name as this one: part 1 and part 2 . More than 170 thousand people read it only on Habré, and in general it was published in various different editions of the world. More than 1000 startups used the developments from this article for the design, and these are only those that I heard about and wrote to us. But time does not stand still, and we are constantly evolving. Since then, our design technology has evolved significantly and has become even better. In this article, we describe our updated design technology and show many living examples for each stage.
Design is the first stage in the development of any large project. This is the basis of its success. When we build a skyscraper, we need to think over everything - to each bolt: the appearance of the building, the number of floors, the locations inside, the materials used. And you need to make it resistant to earthquakes, take care of the environment, make it offices and shops. This is all decided at the design stage of the skyscraper. And designing in this case is a guarantee of the quality of the future structure, that it will not fall apart and will not bury people under the rubble. This stage allows the city authorities and owners to understand exactly how the building will look like in the end, see the preliminary design model, and make accurate calculations.
The article will be a lot of pictures. Habr, unfortunately, does not allow downloading large images, so they can be viewed in the full version of the article on our website: http://seclgroup.ru/article_serious_design_of_the_serious_websites.html
')
Some argue that design and agile are conflicting. But for some reason skyscrapers are not built according to the classic Agile, when everything happens at the same time. First, a building project is made. A seriously ill patient in the hospital is not treated according to Agile, when treatment and examinations are performed simultaneously. First you need to understand what the patient is sick. Defective car not repaired by Agile. First you need to know exactly what part broke. And when we have already passed this first stage, then you can do everything at the same time, do it by Agile. In all 3 examples there is a similar design stage. All this is part of proper planning, which allows you to find the only correct way and solve the problem as efficiently as possible.
Do not misunderstand me, I am not an opponent of Agile, on the contrary, we always use it in the development of our projects. But Agile is not a magic pill for all occasions. This is a methodology with its goals and rules. You can not mindlessly take it and apply, as described in the theoretical book. Look at any IT company that uses Agile, and in particular Scrum. Which of them uses classic Scrum, according to all the rules? I think almost no one. At all, this approach is optimized for the realities of the company. We, by the way, are not classic Scrum either, there are XP elements, and several projects are going on Kanban. Designing does not contradict Agile, let's separate flies from cutlets.
The vast majority of large projects are done by Agile, and this is almost the only way to success. If you take a theory, then you need to sit down and do everything at the same time. In practice, if we start everything at the same time, including design and programming, we will have to redo much. A more effective solution is to design the basis (the analytics stage, usually 1-2 weeks) to see the whole project, and then sit down to design the first interfaces while the programmers think over the architecture, select technologies, write the core of the system. That is, the first iteration on Agile will have a naked design, its analytical part, and from the second (1-2 weeks) you can start programming, and after 2 weeks, when the first interface designed in Axure is created, you can connect designers and .d That is, we are carrying out a project on Agile, but we think with our head instead of an ass. With such an approach, a month after the start of the project, we will see the project boundaries, selected technologies, architecture and even the first page in the design, and most importantly, all this will not have to be redone 10 times.
Convinced? I think not all. In the comments to each of my articles there are always people who claim that this is unreasonably expensive. Usually these are programmers who are used to writing code, they do not think in terms of business. Imagine that we decided to work without design. They put the programmer, he began to do something. They put the designer, showed him the description on several pages, said “draw”. The programmer thinks technically: which language to choose, which architecture to lay, how the database will be arranged. The designer thinks creatively: what style to choose, what colors, where what unit to place. As a result, we will have a beautiful picture from the designer and the correct code from the programmer, but it will not work to achieve the final goal, we will have to adjust the logic, move the blocks, add functionality. And in such cases, the first 90% of the project and the second 90% of the project are often obtained. Any change in logic entails changes in design, layout and programming, and then it is all tested and again changed / modified. Familiar picture? I think more than half of the readers of this article have seen it. It is the design that can protect from endless alterations, that is, it is not an extra stage in the load, it is the same as the design during construction, examination of the patient or diagnostics of the vehicle’s malfunctions. In other words, this is a mandatory stage of development of any large site, and it's time to get used to it.
Globally, there are two approaches to design: 1. Mobile first - when we start designing with a version for mobile devices, and then a fully functional version. 2. Desktop first - when we start designing a fully functional version, and then we make simplified ones for mobile devices. Both approaches have their pros and cons, I prefer the second option, it is always easier to simplify, especially with a cool analytics, which I will describe below. In addition, the second option and more accepted around the world, although the Mobile first recently actively developed.
Below in the article there will be many examples from our practice, and I will show you step by step exactly how a large project is designed and why each stage is needed.
First you need to collect all the requirements for the project. The problem is that these first requirements come in a very different form: from a simple description of the idea on one page to a dynamic prototype. In any case, for 10+ years of work I have not seen a single correct TK. Most often, the work must be started almost from scratch. Even if there are developments, they still need to be checked and once again walk through all the stages so that the technology in which each new stage is connected with the previous ones is not violated.
A project is always a special vision of its creator. Therefore, first you need to ask the right questions. On the one hand, this will help to understand what exactly the creator of the project wants, on the other hand, will give an understanding of the maturity of the idea in his head. As a rule, every second idea has not yet ripened from the creator himself, and therefore, it is too early to take on it, and in some places it is even dangerous for the team. Below, I divided all the questions into groups that need to be worked out before proceeding to the design. If the creator does not have any of the groups of answers, this is the right signal of an immature idea.
1. Purpose and main idea. Any undertaking must have a goal and success criteria. Investors have a very cool reception, they ask to form the idea of ​​the project in one sentence. If a start-up can do this, they will continue to talk to him, if he cannot, the idea is too raw, and it needs to be improved.
2. Target audience. Any entrepreneur or manager should know exactly who will be using the project. Definition: “Everything, from 18 to 60 years old” - definitely does not suit us. The portrait of Central Asia should be quite clear, it depends on what will be designed. It is necessary to understand who will use, who will pay, who is important for the promotion of the project, etc. Ideally, reinforce the guesswork with research.
3. Market. Any product has its market. This may be a market limited by the geography of a particular country, language, subject, etc. The future of the project also depends on this. There may be several segmentations, for example, a country and a thematic niche in this country. Ideally, you need to find out not only the boundaries of the market, but also its features and rules, if any. Much depends on culture: for example, in Russia and Ukraine, users are not used to paying for some services on the Internet, which is not the case with the United States and other developed countries. That is, with the same idea and audience size, we can get completely different features of the project and the size of the final profit from it.
4. Competitors. They need to know much deeper than just the name, and in general their presence on the market. What they breathe, what problems they have, what plans. That is, you need a person from the market who knows it thoroughly. This will greatly help to design a really strong solution. Often there are direct and indirect competitors - you need to know everyone. I really love projects that are reflected in the profile companies for their own markets. Some digitization of real business. Such projects very often become very successful because: a) they know the market; b) they have enough resources; c) there are still very few niche projects on the Internet.
5. Monetization. The big problem for product owners is that they have a great idea, but they don’t understand how to make money from it. This is one of the main causes of death for startups. The option "think about it later" is absolutely not suitable. This is where to start thinking. Less often, there are cases when a project is created not for earnings, but for the sale of a large company, and monetization tools are not needed a priori there. But this is 1 case out of 100. Yes, and sell, being profitable, it is still much easier. Moreover, almost always new projects start without monetization tools, they are refined later, but you need to plan monetization immediately.
6. Weak and strong points. Very often, knowledge of the market and competitors is such a strong advantage that it is enough to create a project. Strengths and weaknesses are usually born from such knowledge, or from past work of the company or a specific person.
7. Timing. This is something worth paying special attention to. If the idea is innovative, and something new is being done, something that is not found anywhere in the world or in a specific market - the deadlines will be critical, you need to do it as quickly as possible to fill a niche. If we are doing something standard, like, for example, an online store, then this is done for a real business that has clear planning. In any case, even though we will be doing an Agile project, and the deadlines are blurry, we need to know the time frame and control points.
Fig. 1. The objectives of the project "Marketplace."
Previously, we divided goals into client goals and project goals. Now we have gone from this and left only the goals of the project, but the client still needs to ask where he wants to go and why the project is being done. This is due to the fact that the goals of the client, most often, are typical. It is necessary to literally feel the vision of the client, to become one level with him and see with his eyes. Then only comes the correct understanding of goals and the opportunity to properly manage the product.
Since the writing of the last article, we have developed several of our own products and are developing them now. At some point, the understanding came that we lack Project Projects, we need Product Managers. That is, people who can manage the product, and not just set the task of writing code and drawing pictures. The same applies to UX / UI Designers or in Russian style, to designers. We need people who can understand the client’s business. It is not for nothing that I wrote about this in the block about goals, this is where the work begins, and we need the right people, with a completely different mindset, who are not only able to realize what needs to be done, but also to achieve this.
The objectives of the project may be very different, it all depends on the project. Usually it all comes down to global goals: money, users, actions, attention, market share, etc. To achieve each global goal you need to achieve many small, local goals. And there is usually a lot of thoughtful mechanics, how it is done. But this is still not a constructor. Even if the designer and product manager know a lot of basic mechanics to achieve certain goals, this is just mechanics, and not the implementation itself or the achievement of some results.
In addition to the goals themselves, it is important to find out the criteria for success. A set of KPIs that will show us whether we have achieved goals or not.
Goals are the direction of travel, some starting point. All design, and indeed the whole project, depends on their correct formulation. It is necessary, slowly, to think over and control them as the project develops.
As a result, we get the first document with a list of goals and criteria for success. It is worth highlighting priority areas. It is impossible to make a stage without the owner of the product and its permanent fitback, however, like many other stages.
To make a quality product, you need to understand in detail who will be its users. And you need to understand this from the very beginning. A survey of the owner of the product will give us nothing more than guesses; the real picture is usually hidden. To conduct their full-fledged marketing research and surveys usually do not have either time or resources. Therefore, you can explore the target audience in several simple ways, which will be enough for design.
To begin with, the whole of Central Asia should be divided into groups according to goals and main features. The set of such signs in each project will be different. For example, if we are doing a project on photography, then our Central Asia may be: professional photographers, amateur photographers, customers of photography services, models, etc. Each of them has its own parameters by which we can group them. This is important to do in order to design a useful site for the main groups of Central Asia, which will solve the tasks of each of them. In large projects, such groups are usually up to 10, and they should reflect the goals for 98% of users of the future site. One of the groups will be the main one; the largest percentage of users of the future project will be included in it, it should be given special attention.
At the same time, it is important not to forget that besides external users, the project also has internal ones, for example, content managers, sales managers, support managers, and others. For these users, it is not necessary to make a detailed portrait, but their goals still need to be taken into account. For these users will be developed admin. A huge piece of work, which most do not even think about, but which in some projects is even more complicated than an external site.
Further, for each of these groups, you need to make a description, a certain portrait. There is already more difficult. It is good if the project team knows the market thoroughly and can quite accurately describe the target audience, but this is rare. I would recommend to make a list of important issues for the project, and go with him to communicate with representatives of different groups. This can be done at different professional events or on social networks. And make it absolutely free. In this case, we are talking about a certain analogue of the in-depth interview, which allows us to understand the motives of a person and predict his behavior. The goal is to understand our target audience, how it lives and how it thinks. In each group, it’s enough to interview 20-30 people, although the more people we ask, the better.
After such interviews, we should understand our Central Asia fairly well. All information needs to be systematized. Ideally, to recall the classics of marketing research, and for each group to make a description in 4 planes:
Socio-demographic characteristics: gender, age, education, income level, occupation, family, children, etc. This is basic information, from which we will repel. The behavior (needs, expectations, etc.) of a person with an income of $ 300 will obviously differ from the behavior of a person with an income of $ 30,000, that is, there may be very different people within the same group of parameters, and making the project equally interesting to everyone is simply impossible . To do this, we need to identify the main groups of Central Asia, and then optimize the site for them.
Psychographic characteristics: lifestyle, personality traits, character traits, life position, value system, etc. These are less obvious, but even more important features of the future project's target audience. The value system of students will clearly differ from the value system of politicians or businessmen. This seems obvious, but no one can say for sure exactly how this or that target group is different, so the question needs to be researched and explored.
Behavioral characteristics: the reason for registration, the desired benefits, the frequency of attendance of competitors, the degree of readiness to go to another site, attitude to the project (if it is not new), commitment to existing sites, etc. We have altered this group a bit from classical marketing research in the direction of the Internet, that is, we are interested here how the user behaves exactly on the Internet. In some cases, when we are doing a project related to offline, we will also be important to the behavior of users in the real world. It will be the most difficult to figure out, but this is where the key to the success of the project lies. 5-7 years ago there was a fashion for copying Facebook, and so all those who copied did not even think about the behavior of users. Everyone perceived Facebook as a site with convenient interaction tools, and in fact, people used and enjoyed Facebook for completely different reasons. Knowing at least something about design, many companies could not throw money at Facebook clones, but no, Mark Zuckerberg’s laurels still keep some people awake.
Geographical characteristics: country, city, district. In new projects, I often hear that they will use “everything”. In fact, each country has not only its own language, but also its own culture. So even in the Internet projects, it is important for us to understand which countries we focus on. And if the project is linked to offline, then this group will take on special significance. Users from the United States will clearly be different from users from Thailand, and differ in almost everything.
By the way, if someone has not figured it out: at the stage of Central Asian polls, the questions in the questionnaires should correspond to the 4 groups described above. They must disclose each of these groups.
At the end of this stage we will have a document with the groups of target audiences, and each will have a description. Also, when studying CA, many useful ideas will appear that will need to be written out in a separate document.
Fig. 2. Characters of the project "Marketplace".
Our target audience is divided into groups, and each of them is described. At the previous stage, we even did surveys of each group. But this is not enough. Next, we need to do the development of characters for each of the groups of target audiences. A character is a certain typical image of a particular group that needs to develop a whole portrait describing who he is, where he lives, what he enjoys, etc. This will help us to understand our Central Asia more deeply and optimize the project for it. The designer will have to put himself in the place of each character and think about the project from his point of view. All this will help generate ideas for the project.
In the description of the character should be:
That is, we largely repeat the previous stage, when we described each group according to given parameters. The description of one character should be up to 1000 characters, the time for these works also has value. The photo must be real, but at the same time a stranger, so that the character is not perceived by us through the prism of knowledge about someone.
The most important thing after a portrait is tasks-problems-solutions of each such user. This is where we generate the bulk of the ideas for our project. Ideas from the previous stage, in which we described the first part of Central Asia, we can add to problem-problems-solutions in order to understand exactly how these ideas came about and what they are connected with.
After character development, you can proceed to empathy cards, you can do them for each character separately. This allows a deeper understanding of Central Asia, and specifically, to look at the problem through the eyes of users. Sometimes the empathy card is used instead of characters, since both characters and empany cards put us in the place of users and force us to look from their bell tower. But, in fact, the characters and empathy card solve several different tasks. Parshonagi show all the tasks and ways to solve them, while the empathy map will help you find the most basic things for users, reveal their basic behavioral patterns and place accents in the design.
Fig. 3. Empathy map of the Marketplace project.
The essence of the empathy card is to divide the user's attitude into 4 blocks:
Then analyze them and draw conclusions in two planes:
This tool is useful not only in design, but also in marketing.
At the exit you will receive a document with a number of characters and each of them has its own card of empathy. Also after this stage there should be a lot of ideas for further design.
Fig. 4. Comparison of competitors of the project "Marketplace".
Once we have decided on the goals and target audience, we can proceed to the study of the market and competitors. When evaluating any sustainable business or startup, the market itself, its volume, prospects, etc. are always evaluated. To do this, you need to track trends and research, to feel the market. Usually the owner of the product is aware of general trends, otherwise he would start a project. But here it is important to study the situation today and find forecasts for market growth.
There are three market situations: 1. The market is falling. 2. The market is stagnating. 3. The market is growing. If the market falls, it costs nothing to start at all, with very few exceptions. If he stagnates, that is stable, most likely, all the main free niches are already occupied, and it will be difficult to get there. The most advantageous situation is when the market grows. And the faster it grows, the more likely it is to hit the bank. Successful projects usually appear with the growth of the market. There is another situation, the fourth, when a project creates a market. That is, the owner of the product came up with something completely new, which is not in the world. This is the most difficult option and the most risky. When there is no market, the project is created in complete misunderstanding, blindly. It is in this market situation that unicorns, projects for billions, are hidden.
To understand where we are, we need to look again at the goals and remember exactly what needs the project solves. Any market has borders. Again, to say that our market is the entire Internet, because we have an Internet project, this is fundamentally wrong: the market should have clearer boundaries. And the narrower the market, the clearer what needs to be designed. We usually describe the market by 3 parameters: 1. Products (consumer properties, product groups, substitutes, prices, delivery, etc.) 2. Geography (countries, cities). 3. Time (seasonality, permanent or temporary). The first two groups are more or less clear; you just need to deduce the criteria for the project and describe it. The parameter "time" is quite rare and is peculiar to some types of projects that are tied to seasonality.For example, seasonality may be important in tourism projects, and from understanding this phenomenon in design, we will be able to lay down certain “seasonal” functions, such as seasonal offerings / mailings / activities.
Often the online market competes with the offline market. For example, online loans are a separate market with their own rules and features. The rival market will be loans offline. In this case, the market parameters will differ only in the first and in the second category: in products and geography. The product will be different in that the online loan to get faster, more convenient, another interest rate, etc. By geography: we are not tied to a branch of a credit institution, so anyone can receive such loans anywhere in the country. In this case, more often than not, the country itself will matter, but the online service can be scaled much easier. At first glance, both there and there are loans, except that one loan is issued in cash and the other on a plastic card. But if you look into the market, it turns out that everything is different.And online loans are much more convenient than the good old offline, because online lending services grow like mushrooms.
Speaking of markets and strategies, I always remember the wonderful book “The Strategy of the Blue Ocean”. Understanding the market and our place on it will provide an opportunity to put the right accents in the design and make a product that can compete with others. While many do not think about it, because the Internet is not as big competition as offline. But as time goes on, there are more projects, and less free niches. Therefore, the study of the market and competition every year will only intensify in the design.
Knowing the market, we can explore competitors. The goal is to be the best. This is especially important when we enter the already existing market in which there are similar projects. And cool design will not be enough for us, we need to be several orders of magnitude better, otherwise we will not win the competition. Ideally, to come up with a unique "chip" that will distinguish us from competitors, but first, you need to know every cell of each competitor.
First you need to make a list of competitors, break it into direct and indirect. Direct - these are projects that solve the same need as we do. Indirect are substitute projects, they often solve a part of needs, or those on which our target audience is located, and we will compete with them for users. We usually ask recognized experts in the market, google for keywords, look for ratings, subject catalogs, etc. If our market is limited geographically, the study of similar projects in the west and in neighboring countries helps a lot. These projects are not our competitors, but can be a source of useful ideas. For example, we are now creating a single state site. In order to explore the experience of such organizations, we looked at the same sites in neighboring countries, as well as in the US and the UK,which allowed us to draw a lot of useful ideas.
SWOT-. : , , . - Empathy Map, , . , . , , . , , . , , .
Fig. 5. SWOT-analysis for the project “Marketplace”.
There is another great way - competitive intelligence. When we pretend to go to a competitor and get a lot of interesting information. Sometimes without such intelligence it is generally impossible to conduct a normal study.
When we investigated the basic information about competitors, we can collect all this in a beautiful summary analysis - a large table in which we derive the main parameters of interest to us and compare all the competitors. Parameters are formed depending on the project, because we will always compare very different projects.
Separately, it is worth making a table comparing the functionality of direct competitors. That is, write out all the typical functions of competitors in one table and checkboxes, who has what function. Moreover, each function should be evaluated by points (from 1 to 10), since the quality of the implementation of the function may also differ. At the end, bring out the total number of points in order to understand which of the competitors is the most developed. All calculations need to be done according to the method of weighted coefficients, since the importance of all functions for us is different. You can also apply the principle of "reasonable borrowing" and copy some features from competitors, if they are really in demand in our project. Most often this is done for large blocks of basic functionality or for individual standard trifles in the interface, so that the user can see what he is used to,and better understood the new project. At the same time, the unique functionality is usually not copied, it is in this part that the project should be different, because our task is not to make a clone, but a competitor is much better than an existing project.
, , , . , . . , . (42%), . , , .
. 5-7 . , , .
Fig. 6. «».
. , . (), - (). (), . , , , . , , .. , , .
Stage ZPR originates in the characters and Empathy Map. For each character we have to create a table with three columns: Tasks-Problems-Solutions. By living into the role of our characters, we will be able to imagine what exactly they want and what problems they face. It is for this reason that the quality of the characters themselves is very important, so that they correspond to reality as much as possible. The table itself will turn out to be very large, because we will have about 8-10 characters, and each of them may have 5-7 tasks and problems, which may entail 20-30 ideas for a future project. Get a table with hundreds of ideas. All of them will be implemented very long and expensive, so here you need to select and divide everything into stages. For the first stage, you need to select the most important, MVP functionality. But how to choose the most important? Empathy Map will help us with the answer to this question.
. « », « ». . , , . , « », , . , , , , , . , , .
, . - , - . , : « , !?». , , . , , . , . , . , , , .
3- , . . .
. «» . . — , , - , , , CustDev .
. , , , . , . Customer Development — , . , . : . , .
:
Many models can intersect with each other. For example, Facebook and Google receive 80% of their income from advertising, but they also have a lot of different products that you can buy by subscription, there are entire platforms, etc.
In addition to popular models, there are quite unique ones. For example, you can collect and sell personal information of users for promotional purposes, which many do in the US today. In any case, you do not need to run for fashion, you need to offer our users the tool for which they are ready to pay.
To begin with, the designer must understand what people are willing to pay for. To do this, it is best to use Empathy Map, which shows us the most valuable to users. Then you need to think about how this or that monetization model is applied. And the third step, you need to make calculations for revenue, while becoming attached to users. For example, if we decided to make a platform and take 3% of all transactions for all transactions, then we need to achieve a turnover of at least $ 1 million per month in order for the project to earn $ 30,000. site, development team, which you need to pay, etc.
, , . , , . , SaaS , CRM, , , . , ? : 1. . 2. . 3. . : 1. , . 2. , . 3. . - , , .
, , , , .
Fig. 7. Mind Map for the “Marketplace” project.
So, we have a lot of ideas. In any big project of ideas at this stage we should have over a hundred, maybe even a few hundred. In such a mass of ideas, you can just get lost. In addition, we do not see a hierarchy of ideas, relationships, and what is affected. Next, we need to collect all these ideas into one big Mind map, where nesting and connections will be visible. This is the first step to visualization.
The main part of the ideas we have in a large table of CRA. We take the solution column and in order enter all the ideas into our Mind map, grouping them in parallel. Short but understandable formulations should be written out; you do not need to push all the text in the Mind map. At the same time, if u have an idea of ​​some function that has different parameters, we should write them out, as an extension of the mind map. For example, if we have the “online payment” function and it has options: credit card, PayPal and cash, then we show the “Online payment” branch and nesting in the mind map - 3 payment options. Detailing the map is very important, in places up to the fields in all forms. The problem is that while we are working with analytics, we remember well what needs to be done. As soon as we move to work with individual interfaces, everything will start to be forgotten. And if we do not detail the map, we will have to design the interfaces not on the map (how to do it right), but to rummage through the past stages of analytics and recall what we have invented. Also, in addition to the CRA, we need to add ideas to our map from other documents that we have accumulated. Absolutely all ideas must be reflected in the map.
Usually one big card is made, but projects are so large that, for convenience, you have to divide the cards into several. Usually there are 7-10 main branches in the map and everything is written into them, creating long logical chains with nestings. In them, we can immediately divide the functions into implementation stages and importance in numbers. We also need to show all links with arrows. For example, the registration function is often associated with very many functions in a project, and, at a minimum, after registration, special functions become available to the user - all this needs to be reflected on the map. Other tags are also valid. Tasks can be very different, and in these hundreds of ideas, even broken into logical connections, you can get lost. In any case, doing this procedure, we will turn chaos into a system and, above all, do it for ourselves in our own mind.
We make maps in a special program - Xmind, although there are many alternative programs and online services. It does not matter.
In fact, after creating this map, we can already connect programmers who will base architecture on its basis and can start developing the core, so it is important to visualize the staging.
All previous stages and the card itself do not take much time. This is the zero iteration in the project, after which it is already possible to start programming while the designer is working on the first interfaces. Even if the project is large, the analytics stage takes on average 40-60 hours. A small price to lay the right foundation, and not to redo it later.
Next will need to design interfaces. And it will need to be done on the basis of the Mind map. If the map is detailed so that the designer does not need to go back to the past stages of analytics, then the map is done well.
At the end of this stage, we will have one Mind map or several for different parts of the project, phased implementation of features and priorities.
Fig. 8. Site structure for the Marketplace project.
Having made a card according to its functionality, in theory you can proceed to interfaces. But on the first interface there will be a problem - what structure and what main menu to make? In our Mind map we have 7-10 main sections, and there are still a lot of important minor ones. The golden rule of usability (Miller’s Wallet) states that there can be no more than 5-7 elements in one block. The same applies to the main menu. However, there is an exception, if all menu items carry the same meaning, then more can be done. For example, media sites or online stores, where the menu is thematic sections. Within each menu item of the article, just a different theme. There are other exceptions, but this is rare.
First you need to understand that not all the functions of our Mind map are sections. Even the main ones. Sections of the site should be simple, understandable, and everyone should bear the benefit of our users. Therefore, a separate Mind map is usually made for the structure, in which we display only the pages and sections of the future site. Ideally, do not exceed the 3-level nesting, although modern sites are not so strictly adhere to this rule. All sections and subsections should be intuitive, for each name a person should immediately understand what awaits him by this link and which subsections can hide there. Often in large projects there is a main menu and several auxiliary ones. For example, in online stores the main menu will be a catalog of goods, and auxiliary information about payment, delivery, contacts, about the store, etc. It happens that you need to separately display the menu of your personal account for different roles or other sections hidden from all users.
At the end of this stage, we will have a complete site structure and an understanding of the main and secondary menu. It will form the basis of the first interface.
This is the end of the first part of the article. What we call the analytical part of design. In the next article, you will learn how to turn all this analytics into interfaces and in particular into a dynamic prototype.
PS The other day we started a design course from the authors of the article: Designing serious sites . You can also sign up for the course at a discount. To do this, write to info@digitov.com
PPS To receive our new articles before others or simply not to miss new publications - subscribe to the SECL Group's fan pages: Facebook , VK , and Twitter .
Author:
Nikita Semenov
CEO
SECL Group Company
Design is the first stage in the development of any large project. This is the basis of its success. When we build a skyscraper, we need to think over everything - to each bolt: the appearance of the building, the number of floors, the locations inside, the materials used. And you need to make it resistant to earthquakes, take care of the environment, make it offices and shops. This is all decided at the design stage of the skyscraper. And designing in this case is a guarantee of the quality of the future structure, that it will not fall apart and will not bury people under the rubble. This stage allows the city authorities and owners to understand exactly how the building will look like in the end, see the preliminary design model, and make accurate calculations.
The article will be a lot of pictures. Habr, unfortunately, does not allow downloading large images, so they can be viewed in the full version of the article on our website: http://seclgroup.ru/article_serious_design_of_the_serious_websites.html
')
Some argue that design and agile are conflicting. But for some reason skyscrapers are not built according to the classic Agile, when everything happens at the same time. First, a building project is made. A seriously ill patient in the hospital is not treated according to Agile, when treatment and examinations are performed simultaneously. First you need to understand what the patient is sick. Defective car not repaired by Agile. First you need to know exactly what part broke. And when we have already passed this first stage, then you can do everything at the same time, do it by Agile. In all 3 examples there is a similar design stage. All this is part of proper planning, which allows you to find the only correct way and solve the problem as efficiently as possible.
Do not misunderstand me, I am not an opponent of Agile, on the contrary, we always use it in the development of our projects. But Agile is not a magic pill for all occasions. This is a methodology with its goals and rules. You can not mindlessly take it and apply, as described in the theoretical book. Look at any IT company that uses Agile, and in particular Scrum. Which of them uses classic Scrum, according to all the rules? I think almost no one. At all, this approach is optimized for the realities of the company. We, by the way, are not classic Scrum either, there are XP elements, and several projects are going on Kanban. Designing does not contradict Agile, let's separate flies from cutlets.
The vast majority of large projects are done by Agile, and this is almost the only way to success. If you take a theory, then you need to sit down and do everything at the same time. In practice, if we start everything at the same time, including design and programming, we will have to redo much. A more effective solution is to design the basis (the analytics stage, usually 1-2 weeks) to see the whole project, and then sit down to design the first interfaces while the programmers think over the architecture, select technologies, write the core of the system. That is, the first iteration on Agile will have a naked design, its analytical part, and from the second (1-2 weeks) you can start programming, and after 2 weeks, when the first interface designed in Axure is created, you can connect designers and .d That is, we are carrying out a project on Agile, but we think with our head instead of an ass. With such an approach, a month after the start of the project, we will see the project boundaries, selected technologies, architecture and even the first page in the design, and most importantly, all this will not have to be redone 10 times.
Convinced? I think not all. In the comments to each of my articles there are always people who claim that this is unreasonably expensive. Usually these are programmers who are used to writing code, they do not think in terms of business. Imagine that we decided to work without design. They put the programmer, he began to do something. They put the designer, showed him the description on several pages, said “draw”. The programmer thinks technically: which language to choose, which architecture to lay, how the database will be arranged. The designer thinks creatively: what style to choose, what colors, where what unit to place. As a result, we will have a beautiful picture from the designer and the correct code from the programmer, but it will not work to achieve the final goal, we will have to adjust the logic, move the blocks, add functionality. And in such cases, the first 90% of the project and the second 90% of the project are often obtained. Any change in logic entails changes in design, layout and programming, and then it is all tested and again changed / modified. Familiar picture? I think more than half of the readers of this article have seen it. It is the design that can protect from endless alterations, that is, it is not an extra stage in the load, it is the same as the design during construction, examination of the patient or diagnostics of the vehicle’s malfunctions. In other words, this is a mandatory stage of development of any large site, and it's time to get used to it.
Globally, there are two approaches to design: 1. Mobile first - when we start designing with a version for mobile devices, and then a fully functional version. 2. Desktop first - when we start designing a fully functional version, and then we make simplified ones for mobile devices. Both approaches have their pros and cons, I prefer the second option, it is always easier to simplify, especially with a cool analytics, which I will describe below. In addition, the second option and more accepted around the world, although the Mobile first recently actively developed.
Below in the article there will be many examples from our practice, and I will show you step by step exactly how a large project is designed and why each stage is needed.
Initial requirements
First you need to collect all the requirements for the project. The problem is that these first requirements come in a very different form: from a simple description of the idea on one page to a dynamic prototype. In any case, for 10+ years of work I have not seen a single correct TK. Most often, the work must be started almost from scratch. Even if there are developments, they still need to be checked and once again walk through all the stages so that the technology in which each new stage is connected with the previous ones is not violated.
A project is always a special vision of its creator. Therefore, first you need to ask the right questions. On the one hand, this will help to understand what exactly the creator of the project wants, on the other hand, will give an understanding of the maturity of the idea in his head. As a rule, every second idea has not yet ripened from the creator himself, and therefore, it is too early to take on it, and in some places it is even dangerous for the team. Below, I divided all the questions into groups that need to be worked out before proceeding to the design. If the creator does not have any of the groups of answers, this is the right signal of an immature idea.
1. Purpose and main idea. Any undertaking must have a goal and success criteria. Investors have a very cool reception, they ask to form the idea of ​​the project in one sentence. If a start-up can do this, they will continue to talk to him, if he cannot, the idea is too raw, and it needs to be improved.
2. Target audience. Any entrepreneur or manager should know exactly who will be using the project. Definition: “Everything, from 18 to 60 years old” - definitely does not suit us. The portrait of Central Asia should be quite clear, it depends on what will be designed. It is necessary to understand who will use, who will pay, who is important for the promotion of the project, etc. Ideally, reinforce the guesswork with research.
3. Market. Any product has its market. This may be a market limited by the geography of a particular country, language, subject, etc. The future of the project also depends on this. There may be several segmentations, for example, a country and a thematic niche in this country. Ideally, you need to find out not only the boundaries of the market, but also its features and rules, if any. Much depends on culture: for example, in Russia and Ukraine, users are not used to paying for some services on the Internet, which is not the case with the United States and other developed countries. That is, with the same idea and audience size, we can get completely different features of the project and the size of the final profit from it.
4. Competitors. They need to know much deeper than just the name, and in general their presence on the market. What they breathe, what problems they have, what plans. That is, you need a person from the market who knows it thoroughly. This will greatly help to design a really strong solution. Often there are direct and indirect competitors - you need to know everyone. I really love projects that are reflected in the profile companies for their own markets. Some digitization of real business. Such projects very often become very successful because: a) they know the market; b) they have enough resources; c) there are still very few niche projects on the Internet.
5. Monetization. The big problem for product owners is that they have a great idea, but they don’t understand how to make money from it. This is one of the main causes of death for startups. The option "think about it later" is absolutely not suitable. This is where to start thinking. Less often, there are cases when a project is created not for earnings, but for the sale of a large company, and monetization tools are not needed a priori there. But this is 1 case out of 100. Yes, and sell, being profitable, it is still much easier. Moreover, almost always new projects start without monetization tools, they are refined later, but you need to plan monetization immediately.
6. Weak and strong points. Very often, knowledge of the market and competitors is such a strong advantage that it is enough to create a project. Strengths and weaknesses are usually born from such knowledge, or from past work of the company or a specific person.
7. Timing. This is something worth paying special attention to. If the idea is innovative, and something new is being done, something that is not found anywhere in the world or in a specific market - the deadlines will be critical, you need to do it as quickly as possible to fill a niche. If we are doing something standard, like, for example, an online store, then this is done for a real business that has clear planning. In any case, even though we will be doing an Agile project, and the deadlines are blurry, we need to know the time frame and control points.
Project Goals
Fig. 1. The objectives of the project "Marketplace."
Previously, we divided goals into client goals and project goals. Now we have gone from this and left only the goals of the project, but the client still needs to ask where he wants to go and why the project is being done. This is due to the fact that the goals of the client, most often, are typical. It is necessary to literally feel the vision of the client, to become one level with him and see with his eyes. Then only comes the correct understanding of goals and the opportunity to properly manage the product.
Since the writing of the last article, we have developed several of our own products and are developing them now. At some point, the understanding came that we lack Project Projects, we need Product Managers. That is, people who can manage the product, and not just set the task of writing code and drawing pictures. The same applies to UX / UI Designers or in Russian style, to designers. We need people who can understand the client’s business. It is not for nothing that I wrote about this in the block about goals, this is where the work begins, and we need the right people, with a completely different mindset, who are not only able to realize what needs to be done, but also to achieve this.
The objectives of the project may be very different, it all depends on the project. Usually it all comes down to global goals: money, users, actions, attention, market share, etc. To achieve each global goal you need to achieve many small, local goals. And there is usually a lot of thoughtful mechanics, how it is done. But this is still not a constructor. Even if the designer and product manager know a lot of basic mechanics to achieve certain goals, this is just mechanics, and not the implementation itself or the achievement of some results.
In addition to the goals themselves, it is important to find out the criteria for success. A set of KPIs that will show us whether we have achieved goals or not.
Goals are the direction of travel, some starting point. All design, and indeed the whole project, depends on their correct formulation. It is necessary, slowly, to think over and control them as the project develops.
As a result, we get the first document with a list of goals and criteria for success. It is worth highlighting priority areas. It is impossible to make a stage without the owner of the product and its permanent fitback, however, like many other stages.
The target audience
To make a quality product, you need to understand in detail who will be its users. And you need to understand this from the very beginning. A survey of the owner of the product will give us nothing more than guesses; the real picture is usually hidden. To conduct their full-fledged marketing research and surveys usually do not have either time or resources. Therefore, you can explore the target audience in several simple ways, which will be enough for design.
To begin with, the whole of Central Asia should be divided into groups according to goals and main features. The set of such signs in each project will be different. For example, if we are doing a project on photography, then our Central Asia may be: professional photographers, amateur photographers, customers of photography services, models, etc. Each of them has its own parameters by which we can group them. This is important to do in order to design a useful site for the main groups of Central Asia, which will solve the tasks of each of them. In large projects, such groups are usually up to 10, and they should reflect the goals for 98% of users of the future site. One of the groups will be the main one; the largest percentage of users of the future project will be included in it, it should be given special attention.
At the same time, it is important not to forget that besides external users, the project also has internal ones, for example, content managers, sales managers, support managers, and others. For these users, it is not necessary to make a detailed portrait, but their goals still need to be taken into account. For these users will be developed admin. A huge piece of work, which most do not even think about, but which in some projects is even more complicated than an external site.
Further, for each of these groups, you need to make a description, a certain portrait. There is already more difficult. It is good if the project team knows the market thoroughly and can quite accurately describe the target audience, but this is rare. I would recommend to make a list of important issues for the project, and go with him to communicate with representatives of different groups. This can be done at different professional events or on social networks. And make it absolutely free. In this case, we are talking about a certain analogue of the in-depth interview, which allows us to understand the motives of a person and predict his behavior. The goal is to understand our target audience, how it lives and how it thinks. In each group, it’s enough to interview 20-30 people, although the more people we ask, the better.
After such interviews, we should understand our Central Asia fairly well. All information needs to be systematized. Ideally, to recall the classics of marketing research, and for each group to make a description in 4 planes:
Socio-demographic characteristics: gender, age, education, income level, occupation, family, children, etc. This is basic information, from which we will repel. The behavior (needs, expectations, etc.) of a person with an income of $ 300 will obviously differ from the behavior of a person with an income of $ 30,000, that is, there may be very different people within the same group of parameters, and making the project equally interesting to everyone is simply impossible . To do this, we need to identify the main groups of Central Asia, and then optimize the site for them.
Psychographic characteristics: lifestyle, personality traits, character traits, life position, value system, etc. These are less obvious, but even more important features of the future project's target audience. The value system of students will clearly differ from the value system of politicians or businessmen. This seems obvious, but no one can say for sure exactly how this or that target group is different, so the question needs to be researched and explored.
Behavioral characteristics: the reason for registration, the desired benefits, the frequency of attendance of competitors, the degree of readiness to go to another site, attitude to the project (if it is not new), commitment to existing sites, etc. We have altered this group a bit from classical marketing research in the direction of the Internet, that is, we are interested here how the user behaves exactly on the Internet. In some cases, when we are doing a project related to offline, we will also be important to the behavior of users in the real world. It will be the most difficult to figure out, but this is where the key to the success of the project lies. 5-7 years ago there was a fashion for copying Facebook, and so all those who copied did not even think about the behavior of users. Everyone perceived Facebook as a site with convenient interaction tools, and in fact, people used and enjoyed Facebook for completely different reasons. Knowing at least something about design, many companies could not throw money at Facebook clones, but no, Mark Zuckerberg’s laurels still keep some people awake.
Geographical characteristics: country, city, district. In new projects, I often hear that they will use “everything”. In fact, each country has not only its own language, but also its own culture. So even in the Internet projects, it is important for us to understand which countries we focus on. And if the project is linked to offline, then this group will take on special significance. Users from the United States will clearly be different from users from Thailand, and differ in almost everything.
By the way, if someone has not figured it out: at the stage of Central Asian polls, the questions in the questionnaires should correspond to the 4 groups described above. They must disclose each of these groups.
At the end of this stage we will have a document with the groups of target audiences, and each will have a description. Also, when studying CA, many useful ideas will appear that will need to be written out in a separate document.
Characters and Empathy Map
Fig. 2. Characters of the project "Marketplace".
Our target audience is divided into groups, and each of them is described. At the previous stage, we even did surveys of each group. But this is not enough. Next, we need to do the development of characters for each of the groups of target audiences. A character is a certain typical image of a particular group that needs to develop a whole portrait describing who he is, where he lives, what he enjoys, etc. This will help us to understand our Central Asia more deeply and optimize the project for it. The designer will have to put himself in the place of each character and think about the project from his point of view. All this will help generate ideas for the project.
In the description of the character should be:
- Full name
- A photo
- Age
- Country and city
- Occupation
- Family status
- Behavioral characteristics
That is, we largely repeat the previous stage, when we described each group according to given parameters. The description of one character should be up to 1000 characters, the time for these works also has value. The photo must be real, but at the same time a stranger, so that the character is not perceived by us through the prism of knowledge about someone.
The most important thing after a portrait is tasks-problems-solutions of each such user. This is where we generate the bulk of the ideas for our project. Ideas from the previous stage, in which we described the first part of Central Asia, we can add to problem-problems-solutions in order to understand exactly how these ideas came about and what they are connected with.
After character development, you can proceed to empathy cards, you can do them for each character separately. This allows a deeper understanding of Central Asia, and specifically, to look at the problem through the eyes of users. Sometimes the empathy card is used instead of characters, since both characters and empany cards put us in the place of users and force us to look from their bell tower. But, in fact, the characters and empathy card solve several different tasks. Parshonagi show all the tasks and ways to solve them, while the empathy map will help you find the most basic things for users, reveal their basic behavioral patterns and place accents in the design.
Fig. 3. Empathy map of the Marketplace project.
The essence of the empathy card is to divide the user's attitude into 4 blocks:
- I think and feel.
- I speak and do.
- I see.
- I hear.
Then analyze them and draw conclusions in two planes:
- Problems and pain points.
- Values ​​and achievements.
This tool is useful not only in design, but also in marketing.
At the exit you will receive a document with a number of characters and each of them has its own card of empathy. Also after this stage there should be a lot of ideas for further design.
Market and competitors
Fig. 4. Comparison of competitors of the project "Marketplace".
Once we have decided on the goals and target audience, we can proceed to the study of the market and competitors. When evaluating any sustainable business or startup, the market itself, its volume, prospects, etc. are always evaluated. To do this, you need to track trends and research, to feel the market. Usually the owner of the product is aware of general trends, otherwise he would start a project. But here it is important to study the situation today and find forecasts for market growth.
There are three market situations: 1. The market is falling. 2. The market is stagnating. 3. The market is growing. If the market falls, it costs nothing to start at all, with very few exceptions. If he stagnates, that is stable, most likely, all the main free niches are already occupied, and it will be difficult to get there. The most advantageous situation is when the market grows. And the faster it grows, the more likely it is to hit the bank. Successful projects usually appear with the growth of the market. There is another situation, the fourth, when a project creates a market. That is, the owner of the product came up with something completely new, which is not in the world. This is the most difficult option and the most risky. When there is no market, the project is created in complete misunderstanding, blindly. It is in this market situation that unicorns, projects for billions, are hidden.
To understand where we are, we need to look again at the goals and remember exactly what needs the project solves. Any market has borders. Again, to say that our market is the entire Internet, because we have an Internet project, this is fundamentally wrong: the market should have clearer boundaries. And the narrower the market, the clearer what needs to be designed. We usually describe the market by 3 parameters: 1. Products (consumer properties, product groups, substitutes, prices, delivery, etc.) 2. Geography (countries, cities). 3. Time (seasonality, permanent or temporary). The first two groups are more or less clear; you just need to deduce the criteria for the project and describe it. The parameter "time" is quite rare and is peculiar to some types of projects that are tied to seasonality.For example, seasonality may be important in tourism projects, and from understanding this phenomenon in design, we will be able to lay down certain “seasonal” functions, such as seasonal offerings / mailings / activities.
Often the online market competes with the offline market. For example, online loans are a separate market with their own rules and features. The rival market will be loans offline. In this case, the market parameters will differ only in the first and in the second category: in products and geography. The product will be different in that the online loan to get faster, more convenient, another interest rate, etc. By geography: we are not tied to a branch of a credit institution, so anyone can receive such loans anywhere in the country. In this case, more often than not, the country itself will matter, but the online service can be scaled much easier. At first glance, both there and there are loans, except that one loan is issued in cash and the other on a plastic card. But if you look into the market, it turns out that everything is different.And online loans are much more convenient than the good old offline, because online lending services grow like mushrooms.
Speaking of markets and strategies, I always remember the wonderful book “The Strategy of the Blue Ocean”. Understanding the market and our place on it will provide an opportunity to put the right accents in the design and make a product that can compete with others. While many do not think about it, because the Internet is not as big competition as offline. But as time goes on, there are more projects, and less free niches. Therefore, the study of the market and competition every year will only intensify in the design.
Knowing the market, we can explore competitors. The goal is to be the best. This is especially important when we enter the already existing market in which there are similar projects. And cool design will not be enough for us, we need to be several orders of magnitude better, otherwise we will not win the competition. Ideally, to come up with a unique "chip" that will distinguish us from competitors, but first, you need to know every cell of each competitor.
First you need to make a list of competitors, break it into direct and indirect. Direct - these are projects that solve the same need as we do. Indirect are substitute projects, they often solve a part of needs, or those on which our target audience is located, and we will compete with them for users. We usually ask recognized experts in the market, google for keywords, look for ratings, subject catalogs, etc. If our market is limited geographically, the study of similar projects in the west and in neighboring countries helps a lot. These projects are not our competitors, but can be a source of useful ideas. For example, we are now creating a single state site. In order to explore the experience of such organizations, we looked at the same sites in neighboring countries, as well as in the US and the UK,which allowed us to draw a lot of useful ideas.
SWOT-. : , , . - Empathy Map, , . , . , , . , , . , , .
Fig. 5. SWOT-analysis for the project “Marketplace”.
There is another great way - competitive intelligence. When we pretend to go to a competitor and get a lot of interesting information. Sometimes without such intelligence it is generally impossible to conduct a normal study.
When we investigated the basic information about competitors, we can collect all this in a beautiful summary analysis - a large table in which we derive the main parameters of interest to us and compare all the competitors. Parameters are formed depending on the project, because we will always compare very different projects.
Separately, it is worth making a table comparing the functionality of direct competitors. That is, write out all the typical functions of competitors in one table and checkboxes, who has what function. Moreover, each function should be evaluated by points (from 1 to 10), since the quality of the implementation of the function may also differ. At the end, bring out the total number of points in order to understand which of the competitors is the most developed. All calculations need to be done according to the method of weighted coefficients, since the importance of all functions for us is different. You can also apply the principle of "reasonable borrowing" and copy some features from competitors, if they are really in demand in our project. Most often this is done for large blocks of basic functionality or for individual standard trifles in the interface, so that the user can see what he is used to,and better understood the new project. At the same time, the unique functionality is usually not copied, it is in this part that the project should be different, because our task is not to make a clone, but a competitor is much better than an existing project.
, , , . , . . , . (42%), . , , .
. 5-7 . , , .
--
Fig. 6. «».
. , . (), - (). (), . , , , . , , .. , , .
Stage ZPR originates in the characters and Empathy Map. For each character we have to create a table with three columns: Tasks-Problems-Solutions. By living into the role of our characters, we will be able to imagine what exactly they want and what problems they face. It is for this reason that the quality of the characters themselves is very important, so that they correspond to reality as much as possible. The table itself will turn out to be very large, because we will have about 8-10 characters, and each of them may have 5-7 tasks and problems, which may entail 20-30 ideas for a future project. Get a table with hundreds of ideas. All of them will be implemented very long and expensive, so here you need to select and divide everything into stages. For the first stage, you need to select the most important, MVP functionality. But how to choose the most important? Empathy Map will help us with the answer to this question.
. « », « ». . , , . , « », , . , , , , , . , , .
, . - , - . , : « , !?». , , . , , . , . , . , , , .
3- , . . .
Customer Development
. «» . . — , , - , , , CustDev .
. , , , . , . Customer Development — , . , . : . , .
:
- — , . , Google.
- — . , App Store.
- Freemium — , . , VIP .
- — , () - , . , , .
- — - . , - .
- — , . , -.
- — . , .
Many models can intersect with each other. For example, Facebook and Google receive 80% of their income from advertising, but they also have a lot of different products that you can buy by subscription, there are entire platforms, etc.
In addition to popular models, there are quite unique ones. For example, you can collect and sell personal information of users for promotional purposes, which many do in the US today. In any case, you do not need to run for fashion, you need to offer our users the tool for which they are ready to pay.
To begin with, the designer must understand what people are willing to pay for. To do this, it is best to use Empathy Map, which shows us the most valuable to users. Then you need to think about how this or that monetization model is applied. And the third step, you need to make calculations for revenue, while becoming attached to users. For example, if we decided to make a platform and take 3% of all transactions for all transactions, then we need to achieve a turnover of at least $ 1 million per month in order for the project to earn $ 30,000. site, development team, which you need to pay, etc.
, , . , , . , SaaS , CRM, , , . , ? : 1. . 2. . 3. . : 1. , . 2. , . 3. . - , , .
, , , , .
Mind map
Fig. 7. Mind Map for the “Marketplace” project.
So, we have a lot of ideas. In any big project of ideas at this stage we should have over a hundred, maybe even a few hundred. In such a mass of ideas, you can just get lost. In addition, we do not see a hierarchy of ideas, relationships, and what is affected. Next, we need to collect all these ideas into one big Mind map, where nesting and connections will be visible. This is the first step to visualization.
The main part of the ideas we have in a large table of CRA. We take the solution column and in order enter all the ideas into our Mind map, grouping them in parallel. Short but understandable formulations should be written out; you do not need to push all the text in the Mind map. At the same time, if u have an idea of ​​some function that has different parameters, we should write them out, as an extension of the mind map. For example, if we have the “online payment” function and it has options: credit card, PayPal and cash, then we show the “Online payment” branch and nesting in the mind map - 3 payment options. Detailing the map is very important, in places up to the fields in all forms. The problem is that while we are working with analytics, we remember well what needs to be done. As soon as we move to work with individual interfaces, everything will start to be forgotten. And if we do not detail the map, we will have to design the interfaces not on the map (how to do it right), but to rummage through the past stages of analytics and recall what we have invented. Also, in addition to the CRA, we need to add ideas to our map from other documents that we have accumulated. Absolutely all ideas must be reflected in the map.
Usually one big card is made, but projects are so large that, for convenience, you have to divide the cards into several. Usually there are 7-10 main branches in the map and everything is written into them, creating long logical chains with nestings. In them, we can immediately divide the functions into implementation stages and importance in numbers. We also need to show all links with arrows. For example, the registration function is often associated with very many functions in a project, and, at a minimum, after registration, special functions become available to the user - all this needs to be reflected on the map. Other tags are also valid. Tasks can be very different, and in these hundreds of ideas, even broken into logical connections, you can get lost. In any case, doing this procedure, we will turn chaos into a system and, above all, do it for ourselves in our own mind.
We make maps in a special program - Xmind, although there are many alternative programs and online services. It does not matter.
In fact, after creating this map, we can already connect programmers who will base architecture on its basis and can start developing the core, so it is important to visualize the staging.
All previous stages and the card itself do not take much time. This is the zero iteration in the project, after which it is already possible to start programming while the designer is working on the first interfaces. Even if the project is large, the analytics stage takes on average 40-60 hours. A small price to lay the right foundation, and not to redo it later.
Next will need to design interfaces. And it will need to be done on the basis of the Mind map. If the map is detailed so that the designer does not need to go back to the past stages of analytics, then the map is done well.
At the end of this stage, we will have one Mind map or several for different parts of the project, phased implementation of features and priorities.
Site structure
Fig. 8. Site structure for the Marketplace project.
Having made a card according to its functionality, in theory you can proceed to interfaces. But on the first interface there will be a problem - what structure and what main menu to make? In our Mind map we have 7-10 main sections, and there are still a lot of important minor ones. The golden rule of usability (Miller’s Wallet) states that there can be no more than 5-7 elements in one block. The same applies to the main menu. However, there is an exception, if all menu items carry the same meaning, then more can be done. For example, media sites or online stores, where the menu is thematic sections. Within each menu item of the article, just a different theme. There are other exceptions, but this is rare.
First you need to understand that not all the functions of our Mind map are sections. Even the main ones. Sections of the site should be simple, understandable, and everyone should bear the benefit of our users. Therefore, a separate Mind map is usually made for the structure, in which we display only the pages and sections of the future site. Ideally, do not exceed the 3-level nesting, although modern sites are not so strictly adhere to this rule. All sections and subsections should be intuitive, for each name a person should immediately understand what awaits him by this link and which subsections can hide there. Often in large projects there is a main menu and several auxiliary ones. For example, in online stores the main menu will be a catalog of goods, and auxiliary information about payment, delivery, contacts, about the store, etc. It happens that you need to separately display the menu of your personal account for different roles or other sections hidden from all users.
At the end of this stage, we will have a complete site structure and an understanding of the main and secondary menu. It will form the basis of the first interface.
This is the end of the first part of the article. What we call the analytical part of design. In the next article, you will learn how to turn all this analytics into interfaces and in particular into a dynamic prototype.
PS The other day we started a design course from the authors of the article: Designing serious sites . You can also sign up for the course at a discount. To do this, write to info@digitov.com
PPS To receive our new articles before others or simply not to miss new publications - subscribe to the SECL Group's fan pages: Facebook , VK , and Twitter .
Author:
Nikita Semenov
CEO
SECL Group Company
Source: https://habr.com/ru/post/318598/
All Articles