TIMEBANKS WEBSITE REDESIGN; A PROJECT FOR DEVELOP FOR GOOD
Fostering Community Exchange
TimeBanks.Org is an internationally recognized nonprofit organization dedicated to fostering community collaboration through the concept of time banking, where time serves as a currency to promote equity, trust, and shared responsibility. By connecting individuals and groups, the platform enables members to exchange skills and services without monetary transactions, enhancing local and global communities alike.
Project Objectives
The overarching goal of this project was to address the critical challenges facing the TimeBanks.org platform and transform it into a trusted global hub for timebanking. The objectives emerged from the client’s specific needs and existing platform issues:
Outdated Design and Technology: The website’s static, one-size-fits-all approach was incompatible with the diverse needs of global users and TimeBanks.
Fragmented Information: Users struggled to find relevant data due to a lack of organization and search capabilities.
Limited Interactivity: The platform lacked interactive features to engage users, such as event calendars, searchable maps, and storytelling spaces.
Trust and Credibility Issues: No clear system for verifying or certifying TimeBanks, which limited opportunities for partnerships and funding.
By addressing these issues, the redesign aimed to establish TimeBanks.org as a central, user-centric platform for connecting, inspiring, and supporting timebanking communities worldwide.
The Problem
The overarching goal of this project was to address the critical challenges facing the TimeBanks.org platform and transform it into a trusted global hub for time banking. The objectives emerged from the client’s specific needs and existing platform issues:
Outdated Design and Technology: The website’s static, one-size-fits-all approach was incompatible with the diverse needs of global users and TimeBanks.
Fragmented Information: Users struggled to find relevant data due to lacking organization and search capabilities.
Limited Interactivity: The platform lacked interactive user engagement features, such as event calendars, searchable maps, and storytelling spaces.
Trust and Credibility Issues: No clear system for verifying or certifying TimeBanks, which limits opportunities for partnerships and funding.
By addressing these issues, the redesign aimed to establish TimeBanks.org as a central, user-centric platform for connecting, inspiring, and supporting time banking communities worldwide. We also performed a heuristic evaluation to pinpoint usability issues such as inefficient navigation, inconsistent design, and inadequate user feedback mechanisms.
The Solution
We re-designed the current Time Banks website to provide individuals with more meaningful information about Time Banks, Time Bank's mission and programs and easy ways to get involved with the community. This would help establish trust and confidence in Time Banks, increase awareness, and ultimately empower the community to get moreinvolvedd.
Research
User Research
To gain a better understanding of how we could more effectively address this problem, we conducted a series of user interviews and surveys. Our interviews led us to understand the following:
Challenges in Discoverability and Information Access: Users struggled to find relevant details, such as events and workshops, and essential resources in one central location. Participants mentioned that they often rely on external social media platforms such as Facebook, Twitter, and Instagram, to retrieve information, implying that information regarding TimeBanks and related opportunities is fragmented and difficult to access.
Outdated and Incomplete User Profiles: Many users do not update their profiles with all relevant skills, making it difficult to find the right person for an exchange. There is a need for guidance on how to effectively fill out profile bios.
Communication Barriers: Users expressed frustration with the lack of direct and efficient communication methods between members, leading to unanswered service requests and offers that remain outdated.
Trust and Reliability Issues: Users have concerns over outdated event links and inactive members, which diminishes confidence in the platform.
Software Usability and Training Needs: Training materials need regular updates to keep up with software changes. Some users found attending regional conferences highly beneficial but wished for more accessible training resources.
These findings highlight critical areas for improvement, guiding our design strategy to create a more intuitive, engaging, and structured user experience.
Secondary Research
Heuristic Evaluation
To better validate our findings a comprehensive heuristic evaluation was performed of the existing TimeBanks.org website uncovering several design inconsistencies that hindered user experience and engagement. Key findings included:
Typography and Readability Issues: The website uses oversized fonts, making content overwhelming and difficult to focus on. Scaling down text sizes and improving line heights would enhance readability.
Inconsistent Design Elements: Various UI components, such as buttons, exhibit inconsistency in shape and formatting, leading to a disjointed experience.
Inefficient navigation that made it difficult for users to locate resources: Users struggle to find relevant content due to poor structuring and lack of clear CTAs. A redesign focusing on logical information hierarchy would improve usability.
Lack of Engaging Content: The website presents a lot of information but lacks interactive and visually compelling elements to guide users effectively.
Visual Hierarchy Issues: Spacing inconsistencies and poor alignment disrupt the natural reading flow, making it harder for users to scan and absorb key information.
Difficulty in Finding Local TimeBanks: There is no intuitive way for users to locate or join a TimeBank. Implementing a searchable map or directory would significantly enhance usability.
Competitive Analysis
Additionally, we conducted a competitive analysis to benchmark against similar platforms, identifying industry best practices and innovative design elements. We analyzed platforms like Wiki Charities, Find Help, Habitat for Humanity, Charity Water, and United Way. These efforts provided a clear understanding of user needs and informed the foundation for the website redesign.
1. Searchable Map for Local TimeBanks
WikiCharities: Features a searchable map on the homepage, allowing users to find nonprofits by name, zip code, or topic. Clicking a pin reveals a corresponding listing with details.
FindHelp.org: Requires users to enter their zip code before viewing relevant content, ensuring location-specific results.
Habitat for Humanity: Uses a list-based search feature rather than a map, offering zip code-based filtering for local chapters.
2. Streamlined Information Architecture & Navigation
FindHelp.org: Provides a clean directory layout with categories and filtering options for ease of use.
United Way: Uses a well-structured navigation system, categorizing content for easy browsing.
Charity Water: Features a visually engaging layout with an intuitive flow, making it easier to access different content sections.
3. Consistent Branding, Visual Hierarchy, and UI Design
Charity Water & United Way: Maintain strong branding with a consistent font hierarchy, button styles, and color schemes, enhancing readability and engagement.
FindHelp.org & WikiCharities: Suffer from inconsistent UI elements, leading to a fragmented user experience.
4. Structured Onboarding & Engagement Features
FindHelp.org: Features an intuitive step-by-step onboarding process for new users, guiding them through key features.
Habitat for Humanity: Lacks a structured onboarding process, relying on text-heavy information.
5. Enhanced User Feedback & Interaction
WikiCharities & FindHelp.org: Allow users to suggest edits, leave reviews, and provide feedback, increasing engagement and maintaining up-to-date information.
Charity Water: Leverages impact stories and testimonials to build trust and community engagement.
6. Engaging & Updated Educational Resources
Habitat for Humanity: Offers a structured learning hub with online courses and training materials to educate users effectively.
FindHelp.org: Provides video tutorials and webinars, but some require RSVP, limiting accessibility.
Research Synthesis
Based on the patterns identified in our affinity map and secondary research, we came up with primary user archetypes:
The Non-Profit Leader: Someone who is passionate about looking to start a TimeBank in the local community. They works with minority families in helping them assimilate into the community.
The Volunteer: Someone who loves helping out others. They likes to be on the move and surrounded by others.
Current Site Analysis
We looked at the current TimeBanks' website to determine their existing areas of focus and what could be improved to address both business and user needs. We found that overall the website was lacking in structure, had inadequate user flows, and was extremely text-heavy.
So, it’s not surprising that we identified several issues that might discourage an individual from getting involved including:
A lack of information and resources about the issues TimeBanks is trying to tackle
An inefficient Signing up and Joining a TimeBank process
Hard to navigate the site
Outdated evidence on how Timebanks helped the community and how people can get involved
Mapping User Journeys and Interaction Pathways
To visualize the current TimeBanks website experience from the user’s perspective, we created a series of user journey maps. We wanted these journey maps to illustrate potential scenarios where a user might interact with the TimeBanks website including; The process of signing up and the process of deciding whether to get involved.
We developed user flows to represent:
Primary Users:
New and Existing Members: Individuals explortime bankingking opportunities:
Those interested in joining an existing TimeBank.
Those looking to start a new TimeBank.
Users searching for a directory of TimeBanks to connect with.
Secondary users:
NGOs and Local Government Officials: Organizations and officials leveraging timebanking to promote social good or seeking certification.
Researchers, Academics, and Volunteers: Academics and practitioners studying timebanking’s societal impact, educating others, or engaging communities.
a) Publishing findings.
b) Accessing datasets for academic study.
Donors, Foundations, and Family Offices: Philanthropic organizations and individuals seeking to broaden their social impact through partnerships and donations and looking at the website as a potential funnel.
Users Interested in Edgar Cahn’s Legacy: Individuals exploring the history of timebanking and Edgar Cahn’s contributions.
Design Strategy
Information Architecture (IA)
As mentioned before we studied the interaction patterns of different users, including new and existing members, community leaders, NGOs, researchers, and donors. Each user flow was refined to address specific pain points and optimize key interactions, ensuring that users could quickly and easily accomplish their goals.
Using insights from the refined user flows, we developed a comprehensive site map that outlined the structure of the redesigned platform. This detailed map ensured that each section of the website was logically categorized and easily accessible, preventing any content from being overlooked during the redesign. Content was grouped into distinct categories, such as educational resources, success stories, FAQs, and onboarding guides, improving information discoverability and reducing cognitive load.
We introduced a clean, well-structured menu that provided quick access to key sections of the platform. The menu design was optimized to ensure that both first-time users and returning members could easily navigate the website.
Find our full information architecture here.
Wireframes and Prototypes
To create wireframes and prototypes of various fidelities, we divided our team of 10 members into four smaller groups, each consisting of two to three members. Each group was responsible for designing a specific section of the website, allowing us to tackle different fragments of the information architecture simultaneously. This collaborative approach enabled us to cover more ground in the redesign process.
Our process included the following iterative steps:
Initial Low-Fidelity Wireframes: Each group started with low-fidelity wireframes to outline the basic structure and layout of their assigned sections.
Group Feedback Sessions: We regrouped regularly to share our designs with other subgroups, collecting feedback and suggestions for improvement.
Incremental Refinement: Based on the feedback, each group refined their wireframes, gradually increasing their fidelity through three to four iterative cycles.
High-Fidelity Prototypes: In the final phase, each group created high-fidelity wireframes and clickable prototypes that showcased interactive features like event calendars and storytelling sections.
Some snippets of our low fidelity prototypes:
Visual Design
Leading users to ways to support the cause
Our visual design approach focused on maintaining the existing TimeBanks brand identity while modernizing the platform's look and feel. Key decisions and principles included:
Brand Consistency: We retained the TimeBanks logo and its three core colors—blue, red, and green—to preserve brand recognition. These colors were used as gradients to add vibrancy, complemented by a black and white scheme for clarity and contrast.
Color Usage:
Blue was designated for headings, ensuring consistency and readability.
Tints of red and green were used for tags, adding subtle visual cues.
Primary call-to-action (CTA) buttons were designed in two styles: white buttons with black text and gradient buttons with white text, maintaining uniformity across the platform.
Gradient Design: Gradients were used strategically as accents, providing pops of color and enhancing the visual appeal of card designs.
Typography and Accessibility:
We used sans-serif fonts for a clean, modern look.
Text hierarchy was clearly established through variations in size and weight.
Spacing was optimized to improve readability and reduce visual clutter.
All text adhered to accessibility guidelines, ensuring that font sizes met standard requirements for readability.
Imagery: We prioritized authentic imagery featuring real community activities over stock photos, reinforcing the platform’s mission of fostering genuine human connections.
Legacy Highlight: Dr. Edgar Cahn’s legacy was showcased through carefully curated multimedia content, enhancing both storytelling and user engagement.
Homepage Design
Homepage Redesign
On the left side, you see the old version of the homepage. Problems we identified were that the nav bar didn't show a donation button. Hero sections and call to action buttons were not informative enough, and it was really text heavy and unorganized.
Then, on the right, we have our final design. We used colors from our logo to create a more visually appealing gradient.
The navigation bar now includes a clear donation button. We have more description so the user can learn more or join a timebank.
In the What we offer section, each card is designed with a different but more clear structure (an image, heading, description, and a call to action)
Homepage Redesign
Next, down in the homepage, the old TimeBank Spotlight section used to lack visual organization.
Impact numbers occupied a lot of space.
We’ve redesigned it with a carousel feature to showcase stories or spotlights dynamically and added sections for local TimeBank searches by zipcode, and opportunities for story sharing.
Find a TimeBank
We also created a Finding a TimeBank page, which the previous website didn't have.
Now, the users have the ability to filter through timebanks globally, based on their location and the status of the TimeBank. The interactive map feature displays the number of timebanks in clustered locations, and it also allows the users to zoom in and out. Next to the map is a scrollable list of TimeBanks that corresponds to the map view.
Lastly, the TimeBank Directory provides a comprehensive list of the Timebanks along with their information.
Redesign Points
Building from the previous page, when users select a TB from the earlier slide, they are directed to this new page we created where the TB profiles are showcase and users can further look into them & engage
Another key design is the events & workshops calendar page to keep users informed about upcoming initiatives and meetings related to TB
A major focus of this design was ensuring the calendar is easy to read at a glance, allowing users to quickly find and engage with relevant events.
Spotlight Stories
Moving on to Spotlight Stories, we focused on making the design more condensed and easy to navigate.
In the previous design the Hero image felt out of place and Text hierarchy and organization is inconsistent
In the new design we adopted a simpler, more minimal layout while adhering to the overall color scheme.
This redesign keeps the emphasis on the stories themselves, making them more engaging and accessible to users.
Setting up a TimeBank
We also redesigned the "Getting Started With TimeBanking" section to make it easier to read and follow along.
In the previous design Page was confusing to follow, making it hard for users to understand the process.
There was little information upfront, leaving users without clear guidance on how to get started.
Our redesign improves clarity with structured steps, a more visual layout, and better accessibility.
Users can now quickly understand TimeBanking and get started with confidence.
About Us Page
Another major redesign we focused on is the About Us pages, organizing them into sections like the overview and timeline for better clarity
In the previous design, we noticed Lack of structure and how it made navigation and understanding difficult.
It didn’t clearly communicate TB.O’s mission or purpose.
The history section was too text-heavy, overwhelming users.
In the new design, by making it less text heavy and more visually appealing, we create a more engaging experience for users.
With a cleaner layout, compelling visuals, and interactive features we make exploring the organization more intuitive and inviting.
Exploring the Engineering / Technical Side of the project
We used Wix Studio to build the static version of the TimeBanks.org website. So far, we have implemented interactive features such as carousels and dropdowns. We also implemented a hubspot form which allows users to communicate with central TimeBank organizers.
We chose to use Wix Studio to create the TimeBanks.org website as it has many tools that can be used to speed up the process of implementing requested features. It also has a plug-in that can be used to transfer designs from Figma and convert them into pages on Wix Studio, vastly speeding up the development process.
However, building the TimeBanks website in Wix Studio came with its own set of challenges. Wix Studio has its own structure and processes for building a website.
When deviating from this structure, the engineering team experienced difficulty with building certain features and designs. The engineering team also faced difficulty with implementing third-party services since Wix does not directly support these services.
To finish the TimeBanks website, the client team will need to finish implementing features such as the spotlights, event calendar, searchable map, and directory listing features. The client team also needs to test these features to ensure they work as intended. Then, the client team will need to deploy and monitor the TimeBanks website for any performance or functionality issues and resolve them as necessary.
For the next engineering phase, we suggest first creating and implementing storage solutions for all TimeBanks data that will be used on the website. It is crucial to have this data available as many of the features in the TimeBanks website rely on it to work correctly.
We also suggest finding a way to hide any sensitive information used inside the Azure Maps implementation as this will pose a security risk if it is not properly dealt with.
What we learnt as a team
Key Points
Design process is not always linear. The design process is iterative, with steps that may need to be revisited and refined as new insights emerge.
Regular progress reviews and a willingness to revisit design decisions helped maintain alignment, improve usability, and address unforeseen challenges.
During the redesign, delays occurred due to the complexity of implementing custom features in Wix Studio. Challenges and delays are part of the process, so building flexibility into timelines is essential.
Unlike designing a new website from scratch, this redesign project required us to assess existing content, identify pain points, and build improvements within existing constraints. This process differed from a traditional design workflow, emphasizing iterative enhancements rather than starting from a blank slate.