This article will share ideas for the design of ToC products, focusing on the methodology before receiving requirements and prototyping. This is applicable to: 1) programmers who tinker with their own ideas, 2) operations who need direct development, and 3) junior product managers

As a product manager or as a product manager on a regular basis, have you encountered any of the following scenarios:

  • The leader gave a strategic direction to make a certain product, and asked to launch within a month. You end up with sibu by playing with competing products and referring to interactions that are useful and that the leader likes. — Not defining the core requirements of the product

  • You have a brilliant idea, you sketch it on a piece of paper, you start coding, you end up with a product that users can’t use, or even nobody uses. — The product does not touch users’ pain points, and the functional process is not concise

  • We planned to launch an activity H5 before The National Day. In order to make the activity more interesting and vivid, we added many cool interactions in the middle. As a result, we were still working hard the night before the National Day holiday. — There is no clear order of importance between functions

The above scene is basically because there is no complete process in product design. If you have an idea or a competing product, you can draw a picture or copy and paste it directly.

Of course, there is no rule out someone is “Hawking reincarnation”, an idea formed in the brain, get through the process logic and page flow; However, ordinary people are unable to deal with a large number of logical details in a short period of time. Once some processes are ignored, it is easy to cause the above scenario problems and continuous rework, resulting in slow development efficiency and even poor quality of finished products.

I’m going to share some ideas, in one sentence:

Next to “college student Xiaoming and his own design and development of the small program” as an example, step by step to expand.

Step 1: Determine the purpose and objectives of the product

Product purpose is to determine what problem the product is to solve or to meet what core needs exist.

Product goals are to determine the boundaries of a product at a certain stage and know what to do and what not to do.

Some people would say this is all strategic stuff, defined by the company or party A. Yes, but the purpose and goals of the product are not static. Wechat has expanded its boundaries from a social communication tool at the beginning to a connection to everything now. And product design to do is the product of different stages of repeated confirmation and implementation in the whole process of product design.

Xiao Ming is going to develop a social networking tool for classmates.

  • Why make such a product?
    • Meet more people in a safe area? Meet people who share your interests? Easier to organize?
  • What, if anything, are you trying to accomplish with this thing?
    • Building communities within schools? Take off the list?

Specific product goals and objectives are not important, important is in the product design process to restore the core requirements, and do not deviate.

Step 2: Understand and collect requirements

There are two types of general requirements. The first is that Party A has already provided specific requirements, and the second is to provide complete solutions to simple product objectives.

The first is to describe the demand scenario again in your own words and confirm the scope of the demand based on the specific scenario and product objectives of Step 1. The second way is to collect solutions to similar problems in the market and the needs of target users. At this time, the range of needs is relatively large, and then confirm with the demander again according to the purpose and objectives of the product in Step 1, and reduce the range of needs.

Xiao Ming has his own product goals, but his needs are not clear. He needs to collect user needs to improve his ideas, so he explains his needs to his classmates:

  • I plan to make a small program for classmates’ social interaction, so that students can upload their own information and share their interests and life.
  • You can choose the requirements of the people you want to know.
  • You can view/system push sharing of classmates who have the same points.
  • The Marauder’s map allows you to see how many people are using the app in a given area, as well as the classmates you communicate with.

At the same time, I collected the thoughts of my school friends:

  • Does it have to be coeducational? Will the school, with more boys and fewer girls, become a large BL socialist bromance scene?
  • Does knowing where people are on campus give away privacy?
  • Don’t upload photos. You don’t want people to know.
  • Be sure to upload photos. What if it’s your buddy on the top bunk?

After all requirements are classified summary and statistics, determine the functional requirements of the primary version.

Step 3: Streamline demand and function

The same requirement can correspond to multiple solutions, and different solutions correspond to different functions. After determining specific functional modules, determine the user’s main path, and then split the subdivision path.

Functionalization: What functionality does a requirement correspond to?

Streamlining: What role does it play? What do you do first? Do what again?

  • Role: Common user
  • Step 1: Log in
  • Step 2: Choose who you want to meet
  • Step 3: Upload personal information
  • Step 4: Share/view other people’s routines

It is easy to subdivide the process or error of abnormal process. Splitting the process is a process that needs systematic learning and repeated practice. If you need it, you can check “User Experience Elements”/” UML Vs. Requirement Analysis “and other related books.

Step 4: Prioritize

For the answers to Step 1, rank step 3 functions and processes in descending order of importance. Sorting serves two purposes: one is to determine the MVP of the product, and the other is to prepare for later resource shortages.

Step 5: Sketch and jump to the page

Draw a sketch on the paper according to the above functional modules and the corresponding page jump relationship. Sketch just draw the general framework, determine the page corresponding to the functional modules, and then the page structure, navigation, functional blocks, etc.

Step 6: Draw a prototype

Finally, it’s time to move on from white paper to prototyping software, including but not limited to Axure, Ink Knife, Visio, Drawing software, and more. Based on the sketch, form a prototype, outline the details and interaction.

For example: How many lines should the title display? Should a row of ICONS display three or four? Should I jump to a new page or pop up?

This time is generally a large selection of fear of the scene, different programs for different products, how to judge which program is suitable for their products? For example, if the audience is elderly, the default font may be larger than normal. There are “industry rules”, small to the title and body of the standard font size, to the information flow picture and title placement, this is the content of another article, interested in comments, and later open pits.

Product design is good, and then look for designers to beautify the page, at this time from the success of just a section of code distance.

If you don’t have a designer, use UI Libraries, ink knives and other design tools to create a nice looking product. And what tests you at this time is aesthetic ability, how to improve aesthetic ability? The answer is: more, more, more.

If you are a front-end developer, you may encounter a series of tedious back-end development work, such as technology selection, domain name registration, server construction, etc. But there are tools to help you with that, too, the serverless back-end cloud service that has gained a lot of attention and use in recent years.

The Serverless back-end cloud aims to take the wheel out of development and allow developers to focus on business logic, making development less difficult and less costly.

You can build your user base by knowing about cloud databases. Add, delete, check and modify UGC content in the “daily” module; Realize the release and management of campus information. At the same time you can also through the real-time database (based on WebSocket function) to build a real-time chat room, convenient for users to communicate and make friends online. And these products you can access with just a few lines of code, easy and quick.

At this point, if you think the idea in your mind can be easily landed, then quickly take action, click here to register a cloud account, but also can receive 90 yuan development fund.

Since the focus of this article is to share product design ideas, in order to improve the efficiency of subsequent development, how to achieve the function of the case through the code, we will not share this. If you are interested, please like the article and let us know. The more you like the article, the sooner we can arrange to hear from the cloud front-end development engineer.