top of page

Youth-led initiative matching skilled volunteers to social organisations

Skills for Good

SkillsForGood - Logo.png
Project Context

I have always wanted to do something meaningful during my holidays but always postponed taking any action to fulfil that desire. But during the summer break in 2020, one of my close friends asked if I wanted to help in designing and developing the website for a ground up initiative "Skills for Good". This initiative to match skilled volunteers with social organisations was such a great idea and I was eager to help out. 

When I first joined, the idea was already solidified by the founding team. They made a rough hi-fi implementation of what they wanted on Also, there were only 2 people in the technology department, so we did not have the capacity to create a full-stack website on our own. Hence I mainly helped out in the design decisions and implementation of the website


Software engineer


May 2020 - present

TOOLS & Canva



Volunteers create an account with Skills for Good and apply for projects listed in the site. They will be accessed through their past experiences and their passion to see if they are a good fit for the organisation.

At the office-pana.png


Organisations register an account with us and specify their requirements for volunteers through short descriptions or key skills needed and our algorithm will find a match for them.



Organisations post projects for volunteers to apply.

Disclaimer: Website still under development. Not all features mentioned are currently implemented

Design Thinking


Home Page

The founders of Skills for Good initially wanted the home page to be bright and cheerful and they made a draft Hi-fi layout of what they wanted to bring across. However, these are a few pointers I took note of:

  • No Call of Action on landing page

  • Venn Diagram which was designed to be a form of data representation is used in a different way

  • Could understand this is a website to call for volunteers but nothing stood out in particular

  • No hierarchy in terms of font size and colours to capture the attention of readers

  • Too much information on 1 page

This is what I came up with!

Concise headings

Eye-catching headings that can engage users


Call to action button in contrasting colour to capture the user's attention

Home - now.png

Colour scheme

Bright colours for colour scheme, mainly different shades of yellow and green that exuberates the message of the joy of volunteering

Clear hierarchy

Bold words as heading to capture user's attention. Provides clear distinction, targeting 2 different groups of people




F-pattern layout

More important items are placed on the top left of the screen where it is most-viewed

Neat arrangement

Each project arranged neatly for easy selection


Drop-down headers

Easy access to projects launched by different organisations




Clear content

Step by step instructions clear and concise 

Cater to advanced users

Shortcuts to projects for volunteers who want to apply immediately after looking at the instructions

Address questions

FAQs in drop-down boxes for users to get a quick scan through of all the questions and click on the ones they are interested in



SkillsForGood - Organisation.png

Clear structure

Instructions placed in order, easy to flow through all the steps


Bird's eye view

Clear distinction between the services offered for organisations. Icons included to capture the user's attention for each service

Learning points

Being both the designer and developer, I had to be able to go through the long arduous process of creative thinking and producing the results intended. First, to think of how to implement certain features and then try to make it as user friendly, clear and pleasing to the eyes. However, this whole process was extremely rewarding as I could  produce what I pictured in my head and see it being realised.

Learning process

Not having learnt the documentations of Wix, it was a steep learning curve for me as I had to learn a new API as well as hone my design skills. The development process was an entire learning process, training me how to implement certain functions such as repeaters, maintain the database and obtain user information. I am grateful and honoured for this opportunity to learn new things especially during a period of pandemic. 


Although I was working with a friend I already knew, communication should not be taken for granted. There were many times we assumed we knew what the other party wanted but turned out otherwise. I truly valued the importance of communication, to be clear of our main objectives and how we want to achieve them.

bottom of page