Youth-led initiative matching skilled volunteers to social organisations

Skills for Good

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 wix.com. 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

ROLE

Software engineer

DATE

May 2020 - present

TOOLS

Wix.com & Canva

Features

Volunteers

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.

Organisations

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.

Projects

Organisations post projects for volunteers to apply.

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

Design Thinking

1

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 

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

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

2

Projects

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

3

Volunteers

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

4

Organisation

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
Perseverance

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. 

Communication

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.

Let's connect!

Would love to get to know you. Come say hi !