introduction
introduction
introduction
Project BG
Project BG
Project BG
QQ Browser is a comprehensive app that integrates news, search, novel reading, entertainment, video, and file management tools. It has a broad user base in China. ( DAU: 60M+)
The project involved an upgrade and redesign of the homepage News Feeds. By analyzing product features and incorporating user feedback, we developed design solutions and validated them through A/B testing. This approach aimed to enhance the user browsing experience while ensuring positive growth in product metrics to drive product iteration. As a designer, my deep consideration was focused on balancing an excellent reading experience with promoting data growth and increasing commercial revenue.
QQ Browser is a comprehensive app that integrates news, search, novel reading, entertainment, video, and file management tools. It has a broad user base in China. ( DAU: 60M+)
The project involved an upgrade and redesign of the homepage News Feeds. By analyzing product features and incorporating user feedback, we developed design solutions and validated them through A/B testing. This approach aimed to enhance the user browsing experience while ensuring positive growth in product metrics to drive product iteration. As a designer, my deep consideration was focused on balancing an excellent reading experience with promoting data growth and increasing commercial revenue.
QQ Browser is a comprehensive app that integrates news, search, novel reading, entertainment, video, and file management tools. It has a broad user base in China. ( DAU: 60M+)
The project involved an upgrade and redesign of the homepage News Feeds. By analyzing product features and incorporating user feedback, we developed design solutions and validated them through A/B testing. This approach aimed to enhance the user browsing experience while ensuring positive growth in product metrics to drive product iteration. As a designer, my deep consideration was focused on balancing an excellent reading experience with promoting data growth and increasing commercial revenue.
Challenge
Challenge
Challenge
1. Balancing a good user experience with commercial metrics.
2. Enhancing the user experience through innovative solutions during this process.
1. Balancing a good user experience with commercial metrics.
2. Enhancing the user experience through innovative solutions during this process.
1. Balancing a good user experience with commercial metrics.
2. Enhancing the user experience through innovative solutions during this process.
project review
project review
project review
3 Months
3 Months
3 Months
0.3 %
0.3%
Feeds Efficiency
Feeds Efficiency
Feeds Efficiency
1.53 %
1.53%
Image-Text
Efficiency
Image-Text
Efficiency
Image-Text
Efficiency
1.8 %
1.8%
Average duration
per user
Average duration
per user
Average duration
per user
Design strategy
Design strategy
Balancing efficiency and
user comfort
Balancing efficiency and
user comfort
Balancing efficiency and user comfort
The three fundamental elements of News feeds
The three fundamental elements of News feeds
The three fundamental elements of News feeds
Innovation in the details of the user experience
Innovation in the details of the user experience
Innovation in the details of the uX
Sensory spaciousness + informational richness
Sensory spaciousness
+
informational richness
Sensory spaciousness + informational richness
Balancing efficiency and user comfort
Balancing efficiency and user comfort
Balancing efficiency and user comfort
3 elements of News feeds
3 elements of News feeds
3 elements of News feeds
Stream
Stream
Stream
The container for content
The container for content
The container for content
Components
Components
Components
The format of information
The format of information
The format of information
Elements
Elements
Elements
Elements constituting the components
Elements constituting the components
Elements constituting the components
Measurement metrics
Measurement metrics
Measurement metrics
Efficiency
Efficiency
Efficiency
News Feed
Efficiency
News Feed
Efficiency
News Feed
Efficiency
consuming
more content
consuming
more content
consuming
more content
Feed Efficiency = Click PV / Exposure UV
Feed Efficiency = Click PV / Exposure UV
*Click PV: the number of clicks or page views
*Click PV: the number of clicks or page views
* Exposure UV: the number of unique visitors exposed to the content
* Exposure UV: the number of unique visitors exposed to the content
User comfort
User comfort
User
Duration
User
Duration
spending more time on information browsing
spending more time on information browsing
spending more time on information browsing
Stream
Stream
Stream
1. Standardize the spacing
1. Standardize the spacing
Horizontal and Vertical
Horizontal and Vertical
Horizontal and Vertical
More Breathing Space
More Breathing Space
More Breathing Space
Better User Experience
Better User Experience
Better User Experience
After
Before
comparison
After
Before
comparison
After
Before
comparison
2. browsing Rhythm
2. browsing Rhythm
2. browsing Rhythm
Single Image
Single Image
Single Image
Three Images
Three Images
Three Images
Large Image
Large Image
Large Image
research of visual rhythm
research of visual rhythm
research of visual rhythm
Conclusion: Well-organized Feed combination can provide users with a better browsing experience.
Conclusion: Well-organized Feed template styles can provide users with a good browsing experience.
Conclusion: Well-organized Feed template styles can provide users with a good browsing experience.
A sequence of single-image feed / three-image feed
A sequence of single-image feed / three-image feed
A sequence of single-image feed / three-image feed
A large-image feed
A large-image feed
A large-image feed
feeds component
feeds component
feeds component
compress the height of components
Compress the height of components
After
After
Before
Before
- More compact
- More compact
- More information to be displayed
- More information to be displayed
comparison
comparison
QQ Browser
QQ Browser
Font Size: 34
Image Height: 176
Font Size: 34
Image Height: 176
Toutiao
Toutiao
Font Size: 38
Image Height: 148
Font Size: 38
Image Height: 148
Netease News
Netease News
Font Size: 36
Image Height: 146
Font Size: 36
Image Height: 146
Baidu
Baidu
Font Size: 38
Image Height: 148
Font Size: 38
Image Height: 148
feeds element
feeds element
feeds element
1. Enhance the contrast in font sizes
1. Enhance the contrast in font sizes
1. Enhance the contrast in font sizes
2. compress image height
2. compress image height
2. compress image height
balance
balance
balance
The three fundamental elements of News feeds
The three fundamental elements of News feeds
The three fundamental elements of News feeds
Sensory spaciousness
informational richness
Sensory spaciousness
informational richness
Sensory spaciousness
informational richness
breathing space / rhythm
size of components
relation between elements
Size of elements
Balancing efficiency and user comfort
Balancing efficiency and user comfort
Balancing efficiency and user comfort
Flow
Components
Elements
News Feeds Efficiency
Consumption Duration
Flow
Components
Elements
breathing space / rhythm
size of components
Size of elements
News Feeds Efficiency
User Duration
New Layout Launched and Standardized Across Products
New Layout Launched and Standardized Across Products
New Layout Launched and Standardized Across Products
The design solution was applied to another product (KuaiBao), and the data also showed positive growth, which led to the widespread adoption of this solution.
The design solution was applied to another product (KuaiBao), and the data also showed positive growth, which led to the widespread adoption of this solution.
The design solution was applied to another product (KuaiBao), and the data also showed positive growth, which led to the widespread adoption of this solution.
QQ KanDian
QQ KanDian
QQ KanDian
KuaiBao
KuaiBao
QQ Browser
QQ Browser
Innovation in the details of the user experience
Innovation in the details of the user experience
Innovation in the details of the user experience
Redesign icons
Redesign icons
Redesign icons
Enhance icon recognizability
Enhance icon recognizability
Enhance icon recognizability
strengthen interactive feedback
strengthen interactive feedback
strengthen interactive feedback
standardize guidelines
standardize guidelines
standardize guidelines
fuller shape
fuller shape
clearer states
clearer states
stronger feedback
stronger feedback
comment
comment
like
like
collect
collect
share
share
play
play
Stronger feedback - like
Stronger feedback - like
Stronger feedback - like
‘有看点’ means 'interesting'
brand impression is reinforced
‘有看点’ means 'interesting'
brand impression is reinforced
‘有看点’ means 'interesting'
brand impression is reinforced
easter egg
easter egg
easter egg
Brand awareness
Brand awareness
Brand awareness
holiday & operational needs
holiday & operational needs
holiday & operational needs
Feeds label
Feeds label
Current Issues
Current Issues
Lack of consistency;
unclear definitions;
Important content is not highlighted.
Lack of consistency; unclear definitions;
important content is not highlighted
Lack of consistency;
unclear definitions;
Important content is not highlighted.
Category & Color
Category & Color
Business Types
Business Types
Recommendation Reasons
Recommendation Reasons
Special Source Content
Special Source Content
Primary
Primary
Primary
Breaking News
Breaking News
secondary
secondary Priority
secondary
ordinary
ordinary
ordinary
Diminished Labels
Diminished Labels
Diminished Labels
label animation
label animation
capture users’ attention
capture users’ attention
capture users’ attention
The application of motion tags on commercial ad Feeds helped increase click-through rates by 11.2%.
The application of motion tags on commercial ad Feeds helped increase click-through rates by 11.2%.
The application of motion tags on commercial ad Feeds helped increase click-through rates by 11.2%.
innovation in video stream
innovation in video stream
innovation in video stream
Current Issues:
Current Issues:
Current Issues:
1.Low Exposure Efficiency of Content
2. The layout structure is loose
3.Lacks differentiation from similar products
1.Low Exposure Efficiency of Content
2. The layout structure is loose
3.Lacks differentiation from similar products
1.Low Exposure Efficiency of Content
2. The layout structure is loose
3.Lacks differentiation from similar products
Compress the height
animated transitions
Compress the height
animated transitions
Compress the height
animated transitions
Animated transition
Animated transition
postitive outcome
postitive outcome
postitive outcome
video compilation
video compilation
OLD
OLD
NEW:
NEW:
NEW:
Enhancing guidance;
Enhancing guidance;
Enhancing guidance;
optimizing layout;
optimizing layout;
optimizing layout;
adding recommendations
adding recommendations
adding recommendations
full-screen Viewing Experience
full-screen Viewing Experience
full-screen Viewing Experience
Long-press to fast-forward
Long-press to fast-forward
Long-press to fast-forward
Select fast-forward speed
Select fast-forward speed
Select fast-forward speed
Accelerated buffering feature
Accelerated buffering feature
Accelerated buffering feature
Smoother viewing experience
Smoother viewing experience
Smoother viewing experience
More works
More works
More works
Huikang Li
Product Designer
Based in Halifax, CA
+1 (782) 775-4746
© 2024 Huikang.Wesley All rights reserved.
Huikang Li
Product Designer
Based in Halifax, CA
+1 (782) 775-4746
© 2024 Huikang.Wesley All rights reserved.
Huikang Li
Product Designer
Based in Halifax, CA
+1 (782) 775-4746
© 2024 Huikang.Wesley All rights reserved.