Stages of Design Process
We quite often talk about the importance and necessity of the process of creating products from start to finish. Each of the stages, such as analytics, design, development, testing, etc., is an integral and irreplaceable part of our work process. However, what we mention less is that each of these stages also consists of little stages. Each one of them is done step by step and can be discussed separately. Yes, maybe this is not the information that is necessary for the understanding of the whole process. Not everyone may even be interested in delving into the details so deeply. But for those curious, who want to know all and everything, today we will be telling you about the Stages of Design Process. Unbelievably, there are as many as ten of them!
1. RESEARCH
First we need to ask ourselves the question “why” are we doing the project. The customer or the project manager can aid us with answering this difficult question, therefore it is to them that we must turn for help. How will the product work exactly? Who will the target users be? What content will it be filled with? Product’s design vector strongly depends on its goals. At the first stage, the designer collects data about the future product. He or she analyses the competitors, describes functions, thinks over the program logic. Along with that, talking to real users is a great research method. While conversing with consumers, the designer tries to visualize what exactly is important for them, what tasks will require to be solved? Skipping the research step is like building a house without a foundation, condemning it to an imminent destruction.
Result of work: Knowledge base for the project.
2. TARGET AUDIENCE
We must understand exactly who our target audience is, which of the representatives of the target audience is the core, for whom we are making a product. Here socio-demographic characteristics (gender/age/education/occupation), geographic characteristics (country/city), psychographic characteristics (lifestyle/personality traits/character traits), behavioral characteristics (lifestyle and consumer preferences/motivation/readiness to perform certain actions) may be important.
Result of work: Detailed portraits of potential users.
3. DATA ANALYSIS
We know why we are doing the project, now we need to answer “how” are we going to do it. When the tasks of the product are clear, the designer thinks over the logic of interaction, thinks over “how” the user will solve his problems. At this stage, usage scenarios are created. Based on the analysis of the target audience, we draw up a portrait of our typical collective image of the user, get used to their role, put ourselves in their place, formulate specific tasks for our target user and think over their potential scenario of behavior.
Result of work: A rundown from the entire UX research of materials that will be useful for script and wireframe production.
4. CUSTOMER JOURNEY MAP
CJM records the details of the interaction with the product. The main task of CJM is the creation of a continuous interaction throughout the entire usage of the product, from the point of entry to the point of exit. What the user clicks, how they navigate the interface, what stages they go through on the way to their goals, where they encounter barriers that prevent them from reaching their goals, all of that is recorded. In other words CJM represents a path “goal — steps to achieve it — possible obstacles — ways to eliminate them”, applicable to each point of user’s interaction with your product.
Result of work: In fact, Customer Journey Map itself.
5. USER FLOW
It consists of visual materials that illustrate the entire user’s journey through the product. User Flow helps to understand whether all processes in the product have a logical end, whether there are dead-end pages, or vice versa, maybe some scenario is missing to complete the picture. In other words, User Flow is a schematic navigation through your product.
Result of work: User Flow in any of its variants.
6. TECHNICAL PROJECT
Usually, somewhere at this stage, the technical project begins to be created. Designers may take part in this process, or they may not. In any case, they share their observations, research data and experience so that at the stage of product description there are no misunderstandings that will complicate further work.
Result of work: Technical Project in the flesh.
7. WIREFRAMING
All the details have been discussed with the customer, the research has been carried out, the technical project has been created. You already know “why” and “how” your product will work, which means, finally, you can start wireframe modelling your application. At the wireframing stage, you visualise all the previously collected data, develop the carcass of your product, it’s framework, on which the functionality will be gradually layered. It is important to understand that the wireframing process is not about creating a finished design of the product. It consists of drafts, the purpose of which is to understand whether the product in this form will complete it’s goals. Wireframing is about completing tasks, about receiving a feedback from users or the customer, with the aim to work out all the shortcomings at a good hour and save time for both yourself and the developers in the future.
Result of work: Wireframes describing the full functionality of the project.
8. TESTING
The previous stage definitely requires everything to be checked. In addition to receiving feedback from the customer’s side, it is very important to test the product with real users (they can even be employees of your own company). The lack of design as such at this stage is even a plus, because the user will be able to concentrate as much as possible on the functionality, without being distracted by the assessment of colors/fonts/icons and pictures.
Result of work: Collected and analyzed feedback with a further plan of edits and changes.
9. DESIGN LAYOUTS
After several rounds of editing of your wireframes (if it was required), you can start working on the visualisation, colors, composition, typographics, and content design of your project. Bland black-and-white sketches are transformed into detailed layouts that follow all guidelines and principles for building interfaces. During the design process, there is an important task not to forget to constantly return to the UX component, follow the transformations done, and observe that when adding visual effects, the main meaning of the product is not lost.
Result of work: High accuracy screen layouts, which illustrate in detail the components of the project.
10. SPECIFICATIONS
Design layouts are completed, approved and verified. Now they need to be handed over to the developers. This is the stage at which UI kits, design systems are compiled, all states of the elements and screen variants for different platforms and screen resolutions are worked out in even more detail. The layouts are uploaded to a site convenient for export and transferred to the developers.
Result of work: UI guidelines, a project design system and many thoroughly-made screen variants.
CONCLUSION
These were the 10 steps on the way to creating an application design in the form in which the end user sees it. 10 little-known tasks that a designer faces in every project. Following these stages, any project can be performed masterfully. That is why we believe that both our colleagues and potential customers need to know about it!
I hope this article will help you understand the whole process a little more. If you want to read in the same detail about each of our services — you know how to let us know about it! :)
Read our other stories:
- Storing Resources Wisely: How to Organize Resources in a Multi-Module Project
- They Will Make You Hate It: Getting to Know VAST and VPAID, or How to Integrate Ads into a Web Video Player
- The Role of QA in Product Security Testing
- Overview of Monitoring System with Prometheus and Grafana
- “External” navigation in a multi-module project in Kotlin
- Parsing responses to BLE commands in Swift using the example of GoPro
- What Is Happening With The Mobile App Market
- Yandex Travel
- Case Ural Music Night
- Player’s Health Protect
- DJU Drone Club
- Case Alibra School
- Case Praktika
- Case Watchmen
- Case Adventure Aide
- Neural Network Optimization: Ocean in a Drop
- Case Elixir Gallery
- Forgive us, John Connor, or How We Taught a Neural Network to Accurately Recognize Gunshots
- Case Bus Factor
- CI/CD for iOS-projects: device or cloud? What’s better, Doubletapp’s take
- How to set up Gitlab CI/CD with Fastlane for iOS-project on a Mac mini
- The story about the contest from telegram
- What should be done before starting the site? Checklist from Doubletapp
- How to Generate PDF Documents in Python
- How to manage Gradle dependencies in an Android project properly
- The History of the Doubletapp Company