Related Blog

The Design Sparks of miniQR

by Chang Yiming
Web Front-end Engineer


As a front-end developer, in addition to completing high-performance business code, it is also an essential skill for thinking and exploring at the interface interaction and UI design level. MINIQR we are currently exploring is a subscription service based on Mini Programs for travelers and consumers. Mini Programs’s goal is to be short and powerful. This minimalist design pattern also fits the trend of all future mobile clients (whether APP or H5).

miniQR is a bidding product to broaden the business of hotels. In this blog, I will provide some of the highlights I have learned in the design and business function level on the mobile side of other products, hoping to ignite some spark of thinking.

Each APP should emphasize what is the core requirement of the APP. We need to emphasize the most important service demand after customers enter the hotel, and how to get hotel service quickly. The focus is on coffee APP and Starbucks coffee APP, as you can see intuitively. Luckin uses the splicing of large squares to enhance the display, and Starbucks chooses the solution is to let the order entry stick to the main interface through sticky layout, so as to highlight its main business module.

miniQR can highlight our subscription service and ordering as our main business, while dividing it from our side business. A preliminary definition of the overall design MINIQR is provided, as well as a visual presentation of what we can provide to the user.

miniQR is like a sparrow, which may be small but it has all the vital organs. Flat and concise application of the entire structure is the core element. The main core operation at the front-end interface level needs only two levels to cover. Most operations are done by sliding left and right. It should be the original intention of our design and application, as well as the element of a qualified Mini Programs application, to make our customers easily and quickly obtain the services provided by the hotel through efficient and simple operation.

To achieve interface configurable, after referring to other Mini Programs or APP, we think to meet the miniQR configurable requirements, the more elegant design is [functional cardization]. Whether from the code logic level of implementation or design coordination considerations, the use of functional card design is undoubtedly a suitable design pattern we need. The card means that we can pull off or insert at will, so that the interface on a configurable basis, without affecting the overall interface coordination.

miniQR as a hotel Mini Programs with ordering, booking, and hotel details, the hotel details interface and ordering interface can keep the interface style unified.

On the hotel details interface, a striking advertisement is at the top 1/4 and a card at the bottom 3/4 that can slide up. Place the return button in the upper left corner of 1/4 so that the settings can be done as easily as possible with all operations in one hand. At the same time, it not only maintains the striking advertisement promotion, but also clearly divides the advertisement module and the function display module, in the overall layout level is more intuitive, enhances the user experience when ordering food.

At the miniQR functional business level, it’s virtually impossible for users to get an idea of how they subscribe to a service (e.g. order is in delivery, production, delivery, etc.).

A set of functions based on Mini Programs subscription messages is opened in WeChat Mini Program API. After authorization with the consent of the user, you can be informed of the current service changes in real time in the WeChat [Service Notification] column.

We also embedded the real-time notification function of [subscription message] miniQR, in order to achieve a complete service closed loop and a better meal ordering experience.

Invoicing has always been an important business for hotels. Invoice entry should also be arranged in a more eye-catching position, and the design invoice information input should be simple and direct.

Similarly, in order for the hotel to be oriented to improve the service quality of the hotel and form a complete set of service closed loop, the customer’s feedback on the hotel check-in service should also be paid attention to.

After the user completes the hotel service experience, the user is guided to the user scoring interface for scoring or writing comments, and the user can also view the history evaluation. This can directly have a positive impact on the management of hotel service quality.

Paying attention to the details of the experience interaction, simplify the operation, functional saturation are the original intentions of Mini Programs application. Good product design requirements are based on product requirements to explore, but also need to be modified to optimize the design. It is hoped that the optimization cases mentioned above will give some positive and meaningful inspirations.