PLEASE VIEW FULL SLIDES ON DESKTOP MODE
THANK YOU :)
👨🏻🔧
TECHNICAL SKILLS
👨🏻💻
USER RESEARCH & PROJECT
Cross-functional Collaboration
Coordinated with product managers and developers to efficiently deliver 11 design requirements, ensuring timely project completion.
Design Tools Expertise
Proficient in Figma and Adobe Suite, optimizing design workflows, interface, and significantly enhancing team efficiency.
User Insights
Led user research and data analysis to identify user needs and craft data-driven design solutions.
Opportunity Discovery
Conducted competitor analysis and created detailed user flows to uncover opportunities for product improvement and innovation.
Concept Validation
Designed high-fidelity prototypes to present innovative ideas, facilitating quick testing and iterative improvements
👨🏻🎨
CREATIVE AND VISUALIZATIONS
Core Visual Design
Designed the key visuals and main features for the QQ Browser homepage and doodle section, successfully integrated into the updated app version (test), contributing to a measurable increase in daily active users (DAU).
Spearheaded design solutions that targeted key pain points, projected to improve TBS user retention by 10% and engagement by 15%.
Proposed a strategic phased rollout plan, starting with QQ as a test platform and scaling to WeChat to minimize implementation risks while maximizing market reach.
🤝
TEAMWORK AND COMMUNICATION
🔍
IDENTIFYING KEY PAIN POINTS
📍
STRATEGIC PHASED ROLLOUT
Cross-team Coordination
Strengthened collaboration with product and technical teams to meet diverse business needs through rapid iteration, improving the overall user experience.
Agile Development Support
Provided real-time design support during development cycles to ensure high design fidelity and consistent user experience.
Showcasing Impact
Delivered compelling presentations during internal sharing sessions, gaining constructive feedback to refine project outcomes and set direction for future designs.
Suggested collaboration with schools to capture a larger share of the student demographic, enhancing adoption of document-sharing tools within the QQ Browser ecosystem.
💰
EXPANDING MARKET REACH
Introduced team collaboration features tailored to student and office groups, aimed at boosting user stickiness and driving long-term retention.
📈
BOOSTING USER ENGAGEMENT
*Please note that specific data is not included in this portfolio due to company confidentiality policies.
Thank you for your understanding ：）
They Were
Part of
My Work
During My
Internship :)
“BUSINESS IMPACT”
💰
“WHAT I LEARNED”
💡
My Design Gallery I
An Innovative Project
28 +
My Design Gallery I
Re-engagement Content Card
UI & UX DESIGN INTERN
AT TENCENT
My Role
Duration
My Team
Main Tool
Overview
Redesign the QQ Browser app interface
Optimize and design the system flow
Introduce a potential strategy to increase user engagement
Product Experience Designer
3 Months I May 2024 - August 2024
Collaboration with Product Managers and Development Team
Figma
My Design Gallery I
Optimize System Flow
🤔
Problem & User Feedback
Changing and Unbinding Mobile Numbers
"When I try to change or unbind my mobile number, the one displayed is not the number I bound.
My QB account can be linked to multiple mobile numbers, and I don't know where to change or unbind it. It feels very confusing."
💡
Scenario 01
Changing and Unbinding Mobile Numbers
✅ Optimized
Consider informing the user during the successful binding process that this phone number will also be used for other privacy-related verification processes.
💡
Scenario 02
Changing and Unbinding Mobile Numbers
✅ Optimized
Consider informing the user during the successful binding process that this phone number will be linked to the currently logged-in social account to enhance account security.
Consider informing the user during the successful re-binding process that this phone number will also be used for other privacy-related verification processes.
(They have same purpose, but different scenario.)
✅ Optimized
💡
Scenario 03 + 04 + 05
Changing and Unbinding Mobile Numbers
👀
Overview of Working Progress
Figma Document
My Design Gallery I
Re-engagement Content Card
PLEASE VIEW FULL SLIDES ON DESKTOP MODE
THANK YOU :)
👨🏻🔧
TECHNICAL SKILLS
👨🏻💻
USER RESEARCH & PROJECT
Cross-functional Collaboration
Coordinated with product managers and developers to efficiently deliver 11 design requirements, ensuring timely project completion.
Design Tools Expertise
Proficient in Figma and Adobe Suite, optimizing design workflows, interface, and significantly enhancing team efficiency.
User Insights
Led user research and data analysis to identify user needs and craft data-driven design solutions.
Opportunity Discovery
Conducted competitor analysis and created detailed user flows to uncover opportunities for product improvement and innovation.
Concept Validation
Designed high-fidelity prototypes to present innovative ideas, facilitating quick testing and iterative improvements
👨🏻🎨
CREATIVE AND VISUALIZATIONS
Core Visual Design
Designed the key visuals and main features for the QQ Browser homepage and doodle section, successfully integrated into the updated app version (test), contributing to a measurable increase in daily active users (DAU).
Spearheaded design solutions that targeted key pain points, projected to improve TBS user retention by 10% and engagement by 15%.
Proposed a strategic phased rollout plan, starting with QQ as a test platform and scaling to WeChat to minimize implementation risks while maximizing market reach.
🤝
TEAMWORK AND COMMUNICATION
🔍
IDENTIFYING KEY PAIN POINTS
📍
STRATEGIC PHASED ROLLOUT
Cross-team Coordination
Strengthened collaboration with product and technical teams to meet diverse business needs through rapid iteration, improving the overall user experience.
Agile Development Support
Provided real-time design support during development cycles to ensure high design fidelity and consistent user experience.
Showcasing Impact
Delivered compelling presentations during internal sharing sessions, gaining constructive feedback to refine project outcomes and set direction for future designs.
Suggested collaboration with schools to capture a larger share of the student demographic, enhancing adoption of document-sharing tools within the QQ Browser ecosystem.
💰
EXPANDING MARKET REACH
Introduced team collaboration features tailored to student and office groups, aimed at boosting user stickiness and driving long-term retention.
📈
BOOSTING USER ENGAGEMENT
*Please note that specific data is not included in this portfolio due to company confidentiality policies.
Thank you for your understanding ：）
They Were
Part of
My Work
During My
Internship :)
“BUSINESS IMPACT”
💰
“WHAT I LEARNED”
💡
My Design Gallery I
An Innovative Project
28 +
UI & UX DESIGN INTERN
AT TENCENT
My Role
Duration
My Team
Main Tool
Overview
Redesign the QQ Browser app interface
Optimize and design the system flow
Introduce a potential strategy to increase user engagement
Product Experience Designer
3 Months I May 2024 - August 2024
Collaboration with Product Managers and Development Team
Figma
My Design Gallery I
Optimize System Flow
🤔
Problem & User Feedback
Changing and Unbinding Mobile Numbers
"When I try to change or unbind my mobile number, the one displayed is not the number I bound.
My QB account can be linked to multiple mobile numbers, and I don't know where to change or unbind it. It feels very confusing."
💡
Scenario 01
Changing and Unbinding Mobile Numbers
✅ Optimized
Consider informing the user during the successful binding process that this phone number will also be used for other privacy-related verification processes.
💡
Scenario 02
Changing and Unbinding Mobile Numbers
✅ Optimized
Consider informing the user during the successful binding process that this phone number will be linked to the currently logged-in social account to enhance account security.
Consider informing the user during the successful re-binding process that this phone number will also be used for other privacy-related verification processes.
(They have same purpose, but different scenario.)
✅ Optimized
💡
Scenario 03 + 04 + 05
Changing and Unbinding Mobile Numbers
👀
Overview of Working Progress
Figma Document
My Design Gallery I
Re-engagement Content Card
Overview
Tencent is one of the largest technology companies in China.
During my internship with the PCG (Platform and Content Group), I worked on QQ Browser, focusing on user experience design.
I led the design of two innovative solutions an delivered over 10 interaction design requirements.
Collaborating closely with product managers and developers, I was involved in end-to-end processes including research, prototyping, and testing to bring these features to life.
My Role
Product Experience Designer — User Interface, Research, Working Flow, Prototype, User Scenario, Story Board, Presentation, Competitor Research, Communication and collaboration with product managers, etc.
Team
Tencent - PCG - QQ Browser
Collaboration with Product Management Team and Developer Team
Duration
3 Months (May 2024 - August 2024)
Main Tool
Figma, Adobe Creative Suite tools
QQ Browser
Tencent, August 2024
Introduction
With a diverse range of products, Tencent connects over 1.25 billion users, shaping the way people communicate, play, and work in the digital age.
QQ Browser is a product of Tencent and one of the most popular web browsers in China. It provides services such as search engines, productivity tools, document management, and access to novels and other content.
Tencent, founded in 1998 and headquartered in China, Tencent is a global technology powerhouse at the forefront of social media, gaming, cloud computing, AI, and fintech. Through continuous innovation, Tencent has built a vast ecosystem that enhances digital experiences worldwide.
Value for User, Tech for Good.
QQ Browser
Latest Update
Want to see more details?
Let's get started with my innovative project :)
Overview I Innovative project
This project aims to enhance QQ Browser’s document management and team collaboration efficiency
through "Document Grouping" for smarter organization and
"Team Accelerator" for seamless workflow and progress tracking.
1.1 Document Grouping.
Image
1.2 Team Accelerator
Image
Research Process I Innovative project
2.1 User flow and competitor pros and cons
Image
2.3 System flow
Image
2.2 User scenario and journey
Image
Through analyzing user workflows and competitor tools
(Google Apps, Canva, GitHub), I identified key pain points and
potential design opportunities.
By analyzing the current challenges and the strengths and weaknesses of competitors, I created user scenarios and journeys to
step into the users' shoes.
Then, I started integrating two ideas into the QQ Browser system flow.
Problem I Innovative project
Combined with university life, I found that we often encounter these problems during our collaboration and document management.
It results..
“Wait, I am still finding the document.”
“Could you share the link?”
“Hi, is anyone working on this part? ”
..Silent 🦗
“XX can't make it to our meeting today. Can someone update him afterward?”
Switching between multiple apps for communication and collaboration.
Low alignment efficiency.
Uneven workload distribution in group projects, with some members slacking off.
Expired or outdated documents.
Lack of consensus, unclear about teammates' progress.
Solution I Innovative project
Document Grouping
It helps users generate and manage group chat-based documents more easily, making collaboration more efficient.
Exposing internal information to make document content more accessible, helping users locate files more efficiently.
Information Surfacing
Feature 1.1
QQ Browser organizes files based on WeChat conversations, automatically syncing and generating folders for better document management.
Automated Management
Feature 1.2
STEP 01
Select a specific chat from Wechat.
3.1 User Flow
Image
STEP 02
Create folders and sync documents with one tap.
3.2 User Flow
Image
STEP 03
When users open QQ Browser, they can quickly find
their folders and the latest synced files.
Sync with the WeChat group name to enhance recognition rather than recall.
Display the newest file visually to help users locate it.
Highlight the folder to make it
easier to locate.
3.3 User Flow
Image
STEP 04
Customized tool recommendation list.
One-click save and sync document.
Tap the folder to expand and view more file details.
3.4 User Flow
Image
Team Accelerator
A tool designed to enhance team communication and drive progress efficiently.
Enables quick team progress tracking and intelligent task distribution to enhance fairness.
Transparent Task Allocation
Feature 2.1
Integrates file management, progress tracking, and task reminders to reduce app switching.
All-in-One Tool
Feature 2.2
Solution I Innovative project
5.1 Team Accelerator
Prototype
5.2 Team Accelerator
Prototype
Mid stage
Team Accelerator helps users visualize group progress, collaborate on tasks, and manage their personal deadlines efficiently.
Align team information.
Improve communication efficiency.
Facilitate task completion.
5.3 Team Accelerator
Prototype
Team Accelerator offers friendly peer-based feedback, encouraging users while gently alerting them to areas for improvement.
Late Stage
Resolve team conflicts.
Improve fairness.
Enhance team awareness.
User flow
4.1 User Flow
Chart
View Updated Process
Before
Find the chat
Use the filter tool
Find specific file
Open file
File storage
Pain point
Expired file
Search method is limited
Spend long time
Takes time to organize
High cognitive load
The key process of file search and storage commonly used in China
*In China, most users store and search for files on WeChat.
User Flow
Before
Form a group
Define project scope & plan
Schedule meetings
Assign tasks
Early Stage
Execution
Delivery
Work & iterate
Final delivery
Pain point
Pain point
Pain point
Switching platforms for teamwork
Messy tasks and deadlines
Low efficiency in verbal alignment
Uneven tasks, conflicts, and slacking.
View Updated Process
6.1 User Flow
Chart
Offers various export formats and integrates well with other productivity tools.
Pros
Clear categorization and hierarchical structure for document organization.
All-in-one workflow, reducing the need for excessive switching between tasks.
Supports real-time viewing, collaboration, and co-editing.
Advantages of Competitors
China File Storage Editing Pain Points
No real-time collaboration or auto-save functionality.
Lack of consistent categorization and management, leading to clutter.
Files easily expire or become invalid over time.
No guidance or onboarding support, making it less user-friendly.
Some tools require response time for actions, which creates a learning curve for new users.
Cons
Difficult to quickly locate files when there are too many documents.
Randomized link generation can lead to confusion.
Bug-related saving issues, causing potential data loss.
Competitor Pain Points
👢
🥿
👟
👞
Value I Innovative project
Solution 02
Business Value
Increases active usage by integrating with users’ daily workflows (WeChat), leading to higher retention rates.
Reduces user frustration and improves efficiency, positioning QB as an indispensable productivity tool.
Drives cross-tool adoption, encouraging users to explore more QB functionalities, thereby increasing lifetime value (LTV) and improving engagement.
User Benefits
Eliminates file expiration risks by syncing with WeChat, ensuring long-term accessibility and minimizing file loss.
Enhances search efficiency by syncing group names with documents, allowing users to find files without relying on memory.
Encourages multi-tool usage within QB by integrating file management with built-in tools, boosting overall productivity and retention.
Document Grouping
Problem
Users often struggle to retrieve important files in communication platforms like WeChat due to scattered storage and file expiration issues. This leads to workflow inefficiencies, lost productivity, and frustration.
Solution
This solution seamlessly integrates with WeChat, ensuring a smarter file management experience while driving higher user engagement with QB.
Solution
This solution streamlines team collaboration by providing a structured workflow, enabling efficient task allocation, real-time progress tracking, and transparent communication, ultimately improving team efficiency and engagement.
Problem
Teams face task misalignment, miscommunication, and poor progress tracking, causing delays and inefficiencies, especially in remote settings.
Team Accelerator
Solution 02
Business Value
University partnerships drive user acquisition I Expanding into Chinese universities attracts new student users, increasing QB’s market penetration.
Strengthens team collaboration on QB I By providing seamless workflow integration, more users rely on QB for teamwork, leading to higher engagement and long-term retention.
Positions QB for long-term youth market growth I Establishes QB as a go-to collaboration tool for students, driving sustained adoption and long-term loyalty in campus environments.
User Benefits
Seamless team setup I Centralizes team information, reducing platform switching and ensuring quick alignment.
Transparent collaboration I Enhances task tracking and accountability, improving overall team efficiency.
Supportive team environment I Provides friendly nudges and feedback to foster engagement and motivation.
Interaction Requirement
In the final section, I will showcase three cases from my interaction design work at Tencent.
These cases highlight my impact on DAU growth, usability improvements, and user engagement enhancement.
Specific data confidential : ）
private
browsing
7.1 Private browsing.
VIDEO LOOP
Account
Linking
7.2 Account Linking Process.
IMAGE
Doodle
Design
7.3 Doodle Design
VIDEO LOOP
Timeline
Highlights
The future of the QQ Browser enhances efficiency in searching and consuming content.
At Tencent, I delivered 2 innovative solutions and
10+ interaction requirements to enhance user experience and product functionality.
1
Pop-up
2
Slide down
3
Enter into
Private Browsing
Secret Space
0.1 Secret space design and private browsing.
IMAGE
0.4 Innovative Project.
IMAGE
0.3 Re-engagement content card design.
IMAGE
0.2 Doodle redesign.
IMAGE
Before
Search page
After
Doodle Design
According to internal A/B testing (shared by my mentor Toya Li), introducing the multi-window privacy mode led to a measurable uplift in DAU.