Instead of an introduction. Anti-Longread

Presale phase

Discovery phase

UX / UI phase

Instead of an introduction. Anti-Longread

The design process in Nextpage can be divided into 4 phases: Presale, Discovery, UI/UX, and Development.

The Presale phase begins with a client briefing, interviewing the client, during which the client provides a complete picture of the project: the product objective, desired technologies, target audience, examples of sites that they like and dislike. The correct briefing helps to predict the price and timing of work. After the briefing, the Estimation stage of the project begins, it gives an understanding of how long it will take to implement all the tasks and fulfilment of the whole project. The main rule: the estimate must be accurate and reliable.

After evaluating the site, we conduct a UX Audit of the customer’s current site, which identifies the weaknesses of the interface. During the analysis, we identify and describe problems in navigation, design of pages and elements, text and visual content, as well as the functionality of the resource or the development of user paths. And immediately we present options that will improve the situation.

After the audit, the designer proceeds to prepare the Backlog, which is a list of functional groups, pages and details given on them. This is a complete list of all product requirements, that contains short descriptions of all the desired product features. Based on the prepared backlog, the order of tasks is built. The backlog is supplemented as new results of the next steps: additional studies processed by canvases.

After that, a Site Map is created. It’s an approximate or exact structure of the site/application. The sitemap will help you better understand the mechanics of future navigation, estimate the amount of required content, pages and sections.

After that, the discovery phase begins. At this stage, a preliminary analysis of the needs of the client, market, competitors, target audience, the upcoming amount of work, and resources is carried out. The Discovery phase includes a Kick-Off questions session. This is a series of questions, somewhat similar to the briefing stage. At the Kick-Off session, the team gets to know the customer and his business idea (filling out a questionnaire, personal meetings, presentations). There is a discussion of the customer’s existing business processes or the concept of a future project. Much attention is paid to issues that relate to the definition of the target audience and the main competitors. The team, together with the customer, formulates specific solutions to business problems. 

As a result of the Kick-off session, the Challenge Canvas is filled. Challenge Canvas is a problem-setting tool. A canvas is a single page that contains information about tasks, problems and ways to solve them, it consists of blocks or parts and is intentionally presented in a certain layout that creates relationships and associations. This canvas allows you to see the whole picture and find the correct solutions.

When working on the design, we use The Double Diamond model methodology. The Double Diamond method helps not only to understand the problems and tasks of the business but also to choose the right, creative and innovative solutions for them. The methodology divides decision-making into four processes: getting to know the problem, focusing on it, looking for potential solutions, and choosing the right one.

After that, the team proceeds to Competitor Analysis, the study of competitors, their functions, shortcomings and advantages. At this stage, not only market research is carried out, but we also find out what is unique about the product we are working on and what new it can offer. The next step is the User Survey, a survey of the needs, pains and joys of the end user. A representative group of users is interviewed and a questionnaire is conducted. The main goal of an in-depth interview is to understand the needs and pressure points of users.

After identifying the user’s needs, the team moves on to the Service Blueprint. It is a process of decomposition and visualization of the business process that is behind the site/application. It is a comprehensive way to refine and detail every single aspect of a service. This is a schematic representation of everything that happens during the provision of a service. The Service Blueprint includes both the customer journey and the ‘behind the scenes’ from the service side. The service map can show non-obvious processes on which the customer experience is built, as well as introduce innovations. It helps you identify opportunities for optimization: identify the most important and eliminate duplicate or unnecessary points of contact.

After this step, the command creates a Value Proposition Canvas. It is intended to provide an in-depth description of the product’s value to the consumer. Canvas helps to solve the pains of users through the benefits of this product. Value Proposition is a short and simple list of the benefits that a consumer receives when buying your product.

The next step is to create a Customer Journey Map (CJM). This is a visualized user experience, his history of communication with the business (not only the site – this is important), taking into account the thoughts, emotions, goals, and motives of the user. The map is made on behalf of the buyer and looks like a graph with points and channels of his interaction with the product. The main and most important goal of a CJM card is to have a holistic understanding of the user-product interaction. A complete understanding of how the user interacts with the business and how they feel, what stumbling blocks they meet on the way, allows you to improve (or create from scratch) the user experience.

Then, based on the available information, we translate our backlog into screens. That is, this is already the beginning of the prototyping stage. A prototype is a schematic image of a page that shows what blocks are on the page. The prototype helps to understand how the functionality will look and what will be located on the page: what type of the menu is going to be used, how the menu will look, what items it will have, what will be the main screen, where the contacts will be located.

It is needed to focus on the meaning and think through the interface at a conceptual level before moving on to the graphic design (UI/UX Stage). Each prototype must pass the Prototypes Testing stage. It is important to understand that a prototype is a hypothesis, a design option that you consider as a possible solution to a problem. The easiest way to test a prototype is to see how ordinary users will work with it. The Nextpage team uses the [Maze App] where users can test a clickable prototype.

After completing the discovery phase and all the steps mentioned, we move on to the UX/UI Stage. The team enters this phase with ready-made prototypes that have already been tested and meet all the customer’s requests. The phase starts with Desk Research. This research includes collecting the necessary information, analyzing the visual part of the competitors’ product (website and applications), and selecting references and mood boards. This research provides general information about the industry, dynamics of market volume and capacity, main competitors and target groups. This, in turn, allows our team to determine the vector of motion in creating a design.

The next step is Design Approach. This design approach allows you to “see” the design before it’s ready. After conducting all the research, defining references, creating prototypes for planning product functionality, we collect all this information in one place. And we will use it as documentation for the project. After that, we prepare a mood board. The Mood board is a presentation made up of photographs, illustrations, patterns, slogans, fonts, and color schemes. The mood board should emphasize the main ideas that will be reflected in the design. Mood boards are optional, but they make the project a lot easier to work with. The future design is based on the mood board. To do this, the mood board must be holistic.

And now we get to the stellar part of web design development – Creating Design. A  designer creates a layout of the future design based on the terms of reference and relying on the mood board. In other words, the prototype that was created during the discovery phase gets an aesthetic appearance, is reproduced in the chosen colors and has the desired typography. It is important to note that the designer does not draw the design of every page, but templates of several basic ones, using web design trends. The finished layout is handed over to the client and awaits its approval. Of course, layouts also pass Design Testing. As with prototype testing, our team uses a dedicated application to test designs on real users. And depending on the testing statistics, changes can be made.

After the design is approved, the Development phase begins. This is where frontend (and backend) developers get to work. They are engaged in the layout of the site. The designer does not leave the project, but follows the correct implementation of the design, and makes sure that the design has been implemented according to the layout. A tester is looking for bugs, transfers information to developers, who debug the work.

Presale phase

The design process at Nextpage does not begin after the sale of the project. We start at the presale stage. We start with a client briefing. Why is this needed? How to carry it out correctly?

A briefing is a process of interviewing a client (conversation), during which a sales manager asks them questions, and the answers allow us to present a complete picture of the project, estimate an approximate budget and deadlines for its implementation.

Why is it important?

At Nextpage, interviewing is the first step in creating any web project. We believe that if the project has ended in a bad way or something has gone wrong, then the reason may be in the wrong briefing. A competent briefing will help explain all possible pitfalls to a potential client and ask questions that will help predict the price and terms of work more accurately.

The brief must specify:

• The problem that the client wants to solve. Client’s clear understanding of the final result of his work. It is necessary to ask the client to tell you about the company and provide information about the product. It is worth finding out as much as possible about the target audience of the business as well.
• The amount of work. For example, we present the client a list of modules that can be installed on the site to let them choose the ones they need, or request information about future content. Ask them about the desired site structure or list of pages, which features that they would like to have.
• Deadline.
• Be sure to ask for examples of work that the client likes. For example, 3-4 sites that the customer likes, or examples of texts. Find out what exactly they like. This will give you a sense of the style to do the job better. + Be sure to ask them what they absolutely dislike: the examples of sites, colors, or even fonts.
• Let the client freely tell about their expectations and wishes. This will allow them to add information that is important to them, which may not appear in the standard questions of the brief.

After receiving a brief from the client, the Nextpage team proceeds to the next step: Estimation. Very often, the client wants to know the cost and timing of his project right away. But in the case of website design, the answer may often be very inaccurate, so it can even take weeks to form an adequate detailed Valuation.

Valuation of a project is the starting stage of its implementation. The estimation gives a fairly accurate understanding of how long it will take to implement all the tasks and implement the project as a whole. The main rule: the estimation must be reliable. Do not be overly reinsured, this can lead to the fact that the project wouldn’t be taken into development because another company could evaluate it better and provide the customer with a more suitable cost and time frame.

There are three types of estimate: rough, detailed, and an interesting one – precise. What are the differences?

The rough estimate gives an approximate understanding of the timing and cost. Its main method is an evaluation by analogy, that is based on similar projects and cases created by the performer. In this case, the customer will only hear approximate figures with a sufficiently large fork. This estimate is inaccurate, although it does be quick. It is suitable only for typical projects implemented over and over again. It can be used, for example, to evaluate the creation of an online store. Let’s say the team had already created an online store on such a platform before with approximately the same number of products.

To prepare detailed estimate the team will need to break the Technical Task into blocks and various functionalities. In this case, the project team competency estimation method will be used. The same task can have a different level of difficulty for each team member and, of course, take different times to complete. This evaluation involves the whole team, not just one person. Everyone prepares the valuation of their part of the work and lays down the risks. For example, when creating the same online store, various integrations with third-party systems may be involved. They will not affect the designer’s work in any way, but they can cause difficulties for developers.

There is one more type of evaluation. To use precise estimate, the project must already be commissioned by the team, and the customer is satisfied with the cost. In addition, the stage of briefing and a detailed discussion of all requests has already been passed, the necessary functionality has been selected, the visual part of the project has been agreed upon. The precise valuation is a step-by-step process. It is carried out based on the results of the work in the previous stage. This method, although laborious, is considered to be the best – the customer receives the exact time and cost, and the contractor fully understands the future project and how to create it. How it works: the team disassembles the project by tasks and stages, evaluates each separately. For example, only after the design of the project has been completely created, you can start reevaluating the ready-made detailed estimate of the layout.

After evaluating the site, we conduct the UX Audit of the customer’s current site. The UX audit is an expert assessment of a website for its usability. This is the effective testing that identifies weaknesses in the interface. We conduct a detailed analysis of the weaknesses of the site or application that we want to sell. The analysis usually identifies and describes problems in navigation, design of pages and elements, text and visual content, as well as the functionality of the resource or the development of user paths.

As a result of a usability audit, a document is usually drawn up, where the problems on the site are explained in detail and the solutions are offered, as well as best practices are given as an example. To prioritize improvement objectives, it is important to immediately indicate the criticality of the problem (high, medium, or low). In the future, the list of usability errors can become the main one for the bug list or backlog.

* By the way, this service may be sold as a separate product 😉

After conducting the audit, the designer proceeds to prepare the Backlog. In short, a backlog is a list of functional groups, pages and other details which is created when preparing a site/application design. This is a complete list of all product requirements. The better this list is prepared, the higher the effectiveness of the design and development team will be. This list contains short descriptions of all the desired product features. Based on the prepared backlog, the order of tasks is built. The backlog is supplemented as new results of the next steps: additional studies done, the groundworks completed, etc. 

After that, it is impossible to build work on the project without creating a Site Map. This is an approximate or precise structure of the site/application. The sitemap will help you better understand the mechanics of future navigation, estimate the amount of required content, pages and sections. There are several types of sitemaps, and they all serve different purposes.

So, a visual sitemap is a visual structure of a site. Such a sitemap is an important element in building communication within the development team, which simplifies the distribution of resources and tasks among the team.

HTML sitemaps are designed to help you navigate your site. The tradition of creating a separate page with a sitemap is considered obsolete, but this approach will not be superfluous if the project has a complex structure and multi-level nesting.

XML sitemaps are hidden from users, but they are really important. By describing the structure of a site and the relationship of pages, XML sitemaps make it easier for search engines to parse a site. Consequently, they have a positive effect on ranking. In XML sitemaps, the purity of the description of the structure and the syntax used are important, since crawlers of search engines do not tolerate inconsistency and laxity of the code. By updating the sitemap file with a new structure, you provide faster indexing of pages compared to the standard automatic procedure of a search engine.

Discovery phase

After all this work, a large phase called discovery begins. This is the stage of a complete analysis of all aspects of the project implementation – from the appearance of an idea and a business concept to the technical implementation of the expected product. This approach makes it possible to facilitate and clearly define the working conditions of the team involved in this project.

This phase is not always necessary to the extent that we describe it. If the project is small and not very complex in its structure, for example, a landing page, then the discovery phase is shortened or missed. And the team immediately moves to the UI/UX stage, which includes researching the audience, competitors and the market. If we are talking about large e-commerce, then the discovery phase is necessary for the successful implementation of the project.

At this stage, a preliminary analysis of the needs of the client, market, competitors, target audience, the upcoming amount of work and resources is carried out. In the discovery phase, depending on the resources of the performer, the following employees can be involved:

• A project manager or sales manager (who communicates with the client at all stages of the project, structures the teamwork, and who is responsible for reporting on the implementation of the assigned tasks);
• A business analyst or market researcher (studies the market, target audience, client’s business processes, offers solutions to business problems);
• A UI / UX specialist (creates a design and an interactive prototype of a future project);
• A solution architect (identifies and proposes tools, platforms and other technical solutions with which projects will be created).

The Discovery phase includes a Kick-Off questions session. This is a series of questions, somewhat similar to the briefing phase. However, more specific aspects are now being discussed, on the issues that were identified in the previous stages of preparation for the creation of the design.

During the kick-off questions session, the team gets to know not only the customer but also his business idea (by filling out a questionnaire, having personal meetings, watching presentations). There is a discussion of the customer’s existing business processes or the concept of a future project. Much attention is paid to issues that relate to the definition of the target audience and the main competitors. The team, together with the customer, formulates specific solutions to business problems.

After the setup session, the Challenge Canvas is filled in. The outline is filled in based on the results of the Kick-off questions session and the answers to the questions. Why is it needed and how does it work?

The Challenge Canvas is a problem-setting tool so that the team can gather, agree, discuss and synthesize practical knowledge before looking for solutions to specific problems or situations. It helps to streamline the work of the team, while avoiding the chaos in the formulation and distribution of tasks.

The canvas is one page that contains information about tasks, problems and ways to solve them. Why is it convenient? The size of one page reduces the space, which forces the team to write more clearly, keeping only relevant information and using language that is easy to understand. It saves time: it helps the team to absorb important information faster and pay more attention. The canvas is made of blocks or parts and is intentionally presented in a specific layout that creates relationships and associations. This canvas allows you to see the whole picture and find the right solutions.

The Challenge Canvas

When working on the design, we use The Double Diamond model methodology. The Double Diamond methodology helps not only to understand the problems and tasks of the business, but also to choose the right creative and innovative solutions for them. The methodology divides decision-making into four processes: getting to know the problem, focusing on it, looking for potential solutions and choosing the right one – and visualizes them as two “diamonds”. More details about the stages:

• determining the needs of users or clients (discover). At this stage, we, without any restrictions, consider everything that may concern the user. Empathy should be used. There is communication with users, observation on where and how they use the products, and listening to them. Empathy maps and customer journeys are generated from this research;
• defining the basic needs. Now that we understand how users interact with the product, it’s time to focus on the key elements that were noted in the user script. It is necessary to consider both positive and negative points, and then, at the team vote, make the main ones that require a decision.
• developing potential solutions to these needs. Now it is necessary to solve the problems identified in the previous stages. At this stage, the process of coming up with ideas, also known as brainstorming, begins. Ideas can be anything: super innovative, creative, and quirky. The more ideas, the better.
• selecting and delivering the most viable solutions. This is the analysis of ideas. The team determines which of the ideas are the most viable and feasible and satisfy the needs of the users. We get together as a whole team and vote on which problems can be solved with which particular idea.

The Double Diamond model

After that, the team proceeds to Competitor Analysis, the study of competitors, their functions, shortcomings and advantages. At this stage, not only market research is carried out, but also we find out what is unique about this particular product and what new it can offer. By comparing the ideas proposed by the customer with those already implemented by competitors, the analyst determines what gap in functionality a new product can fill.

The next step is the User Survey, a survey of the needs, pains and joys of the end-user. The main goal of an in-depth interview is to understand the needs and pressure points of a person as a listener. Common exploratory research methods include user interviews, diary research, and field research with a representative group of users. In addition, surveys and questionnaires are used to collect data from a wider group of users.

After identifying the needs and user needs, the team moves on to the Service Blueprint. This is the process of decomposing and visualizing the business process behind the site/application.

A Service Blueprint or Service Map is a comprehensive way to clarify and detail every single aspect of the service. This is a schematic representation of everything that happens during the provision of the service. The Service Blueprint includes both the customer journey and the ‘behind the scenes’ from the service side. Both the designer and the solution architect are involved in the drafting process. Creation involves representatives of departments whose processes affect the customer journey. It is good when the service map is periodically updated, depending on changes in the company’s processes.

The service map can show non-obvious processes on which the customer experience is built, and introduce innovations. It helps you find opportunities for optimization: identify the most important things and eliminate duplicate or unnecessary points of contact. Service Blueprint drafting helps set up processes when a new service is introduced. Most importantly, it is a very good way to bring the departments together in the company and make sure everyone is ‘on the same wave’ in the company’s mission/vision and goals.

After that, the command creates a Value Proposition Canvas. It is intended to provide an in-depth description of the value of the product to the consumer. Canvas helps you ease the users’ pressure through the benefits of this product. Value Proposition is a short and simple list of the benefits that a consumer receives when buying your product.

Value Proposition Canvas allows you to:

• objectively evaluate the functions and parameters of the product;
• study customer motivation;
• design and test the functionality of a product/service;
• consistently consider all options for achieving compliance with the needs of customers and your product;
• create a unique value proposition.

The Value Proposition Canvas template focuses on two blocks: user profiles (personas) and business value propositions. The purpose of the VPC is to help find a match between a product’s value proposition and the needs of users.

The Value Proposition Canvas

Please note that after each described step, the project backlog is updated!

Making of a Customer Journey Map (CJM) is one of the most important stages in creating a design. Customer Journey Map is their visualized experience, the history of communication with the business (not only the website – this is important), taking into account the thoughts, emotions, goals, and motives of the user. The map is drawn on behalf of the buyer and looks like a graph with points and channels of their interaction with the product.

The main and most important goal of a CJM is to have a holistic understanding of the user-product interaction. A complete understanding of how the user interacts with the business and how they feel, what stumbling blocks they meet on the way, allows you to improve (or create from scratch) the user experience.

СJM is an effective mechanism for delivering information in a clear form and creating a common, unified vision of the situation. At the same time, Journey Maps can also serve as an excellent basis for making decisions on the path of product development.

At this stage, we decompose the user experience BEFORE and AFTER the implementation of design solutions. This helps to analyze the mistakes that were made earlier and evaluate the decisions that we make to correct them and create the most comfortable interaction.

Customer Journey Map

At the end of the discovery phase, we update the backlog again. Then, based on the available information, we translate our backlog onto screens. This is already the beginning of the prototyping stage. A prototype is a detailed outline of a web page. It is needed in order to focus on the meaning and think through the interface at a conceptual level before moving on to the graphic design (UI/UX Stage).

A prototype is a schematic image of a page that shows what blocks are on the page. The prototype helps to understand how the functionality will look and what will be located on the page: what type of the menu is going to be used, how the menu will look, what items it will have, what will be the main screen, where the contacts will be located.

Each prototype must pass the Prototypes Testing stage. It is important to understand that a prototype is a hypothesis, a design option that you consider as a possible solution to a problem.

Why does one need to test a prototype? Testing a prototype provides an opportunity to thoroughly study the project at the initial stage of work and make the necessary changes according to the goals set. Testing the prototype ensures that the product is fully functional after its release.

The easiest way to test a hypothesis is to look at how ordinary users will work with it. The Nextpage team uses the [Maze App] where users can test a clickable prototype. It works according to a simple algorithm: we upload a prototype of screens to Maze, set a task, send it to potential users and look at the statistics. Based on statistics and indicators, we edit or supplement our prototype.

UX / UI phase

After completing the discovery phase and all the steps mentioned, we move on to the UX / UI Stage. The team enters this phase with ready-made prototypes that have already been tested and meet all the customer’s requests. The phase starts with Desk Research. This research includes collecting necessary information, analyzing the visual part of the competitors’ product (website and applications), and selecting references and mood boards. This research is replaced by a Discovery session in more complex projects.

Desk Research is one of the market research methods. Data collection is carried out from available resources, therefore, the method, in comparison with primary research, is characterized by low costs and high speed of data collection. However, among the shortcomings, it can be noted that the published information may be somewhat outdated.

There are two main types of desk research:

Internal research is the starting point for research in any organization. Sources of information – the data on company sales, product values, main types of customers, etc. The main advantages are the availability of information, processing speed, and low costs.

External research is research conducted outside the organization, where the sources of data are various external resources. For example, press, internet, analytical reports and statistical publications.

Thus, this research method allows you to obtain general information about the industry, the dynamics of the volume and capacity of the market, about the main competitors and target groups. This, in turn, allows our team to determine the vector of motion in creating a design.

The next step is Design Approach. This step allows you to “see” the design before it’s ready. What do we mean? After conducting all the research, defining references, creating prototypes for planning product functionality, we collect all this information in one place. And we will use it as documentation for the project.The Mood board is a presentation made up of photographs, illustrations, patterns, slogans, fonts, and color schemes. It is created in order to show what the design will be: serious or fun, elitist or democratic, what images will be taken as a basis, how colors will be combined and what the typography will be applied. The mood board should emphasize the main ideas that will be reflected in the design.

Mood boards are optional, but they make the project a lot easier to work with. The future design is based on the mood board. To do this, the mood board must be holistic. Everything should be subordinated to one mood: so that when looking at the pictures it is immediately clear what kind of design it is, for what audience and what message it carries.

In addition, this method can be used to present UI concepts.

And now we get to the stellar part of web design development – Creating Design. A  designer creates a layout of the future design based on the terms of reference and relying on the mood board. In other words, the prototype that was created during the discovery phase gets an aesthetic appearance, is reproduced in the chosen colors and has the desired typography.

It is important to note that the designer does not draw the design of every page, but templates of several basic ones, using web design trends. The finished layout is handed over to the client and awaits its approval. If improvements are needed, the designer makes them and shows the layout to the customer again. The number of such revision iterations is determined by each agency at their own discretion.

Of course, layouts also pass Design Testing. As with prototype testing, our team uses a dedicated application to test designs on real users. And depending on the testing statistics, changes can be made.

After the design is approved, the Development phase begins. This is where frontend (and backend) developers get to work — the ones who are engaged in the creation of the site layout. The designer does not leave the project, but follows the correct implementation of the design, and makes sure that the design has been implemented according to the layout. A tester is looking for bugs, transfers information to developers, who debug the work.

Website/application design creation is a long and painstaking process. The quality of the entire resource, the ratio of the expectations to the reality, the client’s impression from the web studio and further cooperation depend on each stage and its error-free implementation.