As a professional UI designer, it is not only necessary to understand the workflow of the entire product in UI interface design and interaction design, but also to understand the entire workflow of the entire product from request to product launch.

The following is the work distribution and process of each department of Internet products:

As can be seen from the figure, from the planning to the final online marketing of an Internet product, different departments need to share its responsibilities, and in each department, according to the division of positions, it is subdivided into each type of work, so a The development process of Internet products cannot be accomplished by a single person or individual department. It is the product of a complete team working together. Departments and departments, positions and positions cooperate with each other to complete the project well and efficiently.

Generally, Internet companies have several divisions:

  1. Product department (product manager, product specialist)
  2. Design department (GUI designer, interaction designer, front-end engineer)
  3. R&D department (architecture engineer, program development)
  4. Testing Department (Testing Specialist)
  5. Marketing department (sales, channel, PR, brand)
  6. Operation department (customer service, operation and maintenance)

The responsibilities of each department are as follows:

Product Department: Responsible for product research, product plan planning, product prototype design, and technical development docking, and may follow up with the operation department.

Design Department: Responsible for product visual design, interaction design, front-end layout. Some companies will divide the front-end part into the development department. The reason is that the front-end work is the same as program development, which is all code, and the design department is purely concerned with visual design. But this statement is actually not correct. Although the front-end code implementation and the back-end program development are both code code, the technology used is different, and the functions and effects achieved are also different, so front-end engineers are divided into design Departments would be more reasonable.

R&D department: product architecture design, database design, front-end and back-end coding design, post-operation and maintenance, network security.

Testing department: test bugs in the program, write test plans, test cases and test reports and other documents, and optimize the process.

Marketing department: product planning strategy, planning and organization of promotional activities, brand planning and brand image building, marketing advertising promotion activities and public relations activities.

Operation Department: SEO/SEM optimization and promotion, platform activity planning (online and offline), advertising, customer relationship management, data analysis.

The job division of the design department usually includes UI designers, interaction designers, and front-end engineers. The job division of small companies is not perfect, and the work of interaction designers (interaction process, interaction wireframe, and interaction effect) is handed over to product personnel to complete. , the following summarizes the process that UI designers participate in and need to complete:

  1. Requirement sorting and analysis

Before product development, taking APP products as an example, it will conduct research and analysis on the market and users: market positioning (user positioning, product positioning, technology positioning), market demand analysis (target customer group analysis, competitor analysis). In the early product requirements analysis meeting, UI design and technical engineers will participate. In this process, UI designers understand clear user positioning, product positioning, competitor analysis, and prepare for later material collection and style control.

In this process, the product requirements will be determined according to the refined real user needs. The product manager will translate the word, ppt, jpg, etc. according to the relevant information in the communication into a logical language. The easiest way is to produce a product function brain. diagram or a list of features.

Product function brain map:

Product feature list:

People started talking about the UX process, drawing the process on the whiteboard and adding rough UI elements. The product manager will then do a hand-drawn version of the wireframe on paper. At this stage, product managers, UI designers, including technical engineers will have a lot of discussions, and the main discussion is the process and main functions, so the hand-drawn storyboard is the fastest, most convenient and easy to modify. This link needs to finalize the userflow, the user flow and the key steps in it, each step is a main interface. After that, the product manager draws a paper version of the low-fidelity interactive prototype (professional templates and tools can be borrowed)

  1. Wireframe of key interface (without interactive function)

After sorting out the initial product functional requirements, the product manager continued to follow up and communicated repeatedly. In the determined user process, several key and representative steps were selected to make a 1:1 refined wireframe. In this link, the UI elements and layouts in the key interface are determined, as well as the global layout and typesetting style.

  1. Key interface visual design

In this part, the UI designer will do the overall visual design of the key interface, try different styles and colors, and use UI elements, and finally determine the visual design style of the product.

  1. All interface wireframes (with interactive functions)

The product manager completes the 1:1 full interface wireframe design with interaction and flow and confirms it.

Interface wireframes (Adds paraphrasing and descriptions for interactive features.)

Wireframe Flowchart

  1. All interface visual design

The UI designer outputs the visual design drawing of the entire interface and confirms it.

  1. Interface labeling and cutting
  2. After confirming all the interface visual drafts, first mark each interface, and hand over the marked map to the front-end engineer.

Annotation map (pixel chef, blue lake and other software)

  1. The interface is cut and handed over to the front-end engineer

Cutout folder

cut file

At this point, the UI workflow is complete, but in real projects, many links are an iterative process that requires constant modification and optimization, including the need for UI designers to coordinate adjustments after the entire process enters development. The work of a UI designer is not only to complete the simple interface visual design. The front includes user positioning, wireframe drawing, process sorting, interaction implementation, and the rear includes front-end layout. UI designers must participate in many aspects. Only by understanding the project from an angle and understanding the work flow of each position can we make products that meet the needs of the market and users.

 This post is ad-supported
​