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