Help you quickly understand the entire UI design process in 3 minutes

Preface

• “Design is innovative”;
• “Design is honest”;
• “Design is natural”;
• “The design is minimalist”;

The above are famous quotes from industry leaders. If you think about them carefully, you will know that design is not an easy job. Faced with this difficult task, combined with my own experience in UI design, I have sorted out a basic process for newcomers to the industry, hoping that it will be of some help to everyone.

Design Process

In the fragmented era, attention is easily distracted. Intensive projects at work often have multiple threads running concurrently. A clear design process helps us allocate time and energy more reasonably and improve work efficiency. I usually divide the project design process into three parts: before design, during design, and after design. Of course, many designers divide the design process into demand collection, goal determination, prototype confirmation, design review, detail polishing, follow-up development, and result tracking. In fact, the details of the process are similar, but I divide the entire design process into three milestone nodes: before, during, and after, which makes it easier to focus.

1. Before design

The pre-design phase is the most easily overlooked key phase. We are prone to fall into the misunderstanding of starting design as soon as the demand comes, but we don’t know that doing so will bury countless pitfalls for subsequent work, such as: repeatedly modifying the design draft, the demander temporarily adding a few pages, delayed design delivery, and the effect is not as expected. This will slow down the pace of the entire project and deviate from the original intention. In my design process, "pre-design" is the most difficult and important stage, so at this stage we must find a way to gain time to prepare, so what do we have to do?

Let's talk

The first thing to do before designing is to understand the business. Ask the demander to talk about the project background, business goals, user groups, competitive product analysis, and the relationship with the existing business. There are many benefits to doing this. On the one hand, we can understand the most real needs and product goals through the demander's narration, which is convenient for decision-making in subsequent design; on the other hand, we can reversely ask the demander to sort out the business goals more thoroughly to avoid mistakes in the general direction; finally, we can let the demander know that we are also thinking about the business goals, which is more conducive to long-term cooperation and trust with the demander, rather than letting the demander think that we are just a page boy.

Take a look

After the first communication with the demand side, we will check if there are any relevant competing products. If there are competing products, these competing products can help us quickly see the overall picture of the product in the future, and also help us find some highlights and think about whether there are scenarios that our products do not cover. We will organize these contents as an important basis for future design. If there are no direct competing products, we can also look at products of the same type or industry.

Think about it

With a chat and a look, we basically have a global perspective, but it is not time to start designing yet. We need to think about it again, for example: A. Based on what you have discovered in the process of looking at competing products, what questions do you have about the business and needs? Summarize the doubts and find the demander again to confirm to ensure that the understanding is consistent with the demander, so as to ensure the smooth progress of the subsequent design process. B. Think about where the opportunity points of the designer of this project are? What is the design goal? What areas can the designer focus on? What is the cost of development? Can the design investment be verified? This will help us better allocate time and focus in the future, and facilitate the accumulation of subsequent design experience, and know which designs can bring changes in data. C. Think about how to plan the design? What are the risks in the design? Is external support needed, etc.? It will help us give a relatively accurate design schedule.

2. Designing

With sufficient preparation, you can start designing with confidence. Next, follow the steps below:

Prototyping

Before visual design, we need to continuously polish the interactive prototype to ensure that the interactive experience is elegant and in line with user habits. If the team is equipped with an interactive designer, you can have some discussions with the interactive students, and confirm with the demander again after finalizing the prototype to align the opinions of all parties; if there is no interactive designer involved, then you must make the idea graphical so that everyone can understand our ideas more accurately. You can draw it on paper or use a prototype tool to express it. At the same time, it is strongly recommended that designers should be highly sensitive to information architecture and copywriting. Good information architecture can ensure the smoothness of the basic page experience, and accurate copywriting can ensure that users do not deviate from the understanding of information.

Style Exploration

After finalizing the prototype, you can start exploring the style. My personal understanding of style is that it is more emotional and there is no standard answer. As long as the style definition has a basis and you pay attention to current trends, there will basically be no big problems in setting the style. You can also make targeted designs based on some opportunities prepared before the design, such as: illustrations, texture, details, motion effects, etc.

Polishing details

When I look back at my previous design outputs, I often find that there are many things that I don't like. To avoid this, we can try more and polish more in the design stage. Instead of letting "future me" or the demand side point out the problem, it is better to examine yourself first, polish the most ideal solution, and then do the review. You can also ask your colleagues and friends to look at it together, invite them to choose a solution and talk about the reasons. Finally, combine the design goals, business goals and everyone's opinions to output the final solution. If you encounter difficulties in the solution, you must also communicate in time or seek help from the leader.

Design Review

When the team reaches a consensus on the plan, a formal review meeting can be organized. Design review can quickly and centrally identify problems, and can also effectively avoid situations where disagreements have delayed finalization. We must be fully prepared before the design review, and we can ask key upstream and downstream roles to participate, such as the demand side and R&D personnel. Preset problems in advance to manage the expectations of all parties, ensure that the plan is rigorous enough and has good control. Be as detailed as possible during the review stage, and clearly explain the small details and highlights that the designer wants to implement, so as to attract the attention of R&D personnel. Finally, document the conclusions reached in the review to avoid wrangling during subsequent design acceptance.

Building a Kit

At the beginning of the design plan, we should consciously sort out the specifications and components to ensure the efficiency and consistency of subsequent functional iterations. Summarize the basic specifications through key pages; through continuous deliberation during the design process, extract the interface elements again to form a component library.

3. After design

After the design review is passed, in addition to outputting the design content and organizing and archiving the design files, the next thing to do is basically to promote the implementation and verification of the design.

The participation of designers in the design implementation phase is very important. All previous work is ultimately based on the online effect. Therefore, in order to make our efforts worthwhile, we need to be meticulous and persistent during the design acceptance to ensure that the design effect is perfectly implemented. In addition to urging developers to make adjustments, marking design details more clearly and outputting an animation demo for complex interactions can help developers accurately understand the design intent.

There are many ways to verify a design, such as data collection, user feedback, online walkthroughs, user interviews, usability testing, etc. Sometimes we ignore the design verification process because we are busy with business needs, have no data collection, and have not thought about verification. These reasons boil down to not paying enough attention to design verification. However, design verification can help us review the achievement of the original goals, find existing problems, and become the basis for the next iteration; it is also an accumulation of our own design experience. Therefore, we still have to pay attention to design verification. If we work hard, we must see the results, whether good or bad.

Final Thoughts

The above are some coarse-grained experience sharing on the design process. In addition, communication, business understanding, project management, summary and review are all very large topics that require continuous learning and accumulation. I will continue to share related experiences in the future.