中文 / EN
BYD CLOUD 4.0
BACK UI/UE DESIGN
top-banner
BYD CLOUD 4.0
UI/UX Lead Designer and Product Manager
Project Background：
Vehicle sales are usually one-time transactions, making it difficult to further explore consumer value.Product sales are restricted by dealers, preventing direct access to consumers.Marketing channels are single, with limited product exposure.Additionally, the company's after-sales service has long been at the bottom of the automotive industry.The company has multiple account systems managed independently by different departments, leading to unintegrated and inconsistent data.Based on the above issues, a comprehensive restructuring of the current cloud service was undertaken.The product shifted from a tool-based product to a consumer service product.The goal is to provide value-added services for vehicles, enhance the overall user experience, and explore more commercial conversion possibilities for the company.
This project is a further iteration based on data feedback and research from the previous version's beta test.
The project uses an agile design process, collecting and analyzing data from multiple beta iterations through buried points and grayscale testing.This initiative promotes the formation of a project design team at the company level to ensure more standardized, professional, and unified design.
Incremental User Banner Entrance
Plan A is guided by an increment-focused strategy, attracting new traffic for commercial conversion through vehicle sales and exposure, albeit at the cost of existing users' experience.
The design style leans more towards current aesthetic trends.
Stock-Focused Strategy（PlanB）
Plan B, compared to Plan A, focuses on stock by enhancing after-sales services to add value to vehicles.
It also retains quality UGC content on the homepage to achieve incremental goals.
The style emphasizes emotional enhancement and professionalism.
Through initial internal company reviews and small-scale user gray release, Plan B, focusing on stock, was ultimately adopted
The reason is that the current users are mainly BYD owners, and at that time, BYD owners were generally older.
Due to the generally older age of company leaders, the design style chosen was more conservative.
However, I personally prefer Plan A and will promote it as the goal in subsequent phased internal beta optimization iterations.
Evolution
Initial Positioning
At that time, BYD's internal data (pre-sales, after-sales, mall, community, finance, etc.) was independently operated by different departments and not interconnected within the group.The beta version was aimed at obtaining relevant account data to demonstrate the necessity of the redesign through limited beta data.
3.1 Beta Test：
The 3.1 beta data clearly showed that while owner services were a product focus, they were not frequently used by users. Combining beta data and research, I persuaded leaders to adopt the increment-focused Plan A and further deepen its design.
Initial Positioning
Qualitative/Quantitative/User/Scenario/Methodology
Core Demands：
Efficiency-oriented, exploring stock, pursuing increment, rich content, professional and credible brand, strong car purchasing atmosphere.
Strategy
Strategy/Priority
Color Validation
Through communication with the group’s brand PR department and product design department, it was decided to adopt blue as one of the main colors of the company's current product. To enhance the product's youthful attributes, blue gradients were added, and blue's complementary color, orange, was used for color assistance.
It can also well reflect the product's youthfulness, trendiness, enthusiasm, liveliness, and intelligence.
Color
Font color, primary color, auxiliary color
Icons
General ICON
Functional ICON
Service ICON
Use different representations to help users quickly understand the conveyed information.
I have also standardized the design of ICONs, with functional ICONs being more visually impactful and
clear in their meaning than in previous versions.
Data Conversion
Mainly analyze the user data conversion obtained after the 3.1 version beta test went online.
The product's daily active users (DAU) and monthly active users (MAU) primarily come from the use of vehicle control functions within the app. A small portion of users check vehicle information and other content. Among those who use the control functions, a significant number will also check vehicle information and other content. Many users who enter the app through the control functions stay for 4-7 minutes, while those who enter through vehicle information only stay for 1-3 minutes.
Among the users who use the control functions, I conducted a small-scale user interview and found that their usage scenarios often involve remotely unlocking the car when blocking other vehicles, having someone else move the car, or needing to remotely turn on the air conditioning due to weather conditions. The common points are frequent usage, non-urgent nature, and the car owners having clear goal paths.
My car
Based on the above user research, brand color setup, and data analysis, we prioritized optimizing the car page to ensure the visual updates align with the current product's quality. We used more concrete numerical representations for vehicle information that users are more concerned with, and a card-style design for greater page flexibility. Custom designs can be implemented later to ensure consistent interaction and visual integrity as the product evolves.
My also incorporated emotional design into the buttons related to the vehicle and owner and enhanced their visual forms.
Homepage optimization
Making after-sales service a secondary goal, prioritizing the enhancement of product commercial conversion and guiding user content browsing to increase page stay duration and daily/monthly active user engagement.
Specific directions include: visual noise reduction, style reshaping, emphasizing product branding and exposure, and enhancing visual and content perception.
For example: micro-interactions in the live streaming section
User Conversion Funnel
As an automotive company, its commercial value is reflected in the final vehicle orders, and pursuing growth also serves the product's commercial conversion.
By analyzing the conversion paths between each page, guiding users to the car selection page, thus allowing them to complete the entire car purchasing process, forming a complete purchasing journey.
Existing User Entrance
newcar
car-desc
Incremental User Banner Entrance
Content Focus
Use card-style selection to help users quickly perceive the content they need.
Increase selection speed, respecting the users' time.
car-desc
Content Partitioning
Standardized content partitioning allows users to quickly develop visual flow, effectively reducing learning time.
Immersive Content
Show vehicle details with a 360-degree panoramic view, making users feel the on-site car selection experience more realistically.
Content Visualization
For users' concerns and difficulties in understanding assisted driving, use more illustrative forms to explain and demonstrate.
Full Process Experience
Complex exit process, guiding users through the full car purchase experience. Enhance the copywriting to boost users' sense of pride after completing the vehicle configuration.
Information Integration
Centralize related information to improve users' quick identification experience.
Order Information
After the configuration process, allow users to perform a second confirmation, giving them a trial-and-error experience.
Existing User Entrance
newcar
car-desc
Incremental User Banner Entrance
Content Focus
Use card-style selection to help users quickly perceive the content they need.
Increase selection speed, respecting the users' time.
car-desc
Content Partitioning
Standardized content partitioning allows users to quickly develop visual flow, effectively reducing learning time.
Immersive Content
Show vehicle details with a 360-degree panoramic view, making users feel the on-site car selection experience more realistically.
Content Visualization
For users' concerns and difficulties in understanding assisted driving, use more illustrative forms to explain and demonstrate.
Full Process Experience
Complex exit process, guiding users through the full car purchase experience. Enhance the copywriting to boost users' sense of pride after completing the vehicle configuration.
Information Integration
Centralize related information to improve users' quick identification experience.
Order Information
After the configuration process, allow users to perform a second confirmation, giving them a trial-and-error experience.
Car Purchasing Process
Conducted user research with 4 designers at offline 4S stores to simulate real car purchasing experiences (from both user and salesperson perspectives)
The conclusion from the research is that when users actually purchase vehicles, they mostly focus on the vehicle's interior and exterior, basic configurations, and price. Salespeople also use these points to make recommendations, but users often hesitate or abandon the order due to cumbersome processes, lengthy time, and the mindset of comparing multiple options.
Therefore, I streamlined the online process and enhanced content immersion, creating different entry points for new and returning users, focusing mainly on new users. The entire car purchasing process was simplified to 8 steps.
Efficiency mindset: clarify user goals, simplify content interference, streamline interactions, reduce content noise, and display one piece of content per page for one action.
Beta Users
120,000
4-month orderrate
0.7%
Total sales volume
58,000
Valid orders
406
Discovery - Emotional Connection
In the mobile internet era, "social" and "interaction" are emphasized, while previous products only showcased some UGC content, failing to stimulate connections between users and authors. For incremental users, attract users through high-quality UGC content to foster closer connections with authors, enhancing user self-value through various content formats, not limited to BYD-related information.
At the same time, guide activities through official channels to enhance product professionalism and brand marketing.
In later product operations, strategies such as Q&A mechanisms, reward mechanisms, and discussion mechanisms will be added to enhance user engagement. Design will be more standardized and systematic to create an operational design system, optimizing design processes and efficiency.
Car Purchasing Process
The overall car purchasing process has achieved commercial conversion during beta testing.
With around 120,000 BYD car owners as beta users, their final vehicle orders accounted for 0.7% of the total sales orders over four months, which I consider a successful design experience optimization (data is from before 2020) 
Personal Center
Style Reconstruction
Enhance Information Perception
From brand colors to personalized displays
Customer Service System Optimization
After-sales is the biggest issue the company currently faces. Research found the main reason is the weak connection between users and customer service. Users can't clearly express their needs, and customer service can't provide targeted services. Therefore, I added a dedicated customer service feature to the personal page
This project uses a design-driven process for a comprehensive APP revision. Through the initial two design versions, it prompted the company to form a new design team for more standardized cloud service design. In the project, besides interaction and visual design, I also took on product manager duties, exploring commercial directions for the product.
The challenge of the project lies in multi-team communication and internal resource data inaccessibility. Team communication includes the company's brand marketing department, interior and exterior design, product planning institute, program development, etc. Design norms need to consider the company's marketing aspects and multiple considerations of the company’s products and brand colors.
Design Validation：
Conducting key process node tests in the product, using data for A/B Test multi-solution design.
Design-driven model A/B Tests continually improve design experience and payment pathways, ensuring conversion rate enhancement.
This project is in the development stage, with some parts having gone live through grayscale testing for data validation.
© 2024 Yang Haobo personal studio保留所有权利粤ICP备2024292998号-1
E-mail：3471538989@qq.comTEL：147 7482 6651