🚴🏾 💢 🧛🏻 What to analyze before designing an interface 👷 🖖🏿 👩🏿‍🤝‍👩🏽

Long gone are the days when you could just start drawing a website or application. Even the simplest interface requires at least a primitive analysis step. Many designers have their own methods of analysis, and someone leaves it to analysts and does not go into the process. I have long formed my own template for this stage, according to which I am doing preliminary work for any New project. This stage is not a panacea, and in the course of the work, unaccounted moments emerge, but one thought terrifies me how many of them could have been without analysis at all. I share my template and expect to see your additions in the comments.

I must say right away that this article is not about business or system analysis, but about “design analysis”.

Some points of my template are suitable only when designing a new version of a site or application, and not creating it from scratch. Such items will be marked with the word "Redesign". The analysis is also suitable for designing the interface of anything - a website or application. Therefore, I will always write "Interface", implying that you substitute what you need.

Too lazy to read, here is an example of the presentation of my analysis phase .

Ask customer

The most logical point is to ask the client what is already there and what exactly is not like, and most importantly why it is not like. Even if you can see right away that the current interface is terrible, you should definitely ask why the client started a redesign. Not obvious moments may come up.

List of my standard questions:

Do you have a logo / corporate identity that should be followed? Sometimes there is a style and logo, but the client allows them to be neglected. Especially useful infa if the logo sucks.
What do you want to change in the interface and why? Determined with the main front of work.
Who do you consider your main competitor? Useful in the following stages of analysis.
Do you have a favorable difference from competitors? It is rare, but sometimes it turns out that there really is.
Give an example of the interfaces you like and describe why. Why it is very important. It may turn out that the client does not like the site in general, but some part, for example, a white background, which he associates with “ease of design”.
/ ? .
? , , . . .
. ? , - . , , . , .

. / Google Analytics

I, as a true patriot and starover, prefer I. Metrica. Basically, because the Google Analytics interface sucks and there is no Webvisor.

What I see in Metric:

Conversion . If goals have been set. If there wasn’t, then advise the client to install them so that some statistics are collected while you are doing the rest of the steps.
Cards . All maps, including Form Analytics.
Failures. The total amount . In my opinion, this indicator, in my opinion, says little and is needed only to understand its share in the next parameter.
. , . : « » , , Covid19, « Covid19. », - , . , .
. , , , .
Statistics on input devices . It is useful for proving to the client that he needs a mob. version if he suddenly abandoned it at the questionnaire stage. It will also give an understanding of what permission to draw it on.
Gender and age of major visitors . Useful at the next stage of analysis.

User scripts

One of my favorite points of analysis. A rather creative stage in distinguishes from the previous ones and damn useful. Putting myself in the place of the user, I find a lot of not obvious insights, which often results in new useful functions or simplification of existing ones.

To create a script, I create a User Card.

This is what it consists of:

Name and age . Based on the data from the previous step about Metrica.
 Problem / goal . Description of why the user opened our interface.
 How I came to the site . For example, I drove in Google "Buy a vaccine from Covid19." I take requests not from the ceiling, but from Metric.
 Login page . On what page the user got to a lot depends on his future path. Not always the user gets to the main page.
 Device . We take it based on the metric. Much of the design depends on the device from which the user works with the interface.
 Desired target action . What we already want to get from the user. For example, we want him to fill out some form or click a button.

Based on this card, I am writing a script.

What the script consists of:

Of the visitor’s goals described in the Card
From an assessment of the current Interface (Redesign) . We look at the current interface and try to get from it what is written in the User Map. We note the main plugs.
From the "seen" successful implementations . We add to the script some chips that we know through the use of other sites.

I write scripts from three to five. I try to describe: standard; complex (purchase of not one product, but several and different in characteristics); not standard (user login with some page or device not suitable for the purpose). And I’ll add a couple of other scenarios if I believe that in some of the described essence is not sufficiently disclosed.

Competitors

There are two classic answers to the question about competitors: “We have no competitors”; “We are competing with everyone.” Neither one nor the other, of course, is true, so you need to dig deeper. For this, the question is in the Questionnaire. When analyzing competitors, I write out only what can be gleaned from them. It makes no sense to write out weaknesses. This will not give us anything useful. I open competitors' interfaces and try to use them based on user scenarios. Indeed, if it is a real competitor, then its target audience is approximately the same. To me a couple of times, clients with a little irony in their voice said something like: " Ah, well, fine. I just took what I saw from someone there and apply it to us“At first, it was annoying, because analyzing competitors is only one step out of many and far from the main one, but the impression among clients may be“ stole that everything is possible. ”Fortunately, this did not happen often. After that, I’ve specially the presentation of the analysis was added by the phrase “ You can learn from competitors ” right away saying that if necessary, then yes, that’s what I’ll take it without hesitation that someone is already doing it.

In addition to analyzing competitors, I also analyze related areas. For example, for the interface about healthy eating, you can also look at calorie counting interfaces, which can sometimes be useful.

Interface map

Many people name the interface map differently. This can be called a structure, information architecture, hierarchy, site / application map, or related terms. One essence - a description of the relationship of pages / screens of the current interface. I do this in order to understand the current logic and based on it to make my simpler, more logical and useful for users. The output is two cards: "As is" and "As necessary."

Examples of style

Examples of the future interface style can be made in the form of screenshots of interfaces whose style you consider suitable for the current task. It is advisable to try to find examples on the same or similar topics with the theme of the client. So it will be easier for the client to enter the essence of these pictures. I have had occasions when there are simply no worthy examples in the subject and I took something neutral. But it is necessary to tell the client that this is just an example of style (airiness of the interface, color scheme, softness, manufacturability, etc.), and not 1 in 1, what he will get in the end. And it is advisable to find neutral examples not in Russian so that the client does not automatically read the text, but receives a general impression. At this stage, it is imperative to get the client to “poke a finger” into the example of the style that he likes.This is necessary so that in his head there is a clear understanding of what style he should expect in the end. This is useful for both the client and the designer, who will take less time to search and simplify the stage of approval of the finished design.

What is the result

At the end of all the stages, I collect a presentation in Google presentations and show it to the client. He must specifically approve the analysis stage, or if there are any nuances, then approve it with the comments that I write down and either change in the presentation if it is not long, or send an email with a link to the preza and comments. If the presentation is completely past, then you need to understand how this happened and make a new one. But this has not happened to me. And if it happened, it would be better at this stage than at a later one.

What do we get from the analysis phase

The client has become a little clearer what to expect in the end;
The designer understood how to do it and why;
It’s easier for the designer to evaluate the complexity of the project and give out almost exact deadlines ;
It is easier for the designer and the client to pass / accept the result;
The project will be more thoughtful and that’s good.

What to analyze before designing an interface