This article totals: about 6000 words, there are too many dry goods, it is recommended to read slowly after collecting~
In a blink of an eye, almost a month has passed since the "Ink Knife Product Material Design Competition". All excellent works have been uploaded to the material square.
It is a great honor for the author and us to see them successively being viewed, used, and collected by knife friends.
The first six are the works of this competition
We interviewed the "Best Product Design Award" (click here to view the article) and the "Most Potential Product Design Award" (click here to view the article).
From the statements of the winners, we learned that image social products can be young and advanced through color matching and some small designs. Back-end products need to be card-based, hierarchical, and emotional, and a travel product can actually cover multiple businesses.
Insert picture description here
Today, I will continue to discuss product design-related content with the knife friends. This time I invited the three winners of the "Most Popular Product Design Award".
They will share with us: what medical products should focus on, what is the difference between children's education products and other education products, and how to make the most complete AI customer service system on the entire network that the boss loves.
The strongest AI customer service system in the entire network The boss's favorite man
About the author: The boss's favorite man-Hu Xiaodi, an upright northerner, has no special hobbies. He usually likes to drink a little wine and take a dog for a stroll along the Pearl River, a typical old age.
Click here to experience the prototype
Participating is purely accidental, mainly for sharing experience. It took a week before and after, combined with past experience, to create such a complete customer service backstage that more or less involves a total of 173 pages in most scenarios, which has a certain practicability.
10 modules, total 173 pages
Since I have been in the business for a long time and have rich experience, I went straight up to design the prototype from the first function, while designing and thinking about the function.
It is recommended that those who are not familiar with the business do not do this, because functions will be missed, and the chance of rework is also high. It is best to honestly first come out the product architecture, mind map, business flowchart, and function list, and then start designing the prototype when you want to understand it.
The specific process is:
1. List the main functions in the menu, and then link them to jump;
2. Then complete the first level pages one by one;
3. Go back and expand from the first function to the last level (here It should be noted that you must link well while designing the interface. If all pages are completed and then linked, it will be very time-consuming and will be linked incorrectly, which will directly lead to mental confusion).
For prototype building, I think logical thinking is the most important. The original intention of prototype is to express functional requirements quickly, effectively and intuitively.
Compared with the documentation, high-quality prototype interaction can make developers and bosses understand more quickly, which is a great help to me.
Before 2013, I basically relied on manuscripts, which was very laborious. A whiteboard was filled with manuscripts and pushpins. Since the ink knife went online, I have fallen in love with ink knife. It saved me a lot of time and really helped the company. The effect of increasing efficiency and reducing costs, from then on I have become the boss's favorite man.
Here, let’s share with the knife friends a little trick to use my ink knife, which can improve the speed and quality to a certain extent.
In fact, it’s also simple, that is, I made a middle-office template to categorize commonly used pages according to modules, such as the background management general framework, corresponding to mobile terminals such as login and registration, King Kong area, prompts, lists, personal centers, settings, etc., It is unified in the middle station template, which is directly copied and pasted into the new project, which is very convenient, you can try it.
Prototype of children's education product-primary school pass click click
About the author: It is not a big V with millions of fans, nor a big player in the industry. There is no blessing from a famous school, no big names, and no godfather body protection, and an ordinary girl who pursues beauty. Across the To C, To B, and To G fields, occasionally Buddhism, always love Party A (yes, there is no doubt here).
Click here to experience the prototype
Entries in this competition are inspired by life, really life.
Simple but in detail, this is it:
Due to the impact of the epidemic, I was working from home. One day, the landlord knocked on the door and said that he had something to ask. It turned out that his child wanted to take classes remotely. I didn’t know how to operate the class system. I needed my help (in fact, it means registering and logging in and viewing the course. A simple process for downloading courses).
On another occasion, the landlord knocked on the door again. It was about the child's class (in fact, it was the voice of the child reading English words aloud with the phone, and then sent to the WeChat group for the teacher to comment).
……
Day after day, after the landlord’s requests for help several times, I realized how the current educational product experience can satisfy the landlord’s novice Internet users, and at the same time, it can effectively solve the learning problems of primary school students and the interaction between teachers and students. The problem.
With an idea, I downloaded the top 25 apps in the education category of the app store, and looked at the user’s evaluations, and analyzed the vertical comparisons to refine the main functions of each APP and the main demands to solve; then horizontally compared children’s products to refine the interaction , Visual element continuity. After playing for about 3 days, the phone finally got stuck. Finally, the product direction of this product competition has been determined, that is, to make a learning product for children aged 6-12 in elementary school, providing four major functions: simultaneous tutoring courses in language and mathematics, high-quality courses, extracurricular learning, and offline activities. The purpose is to let the flowers of the motherland learn well and have fun.
The entire production cycle took about 30 hours. The detailed production process is as follows:
01 Determine the goal
(1) Thinking about the current problems of education products
- I can’t remember the knowledge of offline mathematics courses and cannot repeat learning
- I have no interest in learning and do not like to do exercises
- Offline supplementary lessons are time-consuming and costly
- Practice materials are mixed, I don’t know how to choose
- I don’t know how to learn or what to learn when using other educational products
- Curious children want to read more extracurricular stories, do not have a good book list, and feel bored with paper books, and their parents worry that the fluorescent screen will hurt their eyes
(2) Why do I make this product? What can be improved?
- Provide extracurricular knowledge learning and enrich students' knowledge system
- Provide offline thematic activities, learn well, but also play well, and enrich children's childhood life
- Provides a mechanism of "debugging and upgrading" to increase learning interest and make up for the time-consuming, labor-intensive and cost-intensive offline supplementary lessons
- Intelligently recommend content that users may need based on grade
- Audio search helps children with limited literacy find what they want (courses, extracurricular readings)
(3) What is the ultimate result?
Provide elementary students with four major functions: simultaneous tutoring courses, quality courses, extracurricular learning, and offline activities. It is necessary for the flowers of the motherland to learn well, but also for the flowers to play well.
(4) Define the user population and psychology
To be honest, these are all ready-made conclusions found on the Internet, and I didn't take the time to do detailed and in-depth research.
(5) Horizontal and vertical comparative analysis of competing products
I downloaded the top 25 educational apps in the app store, and read the user’s evaluations. A vertical comparison and analysis were conducted to refine the main functions of each app and the main demands addressed; then horizontally compare children’s products to refine the connectivity of interaction and visual elements. .
02 Information Framework
Sort out product function division and sort out levels.
Part of the functional process
03 Output prototype
(1) Prototype on paper
Roughly outline the main process interface of the product, determine the function and interaction process
(2) Low-fidelity prototype
a. First output the low-fidelity prototype of the primary interface based on the paper prototype;
b. Quickly output the low-fidelity prototype of the remaining interface, about 40;
c. Run through the product logic process, improve the edge scene, and ensure smooth interaction Closed loop (of course, time is tight, and some pages are not painted, but they do form in my mind);
d. Collect copywriting, emotional elements, and categorized integration that meet the product tone.
(3) Takaho Makoto prototype
a. Determine the product style trend, visual tone, and output the main vision according to the design goals and users;
b. Define the basic visual elements (copywriting, picture style, layout, icon, color, font level) according to the main vision;
c. Define the vision Rules and performance (grid system, design specifications);
d. Extract global controls to facilitate reuse, consider scalability and practicability;
e. Output 5-8 secondary interfaces, preview the overall vision on the real machine with an ink knife Whether the tonality is uniform, check, screen errors, optimize, and repeatedly optimize;
f. Output the remaining interface, and use different real machines to preview and check;
g. Improve the vision, optimize the experience, and ensure brand consistency (brand gene, visual style).
Click here to experience the prototype
For prototype tools, it is important that common components and controls can be searched and reused without re-creating wheels; secondly, the visibility of the interface can ensure high efficiency and simplicity, and customers definitely do not want to preview a prototype and have to go through decompression html compression Package, and then install an extension, the cumbersome process, very tiring.
In addition, it is necessary to be familiar with all the shortcut keys that come with the ink knife. The basic principles of this part are: software use proficiency, and whether you can find suitable materials to apply to the required scene.
But the essence of the difficulty of prototyping lies in the depth of thinking about design details, understanding of business logic, and insight into user pain points. These parts are the bottleneck of efficiency.
Everyone has different skills in using ink knives, and I do the same.
For this work, I will first briefly sort out the main interface elements and components, and extract the reusable components , so that they can be reused quickly in the ink knife and save a lot of time.
At the same time, the massive amount of material in the material square can also provide me with an opportunity to be lazy . I think the core of designers' rapid professional improvement is: in the right direction, use clever ways to work dumb. Mo Dao happened to create an opportunity for me to be lazy.
I am honored to participate in this competition, because it is a review of my professional ability and thinking ability, which allows me to think about the product from a higher dimension, such as commercial value, as Mr. Hu Qing said in the comment That way: "Have you considered the commercial value and the possibility of landing?"
I think this is a point that needs to be continuously improved in my future career. Designing is not about self-confidence. No matter how good the vision and interaction are, it cannot bring commercial value or user value. It is also a self-confidence product. **
As for what can be called a good product?
I think it can be a good idea, a good idea, which can effectively solve the user’s pain points; or a smooth interaction, which is effortless and natural, and brings a comfortable experience; it can also be a good visual experience , Trigger a unique visual experience.
For example, the work of Deyun Society, which satisfies the needs of steel wires, is a good work in my opinion.
Click here to experience the prototype
Here, I also want to share my personal value-added learning experience with knife friends.
How to add value
If you want to add value to yourself, you must make yourself valuable. In terms of self-growth, every challenge you take, every new thing you learn, is a way of self-enhancement. In terms of work, if you want to add value, you must learn from professional people, plus your own reflection and review, you can really solve the problem, find your own position in a team, and contribute your own strength at the same time
learning method
1. Refine methodology at work
Research questions-insight-divergent ideas-determine the direction-converge ideas-form a plan-verify the plan-continuous optimization.
2. Training design logic
Research a small topic every month, such as: What is the difference between page loading and pull-down refresh loading? Simulate that you want to report this to your boss, then write it out, tell it, and train for two years. Your design logic should be greatly improved.
3. Reading
Reading is very powerful. Reading can answer many of our doubts. However, in the process from discovering problems to solving problems, we still need to use them ourselves. Merely mastering knowledge is not the purpose, the purpose is to use it.
4. Listening to the old man and old lady downstairs is also a kind of learning
Finally, boldly predict the trend of future product design
1. The emergence of new technologies will promote the emergence of new presentation methods; such as VR, wearable devices will become more popular;
2. The development of information will bring diversification of user behaviors and preferences. The lifespan of an APP may not exceed three days. How to retain users during these three days requires product designers to deeply understand the psychology and behavior behind users;
3. The product needs to continuously explore new ways of playing. There may be other interactive devices besides mobile phones. At this time, the design of the product must meet the new device form.
How old is the mobile high-fidelity prototype of medical products
About the author: A product manager and interaction designer who has learned a bunch of messy skills.
It has been a medical-related product for more than 4 years, and there are some cautions in this industry, so I signed up for the competition.
You should know that in the daily work of medical products, you have to face Party A (hospital leaders, business unit leaders). At this time, high-fidelity prototypes and demonstration effects can often achieve better work recognition and opinion gathering effects. Wireframe And pure picture design drafts are generally only glanced symbolically.
So I want to make a set of universal medical templates for easy modification and demonstration.
Click here to experience the prototype
As for the black-and-white mode, I like the animation and want to do something different. The original expectation is to use the "magic motion" animation to gradually change to another state. The final effect is still a bit stuck. Otherwise, the traditional medical page may appear too ordinary.
Functions designed purely for demonstration, not real product functions. At the same time, if you want to use black or white mode alone, delete "state 1" or "state 2" in the template.
The production took about a week and a half and the production process is as follows:
1) Review questions
Read the rules of the game, understand the purpose of the game, and confirm what your prototype wants to achieve
Keywords: material library, template, reusability, high fidelity
2) Industry positioning
In fact, even if there is a unified standard for mobile applications, each type of application will have a big difference for the age group of the user and the user's just-needed function.
Keywords: medical care, users of all ages, elderly people, seek medical treatment with peace of mind
3) Functional brain map
According to the needs of the industry, sort out the rigid functions that the prototype basically needs and sort out the page structure. Since I have a better understanding of medical care, I sort out most of the commonly used medical functions. In fact, the company's actual products are much more horizontal than templates. The prototype has sorted out the important parts, and it is also convenient for people who use the template to delete the entire horizontal function page that is not needed, such as only an Internet hospital.
Keywords: Appointment registration, expert product announcement, online consultation, Internet hospital (as a hot spot, the epidemic encourages remote medical treatment)
4) Prototype building
In fact, to this step, you only need to consider the user experience and master of each page. But considering the reusability and actual use value of templates, I imagined some other things that users build special prototypes.
Keyword 1: Reusability
In fact, image ads in most prototypes are either pure gray boxes or pure images. It is not high-fidelity if it is awkward to use. Changed to gray is not high-fidelity. With pictures, the text inside may not match the current product, so I made the picture content and icons native during production, which can be changed at any time.
Keyword 2: black and white mode demonstration
For industry reasons, traditional medical pages will be relatively traditional. For the elderly, the cost of page flow adjustment and learning is quite high. Therefore, the special function selected the black and white switching of the user's pure demonstration under the brain hole for production.
I personally think that the most important thing for prototyping is the functional process design, because the process basically determines the function of each page, and then the user experience around the function and the establishment of a unified and reusable module master. Because in normal work, I have also encountered that because of bad experience, the process was modified, which eventually led to all the redoing of the architecture and functions. In fact, it was also because the functional process at the beginning was not well thought out.
As a senior ink knife user, there are several good habits to share:
1) Using the master , you can extract the common parts by combining the functions of each page, such as the normal list and the list in the collection center, and define it as the master at the beginning, so when you need to modify the details, just Changing a master can be applied to all pages with one click to improve efficiency.
2) Be careful to use fonts below the 12th point. The lesson of blood is good when you see and demonstrate it by yourself. As a result, many places have been changed after uploading and participating in the competition, which was also criticized by the judges. In fact, many works have similar problems with me. You can also imagine that if I apply it in actual work, I think it’s okay, and then the dean of XX Hospital looks at the demo version and finds the result of a new line.
I think there are many good works in this competition, so let’s talk about peers, because my works can be used with this set. After all, my company has also made a very similar self-service machine.
Click here to experience the prototype
From online registration to offline number retrieval (window number retrieval or self-service machine retrieval), in a whole set of hospital procedures, registration to offline number retrieval must rely on the self-service machine to complete the entire medical treatment process.
The medical templates are more traditional, because the older users in the medical industry actually account for the majority. Statistics on my platform: users over 55 will account for more than 30%, and the use rate of self-service machines will be higher. .
**At this time, self-service kiosks are particularly critical for clear guidance of user experience. **This prototype page also makes the process very clear, which I think is good.
In fact, I also hope to form a complete set of closed-loop templates suitable for medical use after collation and cooperation, which is convenient for everyone to use.
Product and interaction value-added words generally rely on your own work experience, the pits you have stepped on, and the functions that you have done successfully will be accumulated, and then the efficiency and resolution of the same problem will be formed.
So I think the way to increase value is not only to read product trend articles, discussions, etc., but also need more practice to accumulate more experience outside of the work content, participate in competitions or modify and optimize some commonly used but I feel bad Products are harder to make than they seem.
Product learning is more through practice. If you interact, you will look at some finished product specification learning and some conceptual interaction design of foreign websites. Although conceptual design has no practical application value and is just good-looking, it can actually be used as a source of inspiration, through and actual scenes. The combination of transforms into new interactions.