Website
Website
UI Design
UI Design
NGO
NGO
TSSA - CSR Partner Matching Platform
TSSA - CSR Partner Matching Platform
TSSA - CSR Partner Matching Platform
TSSA is an NGO founded in 2020 with the mission to efficiently distributing resources to those in need. However, TSSA identified a major challenge in corporate-NGO collaborations—the inefficient process of data collection, filtering, and communication. The lack of streamlined information flow often results in wasted resources and missed opportunities. To address this, TSSA set out to develop an online matchmaking platform that simplifies the process and enhances collaboration efficiency.
TSSA is an NGO founded in 2020 with the mission to efficiently distributing resources to those in need. However, TSSA identified a major challenge in corporate-NGO collaborations—the inefficient process of data collection, filtering, and communication. The lack of streamlined information flow often results in wasted resources and missed opportunities. To address this, TSSA set out to develop an online matchmaking platform that simplifies the process and enhances collaboration efficiency.
Challenge
Challenge
As a newly established nonprofit organization, TSSA had limited resources. I needed to understand the needs of both parties in the matching process—what information they expected to find on the website—and design a solution that balanced usability and visual appeal.
As a newly established nonprofit organization, TSSA had limited resources. I needed to understand the needs of both parties in the matching process—what information they expected to find on the website—and design a solution that balanced usability and visual appeal.
Info
My Role：Solo Designer
Duration：2 months (June 2023 – July 2023)
Tools：Figma, Wordpress
My Role：Solo Designer
Duration：2 months (June 2023 – July 2023)
Tools：Figma, Wordpress
My Role：Solo Designer
Duration：2 months (June 2023 – July 2023)
Tools：Figma, Wordpress
Defining Users & Product Needs
Through discussions with TSSA's team, I identified two primary user groups: corporates and NGOs. To gain deeper insights, I conducted informal interviews with both TSSA's team and my company’s PR department to understand corporate users’ needs. Based on these insights, I translated key pain points into actionable product requirements:
Through discussions with TSSA's team, I identified two primary user groups: corporates and NGOs. To gain deeper insights, I conducted informal interviews with both TSSA's team and my company’s PR department to understand corporate users’ needs. Based on these insights, I translated key pain points into actionable product requirements:
Corporate Users
Corporate Users
Mid-sized or social enterprises’ PR or sustainability teams, as well as general specialists in small businesses, seeking potential NGO partners through the platform.
Mid-sized or social enterprises’ PR or sustainability teams, as well as general specialists in small businesses, seeking potential NGO partners through the platform.
Product Needs
Product Needs
A consolidated directory of NGOs, including key details like focus areas, partnership timelines, and service locations for quick initial screening.
Comprehensive profiles with deeper insights to help businesses evaluate compatibility with their resources and goals.
A consolidated directory of NGOs, including key details like focus areas, partnership timelines, and service locations for quick initial screening.
Comprehensive profiles with deeper insights to help businesses evaluate compatibility with their resources and goals.
NGOs
NGOs
Specialists in nonprofit organizations or associations seeking corporate partners through the platform.
Specialists in nonprofit organizations or associations seeking corporate partners through the platform.
Product Needs
Product Needs
A centralized hub for publicly listed CSR collaboration opportunities, helping NGOs identify interested companies.
Access to company culture, values, and focus areas to assess compatibility.
A streamlined contact method to directly reach the appropriate corporate representative.
A centralized hub for publicly listed CSR collaboration opportunities, helping NGOs identify interested companies.
Access to company culture, values, and focus areas to assess compatibility.
A streamlined contact method to directly reach the appropriate corporate representative.
Defining Three Key Product Goals & New Page Planning
Based on user interviews, I consolidated the needs of both user groups into three primary product goals. Each goal was translated into a dedicated page within the platform.
Based on user interviews, I consolidated the needs of both user groups into three primary product goals. Each goal was translated into a dedicated page within the platform.
Enable companies and NGOs to quickly find potential partners from a curated list, reducing the time spent on broad initial searches.
Enable companies and NGOs to quickly find potential partners from a curated list, reducing the time spent on broad initial searches.
Provide detailed organization profiles to help users evaluate potential partners before initiating contact, saving time on manual research.
Provide detailed organization profiles to help users evaluate potential partners before initiating contact, saving time on manual research.
Allow users to submit contact information directly on the platform, with TSSA facilitating the connection to prevent communication roadblocks.
Allow users to submit contact information directly on the platform, with TSSA facilitating the connection to prevent communication roadblocks.
Key Pages
Partner Directory ( 樂善夥伴 )
Partner Directory ( 樂善夥伴 )
Partner Directory
( 樂善夥伴 )
A list of companies and NGOs open to CSR collaborations.
A list of companies and NGOs open to CSR collaborations.
Organization Profile
( 組織詳細資訊頁 )
Organization Profile
( 組織詳細資訊頁 )
Detailed pages for each company and NGO.
Detailed pages for each company and NGO.
Matching Form ( 媒合表單 )
Matching Form ( 媒合表單 )
A form for submitting collaboration inquiries.
A form for submitting collaboration inquiries.
User Journey: Integrating Pages into TSSA’s Existing Website
Due to time and resource constraints, this project needed to be integrated into TSSA’s existing WordPress site. To ensure a seamless user experience, I mapped out a structured user journey, linking key pages into a natural navigation flow.
Upon entering the TSSA website, users first land on the homepage, where a clear navigation button directs them to the Partner Organizations page. Here, users can browse a curated list of NGOs supported by TSSA. Instead of navigating away, they can open a modal within the same page to view detailed information about an organization. Finally, a call-to-action button guides them to the matchmaking form, enabling them to submit their collaboration request efficiently.
Due to time and resource constraints, this project needed to be integrated into TSSA’s existing WordPress site. To ensure a seamless user experience, I mapped out a structured user journey, linking key pages into a natural navigation flow.
Upon entering the TSSA website, users first land on the homepage, where a clear navigation button directs them to the Partner Organizations page. Here, users can browse a curated list of NGOs supported by TSSA. Instead of navigating away, they can open a modal within the same page to view detailed information about an organization. Finally, a call-to-action button guides them to the matchmaking form, enabling them to submit their collaboration request efficiently.
Mockups
Partner Directory ( 樂善夥伴 )
Partner Directory ( 樂善夥伴 )
Objective:
Objective:
Help users identify potential CSR partners and quickly find suitable matches, reducing the time spent on broad research.
Help users identify potential CSR partners and quickly find suitable matches, reducing the time spent on broad research.
Design Decisions:
Design Decisions:
Organizations and companies are displayed in separate tabs, allowing users to switch views easily.
Logos and names enhance recognition and improve browsing efficiency.
Key information is presented concisely on cards to help users evaluate compatibility.
Hovering over a card reveals a brief description and images, providing a quick glimpse into the organization’s work and culture.
Organizations and companies are displayed in separate tabs, allowing users to switch views easily.
Logos and names enhance recognition and improve browsing efficiency.
Key information is presented concisely on cards to help users evaluate compatibility.
Hovering over a card reveals a brief description and images, providing a quick glimpse into the organization’s work and culture.
Organization Profile Modal
( 組織詳細資訊頁 )
Organization Profile Modal ( 組織詳細資訊頁 )
Organization Profile Modal ( 組織詳細資訊頁 )
Objective:
Objective:
Provide detailed insights into an organization to help users assess compatibility and decide on further engagement.
Provide detailed insights into an organization to help users assess compatibility and decide on further engagement.
Design Decisions:
Design Decisions:
Opens as a modal within the CSR Partner Directory, allowing users to view details without leaving the page.
Opens as a modal within the CSR Partner Directory, allowing users to view details without leaving the page.
Organization Profile Modal - Expanded View ( 組織詳細資訊頁 )
Organization Profile Modal - Expanded View ( 組織詳細資訊頁 )
Design Decisions:
Design Decisions:
Organization name and key collaboration details remain at the top for easy reference.
Keywords highlight focus areas and project timelines, eliminating the need for users to remember context.
Basic information includes an overview and core services, offering a quick understanding of the organization.
Advanced details such as values, resource needs, and past CSR collaborations help set expectations for potential partnerships.
Real images and related news enhance authenticity and build trust.
Organization name and key collaboration details remain at the top for easy reference.
Keywords highlight focus areas and project timelines, eliminating the need for users to remember context.
Basic information includes an overview and core services, offering a quick understanding of the organization.
Advanced details such as values, resource needs, and past CSR collaborations help set expectations for potential partnerships.
Real images and related news enhance authenticity and build trust.
Matching Form ( 媒合表單 )
Matching Form ( 媒合表單 )
Objective:
Objective:
Enable users to submit contact details and collaboration interests, allowing TSSA to facilitate connections and prevent communication gaps.
Enable users to submit contact details and collaboration interests, allowing TSSA to facilitate connections and prevent communication gaps.
Design Decisions:
Design Decisions:
User identity and preferred partner type are auto-filled based on previous selections for a smoother experience.
Form questions are designed to assess compatibility between organizations.
Privacy consent is placed at the end to encourage form completion before requiring agreement.
User identity and preferred partner type are auto-filled based on previous selections for a smoother experience.
Form questions are designed to assess compatibility between organizations.
Privacy consent is placed at the end to encourage form completion before requiring agreement.
Reflections
Conducting Competitive Analysis to Optimize Matching Process
Conducting Competitive Analysis to Optimize Matching Process
Conducting Competitive Analysis to Optimize Matching Process
This project was designed based on specific client requirements. However, analyzing competitor platforms before design could have provided valuable insights into market trends and user needs.
This project was designed based on specific client requirements. However, analyzing competitor platforms before design could have provided valuable insights into market trends and user needs.
Enhancing Collaboration with Engineers for Feasibility
Enhancing Collaboration with Engineers for Feasibility
Proactively consulting engineers and regularly sharing design drafts can help ensure that designs are implementable. For instance, checking breakpoints early in the process can prevent incorrect sizing.
Proactively consulting engineers and regularly sharing design drafts can help ensure that designs are implementable. For instance, checking breakpoints early in the process can prevent incorrect sizing.
Considering Usability for Site Operators
Considering Usability for Site Operators
Beyond user experience, it’s essential to consider ease of use for website administrators. Designing an intuitive backend can streamline content management, ensuring long-term usability for site operators.
Beyond user experience, it’s essential to consider ease of use for website administrators. Designing an intuitive backend can streamline content management, ensuring long-term usability for site operators.
Continue Viewing …
