GoodCity for Charities
responsive website
10 Minute Read
Role
Research UI / UX Design
Timeline
Side Project 2024 - 2025
Outcomes
Responsive Web Redesign Email Redesigns Improved User Flows
GoodCity for Charities is a website and app that connects social workers with donated goods for their clients. The website/app faced challenges with usability, navigation, and communication features, which hindered user satisfaction and efficiency. As the UI/UX designer, I conducted user research, identified key pain points, and implemented solutions to improve the interface, browsing process, and appointment booking workflows. The redesigned website/app, emails, and user flows now feature clearer navigation, better visual hierarchy, and streamlined processes, ensuring a more intuitive and user-friendly experience for all users. This project is currently awaiting funding and the current website can be viewed at:
GoodCity for Charities
responsive website
10 Minute Read
Role
Research UI / UX Design
Timeline
Side Project 2024 - 2025
Outcomes
Responsive Web Redesign Email Redesigns Improved User Flows
GoodCity for Charities is a website and app that connects social workers with donated goods for their clients. The website/app faced challenges with usability, navigation, and communication features, which hindered user satisfaction and efficiency. As the UI/UX designer, I conducted user research, identified key pain points, and implemented solutions to improve the interface, browsing process, and appointment booking workflows. The redesigned website/app, emails, and user flows now feature clearer navigation, better visual hierarchy, and streamlined processes, ensuring a more intuitive and user-friendly experience for all users. This project is currently awaiting funding and the current website can be viewed at:
GoodCity for Charities
responsive website
10 Minute Read
Role
Research UI / UX Design
Timeline
Side Project 2024 - 2025
Outcomes
Responsive Web Redesign Email Redesigns Improved User Flows
GoodCity for Charities is a website and app that connects social workers with donated goods for their clients. The website/app faced challenges with usability, navigation, and communication features, which hindered user satisfaction and efficiency. As the UI/UX designer, I conducted user research, identified key pain points, and implemented solutions to improve the interface, browsing process, and appointment booking workflows. The redesigned website/app, emails, and user flows now feature clearer navigation, better visual hierarchy, and streamlined processes, ensuring a more intuitive and user-friendly experience for all users. This project is currently awaiting funding and the current website can be viewed at:
Mockups Preview
Crossroads Foundation &
The GoodCity for Charities App
Crossroads Foundation &
The GoodCity for Charities App
Dedicated to connecting people in a world of need, Crossroads Foundation is non-profit organisation based in Hong Kong with four areas of focus
Dedicated to connecting people in a world of need, Crossroads Foundation is non-profit organisation based in Hong Kong with four areas of focus
Dedicated to connecting people in a world of need, Crossroads Foundation is non-profit organisation based in Hong Kong with four areas of focus
Global Distribution
where need
meets resource
Global Distribution
where need
meets resource
Global Distribution
where need
meets resource
Global Handicrafts
fair trade for
a fairer world
Global Handicrafts
fair trade for
a fairer world
Global Handicrafts
fair trade for
a fairer world
Global Hand
partnering
for change
Global Hand
partnering
for change
Global Hand
partnering
for change
Global X-perience
stepping into
another's shoes
Global X-perience
stepping into
another's shoes
Global X-perience
stepping into
another's shoes
As part of the Global Distribution service, providing aid for relief and development both locally and internationally, Crossroads operates the GoodCity for Charities app, a client-facing platform that enables NGOs, schools, and case workers from the Social Welfare Department to browse and select goods to be delivered, book on-site browsing appointments, and utilize the "Direct from Donors" feature, which is currently under development.
As part of the Global Distribution service, providing aid for relief and development both locally and internationally, Crossroads operates the GoodCity for Charities app, a client-facing platform that enables NGOs, schools, and case workers from the Social Welfare Department to browse and select goods to be delivered, book on-site browsing appointments, and utilize the "Direct from Donors" feature, which is currently under development.
As part of the Global Distribution service, providing aid for relief and development both locally and internationally, Crossroads operates the GoodCity for Charities app, a client-facing platform that enables NGOs, schools, and case workers from the Social Welfare Department to browse and select goods to be delivered, book on-site browsing appointments, and utilize the "Direct from Donors" feature, which is currently under development.
The Research
The Research
The primary goal of this project was to enhance the usability of the GoodCity for Charities app. However, no specific areas for improvement were initially outlined. To address this, I conducted thorough research by interviewing key stakeholders, including
📤 current and former HK Distribution Managers,
👥 social workers who frequently use the app,
📦 the stock manager,
💻 the processing and computers manager, and
👨💻 the IT team.
The primary goal of this project was to enhance the usability of the GoodCity for Charities app. However, no specific areas for improvement were initially outlined. To address this, I conducted thorough research by interviewing key stakeholders, including
📤 current and former HK Distribution Managers,
👥 social workers who frequently use the app,
📦 the stock manager,
💻 the processing and computers manager, and
👨💻 the IT team.
The primary goal of this project was to enhance the usability of the GoodCity for Charities app. However, no specific areas for improvement were initially outlined. To address this, I conducted thorough research by interviewing key stakeholders, including
📤 current and former HK Distribution Managers,
👥 social workers who frequently use the app,
📦 the stock manager,
💻 the processing and computers manager, and
👨💻 the IT team.
I identified recurring challenges and grouped them into several categories, providing valuable insights into the app’s pain points and guiding the project toward creating impactful solutions. Subsequently, I chose to address the following key areas:
I identified recurring challenges and grouped them into several categories, providing valuable insights into the app’s pain points and guiding the project toward creating impactful solutions. Subsequently, I chose to address the following key areas:
I identified recurring challenges and grouped them into several categories, providing valuable insights into the app’s pain points and guiding the project toward creating impactful solutions. Subsequently, I chose to address the following key areas:
🎨/⚙️
the general
UI and UX
the general
UI and UX
🏠
the dashboard
layout & function
the dashboard
layout & function
📧
the email
templates
the email
templates
🛒
the goods
browsing process
the goods
browsing process
📅
the appointment
making process
the appointment
making process
These focus areas were prioritized to improve the overall user experience and ensure that the app met the needs of its users effectively.
These focus areas were prioritized to improve the overall user experience and ensure that the app met the needs of its users effectively.
These focus areas were prioritized to improve the overall user experience and ensure that the app met the needs of its users effectively.
The General Interface and Experience Design
The General Interface and Experience Design
Icons:
The 'Book a Visit' and 'Dashboard' had similar icons so I reformatted the website and only kept icons for the three key services
I used icons from the "Phosphor Icons" library to maintain consistency
Spacing and Alignment
In several areas such as the navigation bar and credits bar, icons and text, or images were unevenly aligned or padded
Information Hierarchy and Spacing
The tagline and video explaining the site were hidden, so I enlarged the text and embedded the video in the landing page's header to help visitors understand and onboard new users
I also moved the information from the about section to the landing page
I punctuated the large bodies of text with supporting images, icons, and CTAs
I also kept language associated with each service short and consistent
Colour Hierarchy
Across the site, I reduced the amount of dark blue used, keeping it only in the header and footer
For the key services, I used one colour and grouped them together
Red was kept only for CTAs
Icons:
The 'Book a Visit' and 'Dashboard' had similar icons so I reformatted the website and only kept icons for the three key services
I used icons from the "Phosphor Icons" library to maintain consistency
Spacing and Alignment
In several areas such as the navigation bar and credits bar, icons and text, or images were unevenly aligned or padded
Information Hierarchy and Spacing
The tagline and video explaining the site were hidden, so I enlarged the text and embedded the video in the landing page's header to help visitors understand and onboard new users
I also moved the information from the about section to the landing page
I punctuated the large bodies of text with supporting images, icons, and CTAs
I also kept language associated with each service short and consistent
Colour Hierarchy
Across the site, I reduced the amount of dark blue used, keeping it only in the header and footer
For the key services, I used one colour and grouped them together
Red was kept only for CTAs
Icons:
The 'Book a Visit' and 'Dashboard' had similar icons so I reformatted the website and only kept icons for the three key services
I used icons from the "Phosphor Icons" library to maintain consistency
Spacing and Alignment
In several areas such as the navigation bar and credits bar, icons and text, or images were unevenly aligned or padded
Information Hierarchy and Spacing
The tagline and video explaining the site were hidden, so I enlarged the text and embedded the video in the landing page's header to help visitors understand and onboard new users
I also moved the information from the about section to the landing page
I punctuated the large bodies of text with supporting images, icons, and CTAs
I also kept language associated with each service short and consistent
Colour Hierarchy
Across the site, I reduced the amount of dark blue used, keeping it only in the header and footer
For the key services, I used one colour and grouped them together
Red was kept only for CTAs
Current
Redesigns
The Dashboard
The Dashboard
Personalisation
Since users are likely to return, I gave the option of creating an account and adding a profile picture and added a welcome message
Tabs and Table Navigation
I kept the tab navigation used in the current website but only for the different services
The table list allows information to be compared and viewed altogether as well as having the option for all of an order or visit's details
I added information such as date submitted and date of delivery/visit/event and filters to help users find what they are looking for
Clear and consistent icons and language
Personalisation
Since users are likely to return, I gave the option of creating an account and adding a profile picture and added a welcome message
Tabs and Table Navigation
I kept the tab navigation used in the current website but only for the different services
The table list allows information to be compared and viewed altogether as well as having the option for all of an order or visit's details
I added information such as date submitted and date of delivery/visit/event and filters to help users find what they are looking for
Clear and consistent icons and language
Personalisation
Since users are likely to return, I gave the option of creating an account and adding a profile picture and added a welcome message
Tabs and Table Navigation
I kept the tab navigation used in the current website but only for the different services
The table list allows information to be compared and viewed altogether as well as having the option for all of an order or visit's details
I added information such as date submitted and date of delivery/visit/event and filters to help users find what they are looking for
Clear and consistent icons and language
Current
Redesigns
Browsing and Selecting Goods
Browsing and Selecting Goods
"Other Items" Functionality:
During interviews, the distribution manager requested that 'Other Items' be used to allow users to request other items, so "Other (Item)" was kept for uncategorised items and the "Request" was added to the filter
Cart Functionality:
The cart lacked intuitive features, making it difficult for users to manage and review selected items effectively, so a more familiar and intuitive one was used instead
Search bar
A search bar was added in addition to the existing filters
Item Details
I increased the image size, moved the CTAs, and added the other/similar goods options
"Other Items" Functionality:
During interviews, the distribution manager requested that 'Other Items' be used to allow users to request other items, so "Other (Item)" was kept for uncategorised items and the "Request" was added to the filter
Cart Functionality:
The cart lacked intuitive features, making it difficult for users to manage and review selected items effectively, so a more familiar and intuitive one was used instead
Search bar
A search bar was added in addition to the existing filters
Item Details
I increased the image size, moved the CTAs, and added the other/similar goods options
"Other Items" Functionality:
During interviews, the distribution manager requested that 'Other Items' be used to allow users to request other items, so "Other (Item)" was kept for uncategorised items and the "Request" was added to the filter
Cart Functionality:
The cart lacked intuitive features, making it difficult for users to manage and review selected items effectively, so a more familiar and intuitive one was used instead
Search bar
A search bar was added in addition to the existing filters
Item Details
I increased the image size, moved the CTAs, and added the other/similar goods options
Current
Redesigns
Appointment Booking
Appointment Booking
Breadcrumbs
To make the process clearer, I added the breadcrumbs and service to the top of each page
Unclear and Repetitive Disclaimers:
Information regarding who handles transportation fees was unclear, with repetitive disclaimers causing confusion for users.
So, I sectioned off and labeled the area clearly
Formatting
I reformatted the pages and added more space
Relevant information was grouped together and titled
Breadcrumbs
To make the process clearer, I added the breadcrumbs and service to the top of each page
Unclear and Repetitive Disclaimers:
Information regarding who handles transportation fees was unclear, with repetitive disclaimers causing confusion for users.
So, I sectioned off and labeled the area clearly
Formatting
I reformatted the pages and added more space
Relevant information was grouped together and titled
Breadcrumbs
To make the process clearer, I added the breadcrumbs and service to the top of each page
Unclear and Repetitive Disclaimers:
Information regarding who handles transportation fees was unclear, with repetitive disclaimers causing confusion for users.
So, I sectioned off and labeled the area clearly
Formatting
I reformatted the pages and added more space
Relevant information was grouped together and titled
Current
Redesigns
Emails
Emails
Email Layouts:
One of the first and most common requests brought up in interviews was to reformat the emails as appointment-related emails were overly wordy and unclear, making it hard for users to quickly understand key details.
Relevant information was grouped together and titled
Visual Interest, Consistent Style and Branding
I added images, a header and footer similar to the website
I used the same colours and fonts as the website and Crossroads' branding book
I also made the emails bi-lingual
Email Layouts:
One of the first and most common requests brought up in interviews was to reformat the emails as appointment-related emails were overly wordy and unclear, making it hard for users to quickly understand key details.
Relevant information was grouped together and titled
Visual Interest, Consistent Style and Branding
I added images, a header and footer similar to the website
I used the same colours and fonts as the website and Crossroads' branding book
I also made the emails bi-lingual
Email Layouts:
One of the first and most common requests brought up in interviews was to reformat the emails as appointment-related emails were overly wordy and unclear, making it hard for users to quickly understand key details.
Relevant information was grouped together and titled
Visual Interest, Consistent Style and Branding
I added images, a header and footer similar to the website
I used the same colours and fonts as the website and Crossroads' branding book
I also made the emails bi-lingual
Current
Redesigns
Conclusions
Conclusions
Key stakeholders confirmed that the redesigns made the website more user-friendly, clear, and consistent. They shared that the redesigns looked professional and intuitive. They especially appreciated the email redesigns.
This project is currently seeking funding therefore, this project focused on major areas of improvement, details such as the 'Direct from Donors' function, chat, notifications, etc. Will be designed closer to the launch of this redesign.
Key stakeholders confirmed that the redesigns made the website more user-friendly, clear, and consistent. They shared that the redesigns looked professional and intuitive. They especially appreciated the email redesigns.
This project is currently seeking funding therefore, this project focused on major areas of improvement, details such as the 'Direct from Donors' function, chat, notifications, etc. Will be designed closer to the launch of this redesign.
Key stakeholders confirmed that the redesigns made the website more user-friendly, clear, and consistent. They shared that the redesigns looked professional and intuitive. They especially appreciated the email redesigns.
This project is currently seeking funding therefore, this project focused on major areas of improvement, details such as the 'Direct from Donors' function, chat, notifications, etc. Will be designed closer to the launch of this redesign.
©2024 Tamara Sher. All Rights Reserved.
Ready to work together?
Let’s do this!
click email to copy
©2024 Tamara Sher. All Rights Reserved.
Ready to work together?
Let’s do this!
click email to copy
©2024 Tamara Sher. All Rights Reserved.
Ready to work together?
Let’s do this!
click email to copy
©2024 Tamara Sher. All Rights Reserved.
Ready to work together?
Let’s do this!
click email to copy