About Non-profit
Youth TimeBanking (YTB) is a non-profit organization that offers youth service opportunities to give back, earn rewards, and strengthen community ties. Through a TimeBanking system, youth engage in a system of giving and receiving using time credits as currency, fostering connection and involvement within their communities.
My Focus
In this project, I worked as a product designer, where I handled various tasks including UI design, prototyping, user interviews, research, and usability testing.
Collaborated with the founder of YTB, youth of YTB, product managers, and product designers.
Timeline
Nov - Feb 2024
4 months
Design Role
Product
UI/UX Research
Branding
Graphic Design
Tools used
Figma
Miro
UserTesting
Wix
Spaces by Wix
Team
4 Product Designers
1 Product Manager
1 Design Manager
Here's a sneak peak into YTB's Website and its Improvements!
Improved Clarity
Updated YTB's website emphasizing clarity in communicating its mission and engagement opportunities.
Added Impactful Stories
Added sections to showcase impactful stories from YTB members aiming to inspire visitor support and donations.
01/ Problem Discovery
YTB struggled with mission communication, impact demonstration, success story sharing and lacked a way for YTB youth to connect
1. Difficulty navigating
Hard to navigate through the website because of confusing information hierarchy making users frustrated and more likely to click out of website
2. Unclear mission and impact
Difficult in understanding YTB’s mission and impact making users less likely to learn more about the non-profit
3. Inaccessible information
Information on TimeBanking system YTB could not be discovered so users were not interested in donating or collaborating with YTB
02/ The Goal
Improve YTB's website to connect with their community
Update website
- present YTB’s projects and their impacts
- improve understandability and accessibility
- highlight engagement opportunities
- have donation transparency
03/ Research
Let's breakdown the audience for YTB
Research
User Research on Existing Website
1. Unclear what YTB does
- Users had trouble understanding what YTB does and how they use the concept of TimeBanking
- The term "TimeBank" was not explained effectively, leading to a lack of trust in the non-profit
- Unable to understand their goals and impacts
- Unsure about the audience YTB helps
2. Too much information, yet not descriptive
- The descriptions for projects are too long and difficult to understand
- No information about the youth programs
- No information on how to get involved with YTB
Research
Update the Information Architecture
We conducted tree testing with 25 users, who performed tasks using the website to analyze the information architecture of the website. This brought us back to the drawing boards to create a more accessible navigation bar and site overall.
Trouble navigating old website
- Users were confused by the 'Collaboratory' page and thought that the projects listed were ones they could participate in
- The 'Our Story' page did not effectively explain the goals of YTB and the work they do with YTB youth
New IA is Organized
- Added a 'Get Involved' page to access ways to collaborate
- Added a new 'Why TimeBanking' page to explain the concept
- Added a 'Resources' page to access information about 'Youth ARE' app
Research
Persona based on target audience of YTB
Persona for a donor that would visit YTB website to learn more about the organization.
Research
User Journey Maps
After creating the personas we complemented theuser persona with their respective user journey mapping. With this journey map, we were able to further empathize with the user we were designing for. The mapping of experiences for each persona helped us to visualize how the user may interact with the current YTB website to achieve their end goal.
04/ Design
This updated palette resonates with YTB's message that Youth ARE: Assets, Resources, Energy.
We updated YTB's branding colours, choosing orange and green to symbolize growth and change. Implementing the Georgia font for headings and body text further elevates the website's modern aesthetic, ensuring a seamless and visually appealing user experience across all platforms.
Design
Low-fi Wireframes
We established our site navigation and transferred this to our low-fidelity wireframes on Figma. We visualized the layout of various pages and their subpages, including the Landing page, About page, Contact Us page, and Projects page. We established the information hierarchy, outlining how content would be structured on the pages.
Positives
- The homepage is detailed and has enough information for new visitors to understand YTB
- Homepage feature impact, mission and framework
Feedback from client
- Client wanted the up-coming events to be at the top of the page for visitors and YTB members to be reminded of scheduled events
- Too much information; text needed to be condensed
Mid-fi Wireframes
After receiving feedback from our client on the lo-fi wireframes, we implemented the changes in our creation of the mid-fidelity wireframes on Figma. We applied our design system and went into depth with the specific content and layout of each page.
Positives
- Testimonials are now intuitively laid out for easier readability
- FAQS are also now more easy to read
Feedback from client
- Missing information on “How to get involved” page
- Include information on signing up, donating, and ways to help.
05/ testing
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 User Tests
> Round 2: Test on ‘Impact’ Page
> Round 3: New ‘Why Youth TimeBanking?’ Page
> Round 4: Accessibility Testing
Round 1: General Website User Tests
In order to gain deeper insights into potential issues and evaluate users' interactions with the website, we first conducted 5 user tests. Several common themes emerged from these tests:
- Difficulty understand the definition of TimeBanking
- Unable to understand YTB (Youth ARE)’s mission and impact
- Pages had too much information and were text-heavy
Round 2: User Test on ‘Impact’ Page
Taking the Round 1 test feedback into consideration, we recognized the need for clarity on TimeBanking and YTB’s Impact, our team created a new page to define them and updated the Impact page accordingly. We then conducted 5 user tests on this newly created TimeBanking page.
Before
After
User Test Results
- Qualitative page was more successful in conveying impact
- Specify and provide more details for the ‘Impact Areas’ section
Round 3: New ‘Why Youth TimeBanking?’ Page
Before
After
User Test Results
- The new TimeBanking page effectively communicated its definition
- Users found the comparison table between TimeBanking and YTB’s TimeBanking informative
Reflection
It was such a wonderful experience being part of the team working on the YTB website and app. Jerome Scriptunas, the founder of Youth TimeBanking (YTB), is incredibly passionate, and I'm truly honoured to help bring his vision to life! I am excited to see the positive change we can bring to the community and beyond!
Future Visions
Our time with Jerome was short, but we accomplished so much within these four months! Here are some more suggestions and solutions I would like to explore with more time:
- Create an 'Event' page so that users can view past events as well as upcoming ones
- Create an 'Impact' page or a separate page highlighting youth success stories ( currently we don't have enough information to create one whole separate page)
Overall, YTB is doing amazing work, and I can't wait to see all the things the organization and its youth members accomplish!