UX Case Study — Redesign of a Non-Profit Website (The Giving Collective)
This is a UX case study done in collaboration between: Sean Neo and Lin Wei.
Toolkit: Business Model Canva, The Value Proposition Canva, Lean Survey Canva, FigJam, Figma
UX Techniques: Business Analysis, Desk Research, Interview, Proto-Persona, User Stories, Content Framing, Information Architecture
Overview of The Giving Collective (TGC)
The Giving Collective (TGC) is social service with an initiative to redistribute unsold bread (from bakeries) and donated bakes (from home bakers and corporate bakery sponsors) to the needy and marginalized in our society to provide them with food to meet their basic needs.
TGC is a young social service that was started up by Anne Neo in October of 2020 which currently distribute breads in 13 locations throughout Singapore. They have a very proactive group of volunteers, which has seen some of them setting up their own distribution area with the support of TGC.
STRATEGY PLANE
The strategy plane helps to identify what the product is to accomplish for both the organization and for their users.
Lean UX Process
As this was a school project and we were uncertain of getting in contact with TGC, we opted to adopt the Lean UX approach where we first form assumptions and hypothesis of their business goals and user needs before testing and validating these assumptions with users. This also allowed for iterations as we gain greater clarity along the project.
Business Goals
We conducted desk research through their website, social media platforms as well as other media coverages on TGC. We then made use of the Non-Profit Business Model Canvas to better understand our client and help form our assumptions. This background research helps us better identify the business shareholders, beneficiaries, what they do, how they benefit their users as well as the backend admin and logistic that runs the initiative.
Business goals assumed for TGC:
- Increase awareness of the vision of TGC and bring in more volunteers
- Reach out to more bakeries so that there will be a better supply of bread to redistribute to the needy
Business Assumptions
Some of the business assumptions include:
User Needs
Similar to identifying the business goals of TGC, we also adopted the Lean UX methodology to help us understand the user needs. We introduced proto-persona and start by having an assumption of who would use TGC website and why they would do so.
After which, we conducted research to validate assumptions of our user group. We then made changes to our user group and the persona based on our follow up research.
Proto-Persona
Based on the mission and vision of TGC, we came with 2 proto-personas; mainly the beneficiaries and volunteers.
For each user group, the proto-persona was defined based on their goals. It was also based on how they interacted with TGC and how TGC fits into their life.
Validating Assumptions
To validate our assumptions, we made a trip down to Toa Payoh to observe a bun give away distribution as well as having an interview with the founder of TGC, Anne Neo, to find out more about their initiatives, target audiences and business needs.
Our interview questions are as follows:
- How do beneficiaries/ volunteers know about The Giving Collective?
- With limited number of bread, how do you know who to give bread to?
- If someone wants to volunteer, how do they volunteer?
- Are most of the volunteers organic? How do you reach out to them/How do they reach out to you?
- Why do your volunteers help?
- What are 3 main difficulties the charity/project face?
- What are somethings you would like to see on your website?
- What is your vision for the future of this charity?
Our interview responses
Challenging Our Initial Assumptions
Beneficiaries
We initially assumed that TGC might have difficulties reaching out to more beneficiaries. We also assumed that many beneficiaries found out about TGC through their website.
Through the interview our assumption has been challenged and proven invalid. They have a healthy number of beneficiaries and are able to communicate and reach out to them adequately through word of mouth or other social services.
Volunteers
We also assumed that most volunteers found out about TGC through their website and there is a lacking of volunteers.
Instead, through our interview, we found out that most volunteers heard about TGC through an application called Zeles. They currently have a healthy number of volunteers but wouldn’t shy away from having more too.
Bakeries
From our interview, we realized that one of the biggest difficulty is for bakeries to collaborate and donate left over buns to TGC.
As such, the current targeted users for TGC are bakery owners.
Redefine and Update
After reaching out to Anne Neo and managing to understand more about her insights and direction for TGC, we redefined the initial business goals and proto-persona.
Redefined Business Goals
- Reach out to more bakeries so there will be a better supply of bread to redistribute to the needy
- Establish and reassure bakeries, beneficiaries and potential sponsors that TGC is trustable and reliable. And the food distributed are clean and good.
Redefined Proto-Persona (Bakeries)
We also redefined the proto-persona from beneficiaries and volunteers to bakeries.
Product Objective
To better refine the image and branding of TGC on their website as they want to reach out to more collaborators, companies and bakeries. We feel that the website could be revamped to better align their values, purpose and providing key information valued by collaborators.
So when potential leads look at the website, they would be attracted to work together and support TGC.
SCOPE PLANE
We move from strategy to scope plane as our business goals and user needs help defined our product objective. This product objective helps to drive the functional specifications and content requirements of the product.
Functional Specifications
Feature Hypothesis Statements
Prioritization of Features
We then placed the features against an effort/impact scale as in Lean UX. This helps us in prioritizing so that we can test the feature that has the most impact for the least effort.
User Stories
These features are also translated into user stories base on the MoSCoW framework for prioritization based on user needs.
Content Requirements
Content Inventory and Content Audit
We also kept an inventory of the contents, from the navigation headers to the subsections on each page of the TGC website. We then examine and evaluate the quality of contents by deciding to ‘Keep, Update or Remove’ them for the redesign.
Content Framing
With the contents we have decided to keep and update, we once again prioritize them based on what the users what to see.
STRUCTURAL PLANE
Information Architecture
After content framing and prioritizing the core contents each page aims to deliver and present, we begin dissecting the information architecture on the current TGC. We looked at how TGC group, order and present their current contents.
New Proposed Information Architecture
After testing the current TGC website, we proposed a new information architecture focusing on the business needs targeted at bakeries. The new proposed information architecture aims to allow bakeries to have easier access to information they need.
Some changes includes:
- Removing ‘One Hot Meal Project’ (a separate donation event) from the ‘Bun Giveaway Project’ navigation.
- Changed the naming convention from ‘Media’ to ‘Featured In’.
- Currently, upcoming events are found in the ‘Home Page’, and past events held are found in ‘Gallery’. To improve categorization and ease of access, we added ‘Events’ in the main navigation to house all past, on-going and upcoming events.
- We also added ‘Our Process’ into Bun Giveaway@project for bakeries to easily find out how TGC ensures safe delivery, handling and consumption of donated breads.
The Giving Collective (TGC) Mobile Redesign
We opted for a mobile-first design based on the task flow of our proto-persona, Bread Maker Michael, and his interaction with the volunteers.
A mobile-first design would enable:
- The website to be easily shared by/to volunteers, beneficiaries, and bakeries through social networking and messaging applications.
- When meeting with bakeries, volunteers can easily show them the website, retrieve photos from events, and provide them with other relevant information.
- Bakers can always refer to the website easily through their phone when considering to collaborate with The Giving Collective .
The redesign of the mobile website covers the Skeleton and Surface plane.
Skeleton Plane: Interface Design, Navigation Design, Information Design
Surface Plane: Sensory Design
Experience #1: Landing Page
The landing page is usually the first point of contact the users have with TGC on the digital space. It is especially important in achieving the product objective of building credibility and increasing partnerships with bakeries for the donation of unsold bread.
Currently, the landing page lacks visuals, a clear and succinct message of what TGC does and a Call to Action (CTA) for bakeries and volunteers to help.
As such the redesign of the landing page focuses on the following:
- Clear value proposition on what TGC does and the value it brings to beneficiaries.
- Strong Call to Action (CTA) for Bakeries to partner with TGC
Good use of visuals to help in explanation and evoke emotions - Social Proof to show the contributions and positive impact made by TGC
- ‘Disclaimer’ message at the footers of all pages to alleviate any concerns the bakeries have on their liability of donated bread.
Experience #2: About Us
About Us is meant for users to find out more about the organization’s direction as well as the team behind TGC.
Currently, About Us is separated into 2 different pages, ‘Mission and Vision’ and ‘Our Team’. The ‘Mission and Vision’ page is found to be wordy and has repeated information.
In the redesign, ‘Mission and Vision’ and ‘Our Team’ are combined into a page for ease of navigation. Additional visuals are added, and the contents are re-written to be more succinct and uplifting. For ‘Meet Our Team’, the name of team members and their role has the same hierarchy.
Experience #3: Bungiveaway@Neighbourhood
All bun distribution locations are displayed at Bungiveaway@Neighbourhood.
The redesign focuses on information chunking and hierarchy. An overview of all distribution locations, broken down into different regions in Singapore, is done to improve readability. Distribution Locations (e.g.Toa Payoh) previously found under ‘Location and Time’, now have a higher hierarchy and are placed above respective location images.
Experience #4: Our Process
Our Process is a new page created to show the entire collection and redistribution flow of donated buns.
This page aims to reassure bakeries how TGC ensures safe delivery, handling, and consumption of donated buns. Some contents from Frequently asked Questions (FAQ) are included in the flow to give readers greater context as well.
In the design, clear headers and sub-headers were used to highlight the main flow of contents. Visuals were also included to assist the comprehension of information. A line is used to link the different processes, indicating a flow, starting from top to bottom.
Experience #5: Our Collaborations
Our Collaboration is meant to share the other initiatives TGC has with different organizations.
Currently, the images used to showcase the organizations come in various sizes and shapes. The redesign focuses on creating a clean and consistent pattern by standardizing the imagery used.
Experience #6: Work with Us (Main page)
Based on our research and feedback from Anne Neo, we uncovered that there was no proper way for those interested in volunteering or making a contribution to do so other than directly contacting her. Thus, this is an entirely new page that we decided we needed to have.
Experience #7: Work with Us (Baker/Volunteer)
These two pages respective help to funnel bakers & volunteers while properly informing them each respectively on how to help out. This is so there won’t be any confusion of information.
Experience #8: Events
There wasn’t an events page for the current website, and we felt that we needed to have one when we were looking through the current page. There wasn’t an easy way to view and read about the current events happening and it was difficult for us to understand what was happening through the use of photos alone. So we think this will better help other people to understand clearly what TGC does and it’s more professional than just a compilation of photos.
Experience #9: Frequently asked Questions (FAQ)
The redesign focuses on chunking information into smaller digestible content. This allows readers to quickly scan through all questions available and only expanding on those relevant questions of interest. The questions are also filtered for ‘Beneficiaries’ and ‘Bakeries’.
Experience #10: How to Reach Us
This page was clear and concise enough and we just updated the visuals and colors.
Interface Design
Layout Grid
We used a 4 column grid for mobile and a 12 column grid for the desktop in our entire design to maintain consistency throughout.
UI Components
Buttons, shadows as well as overlays have been used based on our predefined style guide for consistency as well.
- Primary buttons in orange used for CTA
- Shadows are used in buttons and cards to indicate that they can be selected
- Black transparent overlay on images to create greater contrast with typography
Typography
Consistent use of typography throughout the design.
We used Montserrat typeface for headers and sub-headers and Roboto for paragraph and button text.
Heading 1 is usually blue and describes the content below or guide users to the content. Heading 2 is any sub-headings used as part of the content under Heading 1.
Navigation Design
User Flow
There are three possible entry points where users can interact with the website in the user flow. It also shows how potential bakeries would interact with the website from the ‘Homepage’ up till the ‘Submission of the form’ to partner with TGC.
Navigation Drawer
A navigation drawer allows for quick and easy access to different pages within the website while using the mobile phone. As TGC have a lot of pages, this is an ideal and easy way to manage such tabs.
Information Design
Content writing
For our content writing, we have chosen an uplifting, empowering, and approachable tone. This tone is one that is aligned with the mission and vision of TGC; to inspire hope and empower those in need through the bread redistribution initiatives.
To prevent information overload, we also re-wrote certain contents, keeping the information clear and succinct. We also made use of headers and sub-headers to help guide users and provide information in a logical order.
Data Visualization
Data visualization is used in updating the number of partnerships TGC has attained thus far. It is hoped that such data would create a sense of urgency and increase partnerships between bakeries and TGC.
Imagery
We added imagery to improve the delightfulness of content reading. It also provides greater context and assists with the comprehension of information. The redesign more prominently features the facial expressions of those who bless and are blessed through TGC initiatives.
Sensory Design
Since TGC doesn’t have a brand color palette of their own, we decided to adopt the blue from their current logo into this new Style Guide. Bringing in orange to help compliment the blue and work off contrast and bring a warmer feel to the overall brand.
The orange will help to represent the family and volunteering aspect of TGC and also the warmth provided by these volunteers. It is also a nice color to associate with the color of bread.
For typography, we paired up two San-Serif fonts, a wider more geometric bold Montserrat font for the headings together with and a more traditional and simple but versatile, Roboto, for the body copy.
Desktop Design
We also had a desktop design, meant for users who prefer a larger screen.
We had great fun doing this project and hope you enjoyed reading it too!
Be sure to 👏🏽 below and leave any comments or suggestions.
Thank you for reading!
