These 13 commonly used apps from big companies contain the ingenuity and creativity of many designers

As a designer, when you receive product requirements, you need to do more than just complete the product design work. More importantly, you need to think about how to maximize the commercial value behind the product through design, improve the visual experience, and enhance user stickiness to achieve the goal of user conversion. It doesn’t matter how complicated our design is. It may be a simplified step, a touching copy, a thoughtful reminder, or an interesting dynamic effect...

"Meituan Takeaway" invites you to go home and eat the cheapest lunch

1. Product experience:

Open the Meituan Takeaway APP, and you will find prominent discount prompts under each store. Go to the store details page, and you will also find the same prompts at the top and bottom. After selecting the products, if the total price of the products meets the discount conditions, you can deduct the corresponding amount.

2. Design Thinking:

18 off for every 20 spent, plus a 6 yuan bonus? This is already a free lunch, and I made 4 yuan. So I went into the product list and looked up and down. The products here are either less than 20 or around 40. There is no free food, so I just eat something here.

In fact, such prompts for discounts on purchases over a certain amount are not uncommon on other platforms, and users are not stupid. They may enter a store and turn around and leave after finding something wrong, but the platform will still regard such prompts for discounts as the most dazzling one, and it has worked every time.

Among the three elements for users to complete conversion, motivation, ability, and trigger are indispensable. The discount tips below the store take advantage of the user's desire to get a bargain. The higher the discount value, the more attention and desire to buy it can attract, which is enough to motivate users to place an order. After entering the store, after looking at all the products, even if there is no price that meets the user's psychological expectations, the motivation generated by the discount gradually decreases, but new purchase motivation is generated. Through red envelopes, good reviews, discounts, beautiful pictures, etc., the user's desire to buy is still increased, triggering the user to place an order, and finally completing the conversion. This way of choosing to "give benefits" to attract users is also the most effective way in the short term.

Taobao’s pop-up window design that stimulates user emotions

1. Product experience:

When experiencing the Taobao sign-in function, a pop-up window will appear when you sign in successfully, saying "Sign-in successful", and informing you that the red envelopes for orders placed at this time can be doubled. Click to close, and a second pop-up window will pop up with text reminders saying "Red envelopes have not been doubled" and "For use within channels only".

2. Design Thinking:

Taobao reminds users of the possible impact and consequences of exiting the current page through a second-layer pop-up window, allowing users to judge whether the current exit decision is correct. After all, compared with "gains", "losses" make people care more about something. At the same time, it informs users that exiting will cost more money for the next action. This higher cost investment will make users worried, thus stimulating their emotions and turning them into actions.

「Alipay」Ant Manor-Converting users' fleeting consumption motivations

1. Product experience:

Feed chicks in Alipay's Ant Farm. Collect hearts by raising chickens. When you have collected 5 hearts, you can donate them to charity projects. In addition, you can complete various tasks to get feed to feed the chicks.

Click on the fruit tree on the left side of Ant Farm to plant trees and receive free fruits. You can also complete various tasks to obtain fertilizers. Fertilizing promotes the growth of fruit trees, and finally when the fruits are ripe, you can receive real fruits for free.

2. Design Thinking:

Alipay has made users very sticky to Ant Farm through public welfare. The beneficiaries of the project are all vulnerable groups, such as left-behind children, disabled children, poor women, etc., and friends are ranked according to the love donated. Although some people do good deeds without leaving their names, it cannot be ruled out that most users like to pursue face and always hope to have the most face, because it can bring a sense of honor and psychological satisfaction. If good deeds can be known to others, it will encourage more people to do good deeds. Therefore, user ranking plays a great role in user motivation.

Recently, Ant Farm has added a fruit tree planting function. Users can choose their favorite fruits and plant them. After fertilizing the trees until they mature, they can receive real fruits for free. When the "free fruits" feature first appeared, it has already aroused users' greed. After planting fruit trees, they need to be fertilized to promote their growth. The fertilizer required at different stages of growth will also increase incrementally according to the base number. Users need to complete different tasks to obtain fertilizers. Although there are many tasks that can be completed, most of them are just a drop in the bucket.

Users can get a lot of fertilizer every day by browsing selected products. When entering the product page, the system will recommend similar products that users have recently browsed on Taobao. They can receive fertilizer by staying for 15 seconds. At the same time, if they place an order, they can receive nearly 10 times the fertilizer, which makes the fruit mature faster. According to Hick's Law: The time it takes for users to make decisions increases with the number and complexity of choices. The system recommends similar products that have been browsed recently by reducing the options available to users and the potential motivation to place an order for fertilizer in order to "get free fruit", so as to prompt users to make decisions quickly and achieve the purpose of closing the deal. (PS: In order to get a lot of fertilizer, I have bought products that I wanted to buy but didn't buy several times before)

"CCtalk" friendly pop-up prompts

1. Product experience:

Enter the homepage of the "cctalk" APP, and a pop-up window with the most recent learning record will automatically appear at the bottom. Click it to continue learning, or you can manually click to close it. If there is no operation, it will automatically close after 5 seconds.

2. Design Thinking:

cctall is a heavyweight product. Users who enter this application usually have a purpose, mainly for learning, rather than for entertainment and leisure. The learning record pop-up window on the homepage is between toast and snackbar, which extends the display time of toast and adds a jump link. It can also be closed or disappear automatically, which reminds users without affecting other operations.

A good product will give appropriate feedback at the right time. No feedback, untimely feedback, or incorrect feedback will make users dislike your product and lose users. The pop-up window prompt of cctalk appears at the time when the user may need it, allowing users to quickly achieve their goals. It is very friendly and also improves the usability of the product.

「Ele.me」convenient shopping cart entrance

1. Product experience:

Go to the Ele.me homepage and click on the shopping cart entrance in the lower right corner to see a list of products added from all stores and check out one by one.

2. Design Thinking:

Compared with the past, users who have used Ele.me know that each store has a separate shopping cart, and you can only complete the checkout from the corresponding shopping cart. Before buying a product, most users will check the price, comments, comprehensive ratings, etc. of the same product in multiple stores, and "shop around" based on the price-performance ratio. However, when they look back, they need to switch back and forth to find the store where they have added the product before, or even cannot find it, which takes a lot of time and is very inconvenient.

The newly added shopping cart entrance in the lower right corner of the Ele.me homepage solves this problem very well. When you enter the shopping cart, you can see all the stores that have previously added products to the shopping cart, and you can choose to check out from the list, saving users a lot of time. The entrance cleverly solves the pain points that users may encounter in the ordering process and improves the usability of the product.

"Quark Browser" has insight into the details of the address bar

1. Product experience:

When entering a URL in the Quark Browser, click the control bar icon below to enlarge the left and right control areas, and move them left and right to modify the cursor position;

The address bar is displayed above the keyboard (in the middle of the screen), and the automatic matching results when entering a URL are arranged from bottom to top.

2. Design Thinking:

When we use a mobile browser to input a URL, if we need to modify the address in the text box, we need to use our fingers to position the cursor directly in the input box. It is really difficult to position the cursor accurately in the ideal position for a relatively small address text. By moving the cursor left and right through the control bar of the Quark browser, the accuracy is greatly improved, avoiding repeated operations caused by incorrect cursor positioning and improving operation efficiency.

In addition, most of the mobile browsers I have come into contact with have their address bars at the top of the screen. Currently, large screen sizes are a trend, and the proportion of users operating their phones with one hand is the largest. The top and bottom areas are the most difficult to operate with one hand, but Quark Browser breaks the convention and places the address bar above the keyboard, that is, in the middle of the screen, which is the area that is easiest for users to operate and control with one hand, which is very convenient. It is also very reasonable to arrange the URL matching results from bottom to top according to accuracy. Fitts's law tells us: Controls that need to be operated continuously should be as close as possible. The time required to move any point to the center of the target is positively correlated with the distance to the target and negatively correlated with the size of the target.

WeChat Moments message re-editing

1. Product experience:

When posting a message using Moments and you find a typo, delete the message and click Re-edit to complete the modification by returning to the interface before the message was posted.

2. Design Thinking:

WeChat has been launching a series of big moves in recent times, from the previous once-a-year nickname modification to the later "pat" function, and then the function of re-editing Moments messages after deletion, which made many netizens exclaim that it is really great.

After we post a message in Moments, if we find a typo or need to add or delete content, we can delete it directly and re-edit it within the specified time. Especially for users who post long messages, if they delete the message without copying the content and have to re-edit it from scratch, the psychological shadow area is no less than "10,000 horses galloping". At this time, seeing the re-editing entrance is like timely help. It not only simplifies the interaction process, but also saves users a series of troublesome operations to re-edit the message, which is deeply popular.

"58.com" pop-up tab bar

1. Product experience:

When experiencing the release of housing information on the 58.com APP, you need to enter a variety of housing options, and you can complete different options in multiple tab bars in a pop-up window.

2. Design Thinking:

In many APP applications we use, we often come across pages about information selection, such as: filling in the address and selecting the region, shopping and selecting the product type, returning and selecting the reason, etc. The most common operation method is to click on the next option after selecting the current option, and then enter the pop-up window again to select, with many levels. When designing the options for publishing properties, 58.com puts multiple levels in the same option and multiple options in the same pop-up window, which effectively avoids information confusion caused by too many options, and also solves the operational inconvenience caused to users by multiple pop-ups. While saving time and operating costs, it also makes the path more reasonable and simple.

King Kong area icon on the homepage of "Meituan"

1. Product experience:

Entering the Meituan homepage, the abstract icons of the King Kong area give people a bright feeling;

The various category entrances in the King Kong area can be switched by swiping left and right, so you can quickly find the functions you want.

2. Design Thinking:

The most core function of a product is the homepage. It undertakes the core function of the product and determines the attributes and tone of the product. The King Kong area on the homepage can best reflect the "skeleton" (product architecture) of the product, so that users can quickly enter the corresponding demand module. Usually, 80% of the King Kong area icon styles we see most are composed of "base color blocks + graphic elements", while the face icons used in the King Kong area of ​​the Meituan APP are icon styles that fill the abstract graphics of miniature objects in real life with colors. They are clear, concise and unified, with strong expressive ability and high recognition, which improves ease of use. Compared with the popular icon styles of other products, it has achieved differentiation. In addition, through the superposition of single colors, changing the transparency or superimposing layer style design, it is visually very transparent, has a sense of space, rich details, a strong sense of quality, and is very attractive. It can be said to be the face value of the homepage.

There are too many function entrances on the homepage to display all of them. Most mobile applications will design a "more" entrance at the end of the King Kong area. However, Meituan displays all function categories through the interactive method of sliding left and right, which is more visually focused. Because many icons are similar, using a list to display them is easy to confuse the user's vision, reduce the recognition of icons and the speed of information transmission. Therefore, displaying all and sliding left and right to select and browse in blocks is a good solution to this problem. Not only is the operation quick, but the efficiency of visual communication has also been improved.

「iPhone」 App Store’s eye-catching dynamic guide

1. Product experience:

Use an iPhone mobile device to enter the App store and download the app for the first time. The bottom of the page prompts "Confirm via side button", and the button position on the right side of the screen is noted "Press twice to install". At the same time, the simulated button color block on the right side bounces twice in an animated way to remind you.

2. Design Thinking:

For Apple products, whether mobile or desktop, the visuals and experience can be called devilish. When downloading an app, the button shape on the right uses visual clues to indicate the user's next action or perceive the function of the graphic. The dynamic prompts can better attract the user's attention and guide the user to operate, truly achieving warm and emotional communication.

"Tencent QQ" multi-window message browsing hidden in the dark

1. Product experience:

Click on the QQ message list to enter the chat box. Long press on the blank area of ​​the chat window to switch between multiple windows. Swipe left and right to switch between friend/group chat windows. Swipe up and down to view more chat records in the current window.

2. Design Thinking:

Although most users have switched to WeChat, QQ, as the leader of social applications, has never lost its glory. It's just that QQ serves a younger user group and has a more diverse social group, which is more in line with the younger temperament. QQ's message multi-window switching looks pretty cool. When switching, you only need to long press the blank space of the message in the message list to quickly enter the switching option. It's as smooth as silk. We no longer need to use the multi-step operation of returning to the message list and then re-entering the window.

For this reason, you may also hear: "I, Zhao Ritian, am not convinced." I have not used QQ for many years. WeChat is so convenient, isn't it better? In fact, for users who really need it, this function is still very convenient. Whether it is for study, work or chatting, QQ's group chat function is quite diverse. It is very practical when we browse group chat records, climb stairs, and find some useful information by switching between multiple windows.

"Industrial and Commercial Bank of China" interesting dynamic visual guidance

1. Product experience:

When entering the homepage of the Industrial and Commercial Bank of China app, the voice input in the search bar switches back and forth between the microphone graphic and the sound wave graphic through animation, reminding users that they can use voice input to search.

2. Design Thinking:

Currently, many mobile application searches have added voice input functions in order to allow users to complete searches more efficiently and conveniently, but most of them only add a microphone icon as a prompt. The ICBC APP uses dynamic effects to transition between the microphone graphic and the sound wave graphic. First of all, the dynamic visual guidance and the interesting micro-interaction can attract users' attention and better guide user operations. Secondly, the use of two icons is selective in terms of recognition, which expands the user's cognitive level in the recognition layer and indirectly improves recognition. The transitional nature of the switching of the two icons also appears very gentle. The emotional design details add warmth to the product and increase the click-through rate.

An icon is a visual representation of an object or action. Its most important image attribute is its function of conveying meaning. It is also the most important factor in deepening the user's image. The microphone icon is an abstract graphic of a device, and the sound wave icon is the interactive process when using the device. The two icons are perfectly combined in the form of dynamic effects. Our first impression is that this function is waving at us and talking to us, which truly achieves warm communication.

JD.com’s timely concealment creates an immersive experience

1. Product experience:

When swiping through the product list on the JD APP, the navigation bar and global filter bar are automatically hidden and will be displayed again after a swipe down operation.

2. Design Thinking:

Generally speaking, when some navigation or operation entrances may become obstacles that disturb the user's immersive experience, we will hide them, because the existence of some elements will distract the user's attention. Based on user needs, the JD APP's product list has a navigation bar, a global operation bar, a vertical content filter bar, and a status bar at the top. The vertical proportion on mobile devices is quite large. In order to solve this problem, JD changed the way of interaction. When sliding up the page, the navigation bar and the global filter bar will be hidden, and they will be displayed again after sliding down.

In terms of interaction, we have thought that when the upward sliding operation occurs, it can be understood that the user has started to select products. At this time, the importance of search and sorting decreases, and the importance of vertical content screening of search results increases. Hiding the lower-level operations/information in a timely manner can allow users to focus on the current information and avoid interference from other redundant content. At the same time, it also increases the height of the content area, and more product information is displayed on one screen, increasing the possibility of products reaching users and the utilization rate of the screen. Reasonable use of the four interactive design strategies - hiding: hide the functions that need to be hidden as much as possible, and then display the corresponding functions at the right time and location.