Youth TimeBanking
Overhauling a nonprofit’s website to enhance engagement in volunteer service opportunities.
Role
Product Designer
Timeline
Jan - Feb 2024 (1 month)
Team
1 Product Manager,
1 Design Manager,
4 Designers
Skills
Product Design,
UX Research,
Usability Testing
Background
Facilitating youth service opportunities
Youth TimeBanking (YTB) is a nonprofit organization that offers youth service opportunities to give back, earn rewards, and strengthen community ties. Through TimeBanking, youth engage in a system of giving and receiving using time credits as currency, fostering connection and involvement within their communities.
As a Product Designer for Develop for Good, a nonprofit that creates mobile and web app development for nonprofits, I worked closely with my team to revamp YTB's website. Through weekly meeting with our client, we prioritized regular communication and collaboration to ensure alignment with the their needs and expectations.
THE PROBLEM
A need for increased audience engagement
YTB faced a challenge in effectively communicating its mission, demonstrating its impact, and sharing success stories to enhance engagement and boost donations from sponsors and collaborators. The website needed to more accurately reflect YTB's varied projects and their tangible impacts in an easily understandable and accessible manner.
SECONDARY RESEARCH
Competitive analysis
To enhance YTB's digital presence, we conducted a thorough competitive analysis of various nonprofit organizations' websites. We aimed to understand how these organizations articulate their missions and the impact of their work. Here are our main findings of successful elements:
Main Strengths
Use of powerful imagery and engaging real-life narratives
Transparency in donation usage to successfully attract donors
Simplistic design to adhere to the principle that "less is more"
USER RESEARCH
Understanding our users
We undertook a thorough process to identify and understand our users, whom we referred to as YTB partners. By clearly defining and understanding our diverse users — YTB Sponsors, YTB Collaborators, and YTB Participants, along with subcategories like YTB Ambassadors and Leaders/Cross-Age Coaches — we were able to tailor our website to meet the diverse needs of our audience.
Gathering user insights
After conducting user testing on the original website, we consolidated pain points that users were experiencing:
A lack of transparency and trustworthiness
Unintuitive information architecture, making it hard to find information (such as how to become involved or donate)
Confusion around what YTB is about and what TimeBanking is
Unclear titles, headers, and descriptions
USER FLOW
Delving into the information architecture
To go into depth with the problems regarding user flow, we conducted tree testing with 25 users, who performed tasks using the website, to analyze the information architecture of the website.
The original site map
Users had trouble navigating through the pages of the website and experienced confusion regarding what information was available on which page.
Pain points
Ambiguous page titles and subtitles
Confusing grouping of subpages
The revised site map
We decided to focus on mitigating confusion and enhancing clarity for the user's navigation of the website.
Improvements
Descriptive, clear titles and subtitles
Intuitive grouping of subpages
Broad information broken down into specific subpages/categories
PROTOTYPING
Wireframes
We visualized the layout of various pages and established the information hierarchy, outlining how content would be structured on the pages.
Mid-fi prototype
After receiving feedback from our client, we implemented changes in our creation of the mid-fi prototype, going into depth with the specific content and layout of each page. Here are comparisons between the original design with its pain points and the mid-fi prototype with improvements.
Home
About: Testimonials
About: Our Impact
Resources: FAQs
USABILITY TESTING
Learning and improving
After implementing our design onto Wix, we carried out 3 series of user testing, surveying a total of 15 users to gather feedback and identify areas for improvement.
Round 1: General Website
We first conducted usability testing with 5 users. Several common themes emerged:
Difficulty understanding the definition of TimeBanking
Inability to understand YTB’s mission and impact
Pages had too much information and were text-heavy
Round 2: A/B Comprehension Test on ‘Impact’ Page
The team conducted A/B tests with 10 total users to determine if the ‘Impact’ Page would be more impactful if it contained quantitative data, rather than qualitative. In conclusion, the qualitative page was more successful in conveying impact. Additionally, we decided to refine and specify the ‘Impact Areas’ section as requested by users.
Round 3: New ‘Why Youth TimeBanking?’ Page
We conducted 5 usability tests on the new TimeBanking page, which concluded that the graphics on the page effectively communicated YTB’s mission and vision.
Design system
Revitalizing the brand
We updated YTB's branding colors to symbolize growth and change. This updated palette aligns with YTB's message that Youth ARE: Assets, Resources, Energy. Implementing the Georgia font further elevates YTB's modern aesthetic.
FINAL DESIGN
The Youth TimeBanking website, a comprehensive overview
Clear, intuitive navigation
Easily navigate through various pages and subpages to find the specific information you're seeking.
Engaging graphics
Learn more about YTB by viewing vibrant graphics that effectively express information.
Transparent descriptions
Understand YTB's vision and core values, including how they customize TimeBanking for youth, through straightforward descriptions.
REFLECTION
What I learned
Staying on track
This project had deliverables that required the team to put in a lot of time and effort into keeping ourselves on track to meet our deadlines and deliver our desired results. I learned about how crucial it was to stay on top of the project by keeping ourselves organized through tools such as Notion, along with keeping up with goals that we set each week.
Communication is key
Working with the client of this nonprofit allowed me to gain more experience on working on a project with consistent communication. I appreciated how involved our client was in the process, making sure to give us their input. Because of their help, my team was able to receive and implement crucial feedback and truly understand what the client envisioned.