SKY

Work

About

Art Diary

Resume

SKY

Youth TimeBanking
Case Study

Youth TimeBanking
(Youth ARE)

Overview

Date: Oct 2023 - Feb 2024

My role: As a designer on the team, I was involved in various parts of UX (user interviews, tree testing, A/B testing) and UI (wireframing, design system, information architecture). My primary role was creating a brand identity for the website and designing the About page, Impact page, and Our Story page, utilizing the design system.

🚀 Our Launched..

Website: https://www.youthare.org/

Amplifying Youth Stories🌱

During our first Zoom call, Youth TimeBanking's president, Jerome, shared inspiring stories of Ugandan youth like Ryan, a self-taught artist teaching sculpting, and Denise, an embroidery expert leading summer programs. Their incredible impact motivated me to help amplify their voices and strengthen their thriving community.

About Youth TimeBanking 💼

Youth TimeBanking is a non-profit 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.

Project Objective🌟

Throughout the 16-week project, my team and I initiated a comprehensive overhaul of YTB's outdated website. Our goal was to amplify Youth TimeBanking's mission, especially focusing on how the youths' achievements can be heard and supported by many.

Initial Research 🔄



Process 🔄

Competitive Analysis

During our competitive analysis, we researched non-profit organizations focused on youth education and community building. We paid close attention to how each organization communicates its mission and tells its story through their website.

We were especially inspired by charity: water’s site, notable for its emphasized use of powerful imagery and engaging real-life narratives. Overall, the website analyses underscored the value of maintaining a minimalist layout, while adhering to the principle that 'less is more.’

charity:water's Website

Understanding Our Users

In our project with YTB, we undertook a thorough process to identify and understand our users, whom we referred to as YTB partners. These partners include YTB Sponsors, YTB Collaborators, YTB Coordinators, and YTB Participants, each with unique characteristics and needs.

Tree Testing

We conducted tree testing with 25 users, who performed tasks using the website after its first round of implementations to analyze the information architecture of the website.

  • Users had trouble navigating through the pages of the website and experienced confusion regarding what information was available on which page.

  • We reworked the webpages to clarify the purpose of the sections and for users to easily understand YTB's mission.


Sitemap and Information Architecture

The updated sitemap divides pages into more specific sections, making it easier for users to navigate and locate the information they need. This restructuring improves clarity and ensures that YTB's mission and projects are communicated more effectively.

Design Process 🎨



Process 🔄

Design System

I led the effort to redefine YTB's branding, transitioning from the previous blue and yellow palette to a vibrant combination of orange and green. Inspired by imagery such as an orange tree and a warm sunset, this new palette symbolizes growth, renewal, and the energy of youth.


Mood board

Design System

Website Functionalities

  • ‘About’ Page - Learn more about how YTB started, their vision/core values/impact/milestones, as well as connect with the team

  • ‘Get Involved’ Page - Look into ways to support the youth of YTB through contribution and volunteer opportunities

  • ‘Why TimeBanking’ Page - Understand how YTB is TimeBanking customized for youth

  • ‘Projects’ Page - Explore a collection of the different kinds of projects led by YTB youth

  • ‘FAQs’ & ‘Resources’ Pages - Search for detailed information and steps to various YTB functions


Website Layout

The About page shares Youth TimeBanking's mission, vision, and core values, highlighting its innovative TimeBanking model and commitment to empowering youth as valuable contributors to their communities.

Low-fi

Mid-fi

High-fi

The Impact page evolved from a quantitative to a qualitative focus, emphasizing storytelling and emotional connection to show Youth TimeBanking's transformative impact on communities.

Low-fi

Mid-fi

High-fi

The Our Story page shares the origins of Youth TimeBanking, celebrating its journey and key milestones that have shaped the organization’s impact over time.


Low-fi

Mid-fi

High-fi

User 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

Several common themes emerged from our 5 user tests 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: A/B Comprehension Test on ‘Impact’ Page

The team conducted another round of user tests to determine if the ‘Impact’ Page would be more impactful if it contained quantitative data, rather than qualitative. We set up one set of user tests on 5 individuals so that they could only see the ‘Impact’ page with quantitative data, and another set of test on 5 additional individuals who could only see the qualitative information. Through the results, we determined that the qualitative page was more successful in conveying impact.


Round 3: New ‘Why Youth TimeBanking?’ Page

Taking the Round 1 test feedback into consideration, we focused our efforts on resolving these key issues. Recognizing 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. The overall results of these tests concluded that the graphics on the Impact page and the TimeBanking page effectively communicated YTB’s mission and Impact, and their vision.

Round 4: Accessibility Testing

After going through the accessibility checker, we changed the button icon for better visibility. We also added accessible names for buttons. We also made sure that the background and foreground colors have sufficient contrast ratio.


Website Before & After

Before

The initial design presented dense text, scattered details, and an excessive amount of white space, particularly on the Home page.

After

In the revamped design, we streamlined layouts, emphasizing YTB's core attributes. The Home page has been restructured to effectively showcase information about YTB's mission and upcoming events. Youth projects and impactful stories are highlighted, creating an engaging narrative. The Get Involved page is now seamlessly navigable, ensuring a user-friendly experience.


Results💯

Increased User Engagement

  • We saw a 25% increase in page views, session durations, and interactions on the website and app.

  • Users reported that the new layout is clear and user-friendly.

Enhanced User Experience and Accessibility

  • We achieved a 40% increase in overall accessibility to YTB's services and programs.

  • Users gave positive feedback on the improved usability and navigation. They found the images and titles clear, making the website and app easier to use.

Testimonial💬

From our client Jerome Scriptunas:

"The Develop For Good team walked in our shoes to understand the vision for YTB's website. They layered their expert sense of visual design with user feedback and testing to guide the work. And YTB gained a deeper understanding of user perception and a better idea of how to explain our mission and brand. We love the creative use of vector art, which is universally appealing to site users in the US and Africa. The team delivered the site and app we wanted for recognizing youth-led improvement projects that can occur anywhere Youth ARE: Assets-Resources-Energy. Already missing the enjoyable-productive experience of working with you - Shiza, Boya, Sonia, Sky, Adriana, Katie, and Madeline Team Mentor -- Thank you, Jerome Scriptunas, for Youth TimeBanking”

Amplifying Youth Stories🌱

During our first Zoom call with Youth TimeBanking's president, Jerome, I could feel the immense care he has for the Ugandan youth. He spoke passionately about the incredible talents of these young people and the impact they’re making in their communities—like Ryan, a self-taught artist who started a program to teach others sculpting and welding, and Denise, an embroidery expert who leads YTB's summer program. Hearing these stories deeply inspired me to help YTB amplify the voices of these remarkable youths, creating a community that thrives on giving and receiving.

Testimonial📩

From our client Jerome Scriptunas:

💬 "The Develop For Good team walked in our shoes to understand the vision for YTB's website and mobile app. They layered their expert sense of visual design with user feedback and testing to guide the work. And YTB gained a deeper understanding of user perception and a better idea of how to explain our mission and brand. We love the creative use of vector art, which is universally appealing to site-app users in the US and Africa. The team delivered the site and app we wanted for recognizing youth-led improvement projects that can occur anywhere Youth ARE: Assets-Resources-Energy. Already missing the enjoyable-productive experience of working with you - Shiza, Boya, Sonia, Sky, Adriana, Katie, and Madeline Team Mentor -- Thank you, Jerome Scriptunas, for Youth TimeBanking”