WEY EU
Market Brand.com
Role
UX Design
UI Design
Motion Design
Timeline
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.
ABOUT
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.
MY IMPACTS
📌 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.
Discover
Success Metrics
Discover
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.
Methods:
-
Online Survey
-
Interview
-
Benchmarking - marketing analysis
Survey：
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.
82.5%
of users browse on the website to get the information about brand WEY and its products
58.2%
of users feel there is too limited information to get to know about WEY from the website.
37.5%
of users do not engage while browsing the website.
Interview：
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.
Discover
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.
Discover
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
Before
During
After
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.
Define
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.
Ideate
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.
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:
-
For the desktop version, the navigation bar hides certain categories, such as finance & offers, making them difficult to find.
-
The hero image on the landing page provides limited information, failing to engage and pique users' curiosity effectively.
-
Users encountered difficulty finding nearby locations during the test drive booking process.
1
2
3
Test Version
Iteration
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.
PROJECT TAKEAWAYS
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.