UX Case Study: Designing a Digital Product for a Registered Charity in Singapore
Introduction
Sian Chay Medical Institution is a registered charity established since 1901 by a group of benevolent individuals to provide free medical treatment and medicine for the poor. Their 5 Core Values, “Forgiveness, Universal Love, Compassion, Gratitude, Blessing”, work as the service motto for Sian Chay in support of nation building and social harmony. The website provides vast information to the public— from background history, services, monthly updates, to charity shows they have hosted from various years. I conducted a study on their website to develop solutions to improve the website and suggest recommendations.
Strategy (Product Objectives)
Mapping out Sian Chay Medical Institute’s business model using the ‘Business Model Canvas’ framework will lead to insights about the users, what value propositions are offered through the website, and help find ways to increase its revenue. I did research by reading through their website and watching some of the chairman interviews conducted by the media.
The primary business goals assumed are:
1. Increase the revenue by providing medical care to patients and from donations.
2. Provide better quality healthcare and affordable medical bills to the needy.
I found out that Sian Chay is an established charity organisation in Singapore. Since Mr Toh took over it chairmanship in 2008, it has expand from one medical centre to current 14 branches serving more than 1,400 patient visits per day. The challenge was to explore how the users could use their website to attract more passionate volunteers and increase their main revenue stream which comes from donations.
Although their inaugural TV Charity Show on Channel 8 had raised over $8.4 million last year, there is a constant challenge to raise more money to ensure that all operations throughout the medical centres are running smoothly in order to provide sustainable health subsidies to needy families.
Therefore, ideally, the website will be a platform that can raise awareness to the public, hence increasing more donations and recruiting more like-minded people to work their goals.
“Individual’s power in charity is limited. Only the participant from a group can benefit more people. I will continue with entrepreneurs with similar wishes to encourage more capable people to contribute their loving hearts and to take more social responsibilities to help more needy people.”
Chairman Toh Soon Huat
Strategy (User Needs)
Before establishing a user persona, I crafted a series survey questions using the ‘Lean Survey Canvas’ framework and the interviewees are aged from mid 30s to late 50s, from regular donors to individuals who have experience volunteering in different non-profit organisations.
Some questions in the survey include:
- How often do you donate or volunteer to/for a charity organisation? (screening question)
- Have you heard of Sian Chay Medical Institute, if not what is charity organisation best known to you? (This question is to find how known Sian Chay is, and their best known NGO might be a good reference point for me.)
- In your opinion, what is most effective ways to raise public awareness?
- What is most important to you when choosing to support a charity?
- Does the website provide the information you like to know?
- What is your favourite feature of their website? (To decide what to keep)
- Which features of their website do you not like? Can you suggest how the website could be improved?
Some insights from the interviewees
My Persona
Scope (Functional Specifications)
Now we know exactly what needs to be done and achieved, the next step is getting all the details like what features need to keep from the original website and what new features to add-on in order the achieve the users’ ultimate goals
Feature Hypothesis Statements
“I believe Sian Chay can recruit more passionate volunteers and increase revenue for the organisation if Uncle Danny can be motivated with a Prominent call for actions for volunteer feature on the website.”
“I believe Sian Chay can recruit more passionate volunteers and increase revenue for the organisation if Uncle Danny can be inspired with more human interest stories feature on the website.”
“I believe Sian Chay can recruit more passionate volunteers and increase revenue for the organisation if there is more emotional engagement with more fun and loving images feature for Uncle Danny to relate to on the website.”
Prioritisation Matrices
Next is to use the Prioritisation Matrices to help me reduce options to the most effective and the least costly among the choices.
MoSCoW
The last step for the functionality side of my Scope Plane is to rank the importance of the features according to the user needs, identifying which features to work on first.
Scope (Content Requirements)
First, by creating a Content Inventory that lists all content on the existing website, it will help me have an overview of the depth of website’s contents. By gathering and organising all relevant information, this will help in my content audit process. This approach increases the chances for me to choose the most satisfying alternation possible.
Structure (Interaction Design)
When users visit the website, I want them to able to feel the positive mood and the key messages should be seen by them at a glance. Users must also be able to find the information they need quickly and with ease. My 4th dimensions for this website are as follows:
1st Dimension: Words
Tone of voice must be soft yet persuasive: Eg. We believe that… It is clear that….
2nd Dimension: Visual Representations
The images must be photos of real-life situations — fun, loving, and able engage the users emotionally.
3rd Dimension: Physical Objects/Space
Although there are more and more people using mobile phones over desktop/website to surf internet. I believe PC will still be the preferred media for my persona (Uncle Danny) who are doing research or serious reading.
4th Dimension: Time
In this case, I assume my persona will be using the web to look for guidance and advice, the best time to do is during his free time.
Structure (Information Architecture)
I spent some time re-organising the Site Map by using the Card Sorting method. Taking into consideration that 80% of my survey respondents agreed that the website provided the information they like to know. I did not do major changes on the contents, however some contents will be renamed and re-categorised
Solution
The overall colour scheme will remain as red and pastel orange. The anchor image will change to a warm image of a volunteer pushing a wheelchair-bound elderly. A prominent ‘Call For Action’ form will be appear on the front, this will simplify the number of choice for the users to make. Human interest stories of staff and volunteer will also be featured on the front page to inspire potential volunteers and donors to come forward.
Skeleton (Interface Design)
As my persona’s (Uncle Danny) primary device for surfing the internet is his laptop, my UI design will be based on landscape format with a 12-column grid.
These are some of recommended interactive components to enhance the UI usability functions:
An additional feature: A Volunteer Form will be included under the “Join Us” tab.
Skeleton (Navigation Design)
I began by mapping out a User Flow diagram to help determine how many screens are needed, and the components to be added into the UI.
Wireframe
As users gave feedback that the many different ways to donate (eg. scan Paynow QR code/Alipay/Bank Transfer) is overwhelming, my solution is to combine them all into a simple donation page where they can fill in their contact details and donate their desired amount of money.
Navigation and UI Mapping
Enhanced the visibility of the navigation bar and improved on the UI mapping flow of the image layout.
Skeleton (Information Design)
To ensure that all the key information can be convey to the user successfully, and the readability of the text will not be compromised, here are some of my suggestions:
Typography
Both header and body text sizes will be increased to enhance the user reading experience. Current article has a word counts of 2165! An abridged version of history will be sufficient for 1st time visitor to this website.
Imagery
A picture is worth a thousand words, so adding in relevant images to each header can help manipulate the emotional reactions of the user. It also helps to break away the monotony of each subject.
Data Visualisation
One of the main challenges is to reorganise and convert text to graphic data in order to provide a quick and clear understanding of the financial information to the users. Here is a before-and-after example of how their Statistical Reports can be vastly improved:
Surface (Sensory Design)
Visual
Fun and loving images were used to tell the story of what goes on behind the charity organisation, and happiness increases the chances that a potential donor or volunteer will make a contribution.
Colours
Orange and red are warm colours, they represent kindness, love, generosity, optimism, and boldness. Emotional appeals are a common fundraising strategy, and red and orange tap into potential donors’ feeling of generosity and compassion.
The two primary colours used for the UI design:
Conclusion
The objective of this exercise is to reduce the number of steps for potential donors or volunteers (eg. Uncle Danny). Users do not need to struggle in filling up forms or doing donation via this website.
Below is the overview design of the UI flow:
