Web Design
Web Design
UI Design
UI Design
Non-profit Cooperation
Non-profit Cooperation
Taiwan Sunlight Seeding Association - CSR Innovation Matching Platform
Taiwan Sunlight Seeding Association - CSR Innovation Matching Platform
Taiwan Sunlight Seeding Association - CSR Innovation 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.
Taiwan Sunlight Seeding Association
Taiwan Sunlight Seeding Association
Taiwan Sunlight Seeding Association, known as TSSA, is a nonprofit organization established in 2020, aimed at creating an ecosystem of public welfare through a digital sharing platform. By matching schools, businesses, and nonprofit organizations, it allocates resources to the units that need them in the most effective way.
Taiwan Sunlight Seeding Association, known as TSSA, is a nonprofit organization established in 2020, aimed at creating an ecosystem of public welfare through a digital sharing platform. By matching schools, businesses, and nonprofit organizations, it allocates resources to the units that need them in the most effective way.
Project Information
My role: a solo designer, including communication with clients
Duration: 2 months, 2023/06 - 2023/07
Tools: Figma, Wordpress
My role: a solo designer, including communication with clients
Duration: 2 months, 2023/06 - 2023/07
Tools: Figma, Wordpress
Define the user, converting pain points into product usage needs.
Through the explanation from the TSSA colleagues, I learned that the primary users of their website are two groups: corporate units and nonprofit organizations. So, I conducted a brief interview with the TSSA colleagues and also had an interview with my company's public relations department to understand the user information from the corporate side. This, combined with the use of AI, helped me gain deeper insights into the users. The user pain points I organized and the corresponding product usage needs are as follows:
Through the explanation from the TSSA colleagues, I learned that the primary users of their website are two groups: corporate units and nonprofit organizations. So, I conducted a brief interview with the TSSA colleagues and also had an interview with my company's public relations department to understand the user information from the corporate side. This, combined with the use of AI, helped me gain deeper insights into the users. The user pain points I organized and the corresponding product usage needs are as follows:
Corporate entity
Corporate entity
Public relations personnel in medium-sized enterprises or social enterprises, or unspecified commissioners in small enterprises, aim to find suitable potential collaborative charitable organizations through a matching platform.
Public relations personnel in medium-sized enterprises or social enterprises, or unspecified commissioners in small enterprises, aim to find suitable potential collaborative charitable organizations through a matching platform.
Product usage requirements
Product usage requirements
Obtain basic information about non-profit organizations, such as areas of focus, expected collaboration timeline, service regions, etc., so that I can quickly conduct initial screening.
Compile further detailed information about non-profit organizations, so that I can evaluate the fit between the non-profit organization and the company's own capabilities and resources.
Obtain basic information about non-profit organizations, such as areas of focus, expected collaboration timeline, service regions, etc., so that I can quickly conduct initial screening.
Compile further detailed information about non-profit organizations, so that I can evaluate the fit between the non-profit organization and the company's own capabilities and resources.
Public Welfare Organization
Public Welfare Organization
The specialists in non-profit organizations or associations aim to find businesses for further collaboration through matchmaking platforms.
The specialists in non-profit organizations or associations aim to find businesses for further collaboration through matchmaking platforms.
Product usage requirements
Product usage requirements
I need a information aggregator to provide public corporate CSR collaboration opportunities so that I can identify which companies are interested in CSR collaboration.
Obtain information about the corporate cultural values, issues of concern, etc. so that I can assess whether it is suitable to collaborate with them.
I need a simple and effective contact method so that I can directly contact the corporate liaison.
I need a information aggregator to provide public corporate CSR collaboration opportunities so that I can identify which companies are interested in CSR collaboration.
Obtain information about the corporate cultural values, issues of concern, etc. so that I can assess whether it is suitable to collaborate with them.
I need a simple and effective contact method so that I can directly contact the corporate liaison.
Converge the conclusions into three product goals and plan them as new pages to be added.
After the interviews, I integrated the product usage needs of the two types of users and set them as the three main product goals outlined below. I then planned these three product goals into three separate pages.
After the interviews, I integrated the product usage needs of the two types of users and set them as the three main product goals outlined below. I then planned these three product goals into three separate pages.
Allow businesses and non-profit organizations to quickly find initial suitable partners directly from the list provided by TSSA; saving time and costs in the initial broad search for information
Allow businesses and non-profit organizations to quickly find initial suitable partners directly from the list provided by TSSA; saving time and costs in the initial broad search for information
Allow users to browse detailed information about partner organizations to determine whether to contact them further; save time on manual searching and organizing information
Allow users to browse detailed information about partner organizations to determine whether to contact them further; save time on manual searching and organizing information
Allow users to leave their contact information directly on the website, assisted by TSSA to facilitate communication between both parties, avoiding the problem of finding a potential collaborator but struggling to get in touch
Allow users to leave their contact information directly on the website, assisted by TSSA to facilitate communication between both parties, avoiding the problem of finding a potential collaborator but struggling to get in touch
Three main pages
Partners
Partners
A list of enterprises and charitable organizations interested in CSR collaboration.
A list of enterprises and charitable organizations interested in CSR collaboration.
Organization Details Page
Organization Details Page
Detailed information pages for various enterprises and non-profit organizations.
Detailed information pages for various enterprises and non-profit organizations.
Matching Form
Matching Form
A form to fill out matching information and contact details.
A form to fill out matching information and contact details.
User Journey of Gold: Integrating the page into the original website of TSSA
Due to limitations in time and resources, this project needs to be integrated with the TSSA site itself on WordPress. Therefore, I planned the user journey by connecting the pages mentioned above into a path for users to navigate simply and naturally within the website.
This process indicates that when users enter the TSSA website, they browse partner information through the ideal website usage process to contact them. After arriving at the homepage, users can quickly enter the Partners page through the buttons on the navigation bar to browse all the nonprofit organizations and organizations that TSSA helps match; then, they can click to open a modal on the same page to view information about the organization they are interested in without needing to jump to another page; finally, through a button, users are guided to the page to fill out the matching form, allowing them to leave matching information.
Due to limitations in time and resources, this project needs to be integrated with the TSSA site itself on WordPress. Therefore, I planned the user journey by connecting the pages mentioned above into a path for users to navigate simply and naturally within the website.
This process indicates that when users enter the TSSA website, they browse partner information through the ideal website usage process to contact them. After arriving at the homepage, users can quickly enter the Partners page through the buttons on the navigation bar to browse all the nonprofit organizations and organizations that TSSA helps match; then, they can click to open a modal on the same page to view information about the organization they are interested in without needing to jump to another page; finally, through a button, users are guided to the page to fill out the matching form, allowing them to leave matching information.
UI interface and design decisions
Partners: List of enterprises and charitable organizations interested in CSR collaboration
Partners: List of enterprises and charitable organizations interested in CSR collaboration
Design Decisions：
Design Decisions：
Public welfare organizations and enterprises use pagination components for presentation, allowing users to quickly switch between target objects for browsing, regardless of who they are.
Using logos combined with unit names to enhance recognition, making it convenient for users to browse.
Cards use keywords to succinctly present key information, helping users to initially evaluate compatibility between both parties.
When the mouse cursor hovers over a card, a company profile and photo are displayed, allowing users to easily understand the other party's business content and team atmosphere.
Public welfare organizations and enterprises use pagination components for presentation, allowing users to quickly switch between target objects for browsing, regardless of who they are.
Using logos combined with unit names to enhance recognition, making it convenient for users to browse.
Cards use keywords to succinctly present key information, helping users to initially evaluate compatibility between both parties.
When the mouse cursor hovers over a card, a company profile and photo are displayed, allowing users to easily understand the other party's business content and team atmosphere.
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 Details Modal: Detailed information page for nonprofits or businesses; this is the modal collapse screen, presented on behalf of the nonprofit organization.
Organization Details Modal: Detailed information page for nonprofits or businesses; this is the modal collapse screen, presented on behalf of the nonprofit organization.
Organization Details Modal: Detailed information page for nonprofits or businesses; this is the modal collapse screen, presented on behalf of the nonprofit organization.
Design Decisions：
Design Decisions：
The modal opens above the charitable partner page, allowing users to browse organizations of interest without needing to navigate away from the page.
The modal opens above the charitable partner page, allowing users to browse organizations of interest without needing to navigate away from the page.
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 Details Modal: Detailed information page for public welfare organizations or enterprises; this is the expanded view of the Modal
Organization Details Modal: Detailed information page for public welfare organizations or enterprises; this is the expanded view of the Modal
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: A form to fill in matching information and contact details
Matching Form: A form to fill in matching information and contact details
Design Decisions：
Design Decisions：
The first two items (identity and desired matching unit) are automatically filled in based on the user's options, allowing for a smoother user experience and saving time on data entry.
The content of the form is designed with questions to help assess the compatibility of both parties.
The privacy consent checkbox, which users may be less enthusiastic about, will be left until the end of the form for users to select.
The first two items (identity and desired matching unit) are automatically filled in based on the user's options, allowing for a smoother user experience and saving time on data entry.
The content of the form is designed with questions to help assess the compatibility of both parties.
The privacy consent checkbox, which users may be less enthusiastic about, will be left until the end of the form for users to select.
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.
Learning and reflection
Conduct competitive analysis before designing to optimize the matching process.
Conduct competitive analysis before designing to optimize the matching process.
Conduct competitive analysis before designing to optimize the matching process.
As this project is designed according to the specific needs of the client, no user research has been conducted; if a matching process analysis of competing products in the market can be done before the design, it may align better with market trends and the actual needs of users.
As this project is designed according to the specific needs of the client, no user research has been conducted; if a matching process analysis of competing products in the market can be done before the design, it may align better with market trends and the actual needs of users.
Enhance communication frequency with engineers to improve design feasibility
Enhance communication frequency with engineers to improve design feasibility
In the design and development of no-code platforms, due to the technical limitations of the platform, when uncertain about the feasibility of certain designs, you can actively ask engineers for more information or regularly share design drafts to ensure the feasibility of the designs. For example, ask engineers about the platform's breakpoint sizes at the beginning of the design to avoid drawing incorrect sizes.
In the design and development of no-code platforms, due to the technical limitations of the platform, when uncertain about the feasibility of certain designs, you can actively ask engineers for more information or regularly share design drafts to ensure the feasibility of the designs. For example, ask engineers about the platform's breakpoint sizes at the beginning of the design to avoid drawing incorrect sizes.
Considering the convenience of website operators.
Considering the convenience of website operators.
In addition to considering the users, we should also think about the "operational convenience for website maintainers" during the design process; for example, how to allow website maintainers to operate the backend easily, ensuring that the website is also highly practical for the operators.
In addition to considering the users, we should also think about the "operational convenience for website maintainers" during the design process; for example, how to allow website maintainers to operate the backend easily, ensuring that the website is also highly practical for the operators.
Other projects
