top of page



UX Design

UI Design

​Motion Design


2021.9 - 2021.11

GWM, a prominent Chinese automotive manufacturer, unveiled its WEY brand at the Munich IAA 2021 in September. The brand is set to launch its "Coffee" series of models in Europe by the close of 2021.


GWM, a leading automotive manufacturer, oversees WEY, its hybrid car brand set to debut its initial models in the European market in 2021.


The original WEY website, designed for the IAA Munich car show, lacked features and information, resulting the user satisfaction is suboptimal. With WEY expanding in Europe, it's crucial to have a fully functional website to provide a complete experience and gain customer trust. The revamped WEY Europe website offers reliable information and an easy ordering system, ensuring a smooth interaction for European consumers.


This project aims to boost understanding of the WEY brand and creating a convenient the ordering process, improving WEY's position in the European automotive market.


📌 Collaborate with stakeholders to generate website content and establish a communication pipeline for efficiency.

📌 Contribute to "Test Drive" and "Place Order" flow and create end-to-end design.

📌 Deliver UI animations (loading, page transition) for handover to developers.

📌 Develop the design system and mentor interns in collaboration.

📌 Advocate for accessibility in UX design, utilizing WCAG standards, real-time searches.



Success Metrics



Research Goals

  • Analyzing User Behaviors: Understanding how users currently navigate on WEY website.

  • Identifying Usability Issues: Pinpointing areas where the current website design or functionality may be causing difficulties for users.

  • Discovering User Pain Points: Uncovering specific frustrations or challenges users encounter while using the website.

  • Exploring User Solutions: Learning how users work around issues they encounter on the website, which can provide insights into areas needing improvement.

  • Observing Interactions with Other Automotive Websites: Gaining perspective on how users engage with competitor websites and identifying best practices or features that could be adopted or improved upon by WEY.


  • Online Survey

  • Interview

  • Benchmarking - marketing analysis


Researchers sent out 1020 surveys to target customers across Europe and sifted through a large amount of data. I sorted out the necessary information, and the data confirmed that the WEY brand website is the primary source of information for customers about the brand and its products. However, users have expressed confusion when browsing the website, such as limited information, insufficient functions, and lack of engagement.


of users browse on the website to get the information about brand WEY and its products


of users feel there is too limited information to get to know about WEY from the website.


of users do not engage while browsing the website.


After analyzing the survey data, we recruited 6 users selected based on their survey responses to better understand their motivations and browsing confusions on the website.

  • What motivated your visit to the WEY website?

  • Can you describe your process of browsing the website?

  • Have you encountered any problems during the interaction?

  • How long do you typically spend browsing the website, and why?

  • What kind of experience do you hope to get on the website?

​Learning & Findings

Through in-depth conversations with users, I found that our users can be divided into 2 categories, one is focusing on sourcing information to facilitate them to make a decision (place order/ test drive), the other is focusing on taking an action for a test drive or place an order. Since their problems are different so I built 2 different personas.

 Before (pre-purchase) Experience 

  • Can not find more detailed information about the car. Reorganize the exposure of our contents. Especially add the store and test drive information.

  • Not engaging while browsing on the web. Increase user engagement with rich content and interactions.

During (purchase) and After (post-purchase) Experience

  • Website functions are not rich enough.
    Provide users with online ordering so that users can place order by themselves.

  • Users cannot track their order. Add tracking order feature to view the order process.


User Pain Points

  • Potential customers struggle to access detailed information about the brand and products, hindering their purchase decisions.

  • Potential customers prefer convenient test drive bookings near their location.

  • Customers who have made purchase decisions must visit a dealer to customize and place orders in person.

  • Customers who have already made purchases cannot real-time track their orders or monitor the process.

  • Customers find the landing page overwhelming and insufficient in providing the required information and engagement.


Initial Site Analysis


Market Research

  • ​Select Benchmark Brands — European Traditional Brands and Electric Vehicle Brands.

  • Analyze selected products for both traditional brands and new force brands, break down the web functional architectures, user flows and marketing strategies to identify gaps in the market.

  • Then according to the WEY brand strategy and business goals, recombining them based on the commonalities to create a comprehensive sitemap.


See the experience from the user's perspective


Having narrowed down two personas, John and Anna, from user research, and created a comprehensive sitemap from market research, we generated the WEY website user journey to empathize further with users.


Problem Statement

Customers need an efficient experience to access high-quality and comprehensive information about WEY because the current website lacks information, functions, and engagement. Particularly when customers are sourcing information and making purchases, it fails to provide a complete life-cycle service for customers at different stages.


Solution Statement

Creating a fully functional website with comprehensive information about WEY and delivering an engaging experience for customers fosters trust in the reliable brand. This encourages them to book a test drive, make informed purchase decisions, and enjoy the entire life-cycle of services.

Ideate - Solution Discovery

Site’s Hierarchy

Since this project has an extensive scope, we started by mapping out the entire website to get a clear idea of the information and functional architecture. With the bird's eye view, we realized that: 


  • Prioritize key information about WEY on the top navigation bar based on importance.

  • Maximize user conversion by prioritizing core information, clear goals, concise layout, and clear CTAs to showcase products.

  • Ensure a responsive design, optimize images, scripts, and code to minimize page load times for a lightweight website.


Ideate - Solution Discovery

Sketches to Wireframes & Flow

Based on the sitemap, the team start to create paper wireframes to come up with lots of ideas for the website including layout, navigation and basic flows. Then we had dot voting to bring the best part of paper wireframes to the digital one.

booking user flow.png

We finally chose the fullscreen image layout which can result in an eye-catching and immersive homepage design. And based on the research, our users are visual learners. So we thought it is the best fit.

Usability Testing & Iterations

In order to verify the usability, we made a prototype for the current version and organized an online testing and engaged 6 users to participate in, followed by one-on-one interviews to gather feedback. I served as both observer and interviewer during this process. After collecting feedback, we revisited the digital wireframes and iterated on addressing the following common problems:

  1. For the desktop version, the navigation bar hides certain categories, such as finance & offers, making them difficult to find.

  2. The hero image on the landing page provides limited information, failing to engage and pique users' curiosity effectively.

  3. Users encountered difficulty finding nearby locations during the test drive booking process.

Test Version

Wireframes ideation


Final Solution

​High Fidelity Design


​UI Design for mobility


​UI Design for PC


Motion Design

Loading animation

UI Transition

Design Guideline

Mentored interns to organize design elements into symbols and mark guide words. Defined a design system for consistency across designers and developers.




This project started from scratch to integrate and optimize the entire website's information architecture and functionality, adding a lot of practical features. After further communication with users, I realized their needs are evolving rapidly with the electric car market, so we need to keep up with this change in time to provide solutions.


Additionally, I was involved in combining process design with interaction and visual design, fully appreciating the charm of product design.


The last but not least, by guiding and leading two interns to complete user flows and design guidelines, I enhanced my leadership skills.

bottom of page