Love Library @ Weibo
Love Library @ Weibo
Designed a charitable book donation webpage for Weibo users
Designed a charitable book donation webpage for Weibo users
Tools:
Photoshop, CSS, HTML
Role:
Web design, Branding
Date:
July – August 2023
01 | Context
01 | Context
What’s Weibo?
Weibo is one of the most popular microblogging platforms in China, founded in 2009. It serves as a significant platform for news dissemination, entertainment, and public discussion, playing a critical role in shaping and reflecting public opinion in China.
Project Overview
For the past two years, Weibo, in collaboration with its corporate partners, has been dedicated to enriching educational opportunities for children in underdeveloped regions of China. The "Love Library" charitable initiative serves as a bridge between users and educational resources, facilitating book donations to schools in need.
What’s Weibo?
Weibo is one of the most popular microblogging platforms in China, founded in 2009. It serves as a significant platform for news dissemination, entertainment, and public discussion, playing a critical role in shaping and reflecting public opinion in China.
Project Overview
For the past two years, Weibo, in collaboration with its corporate partners, has been dedicated to enriching educational opportunities for children in underdeveloped regions of China. The "Love Library" charitable initiative serves as a bridge between users and educational resources, facilitating book donations to schools in need.
02 | My role
02 | My role
As the UI/UX designer on the team, my task was to redesign and optimize the website to ensure it was visually appealing and functional. I worked closely with the project manager and software team to ensure that the design would be feasible while aligning with overarching objectives.
As the UI/UX designer on the team, my task was to redesign and optimize the website to ensure it was visually appealing and functional. I worked closely with the project manager and software team to ensure that the design would be feasible while aligning with overarching objectives.
03 | Analysis
03 | Analysis
I chose retrospective data analysis to identify patterns and problem points from past user interactions, pinpointing areas of decreased engagement and usability issues. Additionally, I sought feedback from engineers and the product manager to understand technical constraints and practical considerations for implementing new design elements.
I chose retrospective data analysis to identify patterns and problem points from past user interactions, pinpointing areas of decreased engagement and usability issues. Additionally, I sought feedback from engineers and the product manager to understand technical constraints and practical considerations for implementing new design elements.
Accomplishments Page
Previous Design
This page features photos and detailed data showcasing the accomplishments of our charitable initiatives.
This page features photos and detailed data showcasing the accomplishments of our charitable initiatives.
Areas for Improvement
- Not interactive
- The straightforward data presentation lacked emotional storytelling
- Not interactive
- The straightforward data presentation lacked emotional storytelling
News Page
Previous Design
The left side shows project overview videos, while the right side displays news from the Weibo database.
The left side shows project overview videos, while the right side displays news from the Weibo database.
Areas for Improvement
- Irrelevance to charitable mission
- Unrelated content can decrease engagement and donor retention
- Irrelevance to charitable mission
- Unrelated content can decrease engagement and donor retention
Donation Steps
Previous Design
The donation steps are positioned on the left side of the page in a sticky format.
The donation steps are positioned on the left side of the page in a sticky format.
Areas for Improvement
- Not stand out
- Hard to navigate
- Users might miss the sticky sidebar
- Not stand out
- Hard to navigate
- Users might miss the sticky sidebar
04 | Design Goals
04 | Design Goals
Foster Community
Creating a supportive environment boosts participation and strengthens connections among users.
Creating a supportive environment boosts participation and strengthens connections among users.
Support Online Education
Directly enhances access to learning resources, making education available to a wider audience.
Directly enhances access to learning resources, making education available to a wider audience.
Streamline the Donation Process
Removes barriers to giving, making it easier and faster for users to contribute.
Removes barriers to giving, making it easier and faster for users to contribute.
04 | Solution
Solution 1 : Foster Community
Interactive Message Board
Instead of having the Accomplishments Page, I introduced a new feature — a Message Board. This page enhances community engagement by allowing donors to leave messages. Upon submission, these messages are published onto virtual stickers. Users can interact with these stickers by dragging them across their screens. This feature not only facilitates a more personal connection between donors and recipients—since children can also visit this website to see the messages—but also enriches the user experience by transforming passive viewing into active participation.
Instead of having the Accomplishments Page, I introduced a new feature — a Message Board. This page enhances community engagement by allowing donors to leave messages. Upon submission, these messages are published onto virtual stickers. Users can interact with these stickers by dragging them across their screens. This feature not only facilitates a more personal connection between donors and recipients—since children can also visit this website to see the messages—but also enriches the user experience by transforming passive viewing into active participation.
Solution 2: Support Online Education
Educational Resources Library
I transformed the original News Page into an Educational Resources Library. The video section now presents informative learning materials, with an introduction to the lecture on the right side, and a 'Past Videos' section for users seeking additional educational content. This change enhances the website's relevance to our educational mission. Moreover, it fosters a community of learners and ensures all educational content is accessible long-term, aligning perfectly with our goals of enriching educational opportunities.
I transformed the original News Page into an Educational Resources Library. The video section now presents informative learning materials, with an introduction to the lecture on the right side, and a 'Past Videos' section for users seeking additional educational content. This change enhances the website's relevance to our educational mission. Moreover, it fosters a community of learners and ensures all educational content is accessible long-term, aligning perfectly with our goals of enriching educational opportunities.
Solution 3: Streamline the Donation Process
Enhancing Donation Accessibility
Previously, the donation button was positioned on the left side of the webpage in a sticky bar, a placement that may have caused users to overlook it and potentially decrease contributions. To improve visibility and accessibility, I have repositioned the donation button to the bottom of every page. Additionally, on the book donation page, users can explore various categories of books. Hovering over each book reveals a red rectangle box with the book's introduction. Selected books are then displayed at the bottom of the page, to the right of the blue book icon, enhancing transparency and ease of tracking throughout the donation process.
Previously, the donation button was positioned on the left side of the webpage in a sticky bar, a placement that may have caused users to overlook it and potentially decrease contributions. To improve visibility and accessibility, I have repositioned the donation button to the bottom of every page. Additionally, on the book donation page, users can explore various categories of books. Hovering over each book reveals a red rectangle box with the book's introduction. Selected books are then displayed at the bottom of the page, to the right of the blue book icon, enhancing transparency and ease of tracking throughout the donation process.
05 | Design System
Color Palette
#609E72
#FF6460
#85CFDC
#FCBA6E
The overall color scheme of this website is vibrant, evoking joy, energy, and growth. These colors are chosen to enhance user engagement and create a positive atmosphere essential for fostering a supportive community.
Typography
Rounded fonts are chosen for their friendly and approachable appearance, which contributes to creating a warm and inviting atmosphere on the website.
Button
x 25 radius
Rounded fonts are chosen for their friendly and approachable appearance, which contributes to creating a warm and inviting atmosphere on the website.
05 | Design System
Color Palette
#609E72
#85CFDC
#FCBA6E
#85CFDC
#FCBA6E
#609E72
#FF6460
#FF6460
The overall color scheme of this website is vibrant, evoking joy, energy, and growth. These colors are chosen to enhance user engagement and create a positive atmosphere essential for fostering a supportive community.
Typography
Rounded fonts are chosen for their friendly and approachable appearance, which contributes to creating a warm and inviting atmosphere on the website.
Button
x 25 radius
Pill buttons, with their rounded edges, have a soft, modern look that can make the user interface appear more friendly and inviting.
06 | Takeaway
Cross-Functional Team Collaboration
Working with one project manager, one UI designer, and two engineers brought diverse perspectives and skills that enhanced the design’s functionality and promoted a holistic approach to problem-solving. This collaboration was instrumental in refining our project outcomes.
Working with one project manager, one UI designer, and two engineers brought diverse perspectives and skills that enhanced the design’s functionality and promoted a holistic approach to problem-solving. This collaboration was instrumental in refining our project outcomes.
Weaving User Needs with Business Goals
I developed an approach that not only prioritizes the end-user experience but also ensures alignment with overarching company goals, leading to cohesive, beneficial outcomes for both users and the business.
I developed an approach that not only prioritizes the end-user experience but also ensures alignment with overarching company goals, leading to cohesive, beneficial outcomes for both users and the business.
Cultivating Proactive Problem-Solving in Design Approach
By actively analyzing past data and information, I have defined potential problems and sought new avenues for innovative solutions. This approach ensures that our design strategies are consistently well-informed, adaptive, and forward-thinking. Such a proactive attitude has proven instrumental in navigating challenges and crafting innovative solutions.
By actively analyzing past data and information, I have defined potential problems and sought new avenues for innovative solutions. This approach ensures that our design strategies are consistently well-informed, adaptive, and forward-thinking. Such a proactive attitude has proven instrumental in navigating challenges and crafting innovative solutions.