What is the first thing you pay attention to when viewing the site? Or a mobile application? The answer is simple and obvious - Interface. But if you still don't know what precedes the creation of the visual component of your product, then start with this article: How to: Analytical approach for building really big and profitable websites.
Website Dynamic Prototype: Briefly About the Main Thing
If you're done with analytics, then it's time to familiarize yourself with the interfaces, that is, the visual part of your product. The Mind Map that we made in the first part will be the intellectual basis of our today's stage. As a result, we will get one large dynamic prototype consisting of several hundred prototypes and storyboards.
What Are the Best Tools to Use for Visualization?
In fact, there are quite a few programs or online services that will help you with this, such as Figma. Such tools will add systematicity to the development process. On the basis of the Mind Map, the entire content can be divided into parts-chapters, and these, in turn, can be divided into pages. This will definitely add clarity and planning. Especially if you have several hundred pages.
Some people ask about Photoshop, but this is a tool mainly for designers who work with statics. And for the smooth operation of the site, dynamics are needed to think through each button and link. Otherwise, you will get a gallery of pictures, which will not be very helpful in working with clients.
Moreover, it can become a mistake, which then stops the process of writing code for your product and additional costs that can reach tens of thousands of dollars. You don't need it, do you?
Which Stage Is the Most Difficult?
No doubt this is the first layout. It will be something that is repeated from page to page, such as menus, headers, footers, and other blocks. This is the foundation of working with Interfaces. After developing this basic array of blocks and setting up a modular grid (dividing the page into certain columns to find out where this or that object will be), you can fill the first page with content and content.
In this case, a professional designer focuses on the target audience and their reach. What will get their attention? Where to place it? If the answers to these questions are received, welcome to the main page or the user's profile page. This is where the customer journey begins. You failed this stage - you missed the client.
A little tip: if in doubt, evaluate your competitors. If their site is convenient and clear and has similar functionality and good ideas, then this is your chance to understand what people will be looking for in you. Do better!
Always remember that at any stage, and this one too, it is very important to discuss all layouts with the team and the product owner. For what? The owner is most interested in the result, as he wants to make money from this project. And the team should also work with layouts.
It is these reasons that determine the importance of internal (team) and external (customer) approval. Sure, you may have some discussions, but the most brilliant ideas were born out of them.
What Is the Next Step?
If the pages are already duplicated, then it is necessary to connect them together. Using Figma's internal tools (or any other tool) you need to think through the dynamics. For example, pop-ups, drop-down lists, a transition between pages, etc.
Even as you develop the example, fill it with real content. This creates the most realistic picture of a potential site. And you can already show it to the customer or real users and get the first reviews.
At this stage, it is important to pay attention to the adaptive. Responsive is a layout that can "adapt" to different devices (the width of the working area of the browser window). Many believe that this is not necessary, because most people use the site from mobile devices. In fact, it is recommended to make this a mandatory stage of development in order not to cut off a certain percentage of users who will not be able to use your product due to non-standard devices.
In general, we have created many projects using this scheme. And it works great! Here are examples of what a really well-thought-out product is: Victoria Real Estate website.
Real Content: What the User Needs
When the largest stage is over, you should think about what text will present your business. Think creative headlines are the hardest part now? Is not it. If you don't take the content into account, your entire layout will shift in the blink of an eye.
Therefore, the first step is to think through all the headings on each page, from the most general to the smallest. And we recommend working on real content right away.
The second step is to populate the pages with the actual textual content that will be used on the actual site. In this way, we check that everything fits and is taken into account.
You can enter from either direction: first the content, then we change the design for it. Or first the design, then we adjust the content to it. The main thing is to think through the steps before the start.
As a result, after this stage, you will get a prototype that looks almost like a finished site.
Behaviour Scenarios and Customer Journey Map
At this point, it may seem like it's over. But be careful. Now you need to test everything that was developed in the previous stages. Therefore, do not be surprised that there will be errors in the prototype, first of all, implicit, logical ones.
How to Detect and Prevent Them?
The first option is to develop behavioral scenarios. The fact is that the behavioral of each person can be predicted. Therefore, it is best to provide several basic steps either within a single page or within the entire site. It is important that all functions are engaged. This way you will find logical errors or bugs.
The second option is a Customer Journey Map - a special type of behavioral scenario. The special thing is to plan and then track all the steps of the customer before he got to the site and after he left it. Everyone who uses the site has certain expectations from it, even after using it. In this way, you get the opportunity to prepare the client for your site, make him loyal and force him to stay on the site. By the way, the method can be used not only at the design stage but also in an already active project to adjust customer behavioral patterns.
Also, here are some points to consider:
• sales funnel;
• the goals you set for yourself at each stage of the funnel;
• points of interaction between the client and the project;
• problem areas;
• improvement methods.
For example, you want to increase the average customer check due to additional services. And it was invented by those who followed the activities of customers after the purchase. I bought a phone - get glass gluing and a cover as additional services. I bought a TV - get a subscription and additional settings.
After creating the scripts, we start testing the site prototype. In detail and step by step, you will identify problems and refine interfaces. A Customer Journey Map can also give you new ideas for a project, often unique ones.
And at the end, you get a prototype with fixed errors and improvements.
QA and Usability Tests: Why You Need Them
The least favorite stage is the awkward questions. And this is exactly it. A professional manager with sufficient experience should ask questions about the functionality of each designed page. He should evaluate them and make sure that everything is clear and accessible to the person who uses this site for the first time.
Then the question is, why another similar stage after testing? In fact, this is a mistake. Over time, any specialist loses the objectivity of his view of the site, and it is the outside view that will allow him to refresh it.
In addition to involving a specialist, you can conduct usability testing – to show potential users and give them the opportunity to fully perform operations. Their comments can be quite interesting and worth listening to.
However, here we advise you not to overload your project with unnecessary testing. Otherwise, instead of creation, it will turn into a series of constant additions and subtractions.
As a result of this stage, we have removed the last errors from the Interface, which is ready for further work. For small projects, all stages of interface development up to this point will take about several dozen hours, for large ones from 150 or more.
Next Stage: Technical TaskNext Stage: Technical Task
Now it is necessary for the team to write down The Terms of Reference and reveal all the details of the project. The main secret is to write only what is important. This is important primarily because the later the requirements are set, the more expensive the changes will be. And that is why certain problems associated with different stages are typical.
What if You Don't Meet the Requirements Above?
We have a tip for you, which blocks we use in our work, who is responsible for it, and what problems there may be about non-compliance.
| A Structure Element | Responsible Specialist | Problems |
|---|---|---|
| Security Requirements | The Security Specialist And The Team Leader | It will inevitably lead to hacks, the consequences of which will be unpredictable: from data theft to the complete removal of the site. |
| Design Requirements | The Designer | If we do not work out these requirements, then we risk reworking the design for a long time. |
| Site Architecture | The Architect | If it is not worked out, with a high probability we will lay the wrong architecture, this will lead to problems with the scaling of the project, and it will have to be rewritten. |
| Load Requirements | The Architect And Team Leader | If there are no requirements, it is not provided by the architecture, then sooner or later the site will begin to fall with an increase in traffic, and this will happen at the most inconvenient moment. |
| Micro-Marking | The Typewriter | The site will not be indexed correctly. |
| SEO Requirements | The SEO Specialists And Internet Marketers | If you've had at least one site that you've promoted, there's a 90% chance that you've heard that the site needs to be redesigned for SEO. Without this promotion of your product is impossible. |
| UML, Stability Diagrams | The Designer And The Programmer | More for programmers so they don't miss anything and, again, don't rework. |
| Servers And Infrastructure | The System Administrator, The Architect And The Team Leader | An ill-conceived infrastructure will lead to the need for reconfiguration and a site crash. |
| Demarcation Of Access Rights | The Designer | For programmers not to redo. |
Obviously, each item is quite important to the project, and some are critical. All this detailing of requirements protects against rework, thereby significantly saving time and money.
If the project manager has a good understanding of the design stages, it is possible to plan in such a way that the zero stage will take us only 2 weeks, and then continue work will begin on all stages at the same time, with a minimum of revisions.
The Terms of Reference - What Does It Look Like in Practice?
For clarity, we have prepared a key that will show exactly what a detailed and clear Terms of Reference can look like. The document should contain links to specific prototype pages and threaded parts of the interface.
At the end of this stage, we will receive a complete TK for the project, which should minimize the risk of failure as much as possible.
Results of the Second Stage
Creating an Interface is the basis of any project that aims to be successful. Although this article may seem complicated to you, in practice the design is not a very long and expensive phase, at least for an experienced team.
Ultimately, design saves a lot of resources, such as time and money, for the product owner. It can be used for both new and existing projects. Although the last stages will be different. In any case, this is a matter for specialists.
The VinDevs team and I have been engaged in the full implementation of projects from idea to finished product for years. Therefore, challenges at this and other stages of site development are not new for us. We offer you a full team of specialists to achieve your business goals. Welcome!
