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
May 2020 - present
Wix.com & 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.
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
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!
Eye-catching headings that can engage users
Call to action button in contrasting colour to capture the user's attention
Bright colours for colour scheme, mainly different shades of yellow and green that exuberates the message of the joy of volunteering
Bold words as heading to capture user's attention. Provides clear distinction, targeting 2 different groups of people
More important items are placed on the top left of the screen where it is most-viewed
Each project arranged neatly for easy selection
Easy access to projects launched by different organisations
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
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
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.
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.