Shanghai Disney Resort
Embedded Files
An overhaul of the eCommerce experience at Shanghai Disney Mini-program
Peek into the research and insights that drove our overhaul of WeChat mini-program
We initiated the WeChat Mini-program Redesign & Unify project to provide a consistent user experience across multiple platforms. The objective is to enhance the end-to-end user experience through crisp visual hierarchy, fluent interaction design, and appealing UI presentations.
By comprehensively updating the existing design system, we can standardize the design language, allowing us to make UI components highly reusable, improving product development efficiency.
The legacy design of the WeChat mini-program
My role
As a lead designer, I collaborated with two UI designers and several product managers on this project which lasted approximately six months.
I was mainly responsible for developing the design strategy, competitive analysis, reorganizing the information architecture, and establishing the design system. I also played a key role in persuading key decision-makers to adopt our design solutions.
Why redesign?
The fragmented user experience of cross-platform
Due to the varying life cycles of products and the lack of communication between different product owners, inconsistencies have progressively widened over time, resulting in a negative impact on user experience.
Poor product performance
The current mini-program was built using an HTML framework rather than the native mini-program framework, leading to performance issues such as slowness and frequent bugs.
The design is not distinguished
The current design is functional but lacks visual appeal and does not adequately reflect the distinctive character of Disney.
What we want to achieve
We want to achieve a fluent user experience by leveraging the native framework of WeChat mini-program
We want to improve the quality and efficiency of product development via a sophisticated design system
The product becomes users' top-of-mind when they contemplate visiting Shanghai Disney Resort
We measure the success by an increase in
Traffic from WeChat search to mini-program
Daily active user of mini-program
Return visitors to mini-program
Page views and click-through rate on mini-program
The conversion rate of product purchases
The people we are designing for
First-time visitors
First-timer visitors care more about making the best use of time in the park.
They are drawn to the park's most popular rides and special events and are willing to pay for convenience in order to ensure an efficient and enjoyable experience. Price is also a key consideration for these visitors.
Annual Pass holders
Annual Pass holders are avid Disney fans who are interested in staying up to date on the latest happenings at the park, including seasonal events and merchandise debuts.
They value the privileges that come with their Annual Pass and expect to have a thorough understanding of the rights and benefits that they are entitled to as pass holders.
Clarify product positioning of different platforms
App
Provide holistic and immersive experience from pre-arrival to on-property.
The number of daily active users is highly correlated with park attendance.
Cultivate Disney fans and keep retention with social media engagement.
The traffic is mainly driven by WeChat official account articles or special ticket offers.
Website
Capture media campaign traffic to the Shanghai Disney ecosystem.
The traffic is in line with media campaign exposure.
Sort out the information architecture
From 0 to 1: Start with the user journey of purchasing
Since the main goal of the mini-program is to provide users with an easy access way to buy park tickets, book hotels, and purchase additional services, we decided to kick off the redesign project with the product purchase flow to establish a solid foundation of the major user journey.
The product purchase flow of Shanghai Disney app
Product list
Product booth
Guest info
Checkout
Order confirmation
The product purchase flow of Shanghai Disney mini-program
Product list
Product booth & Guest info
Checkout
Order confirmation
What wasn't working
The product booth page is too text-based
The product booth page relies too heavily on text, with unclear categorization of product descriptions. Additionally, the information is mixed with terms and conditions, making it difficult for users to find key details about the product and make informed purchase decisions.
The terms & conditions agreement is a roadblock on the user's way
Placing a large block of text in the middle of the page disrupts the flow and negatively impacts the product purchasing experience.
The information is overloaded
Consolidating all information and interactions on the same page, although it can avoid the loss of traffic caused by page transitions, also causes a great cognitive load on users and makes them abandon easily.
Product booth page of App
Product booth page of WeChat
Competitive analysis of product purchase flow
Product list
Product info & T&C modal view
Product selection & Guest info
Checkout
Product list
Product info & T&C modal view
Product selection & Guest info
Checkout
What we learned from competitors
Make T&C an appendix for the attentive user who want to know more
While it's important to have a thorough set of terms and conditions, we should keep in mind that only a small percentage of users will actually read them closely. It's important not to deter the majority of users by presenting them with a long block of text that they cannot skip before completing their purchase.
Reduce users' cognitive load by simplifying the process
To improve the conversion rate and give users a sense of control, it's best to break the process down into small, concise steps rather than presenting everything on a long page. This helps to reduce cognitive load and make the process more manageable for users.
Wireframe: Make each step crisp clear
By dividing the product purchase flow into smaller steps, users feel a sense of control as they progress through the process.
This also allows us to design each page with a specific purpose in mind, keeping the UI simple and clean.
Product booth
Order
Guest info & Confirm purchase
Checkout
Order confirmation
Final design
Before
After
Product list page
We have adjusted the size proportions of the product icons and names to create a more harmonious and balanced design. The highlighted price and button will draw attention to important elements and increase the likelihood of user engagement.
The icons of the bottom navigation are also redesigned to incorporate a more playful and Disney-inspired style, aiming to create a more enjoyable and immersive experience for users.
Lastly, the reduced visual weight of the top notification and labels will create a cleaner and more organized interface, reducing user cognitive load and making it easier to navigate the application.
Before
After
Product booth page
In the new design, we streamlined the lengthy product description into a more easily readable column format based on the type of information.
Some products may have multiple options, so we use tabs to allow users to easily switch between subcategories and compare them.
While most users may not read the terms and conditions closely, it is important that they are aware of them according to the policy. Therefore, we place the terms and conditions at the bottom of the page and use a coach mark to remind users to scroll down and review them before making their purchase.
Before
After
Order page
On the order page, users must select the date of their park visit and the number of tickets. To remind users which product they are purchasing, we display a product thumbnail at the top of the page.
The calendar component has been revamped to enhance its visual appeal and provide users with clearer visual prompts regarding ticket prices and sales status for various visit dates.
Before
After
From 1 to N
By overhauling the major user journey of the mini-program, we laid the groundwork for a new design system. We used this as a reference and applied the new design to other features, such as hotel booking, dining, and user profiles, revamping the overall user experience of the mini-program.
A fresh look that's all about clarity and distinct Disney
We optimized the relationship between image size, font, and design elements to bring clarity to the browsing experience. By utilizing larger spacing and a touch of color, we intentionally emphasized the content. We also designed a new set of icons to complement the updated look and feel of the mini-program.
Additionally, we largely incorporated rounded corners on design components and utilized Disney characters to enhance the unique Disney style.
Snow ball 2.0
While working on the product design, we also polished our design system. Initially, we laid the groundwork by establishing basic design principles that articulate the values our product should offer to users. These principles provided a framework for making design decisions.
From there, we developed a color palette, typography, grid system, navigations, buttons, and more. Over time, our new design system became increasingly detailed and comprehensive.
Design principles
Deliver personalized content and products based on user preferences and context for optimal efficiency and time-saving.
Each piece is part of a greater whole and should contribute positively to the system at scale. Ensure a consistent and easy-to-recognize UI design across platforms and devices.
Design for fast and effortless interactions that focus on user intents and guide the user with meaningful animations.
Design purposeful interfaces that favor usability, while also infusing appealing visual design through colors, fonts and layouts that arouse users' emotional valence.
Leverage the iconic characteristic of Disney to create an immersive and engaging user experience that makes it uniquely Disney.
Takeaways
Transparent communication
As a design lead, you will have more information and authority compared with other designers. Therefore, it is important to be a good coordinator and facilitator in the team. Actively sync-up information to break down the silo, provide constructive criticism for positive change, and sometimes act as an arbitrator to make decisions to push on the progress of the project at critical moments.
Keep calm and embrace the chaos
When working on a large-scale project, we have to deal with cross-functional interests conflict, like unclear attribution of responsibilities and lacking consensus. Usually, it will also cause a chaotic design process and make designers get lost. When this happens, the most important thing to do is to create a unified vision and lead the team to work toward common goals. Being clear about your goals and priorities will help you stay calm in the chaos.
The establishment of a design system is not a one-way street
Establishing a design system is nothing different from designing a product. Products need to be tested and iterated and so is your design system. We can not build a design system in a vacuum while the working model between the design system and product is a complementary relationship.
More case studies
2025 © Edison Chen — Wish you a good life.
Page updated
Google Sites
Report abuse