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 and app. 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 and data collection
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. Additionally, the organization required a robust method for collecting data to monitor the progress of its youth members, aiming to customize support more effectively.
SECONDARY RESEARCH
Competitive analysis
To enhance YTB's digital presence, we conducted a thorough competitive analysis of various nonprofit organizations' websites and apps. This investigation aimed to understand how these organizations articulate their missions and the impact of their work. Here are our main findings of successful elements:
Websites
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"
Apps
Diverse strategies to enhance youth member engagement through gamified experiences
USER RESEARCH
Understanding our users
A deep understanding of the target audience was essential for creating a user-centric experience. 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 and app 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
The revised site map
For the new 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
For the website, 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 on the lo-fi wireframes, we implemented the 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
Website
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 understand 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.
App
Using a hi-fi prototype that captured the main product requirements, we tested our prototype with 4 YTB members to receive feedback and discover areas for improvement. The results of our analysis was narrowed down into key insights:
Page titles need context and improvement
Questions in the forms need to be more concise and simplified
Need better communication of what the nonprofit does and how it's organized
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 that inform
Learn more about YTB by viewing vibrant graphics that effectively express information.
Descriptions that provide clarity
Understand YTB's vision and core values, including how they customize TimeBanking for youth, through transparent descriptions.
The Youth TimeBanking App, a useful tool for members
Hear about events coming up
Engage with others by joining upcoming events, sharing experiences in discussions and posting photos.
Follow along with current projects
Keep up with projects that are occurring across the world and stay updated with YTB's advancements by viewing photos and learning about the focus of each project.
Share your impact
Access check-in and self-assessment forms to share experience and accomplishments. Volunteers can earn badges based on their work and involvement in the community.
Learn about the organization
Hear about how YTB started this initiative, its team, growth, and future aspirations. Complete programs that give a brief introduction to YTB's work.
REFLECTION
Key points of what I learned
Staying on track
This project had two 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.
