Meituan Takeaway Product Analysis Report: 2 Product Design
> Click to view the original image
The above image uses a mind map to fully display the functional menu of the Meituan Takeaway App, which can be divided into four categories according to the main menu.
Home page: Displays merchants in various forms such as categories and offers, allowing users to search and select.
Flash sales: Display fresh supermarket products separately, which is different from the catering on the homepage. It mainly promotes flash sales based on the surrounding living area.
Orders: View all orders that have been created. Users can perform operations such as evaluation, after-sales service, and placing another order.
My: Centrally manage user information and assets, including addresses, collections, wallets, coupons, etc., as well as customer service center and other entrances.
> Click here to view the original image
The above image uses a swim lane diagram to simulate the Meituan takeaway products from the perspectives of consumers, merchants, and riders. business process.
It can be seen that the process relationship between consumers, merchants, and riders is inseparable. The consumer is the leader who triggers the entire process, while the merchants and riders play the role of serving consumers. The three form a complete business closed-loop process.
As can be seen from the flow chart, the login and registration methods for Meituan Takeaway are basically based on mobile phone numbers. Even if you use a third-party social account to log in, you must first bind your mobile phone.
The main reason is that users of Meituan Takeaway are based on mobile phone numbers, and one number corresponds to one user. This can not only ensure the authenticity of the user, but also reduce the phenomenon of fake orders and fake comments. Moreover, the same account is allowed to be logged in on multiple terminals at the same time, and user information and shopping carts support real-time synchronization.
Because a mobile phone number is a prerequisite for ordering and picking up food, using a mobile phone number is a very reasonable and natural choice from a user or product perspective.
The interface of Meituan Takeout App is mainly orange, which runs through the entire product design. In addition to the background color, icons, and text, as well as the cute kangaroo image, rider clothing, etc., the entire color system has been deeply rooted in the hearts of the people. It can be said to be a very successful VI? design case.
As a takeout product, the core of the design revolves around how to better display merchants and guide users to place orders. The middle part of the page is used to display merchants and food products. Search, settings, message center and other functions are placed at the top, while the bottom is a fixed menu navigation bar. The main operation methods are up and down swiping and single-click selection, with occasional left and right sliding as auxiliary display.
> Click here to view the original image
The above image uses the Axure software to draw a medium-fidelity prototype of the Meituan Takeaway App in a backwards way for the purpose of display. Design details of the product interface.
The prototype diagram is mainly grayscale, with colored lines representing the process relationships between different pages, and blue annotations explaining the key points of the interaction design.
As mentioned earlier, the login and registration methods of Meituan Takeaway are mainly based on mobile phone numbers, which can also be clearly seen from the interface design.
The account exit method is placed in the secondary entrance "My-My Account", because ordinary users do not need to switch accounts frequently and are rarely used.
In the Meituan Takeaway App, new users can still use most operations without logging in, such as browsing merchants, clicking on products, etc. The address defaults to the nearby address matched by the system. . Until the limit is exceeded and a function that must be logged in to be used is triggered, the interface will remind the user to log in or register.
The above picture shows the operations in Meituan Takeaway that will trigger login reminders, such as message center, shopping cart, personal information, address management, order settlement and other functions. This kind of design is more friendly to new users, making it easier to explore and understand when using it for the first time, and will guide registration and login until the need to place an order arises.
As an online takeout product, the core function is naturally ordering, so it is crucial for merchants to display and guide the ordering process.
As can be seen from the picture above, Meituan Waimai has done a lot of homework on how to guide users, and almost all operations have become the entrance to the merchant page.
There is no lack of promotional information with inducement effect in the content, which is used to enhance users’ desire to place an order. At the same time, it also provides many tools for users to search and filter to improve the efficiency of ordering.
After users enter the merchant page, they can select, place orders, pay and other operations. The schematic diagram completely demonstrates the entire process from entering the merchant to completing payment. It can be found that the design logic of Meituan’s external interface is very clear and intuitive, and the learning cost for even new users is relatively low.
When users select products on the merchant page, they can add or subtract the quantity at will, and see the calculated actual total amount in real time. Moreover, it will thoughtfully remind users whether they meet the current merchant's full discount offer, and also provides a "full discount tool" to help users place orders quickly. After selecting the products, you can confirm twice through the shopping cart below, which will intuitively display the selected products and total price, and then settle after confirming that they are correct.
After submitting the order, the price formula of the product will be displayed in detail again, including packaging fees, delivery fees, preferential red envelopes and other addition and subtraction details. It is detailed and not wordy. On the order page, users can select red envelope vouchers, fill in notes, select tableware, issue invoices and other operations. Finally complete the payment and jump to the order details page.
The convenient functions mentioned in this section are the highlights of Meituan’s takeout product design. While fitting the core functions of the product, it not only improves users' ordering efficiency and satisfaction, but also promotes consumption.
In the lower left corner of the merchant page, there is a "full discount tool" function for users to quickly select meals that meet the full discount requirements. It complements the "order reminder" and is more direct and effective.
The full discount artifact will automatically list the best meal combinations in the current merchant that meet the full discount offer. The implementation logic is also very simple. It mainly uses the merchant's historical orders to sort out the combinations that have been purchased more frequently.
Since discounts with full discounts have become a regular activity on takeout platforms, almost all merchants have discounts of varying strengths, which quite tests users’ mathematical abilities when ordering. Meituan Waimai launched this function just to meet the needs of users, saving users the time of putting together orders and greatly improving the efficiency of ordering.
At the top of the order page, the merchants that the user has purchased from are arranged from high to low, forming a list of merchants from which they have recently purchased. It makes it easy for users to find it quickly and reduces search time.
From a user's perspective, merchants with a high number of purchases are usually merchants that they like and pay attention to frequently.
In the order list, completed historical orders can be viewed through "Similar Merchants" to view other merchants similar to the merchant, mainly through comprehensive screening based on location, category, price and other factors.
Usually users like the taste of the merchant's food, but want to change to other merchants for some reasons, so they need to use this function, especially for heavy users.
In the order list and order details, there is a "Make Another Order" button, whose function is similar to re-purchase.
After clicking, the user will jump to the merchant page and automatically put the same meal items in the historical order into the shopping cart. If there are any missing items, a reminder will be given. When users want to repeat the order of the previous meal, or just make minor adjustments, they can quickly complete the order through simple operations.
In addition to being suitable for scenarios where users place orders again and do not have time to choose meals. At the same time, when the user clicks on the wrong order and cancels it, they can also use "Make Another Order" to add it again, and then make adjustments in the shopping cart.
Meituan’s merchant display is based on the user’s current address and must be within the delivery range. At the same time, the user’s address is also key information for riders to deliver food. Therefore, how to guide users to fill in address information and ensure that the correct address is selected is one of the more important core functions.
As shown in the picture above, Meituan Waimai mainly provides three entrances for users to select and edit addresses, which are distributed in three pages: home page, submit order, and my address, which respectively correspond to placing orders. There are three processes before, when placing an order, and after placing an order.
As an online takeout product that is close to people’s livelihood, users’ evaluations of merchants, riders and other services are obviously very important data. The picture above shows the multiple evaluation entrances in Meituan Takeout. As can be seen from the schematic diagram, after the current order is completed, there will be three entrances to remind users to evaluate. If the user fails to evaluate in time when the order is completed, he will still see the evaluation button when he returns to the order page later, and there will also be a separate "pending evaluation" category.
The rating mechanism can encourage merchants and riders to improve their service quality. Merchants will generally improve their meals based on the evaluation content, while riders will be more proactive in their service attitude in order to receive praise. At the same time, the platform can also use user reviews as data support for product optimization, thereby simultaneously improving the overall product quality and user experience.
While actively guiding user reviews, it is also necessary to ensure the authenticity and effectiveness of user reviews. In addition to what was mentioned above, registering with a mobile phone number enhances the authenticity of users. It also restricts reviews to only 7 days after the order is completed, and no further reviews are allowed after 7 days. Because after a period of time, users may have deviations in the taste and service experience of takeaways, or may be interfered by other factors, the most direct evaluation should be within a week. These evaluation contents will also be unified into "My Evaluations" to facilitate users to view and manage them again.
As shown in the figure, users can find the entrance to the "Message Center" in the upper right corner of most pages. It collects all notification and communication content, including merchant vouchers, system notifications, customer service messages, friend messages, etc.
According to actual scenarios, it can be found that users often need to go back to perform other operations during the communication process, and the multi-entry design of the "Message Center" facilitates users to switch back and forth.
When users encounter problems while using the product, the first choice is naturally online customer service. The picture above shows the multiple customer service entrances and interface designs in the Meituan Waimai App. The main entrance is located at "Order ” and “My” page.
Since most abnormal problems with takeaway products are related to orders, the "Order Details" page entry is more commonly used.
In this regard, depending on the order or status, the content of the page where the user enters the online customer service is different. Taking the schematic example as an example, the same order displays different content in the two statuses of "delivering" and "completed".
The purpose of this processing is to simplify user operations and use big data to predict current needs; second, to guide users to the correct solution channels, such as directly contacting merchants or riders, thereby reducing the burden of manual customer service cost pressure.
In the Meituan Takeaway App, as long as the user is logged in, the checked products will always remain in the "Shopping Cart" and can be easily retrieved at any time. I call this This is the "Shopping Cart Retention Principle".
The products that the user has clicked must have been considered after various factors. Even if the order is not immediately placed, it is crucial to be able to retrieve them at any time, giving users a sense of "always staying shopping" The feeling of peace of mind that the car is waiting.” For an online takeout product, this is a crucial point in the user experience.
The products selected by the user from any merchant will be displayed together in the "Shopping Cart", and the price, delivery fee, and full discounts will be clearly stated. If there are abnormal situations such as the merchant is closed or the product is out of stock, a reminder will be given (as shown in the picture). Users can make secondary selections and comparisons in the shopping cart at any time, and then place and settle orders. The items after settlement will naturally be cleared, but you can still see the purchased items in historical orders.
At the same time, it was found through actual testing that even in extreme situations such as network disconnection, crash, or battery failure, the items in the shopping cart will not be lost. However, if you are a visitor, the shopping cart will not be retained permanently, because user data is stored online following the account, and supports real-time synchronization on multiple terminals.
As shown in the figure, if the user currently has an order in progress, a floating window on top will appear at the bottom right of the page to display the real-time status of the order.
This floating window can be seen on the three homepage pages: "Home", "Orders", and "My". After clicking, the user will directly enter the details page of the order, making it easy to understand the current dynamics at any time, such as where the rider has delivered.
As you can see from the illustration, the prompts in the floating window will also change depending on the order status. The floating window will appear after the user submits the order, and will disappear once the order is completed (delivery is completed).
As shown in the interactive action above, when the user selects "Pending evaluation (or refund)", the page will expand to full screen and display the top menu while switching. This is an interactive design that is more in line with user intuition, and the actual operation feels smooth.
In this state, the user's "click" behavior represents the intention of "switching and viewing content", so full-screen expansion is more conducive to user browsing and prevents other irrelevant content from disturbing the vision. The same interaction design also appears in the filtering function on the homepage, the category menu on the activity page, etc.
The most common floating controls in the Meituan Takeout app are mainly the "shopping cart" on the homepage (or flash sale) and the "red envelope" on the order details page.
Although the two floating controls are similar in nature, they have slightly different operations. Combined with the schematic diagram shown above, a simple analysis of the two is performed.
Shopping Cart: When the homepage (or flash sale) is opened, the initial state of the "Shopping Cart" control is fully displayed to highlight its functional position. When the user scrolls the page, it becomes transparent and is included in the sidebar to avoid blocking the content. And if you stop swiping, the initial state of full display will be restored.
Red envelope: The initial state is also fully displayed, and it is also transparent and included in the sidebar when swiping. The difference from the shopping cart is that the controls are hidden when you stop swiping and can be dragged freely.
The "Red Envelope" control can be dragged freely and will not be fully displayed again after stopping swiping. This design can be understood as assuming that the user has no intention of sharing the red envelope after the order is completed, then the possibility of sharing it later is extremely low, so the control only needs to maintain the state of "staying in the corner and being able to find it when needed". Can. The control allows free dragging, which avoids the situation where the floating control easily blocks the key information of the page, such as when the order details page needs to take a screenshot (share, complain).
Providing appropriate reminders at the right time to inform users of key necessary information can avoid affecting the user experience due to information asymmetry. Moreover, the timing and method of reminders are also very important. Once they are too abrupt or frequent, reminders will become harassment.
The following is a schematic diagram to describe several typical examples in the Meituan Takeaway App.
When a user uses the "Replace Order" function, but some products from the merchant are missing and cannot be added to the shopping cart, the page will clearly prompt "?XX product has been sold out, please select again.".
It is convenient for users to understand in time, check the shopping cart and re-purchase. It avoids users from placing orders directly without knowing it, causing wrong orders, order disputes, etc.
When the user enters the merchant's page but is not currently within the merchant's delivery time, a delivery time reminder of "Book now, delivery from **:**" will appear at the top of the page.
Clearly inform the user that if the order is placed now, it is a reservation, and the time when delivery will start.
This prevents users from discovering that immediate delivery is not possible after selecting the product, or even that the merchant does not deliver the product after placing the order directly.
In addition, if it is not within the business hours of the merchant, the page will directly prompt "Our store is closed" and the user will not be able to click on any products.
When a user submits an order, if the system determines that there is rain, snow or other bad weather at the location of the delivery address, the page will provide "delivery may be delayed during bad weather, please be patient" below the delivery time. .” reminder.
It is convenient for users to understand in advance that the delivery time of this order may be longer. If you continue to place the order, it means acceptance by default. This can, to a certain extent, alleviate users’ anxiety about waiting and reduce complaints, order reminders and other incidents.
When the user takes a screenshot on any page, two convenient options will appear on the right side of the page, namely "Feedback Question" and "Share Page".
Selecting "Feedback Issues" will first enter the editing interface that includes mosaic and marking functions, allowing users to remove sensitive information in screenshots or mark issues that require feedback. Select "Share Page" to access social sharing buttons such as WeChat and QQ? In addition, if you take a screenshot on the merchant page, there will also be an option of "Order Ordering with Friends". Click to enter the WeChat Order Ordering interface.
When there is an abnormality in the network where the user's mobile phone is located, the page will display the prompt "The network is not very strong, please try again later."
As you can see from the picture above, the prompt under network exception is very simple and direct. The page will be completely blank because the content cannot be loaded, and the user will be reminded to reload (as shown on the left). After the network returns to normal, reload to display the normal page.
If the network is unstable intermittently during use, the loaded content of the current page can still be browsed, but if you continue to click, a prompt will pop up because it cannot be loaded (as shown on the right) .
In response to public opinion, Meituan Waimai often launches some bonus points options. At the same time, it cooperates with public relations and publicity, which has a direct impact on improving the brand image.
Meituan Waimai launched the "Qingshan Project" in September 2017, officially putting environmental protection work on the agenda. At the same time, merchants and users are encouraged to participate together to reduce the use of disposable tableware.
Users can choose the number of tableware when submitting an order, or do not need tableware. At the same time, there will be a clear sign on the page "Let's help environmental protection together" to encourage users to participate, and merchants can light up the environmental protection signs after participating in the activity.
This move has offset to a certain extent the negative public opinion about the pollution of food delivery, and it also helps to enhance the green image of Meituan Food Delivery.
Meituan Waimai launched the number protection function in August 2017 to improve user privacy protection.
Users can check "Number Protection" when submitting an order. After it is turned on, merchants and riders can only see the hidden four-digit mobile phone number. When contacting the user, they need to go through a third-party number platform for transfer, and Expires after a certain period of time after the order is completed.
The benefits of number protection to users are very obvious. They no longer have to worry about randomly discarding takeout orders and leaking addresses and mobile phones, or they can avoid being harassed by mobile phone numbers when there are disputes with merchants and riders.
Meituan Waimai provides free number protection services to all users, allowing users to feel more confident when using the product and helping to enhance trust in the brand.
Meituan Waimai has supported the anonymous evaluation function since its launch around 2014, mainly to allow users to provide more authentic ratings and content.
When users evaluate completed orders, rider evaluations are always anonymous, while merchant evaluations can choose whether to be anonymous. What's even more considerate is that if a user gives a negative review of less than two stars to a merchant, the anonymous review will be automatically checked.
This function is similar to number protection. It mainly protects the privacy of users and improves the authenticity of user reviews to a certain extent.
Meituan Waimai launched the rider blacklisting function in June 2018. Users can blacklist riders with poor service experience, and then the rider will not receive orders from the user.
This can improve the user experience and avoid repeated encounters with riders with bad attitudes and unfamiliar roads. At the same time, it can also push riders to improve service quality and avoid being blocked by many people and receiving fewer orders.