Vacation Rental Mini program UI Design

Project Background

WeChat has the largest user base in Chinese social media market. In 2017, WeChat announced the launch of mini programs, which allow official accounts to develop apps that can be accessed and run directly within WeChat. The average daily active users have exceeded 230 million people in 2018.

The company plans to develop mini-programs to increase its Chinese user.
The mini-programs are intended to be simpler than the full app version, with improved UI design.

Three months after the launch of the mini programs, they accounted for 10% of the company’s bookings.

Development followed Agile methodology.

Platform

Wechat mini program

Role

UI/UX Designer

Duties

Wireframe/ Mock-up/ Prototype

Design insight

Index page

Updating the UI by changing the main color tone to white and reorganizing all blocks from medium to large sizes to create a clean and visually appealing look.

In addition, simplified the platform into three sections: search, featured listings, and quality accommodations. Retained only the essential features necessary for making a booking, which has reduced our development time and improved our solution even further.

To align with our company’s new strategy, I have promoted the featured listings section to the second place. This change will increase the exposure of selected listings and improve their booking rate.

Orders

Removed the use of large colored blocks on the status bar in the old version, replacing them with small colored blocks.

This change maintains the definition of status differentiation by color while keeping the visual display clean.

I have also reorganized the priority of important information on the order list page and optimized the arrangement design of booking dates to make it easier to read.

Due to the simplified features in this version, it only retains three tabs at the bottom of the page: Search, Orders, and My Page.

Calendar

The new version highlights the continuity of selecting dates and displays the selected check-in and check-out dates at the top. In order to show prices below each date, the spacing between dates has been slightly increased, allowing for more white space and making the interface look cleaner and more concise.

Booking

In the final step before submitting a reservation on the booking page, the new design reduces the size of the property images and places the price in the bottom toolbar. This allows for more room to display additional information about the property on the screen. Furthermore, the price, number of guests, and number of nights are placed together on the left side of the bottom payment button, ensuring that users can confirm these details before making a payment.

User Profile

In the WeChat Mini Program version, we have retained only the essential functions for booking a room. Therefore, the user interface does not have as many options as the app version. To address this, the design has been modified to create a background that aligns with the brand image. The information is displayed in a floating block at the top, preventing the page from appearing too empty.

Scroll to Top