Designing a Digital Product for the Social Health Growth
Raising the children alone being single parents is difficult under any circumstances. And it is worse when they are uneducated. They have to deal with parental duties while juggling housework, work and child care. To be able to get over with all the parental challenges, they will need to be proficient in their jobs and evolve with the new skill sets which will help them to survive independently.
Same for the elderly people, they become frail and poor in health. As they grow old, they need to focus on staying physically and socially active, and the connection with the community and loved ones. We need to assist them with the better healthcare, nursing, community service and comfortable environment.
Reflection is to show that we are able to evolve for better.
About Social Health Growth
Alson Boo, the Founder of Social Health Growth (SHG), did extensive research on Singapore’s independent and volunteer social and economic support systems. Based on his findings, he found out that there were a significant number of unwed and/or single mothers, elderly people in our community who were left mostly alone to fight their daily problems. He decided to found a not-for-profit organisation with a focus on the unwed, single mothers and their children according to his volunteer experience at the Lions Club some years before.
All beneficiaries developed because of all the motivation and value support which gives them happiness for a lifetime.
The Case Study Brief
The purpose of this case study report is to highlight the design challenges for a nonprofit charity organisation in Singapore. The first 3 elements have been used from the 5 elements of UX (the remaining 2 elements will follow up later) and applied Lean UX hypothesis techniques to identify design problems and issues.
The Strategy Plane
Product Objectives
Every day the beneficiaries of the SHG try to do their best to build up the new skill sets and lecture their children by overcoming the daily challenges such as job, housework, children education and many others. SHG empowers them with what they want to achieve with a lot of effort, time and funds raised from the donation. SHG aims to help parents and disadvantaged families to raise children into healthy and contributing members of the society. SHG provides the healthcare for the elderly as well.
Business Model Canvas
I did the Business Model Canvas to be able to visualise the business model. This is to modify the existing business model and find out the new business models. The canvas has filled up with the insights about the organisation, the organisation’s offered value propositions through the channels and how the organisation runs. It helps to know about the organisation’s own business model and the competitor’s.
Then I did the Business Assumptions Exercise. I made the assumptions for the user needs, their benefits, how the business is going to run, the primary competition and the product risks. The biggest risk is to let the elderly, uneducated single parent who are not familiar with the technology to interact the product.
User Needs
A persona named Felicia Lim was developed to solve the problems. After that I formed the assumptions and conducted the survey to validate them. The persona indicates all her goals, tasks and the opportunities/features which she is going to need to solve her frustrations.
Lean Survey Canvas
Next, I generated the Lean Survey Canvas after preparing the survey questions then modified the persona accordingly reference from the survey responses. The survey questions are initially collected to know about the kind of charity activities and programmes that the users wish to discover. After that, learn to know how the users find out the trustworthiness of the organisation. Followed by the questions of how the users would like to take part in organisation. The survey ended with the frustration and satisfaction facts that users personally perceived.
The Scope Plane
Feature Hypothesis Statement
Now at the Scope Plane, I combined the Business Outcomes, User, User Outcomes and Features to form the 8 Feature Hypothesis Statements that will helps in getting more partners, volunteers, funds, awareness and trust.
Prioritising Hypothesis
According to the Feature Hypothesis Statements, I sketched the Effort/Impact Scale which measures the features of the highest impact with the lowest effort.
After the Prioritising process, I set the ranking for them based on their importance. The ranking decided on the least effort with the high impact like the user’s awareness of the organisation activities. The fundraising process takes high effort and has high impact. The least impact and the least effort of organisation news are putting before the high effort and low impact point. The Prioritising Hypothesis finalised with the four categories technique called MoSCoW to determine the priorities.
Content Requirements
Once done with the Prioritising Hypothesis, I then listed the existing content to the table and converted them into the Content Inventory. This is to have a clearer view of the current content that the system has. In order to make an improvement with the Content Audit phase which will come after this, I will need to have a better understanding of the existing content.
Once the Content Inventory has been listed down, I started to decide whether to retain, modify or take them out by conducting the Content Audit. The result from the Content Requirements Activity is displayed as a table.
The Structure Plane
Five Dimensions of Interaction Design
As I paid attention to the words, visual representation, physical objects/space, time and behaviour during the interaction design phase. Then I recognised some points againsting the interaction design principle.
- Words — The usage of the terms on the donation buttons are kinda misleading and difficult to interpret the meaning of them.
- Visual Representation — Lack of the visual representation for most of the places such as buttons, contents, typography. Some of the icons inside the buttons are used wrongly.
- Physical Objects/Space — Found that the website is not very responsive on the 13 inches screens especially when using Macbook.
Other than the five dimensions, it also affecting these
- Consistency — Some font styles usage are not consistent and difficult to read. The button styles need to be consistent too.
- Perceivability — Not only button styles are not consistent but also misleading as in clickability. The contact form is overlapping for the users to be able to submit. Some of the buttons blended within the image.
- Predictability — The explanation of the donation features lead the users indecisive whether it is to subscribe, buy now or add to cart.
The Information Architecture
The intention of applying the Information Architecture is to produce valuable content for the users to find out easily. It’s giving chances to the users to focus mainly on their tasks without the need of finding their way.
Card Sorting
I have done the Card Sorting with 3 participants to find out the easy way for the users to discover what they want in a short period of time. The navigation items and contents inside them are scattering and not really categorised. Donation functions are confusingly put under the separated navigation items. Also the irrelevant content information found out here and there. The final outcome from the card sorting will assist the users with a well organised structure.
Sitemapping
Now at the last phase of the Structure Plane, I drew a Sitemap with the primary pages and subpages to represent a list of navigations which are accessible to users in a hierarchical form. It helps in the improvement of the navigation structures as well as giving me the ability to know where the page navigations can be in place.
The Skeleton & Surface Plane
I expressed the structure of the website for SHG which includes elements like text boxes, buttons, images, etc. Based on the visual structure, I specifically planned the following points in order to deliver a better user experience to the users. They are —
- Interface design
- Navigation design
- Information design
- Sensory design
User flows, wireflows with interactions and prototypes are also involved and will explain in furthermore phases.
The Usage of Color Palette
In art therapy, color is often associated with a person’s emotions.
The green color has been used in the prototypes as a primary color by playing along with the gradient of it accordingly. Picking up the nice color scheme which has to reflect the organisation takes part in the important role. Green is a color of balance and harmony. The nature of green showcases growth, health, rejuvenation, exciting, calming, generosity and energetic. As the name is called SocialHealthGrowth, the green blends well with generosity, health and growth. After that orange and dark blue were chosen as the secondary colors. Orange itself is an energetic and attractive color. The dark blue is only used for the links to redirect the pages. The rest are the neutral colors from white to black.
Fonts and Typography
Since most of the users are the uneducated single mother, single parent, elderly, unwed mother and their children, the fonts and typography should be accessible and simple enough for them to be able to understand the contents delivered on the organisation website. Clear and solid typography shapes the information legible and understandable on the screens. Sizes ofthe typography are followed by the standard type system from Material Design.
Moodboard
The Moodboard were then explored and pasted in to have a better inspiration of the visual design. They helped in an excellent way to refine the theme before going deep into the actual visual design process. They collect the moods, thoughts and ideas together.
Navigation Design
Ideating the User Flows
After settling the UI style guide, I populated the Flow Charts which properly applied the elements of the user flow for each of the web pages based on what the users will try to achieve. Each of the flows are focused from the entry point to the final action. The final outcome of the flow charts can reference below.
Generating the Wireflows
Referring to the user flows above, the Wireflows are generated. The intention of the wireflows are to present the page-level layout ideas and the tasks. They also represent the interactions between screens and the interactions are indicated with the lines.
The Prototypes
The Story and Mission of SHG
The Prototypes are created with the standard grid which is 12 columns, 70 widths and 24 gutters for the website. The story, vision and mission of SHG are published on the home page. The solidarity COVID19 donation button will redirect the users to the COVID19 donation and gives access to be able to make a donation from the solidarity payment which supports the beneficiaries from the pandemic period. The button text is capitalised and used as a contained button. The overlay banner background photo and bigger title capture the attention from the users as well. The best single parent and elder care support award and video from Youtube provide a better understanding about SHG. There are 3 color sections, white, bright green and light grey. The bright green color section is used to showcase the main three points of SHG. The light grey section visualises the content more visible but used for the less important content than the bright green section does. The photos of the programme let users experience the excitement from them.
Giving the Knowledge About SHG
The about page lists down all the board members and committee members. The concept of the title on the left and medium size photo on the right have applied for some of the pages instead of using the banner for every page. The button named “Become a Member” will redirect the users to the volunteering page which consists of the membership application. The reason for using the 3 columns 2 rows design for the community centre locations instead of listing them down is to let the users to recognise them at a glance.
Transparency of the Activities
By establishing all the activities of SHG with the photos on the volunteering page, the users and donors can appreciate what is going on with SHG. It also gives transparency and earns more trust with the organisation activities. The users who are interested in contributing the activities can easily donate by clicking on the button provided. All the delightful activities are layout in the horizontal scroll as they will keep appearing while scrolling.
The newsletter feature will notify the users who subscribed. Volunteering at the SHG has its own advantages which are describing with the short write up sentences and the understandable icons beside. So the users and volunteers will realise how important being a volunteer is. The membership fundraising options attract the users’ attention and optimise the visibility. “Volunteer Management Framework” button which is less important has been placed beside the contained button called “Membership Application Form”.
Expand the Learning Curve
There is a button for the users to view the SHG 2021 Calendar which is displayed at the top section of the page. The visual design intention of this page is to introduce the programmes of SHG. The programme details are carefully designed to be simply delivered to the users. The “View Programme” buttons are provided as well for each of the programmes. After that is the section where the users can support the programmes in order to keep them going by clicking on the “Donate Now” button. The long term programmes are then highlighted and listed.
Fundraising is Crucial for a Non-Profit Organisation
The fundraising page starts with the explanation of why SHG needs to raise funds. Here, all the donation methods are provided. Followed by the one-time and monthly donation functions which are highlighted individually side by side. The rest of the programme donation features are organised and optimised as well to encourage the users to support the beneficiaries. The follow up sections are upcoming events and the sponsors of SHG. Revamping the fundraising took some time since all the donation features were cluttering across the pages on the current SHG website.
Stay in Contact with SHG
The contact us page is structured with the contact form, locations, contact details and SHG social media links. The bigger google map is a great help in locating the place of organisation. Also, the community centre locations are displayed on this page.
Questions Being Asked
The frequently asked questions can be found on the FAQ page. The questions and answers are redesigned pleasantly as the cards which aided the users with a comfortable reading experience. Personal Data Protection Act and Privacy Policy can explore more by clicking on the buttons.
Responsive View Outcome
Nowadays, responsive design shouldn’t be refused as people over the world are using their phones most of the time. The prototypes of the Volunteering Page below will show how the responsive design will behave on the phone. The standard 4 columns, 16 margins, 16 gutters grid is used for the responsive layout. The banner image reshaped more like a square due to the responsiveness of the screen. The title and paragraph have to go down instead of side by side with the photo. The 3 columns horizontal scroll changed to one column horizontal scroll. The 3 columns 2 rows component at “Become a Member” section rearranged to 1 column 6 rows. Same for the component at “Volunteering at SHG” which is repositioned as 1 column 3 rows.
Conclusion
This case study report reflects the variations and ideas for the business model segments by segments, exposing what users want in a product. The prioritised assumptions shed light on the importance of features. Also identifies the mistakes that miscommunicate with the users while impacting the user experiences. The irrelevant insight and context revealed on the content refined from the users’ perspective with a better guidance of the organised hierarchy. The placement of visual design components and structures are then defined based on the insight gathered. The revamp visual designs will enhance the user experience in the following ways:
- Acknowledge more about SHG.
- Have better understanding about the programmes without needing to explore much.
- Have awareness on the advantages of being a member.
- Have transparency on the activities and events.
- Know how to support and donate clearly.
- Able to keep in touch straightforwardly.
In conclusion, this case study have made into the final visual presentation by implementing the 5 elements of UX.
