Найти в Дзене

Real design process. A step-by-step story about how to create a business-oriented site. Part 2

Continuing the theme of the Design Project and starting with item 3

3) Thinking about scenarios or creating a Customer Journey Map

A designer should think in terms of scripts, not screens. It doesn't matter how many screens you have, it only matters how convenient it is for the user to solve their problems using your service.

Purely logically it seems that it is more convenient to do everything within one screen, but designers know that long forms are better to split into several steps. There are no fundamental rules in design, everything always depends on the task.

In my practice, I use the Customer Journey Map to think through scenarios. I have already described the essence of his work in The Design Times' Telegram-channel:

CJM is a table that vertically (columns) shows the steps you need to take to reach your goal. For example, when buying tickets on the airline's website, the columns of your table would look like this: the website, filling in the form (where from, where to, who and when), finding the right flight, viewing the details, payment.

Horizontally (row) there is the following:

User purpose

In this case, the purpose of the user is not a global goal (to buy tickets), but a local one at this stage, for example, to fill out a form or select a suitable flight.

Key action

Based on the objective, a key action can be identified. At the stage of filling out the form, it will be the transition to the list of flights according to the selected parameters.

Mood

Here it is necessary to define how the user feels at each stage and try to avoid discontent or confusion. If several stages in a row go negative emotions, there is a high probability that the user will not continue to work with the service.

Possible problems

This is an extremely important stage to think about. It may include both errors from inattention and misunderstanding of the interface.

Solutions

This stage is closely related to the previous one. For each problem, we need to find 1-2 solutions. Usually, after identifying possible problems, the solutions become obvious. That's why CJM is very helpful in designing interfaces.

Many people think that the success of a project only depends on experience, so they underestimate the importance of the process. The use of CJM helps to minimize the lack of experience due to a thought-out sequence of actions.

Making CJM takes a lot of time, but don't forget that it is also a design. Perhaps it is even more design than what we do in a graphical editor.

The last part is very important. Beginner designers always neglect the analytical stage, immediately starting to draw. I was doing the same thing at the start, but after I started using the process, my projects became more thoughtful.

In this case, we will have a small script (site → application), but even on it the user may have problems.

For example, it may not show trust in your service (add reviews, warranty?), the appearance of the site will not look premium (change the visual style?), the code will not come (do resend, add online support?), ...

The end of the stage:

You need to understand what problems may arise in the path of the user and come up with several options to avoid them.

4) Creating a framework

A framework is a structure around which interface elements are built. For example, the Gmail mail service has an upper search line, a left-hand menu and a right-hand side for mails. A similar structure is the framework.

Designers exist because there is no universal framework. Each service needs its own. Of course, there are top-level design rules, but a little deeper you need to come up with your own solutions, otherwise, the user will not solve their problems optimally. It's like turning the pedals with your hands. There is movement, but not so effective, if you used your legs.

In the case of the site, the framework - it is a sequential blocks, collected from the prescribed entities at the stage of research. If your business is unique, you will have to come up with something of your own, but as practice shows, most companies have several direct competitors, whose experience can be adopted.

***

What does a visitor do when they get to the site? If the service is familiar to him, he immediately goes to registration or login. If not, he will be interested to look through the entire home page in search of logical and emotional confirmation. That the user, having studied the whole page, did not lose the form of downloading the application, it is better to duplicate it at the bottom.

Let's remember the structure of the site Wheely: download the application, about the drivers, about the cars, insurance, download the application, reviews.

As you can see, at the beginning and end of the page the key actions are repeated so that the visitor of the site, having looked through all the blocks, did not leave. This rule suits everyone.

The main blocks of the site should be selected for the type of project. Business-class taxi ordering service needs to show the status and differences from the usual services. Wheely does this by using a photo of the driver in a suit and a list of features like a meeting with an umbrella in the rain. If there are no other features in your service, you can use the structure of the competitors. But often, direct competitors appear with some features that need to be emphasized.

Suppose that your service only hires girls' drivers. In this case, you need to show it, using photos and describe the reasons why the drivers of the girl is the best option (the content is usually provided by the customer).

Such services will never be hindered by the reviews of famous people and links to popular media publications. This increases trust, which is very important in the era of the Internet.

To add clarity, demonstrate a block with a screenshot of the application and a description of its main functions. Don't expect to be overlooked, but its presence will increase trust.

To determine the required structure of the site, it is enough to write out all the entities that are used by competitors and select those that are most suitable for your business, slightly transforming them under their own tasks.

Having accumulated competencies in a certain area, this stage you do not have to go through each time anew and you will be able to use their developments, periodically maintaining their relevance. That is why it is profitable for a designer and a studio to specialize in a certain area.

The result of the stage:

You should understand what entities (blocks) you will use and in what sequence. It is better if this is done in the form of sketches on paper or in a text document.

...

Read on in the next section...Part 3

https://pixabay.com/ru/photos/%D0%B7%D0%B0%D0%BF%D1%83%D1%81%D0%BA-%D1%81%D0%BE%D0%B2%D0%B5%D1%89%D0%B0%D0%BD%D0%B8%D0%B5-%D0%BC%D0%BE%D0%B7%D0%B3%D0%BE%D0%B2%D0%BE%D0%B9-%D1%88%D1%82%D1%83%D1%80%D0%BC-594091/
https://pixabay.com/ru/photos/%D0%B7%D0%B0%D0%BF%D1%83%D1%81%D0%BA-%D1%81%D0%BE%D0%B2%D0%B5%D1%89%D0%B0%D0%BD%D0%B8%D0%B5-%D0%BC%D0%BE%D0%B7%D0%B3%D0%BE%D0%B2%D0%BE%D0%B9-%D1%88%D1%82%D1%83%D1%80%D0%BC-594091/