Better.sg
Better.sg
Connecting passionate volunteers with Singapore's tech-for-good initiatives through a redesigned website
Connecting passionate volunteers with Singapore's tech-for-good initiatives through a redesigned website
My Contributions
My Contributions
UIUX Design, Prototyping, Web Design, Site Mapping
Team
Team
Timothy Lum, Madeleine Koh, Rohan, Junze Zheng
Timeline
Timeline
2 months
Background
Background
Better.sg is the largest volunteer-run charity that drives #techforgood in Singapore
Better.sg is the largest volunteer-run charity that drives #techforgood in Singapore
The organisation connects a diverse range of individuals and organizations, empowering them to create positive social change through technology. Their mission extends beyond volunteers, fostering collaboration with two other key audiences:
The organisation connects a diverse range of individuals and organizations, empowering them to create positive social change through technology. Their mission extends beyond volunteers, fostering collaboration with two other key audiences:
Volunteers
Volunteers
Individuals passionate about leveraging their tech skills (designers, developers, product managers, project managers, etc.)
Individuals passionate about leveraging their tech skills (designers, developers, product managers, project managers, etc.)
Non-profit organisations (NPOs)
Non-profit organisations (NPOs)
Seeking innovative tech solutions to address social challenges and advance their missions.
Seeking innovative tech solutions to address social challenges and advance their missions.
Sponsors
Sponsors
Organizations and individuals who share Better.sg's vision and support their initiatives financially or through in-kind contributions.
Organizations and individuals who share Better.sg's vision and support their initiatives financially or through in-kind contributions.
Better.sg offers two main ways for volunteers to contribute their tech expertise:
Better.sg offers two main ways for volunteers to contribute their tech expertise:
Volunteer-initiated projects
Volunteer-initiated projects
Passionate volunteers can pitch their own tech-focused projects that address social needs. Better.sg provides resources, mentorship, and helps connect them with other skilled volunteers to build their project teams.
Passionate volunteers can pitch their own tech-focused projects that address social needs. Better.sg provides resources, mentorship, and helps connect them with other skilled volunteers to build their project teams.
Consultancy services to NPOs
Consultancy services to NPOs
NPOs with tech-related needs and challenges can reach out to Better.sg. Better.sg then acts as a bridge, connecting NPOs with volunteers whose skills match the project requirements at no cost
NPOs with tech-related needs and challenges can reach out to Better.sg. Better.sg then acts as a bridge, connecting NPOs with volunteers whose skills match the project requirements at no cost
Research
Research
New volunteers are unsure how they can contribute
New volunteers are unsure how they can contribute
Through conversations with new volunteers, we collected feedback to understand some of the pain points they had while trying to navigate the website. Common themes centered around the lack of clarity on both the organization's mission and the specific volunteer opportunities available. This lack of clarity makes it difficult for them to envision how their skills can contribute:
Through conversations with new volunteers, we collected feedback to understand some of the pain points they had while trying to navigate the website. Common themes centered around the lack of clarity on both the organization's mission and the specific volunteer opportunities available. This lack of clarity makes it difficult for them to envision how their skills can contribute:
Uncertainty about impact
Uncertainty about impact
Volunteers struggle to grasp Better.sg's mission and the work they do. They were confused about the difference between volunteer-run projects versus consultancy services that Better.sg provides to other non-profit organisations.
Volunteers struggle to grasp Better.sg's mission and the work they do. They were confused about the difference between volunteer-run projects versus consultancy services that Better.sg provides to other non-profit organisations.
Confusing navigation and information overload
Confusing navigation and information overload
Volunteers found it hard to find details about available opportunities and the level of commitment required due to the website's structure and abundance of generic information.
Volunteers found it hard to find details about available opportunities and the level of commitment required due to the website's structure and abundance of generic information.
Due to time constraints, we leveraged on this feedback to help us quickly identify the biggest issues. This allowed us to launch a basic version of the website fast which we could later use to conduct user testing to validate our design.
Due to time constraints, we leveraged on this feedback to help us quickly identify the biggest issues. This allowed us to launch a basic version of the website fast which we could later use to conduct user testing to validate our design.
Problem statement
Problem statement
How can we provide clear, concise information on Better.sg's work to guide potential volunteers towards identifying how they can contribute?
How can we provide clear, concise information on Better.sg's work to guide potential volunteers towards identifying how they can contribute?
site mapping
site mapping
Reorganising existing content to help volunteers find information more easily
Reorganising existing content to help volunteers find information more easily
Leveraging on the insights from earlier, we took stock of what was on the current website and resorganised the content to create a new site map. Key information and relevant external links were included in the respective pages to ensure users were able to find what they needed within the same page.
Leveraging on the insights from earlier, we took stock of what was on the current website and resorganised the content to create a new site map. Key information and relevant external links were included in the respective pages to ensure users were able to find what they needed within the same page.
Key features
Key features
Empowering volunteers by bridging the gap between immediate action and lasting impact
Empowering volunteers by bridging the gap between immediate action and lasting impact
Insert relevant external links that provide additional information on specific projects
Insert relevant external links that provide additional information on specific projects
Project descriptions are enhanced with relevant external links that provide additional context and information. This allows volunteers to dive deeper into projects that spark their interest.
Project descriptions are enhanced with relevant external links that provide additional context and information. This allows volunteers to dive deeper into projects that spark their interest.
For completed projects, the "View More" link seamlessly connects users to the live website, showcasing the project's full impact.
For completed projects, the "View More" link seamlessly connects users to the live website, showcasing the project's full impact.
For ongoing projects, users can access a dedicated Notion page containing detailed information like background, current status, and available volunteer opportunities for various roles.
For ongoing projects, users can access a dedicated Notion page containing detailed information like background, current status, and available volunteer opportunities for various roles.
Showing appreciation for existing volunteers
Showing appreciation for existing volunteers
We also introduced a new volunteer appreciation board to celebrate outstanding contributions of passionate volunteers, inspiring and motivating new volunteers.
We also introduced a new volunteer appreciation board to celebrate outstanding contributions of passionate volunteers, inspiring and motivating new volunteers.
usability testing
usability testing
Prioritising qualitative insights to reflect exploratory user behaviour
Prioritising qualitative insights to reflect exploratory user behaviour
Once we had our first iteration up, we set out to answer the following questions:
Once we had our first iteration up, we set out to answer the following questions:
Were users able to find out information about the work that Better.sg does?
Were users able to find out information about the work that Better.sg does?
2. Were users able to find out how they can contribute as volunteers?
2. Were users able to find out how they can contribute as volunteers?
To gather extensive user feedback, we opted for an unmoderated approach. This allowed us to reach a larger pool of potential volunteers within a short timeframe.
To gather extensive user feedback, we opted for an unmoderated approach. This allowed us to reach a larger pool of potential volunteers within a short timeframe.
Due to the exploratory nature of the user journey, we opted to prioritise qualitative insights over quantitative metrics. As new volunteers tend to be unfamiliar with Better.sg, they are likely to engage in exploratory research, browsing the website to learn more before committing to signing up. As such pre-defining specific tasks for user testing might be restrictive. We wanted to allow users the freedom to navigate the website organically, revealing their natural research patterns and potential pain points.
Due to the exploratory nature of the user journey, we opted to prioritise qualitative insights over quantitative metrics. As new volunteers tend to be unfamiliar with Better.sg, they are likely to engage in exploratory research, browsing the website to learn more before committing to signing up. As such pre-defining specific tasks for user testing might be restrictive. We wanted to allow users the freedom to navigate the website organically, revealing their natural research patterns and potential pain points.
Dense content layout
Dense content layout
Content prioritisation on landing page
Content prioritisation on landing page
Design iterations
Design iterations
Streamlining navigation by reducing information overload and guiding users through clear signposting
Streamlining navigation by reducing information overload and guiding users through clear signposting
Before
After
Combating content clutter
Combating content clutter
While showcasing Better.sg's achievements is important, user feedback revealed information overload could overwhelm new volunteers. To address this, we:
While showcasing Better.sg's achievements is important, user feedback revealed information overload could overwhelm new volunteers. To address this, we:
Reduced text density
Reduced text density
Streamlined content on the homepage for optimal readability, creating a clean and uncluttered layout.
Streamlined content on the homepage for optimal readability, creating a clean and uncluttered layout.
Enhanced visual presentation
Enhanced visual presentation
Incorporated generous white space and implemented design elements to improve visual appeal and allow the content to breathe.
Incorporated generous white space and implemented design elements to improve visual appeal and allow the content to breathe.
Reprioritised content
Reprioritised content
Shifted the “Events” section to the top of the page to encourage engagement by spotlighting upcoming events that they can immediately participate in.
Shifted the “Events” section to the top of the page to encourage engagement by spotlighting upcoming events that they can immediately participate in.
Signposting on every page
Signposting on every page
We introduced clear descriptions and call-to-actions at the top of every page to help users know they are at the right place.
We introduced clear descriptions and call-to-actions at the top of every page to help users know they are at the right place.
Addressing 2 different types of volunteers
Addressing 2 different types of volunteers
For the majority seeking existing opportunities, a prominent call-to-action button leads them directly to a signup form, making it easy to get started.
Aspiring volunteers with fresh ideas can access a clear and comprehensive guide outlining the process for pitching new projects
For the majority seeking existing opportunities, a prominent call-to-action button leads them directly to a signup form, making it easy to get started.
Aspiring volunteers with fresh ideas can access a clear and comprehensive guide outlining the process for pitching new projects
Projects page
Addresses confusion with services page
Addresses confusion with services page
Explanation of how Better.sg help other non-profit organisations and distinguishes it from other volunteer-led projects
Explanation of how Better.sg help other non-profit organisations and distinguishes it from other volunteer-led projects
Services page
Final design
Final design
Takeaways
Avoiding tunnel vision through testing
Avoiding tunnel vision through testing
Designing in isolation can create blind spots. In our case, user testing helped us identify that that information on the landing page was too overwhelming, further complicated by the cramped layout.
Designing in isolation can create blind spots. In our case, user testing helped us identify that that information on the landing page was too overwhelming, further complicated by the cramped layout.
Listen to users to know what matters most
Listen to users to know what matters most
In our initial design, the “Events” section was placed close to the bottom of the page as we assumed that it was less important information. On the contrary, user feedback revealed that this information was key in helping them take action in joining the community.
In our initial design, the “Events” section was placed close to the bottom of the page as we assumed that it was less important information. On the contrary, user feedback revealed that this information was key in helping them take action in joining the community.