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.


Nov - Feb 2024
4 months

Design Role

UI/UX  Research
Graphic Design

Tools used

Spaces by Wix


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.

YTB Website sneakpeek

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

User Research on Existing Website

1. Unclear what YTB does
  1. Users had trouble understanding what YTB does and how they use the concept of TimeBanking
  2. The term "TimeBank" was not explained effectively, leading to a lack of trust in the non-profit
  3. Unable to understand their goals and impacts
  4. 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

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

Persona based on target audience of YTB

Persona for a donor that would visit YTB website to learn more about the organization.

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.

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.


  • 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.


  • 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:

  1. Difficulty understand the definition of TimeBanking
  2. Unable to understand YTB (Youth ARE)’s mission and impact
  3. 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.



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



User Test Results

  • The new TimeBanking page effectively communicated its definition
  • Users found the comparison table between TimeBanking and YTB’s TimeBanking informative


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!