Back to all articles

The Design Process from idea to product

When I started my design career, I didn’t fully understand what a design process was and how to build it. Of course, I read several articles about this topic, but this didn’t give me a complete understanding of the whole picture of the stages being built during the product development process.

With experience and with each of my new projects(becoming more experienced\accomplished), I began to understand better and realized the value of the stages that are the foundation for the final part of creating the site in the program.

A lot of articles, lectures, webinars and many other things have been written about design, but beginners always face the same issue: “So what exactly should I do?”. Remind yourself as a beginner, or analyze now, the same problem has comprehended all of us — the lack of an adjusted work process and lack of understanding of how we are to make the product. We attached considerable importance to the visual component, and didn’t notice the real business problems that we needed to solve.

In this article I will describe what actions need to be taken to create a design project aimed at solving business problems. Furthermore, I will talk about the phased design of the product development process, which is built during the work, starting from the moment of receiving the task to the layout ready for layout.

The Design process

  1. Acquaintance with tasks and analysis: understanding of the goals and objectives of the business;
  2. Market and user analysis. Analysis of the information provided, competitors and available sources. Identify the users who will use the product, their needs and concern;
  3. Elaboration of scenarios. Determining the appropriate scenario based on the goals and objectives of users;
  4. Generating ideas and creating a structure. Search for ideas based on the research;
  5. Definition and creation of visual style. Colors, element styles, typography, photos and icons;
  6. Design layouts. Based on the information collected, the design development and design of different states of elements.

The design process isn’t a strict guide with a specific sequence of actions. You can return several times to the previous stages or some stages and can mix them all with each other.

This article is only an compilation with a recommendation on structuring your work process based on the experience and general similarity of all design process designers' methods when developing simple projects, and not an axiom.

Acquaintance with tasks and analysis

The first step in this paragraph is to conduct analysis and research, and figure out how the client earns money from his business?

Pizzerias with food delivery by creating a website increase not only their popularity and provide the user with the opportunity to immediately get acquainted with the entire range of dishes, but, according to that they earn money from selling and delivering food online. Therefore, the business doesn't stand idle and have constant load and profit. I immediately got the idea to place on the first screen of the site promotional offers, which will follow the most popular dishes. Due to this action, the site won’t be only an information portal, but also a full service.

Example, pizzeria Papa John’s

What if a person is used to ordering food by contacting the operator directly? How can this affect the further design of the site? On the navigation system?

Take notes and keep exploring the service.
In the process of analyzing the customer's business, don’t forget to record all the ideas that will come to mind. They must come in handy in the next steps, which will be related to the design of the structure.

It is worth paying attention that the best way to understand business processes is direct communication with the customer. No one better than the owner or stakeholder can't tell you about his brainchild. According to communication, you should ask a lot of questions, the answers to which should consist of suggestions, and not yes\no questions, and pull out the maximum amount of information about the product.

The main problem of the client, why he turns in the studio for a solution, is that he doesn’t know or believes that the basic part is ready and he needs some additional chips on the site, advantages, ideas how to stand out and so on.

In addition to saving you a lot of time and showing the client that you are interested in his business and solving the problem, you can involve him in the work process, which will ensure the best achievement of the result with the help of the collaboration.

It’s not the customer’s job to know what they want  — Steve Jobs.

Steve Jobs correctly noted — the client often doesn’t know what they wants. And, moreover, it happens that the client himself doesn’t understand why his users don’t understand his business. For example, you say to the customer that, they say, it would be good to describe the installation of CGE (car gas equipment) on the car in steps, but the client says that this isn’t interesting to anyone and everything is clear for everyone.

Total stage

You must clearly understand how the business of the customer earns money and to which key action you must lead the visitor to the site, analyzing all the information and smoothing out all the sharp corners that are incomprehensible to the user.

Market and user analysis

This stage should first of all begin with research and analysis of competitors, then connect to it similar services in the field of activity.

Your task is to collect all the information about the solutions that representatives of other companies used in the same service and analyze what can be used and implemented for the solution you are developing.

Looking through the sites of competitors, always pay attention to similar and different details. For example, ways to get a discount, an order form, whether competitors use a tracker on their websites (we are considering a pizzeria), which informs you of the order status from the time you place your order to the delivery of the pizza by courier to your home.

Domino’s Pizza Tracker

Moreover you need to provide the side of not only the consumer who makes the order, but also the side of the manager and the courier. Is it convenient to use the system and promptly notify the buyer about the status of his order? For both roles, a separate page is needed, since their actions will go through different channels.

After analyzing several sites, you will begin to understand better the customer area and select solutions that are suitable for your project.

Target audience User

Very often we want to describe the audience through either demographic and social characteristics, or through the “lifestyle”. This term is often used by almost all marketers. The next time when you can be without go to/ communicate with the customer, don’t ask him about TA. It’s better to ask about the people who buy the product: who they are, do they have free money to buy the product, in what area they work, what hurts them, how the product can help them in getting rid of pain. The customer doesn’t know his TA .He has just a desire to solve the problems of specific people.

Based on the description of the User by your customer, structure all answers for yourself. If the product that your customer produces is too expensive and doesn't fall into the category of “necessary”, then what will cause the User’s desire to immediately purchase it? What are the factors that can influence his choice? What drives a person in the acquisition? What guarantees can a customer provide to secure and dispel all user fears?

Total stage

Produce close collaboration with the customer, and work through the image and behavior of the user for the best working result. Analyze similar services and write out what solutions are used by competitors by highlighting suitable ideas and solutions for your project.

Elaboration of scenarios

At this stage, the task of the designer is to think through scenarios that will help the user with the least effort to close their needs with the help of the service.

All designers know that it is better to seperate long forms into several steps. There are no immutable rules in design, everything always depends on the task.

Let’s consider an example of developing a medical site with the ability to select specific procedures, specialist and records for a specific date and time. The form to fill these fields is divided into several steps, where:

  1. step. The selection of procedures, specialist and date and time is carried out;
  2. step. Enter patient data (name, phone number, mail and comment);
  3. step. Check all the information selected and entered in the previous steps + submit confirmation button;
  4. step. Confirmation that the application has been sent to the manager, and a copy of the information has been sent to the patient by mail and soon the manager will either call him back or he will receive an SMS notification with confirmation of acceptance.

Please note that when designing scenarios you should pay attention to such aspects as:

  • the presence of a key action on the site (buy / leave a request / contact / pay / fill out a form / pick something up);
  • explore the user's path on the site, what does he feel? Does he understand everything in the process of working / filling out forms? If several stages cause confusion to the user, then he is more likely to leave the site shortly before reaching the final action);
  • check the site for textual errors, as well as the logic and convenience of working with the interface;
  • for each problem found, find several solutions; rather, after identifying problems, they will be obvious;

Using these aspects, you will help minimize the lack of experience through a thoughtful sequence of actions in the design of interfaces. This stage takes a fair amount of time, but it’s important to remember that this is part of your work and the foundation that will set the tone for your future design. Remember that every step of the design process leads you to a solution.

Mostly designers start with a few sketches of the site structure on paper. It helps to determine the sequence of blocks on the site. Someone immediately begins with the development of low-fidelity or high-fidelity wireframes, and in the appropriate user-friendly programs puts general blocks for himself, then works on the site map and the relationship of internal pages (where one or another button will lead the user). For me, nevertheless, it’s more convenient to begin the elaboration of the structure on a piece of paper, so I quickly catch thoughts, write them out and instantly outline the appearance and arrangement of the elements.

Total stage

Explore what problems may arise in the user's path and come up with several solutions that will allow them to avoid or minimize.

Generating ideas and creating a structure

I think — the generation of ideas for the project is one of the most difficult stages, but at the same time very exciting and inspiring, It lies in the fact that you need to collect as much information as possible about the client area. And here it is, you feel that the brain will soon explode from a glut of information, that this massage brush for the face, which was created by the latest secret technology by Chinese children from the basements of abandoned quarters, is necessary for every visitor of the client’s site, and steam from any new words and facts ... Stop. Breathe deeply .. set yourself a task that you need to find a solution and go to sleep!

Surprised? During sleep, a lot of processes occur in your brain, it doesn’t rest, but deals with a whole bunch of information that you put into it, compiling all possible options to collect something unique. Its task is to find several solutions for you by morning.

The only thing that this method isn’t suitable for everyone, there are more pleasant ways in which the idea also comes — relaxation.

D. Ogilvy said that “Great ideas come from the subconscious,” and in his book “On Advertising” he advises to periodically turn off the process of rational thinking. a long walk alone with your thoughts in the fresh air, relaxing hot bath or drink a glass of your favorite drink will help you,. It happens that ideas come quite suddenly, lining up and tying each other in such super decisions, right when you stand in the store's queue at the cashier, tie shoelaces or when you take a shower. An important task at this moment is to fix as quickly as possible, until the thought didn’t fly away. Try to carry with you always a small notebook and a pencil in order to have time to write out all the ideas that will have arrived in your head.

The perfect plan, I think:

  1. Collect and analyze all the information about your task;
  2. Distract yourself with an occupation that won’t require cognitive skills;
  3. Let your thoughts float freely and manage to capture ideas.

Make a structure correctly in accordance with the client's niche, the relevance of the information that will consistently on the main page cover all major user questions about the product. You can always learn from the already formed experience of competitors. If your client’s service is unique, then anyway, you’ll have to solve the problem yourself. Always keep in sight of the visitor something that is a targeted action on the site. For example, if it’s important after studying the main page not to lose the form of downloading the application — duplicate it on the main screen and at the bottom of the page.

Total stage

Generate solutions convenient for you. Understand which blocks you will use and in what sequence. It’s better if it will be in the form of sketches on paper or in electronic form.

Definition and creation of visual style

At this stage, your key task is to choose a visual style that will be available to convey the brand's message, it’s mood and leave the desired aftertaste emotions to the consumer.

  1. Selection of color. Based on the scope of the client, their price segment and the promise of the company itself, it’s necessary to determine and choose such color combinations that perfectly emphasize and convey the full range of emotions to the user; For example, if this is a premium segment, mostly on their sites you can find discreet black and gold colors (this does not mean that you only need to use these colors); a lot of books and articles are written about the psychological impact of flowers on a person with a description of colors, associations and emotions that they cause;
  2. Selection of images / illustrations. They must clearly form the user’s association with the product, be it a direct product demonstration or images that are associated with the product properties;
  3. Font selection. Selection of suitable fonts will help you in the most accurate transfer of the emotional component of the product (it can be a refined font with neat serifs, an elongated coarse font or a rounded font);
  4. Selection of icons. Well-designed infographics will formulate the correct visual message about the product or its properties; but it isn’t always necessary to use icons on the site, sometimes they are completely unnecessary (it all depends on your idea and the chosen style);
  5. Total stage

    Determine the main message of the brand and choose the most appropriate colors for it, images / illustrations, fonts, as well as icons.

    Design layouts

    It’s convenient to do any interface design with iterations in order to have the result in some form at each stage. Initially, the result is always approximate, with errors and dirty sources. This is the final part of the design process, where you need to realize all your ideas and developments that you had in the previous stages. Someone, in spite of everything, immediately begins work on the site from designing in Figma, Sketch, Invision Studio or Photoshop programs that are convenient for him. In order to always check yourself for mistakes, stop after developing several screens and return to what you have already done. The topic of creating a layout is extensive and deserves separate analysis and attention.

    Closer to the final of the project you need to pack the design: prepare the source code, font type resources and graphics, fix all the errors that occurred, and prepare layouts for developers.

    Total stage

    Based on all the completed stages, implement a design that will solve not only the customer’s business problems, but also close the needs of the site’s users.

    The processes that have been described in this article are well suited for creating a simple design project. You can always change or add some kind of phasing, go back a few steps and do the work again to achieve the best result. With experience, you will develop your ideal scheme of work, which is suitable exclusively for you, and in which your decisions will be most effective.

    Falling in love with a problem, not a specific solution 
— Laura Javier.

    Inspiring article by Ilya Sidorenko on writing this work: