Image for post
Image for post

UX Case Study: Building a better tomorrow for disadvantaged children through web redesign

Overview

Project: Redesign of Children’s Wishing Well Website

Role: Product Strategist and UI Designer

Timeline: 11 May 2020–31 May 2020

The recent COVID-19 pandemic has shone the spotlight on the staggering digital divide between the vulnerable and the privileged children. From the news coverage to a local charity platform giving.sg, I saw that Children’s Wishing Well was raising funds to help children from low-income families to gain access to laptops and the internet. From their website, I realised that there is a lot more that they do to support children from low-income families. I thought I could bolster their efforts through a redesign of their website.

Challenge

To attain the vision of empowering children from disadvantaged backgrounds, Children’s Wishing Well aims to achieve it through providing a range of services from educational initiatives to supporting the child’s daily living needs. This will require both (1) increase in donations (2) increase in volunteers.

Children’s Wishing Well currently centers their website content around communicating the programs that they offer to children and getting more donations. While Children’s Wishing Well has their organisation’s objectives, a question remains, does the product, which is the website, serves the end-users’ needs?

Disclaimer: The project is not affiliated with Children’s Wishing Well. Images and content in the mockup were retrieved from Children’s Wishing Well’s website and facebook page.

My role and goals

This is an individual project where I play the role of a Product Strategist and User Interface Designer. In this project, I analysed the product-market fit of Children’s Wishing Well website to target the right market that will grow overtime. With clarity of the target, I evaluated the value proposition of the website to design the best content that should be on the landing page and a site structure for end-users to achieve their goals. I re-wrote the content and designed a new interface for the web and mobile experience.

Outcome

Web Design

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

Mobile Design

Image for post
Image for post

Design Process

I took a 4 stage design process to develop the product. The process is iterative thus I would also revert to the previous stage when needed.

Image for post
Image for post
Image for post
Image for post

In the first step of the design process, I did preliminary research on Children’s Wishing Well so that I could pin down my assumptions for this project.

Seeing the Big Picture

I gathered information through their current website, news articles, annual reports and researched on other non-profit organisations that support children from disadvantaged backgrounds. The findings are documented in a Business Model Canvas so that I could review the organisation insights at one glance.

Even though the website places heavy emphasis on increasing donations, I realised that the end-users of the website will be volunteers.

Image for post
Image for post

Problem Statement

Children’s Wishing Well website was designed to communicate about their programs, increase donations and to recruit more volunteers. I observed that the current website does not make it easy for volunteers to identify how they can help and sign up as a volunteer.

Given the low percentage of regular volunteers 4.27% from their 2018 Annual Report, it can be valuable to convert site visits into opportunities to build a larger, committed volunteering base. This can in turn translate to greater outreach and support for disadvantaged children.

How might we build and retain our volunteer base through the website to scale the impact of our social initiatives?

Identifying and Prioritising Assumptions

I examined my problem statement with a business assumption exercise to break it down into core assumptions.

Image for post
Image for post

With the limited time, I have prioritised the assumptions that I will test based on the risk level and my understanding of the assumption.

The 2 main assumptions that poses the highest risk and has the greatest unknown are my solutions:

  • Solve needs by recognising impact on children’s life
  • Solve needs by identifying the programs that they can volunteer
Image for post
Image for post

Hypotheses

There are 2 feature solutions:

  1. Show how volunteering can impact the children’s life
  2. Show the list of programs they can volunteer.

We will know if both features will achieve an increase in volunteer sign-up from the: (1) feedback in a user survey (2) if users click on the CTA to read more about ‘how they can volunteer’ (3) they click on the action button to sign-up (4) increase in page visits to the volunteering page.

Outcomes

To test the hypotheses, I have identified the following objectives and success metrics as the outcomes.

Product Objectives:

  • Recruit mission evangelists that will develop and scale impactful initiatives
  • Increase volunteer base by 20%

Success Metrics:

  • Conversion rate of website clicks to successful volunteer registration
  • Higher percentage of regular volunteers

As I will not be implementing the following web redesign on the actual website, it will be recommended for Children’s Wishing Well to integrate Google Analytics into their current website to track the site usage and their volunteering base before they embark on the web redesign project.

Personas

Instead of deriving the personas from user research, I will be using the assumptions to create the proto-persona. The proto-persona will allow us to be user-centric when we design our solution. We will validate our assumptions later in the design process.

Since we would like to increase the percentage of regular volunteers, I have centered my persona on individuals who care about making a difference. ‘The Changemaker’ is a young fresh graduate who looks for opportunities to drive social change.

Image for post
Image for post
Image for post
Image for post

While it is possible to start prototyping right away, I wanted to have more assurance that my assumptions would work. So, I tested my assumptions and hypotheses through a survey with university students and fresh graduates.

Validating Users’ Needs

The survey results aligned with my hypothesis. 70% of the users would visit a Charity’s website to volunteer.

To get more user insights, I have also asked the following two questions:

  1. What will propel you to volunteer for a cause?
  2. How do you think we can support disadvantaged children and youths from low-income families?

Most individuals would volunteer for a cause that they feel strongly for and they want to know that their efforts will value-add to the beneficiaries’ life.

“If i know the work i do will be value-adding and is actually needed by the people i am helping”

A sizable number of the participants believe that the beneficiaries need education support, guidance to self-betterment and daily necessities support.

“We can find means to support them, especially with daily necessities like clothes or school supplies, food. This frees up their finances somewhat for important expenses like medical bills or utilities. I have volunteered with these groups before, and this is their biggest concern. I cannot say for sure that this is the best solution, but it does help them.”

“I think we need to try and level the playing field by providing them with more opportunities to excel”

Value Proposition

On a Value Proposition Canvas, I mapped out the services that Children’s Wishing Well currently offers, the pains, gains and jobs-to-be-done by my user persona.

Image for post
Image for post

I compared my initial assumptions against my findings. This leads to my conclusion that we should focus on:

  1. Relate to the users’ interest in the cause.
  2. Show how volunteering can impact the children’s life as they want to see the value of why they should volunteer.
  3. Explain how they can volunteer and display the list of programs that they can support.
Image for post
Image for post

In this phase, I planned the entire scope of pages that will be within the site and I started creating the content frames for each page. This will be a segway to the development phase where I will start creating the prototypes.

Site Map

With the key goals, I reviewed other non-profit organisations and re-organised the site map. As there seems to be an error for some of the webpages to display, I had difficulties in defining all the content and relationship between the web pages at the start.

In this site map, I tried to organise it in the perspective of what volunteers and beneficiaries would want to access at first glance.

Image for post
Image for post

Content Frames

In the following web redesign, users will need to be able to perform the action of signing-up as a volunteer or donate. As the following project differs from an app or software redesign, there is heavy emphasis on content in this project.

I started creating content frames for each of the main pages so that it will speed up the development process downstreams.

Image for post
Image for post

Context Scenarios

Before we start creating wireframes, we also want to identify the situations where users will access the website.

Our website will need to be mobile-responsive as users can access it through their mobile and desktop.

They might visit the website through a social media post. We have less than a minute to capture their attention through our website. It is unlikely that a user might frequently visit the website unless they are interested in signing up for a program.

When a user visits the website, they are most likely (1) beneficiaries looking for help (2) finding out about the organisation’s programs — so that they can decide if they want to volunteer or donate. There should be minimum steps taken for a user to take action (volunteer or donate).

Image for post
Image for post

A continuation from the previous phase, I identified the exact improvements that I will need to make to the website to fulfill the value proposition.

Image for post
Image for post

User Flow

Based on the premises that i defined in context scenarios, there can be 2 user flows for users who wants to volunteer.

  1. Read about how disadvantaged children is coping with learn from home situation > Click on CWW website > Read through what CWW does > Learn about how they can volunteer > Sign up as a volunteer
  2. Approached by friends to volunteer > Directed to the volunteer page > Browse through programs > Sign up as a volunteer

There are 3 touchpoints that a user who wants to volunteer will go through: (1) Landing Page (2) Get Involved Page (3) Volunteering Page. The web redesign will also focus on those 3 pages.

Information Design

I will provide a breakdown of the issues around the way information is presented in those 3 pages. At the same time, I will provide a side-by-side comparison of my suggested improvement.

Landing Page

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

Get Involved Page

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Second solution: Describe the different way that they can help through animated messages.

Volunteer Page

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

Navigation Design

Before creating the high-fidelity mockups, I decided on how I wanted to display the primary navigation on the web and mobile.

Image for post
Image for post

Web navigation — will use a primary horizontal navigation.

This will prevent distraction from the main content as a side navigation will take up real estate space.

Image for post
Image for post

Mobile navigation — will use the slider icon on the top right corner.

The overlayed screen will improve the visibility for the users as they can see all the menu options at one glance. There is also sufficient spacing between the menu options for them to tap on.

Interface Design

Having a design direction will enable a more consistent UI with the brand.

Warm, fun and impactful.

I went with the direction of warm, fun and impactful to portray the a modern charity for Children’s Wishing Well through the colourful shades and lineal icons with rounded edges. As CWW has earned the charity transparency award and they have been around for years, I went with a serif font for the primary font to exude a reputable yet trustworthy charity. In the interface design, I have also chose to use Singapore’s landscapes as the backdrop to demonstrate that is a worthy cause close to home.

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

Next Steps

We have to consider validating the prototype with real users who are interested in volunteering and identify if the information structure meets their needs, test the usability of the new site through user tasks i.e. sign up as a volunteer, and assess the brand of the new design.

Reflection

The greatest learning for me in this project is to balance between business objectives and user needs. While the organisation needs funds to support the programs, there are different means to get the funds. We need to identify who will be the end-user of our website and their needs so that we can develop the right experience for them.

I would hope that I had access to their Google Analytics so that I could take a more data-centric approach to identify the page with the most visited clicks and bounce rates. Tracking the site metrics will also allow me to measure the success of the website redesign.

Written by

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store