Pro Help

Skills: Web Development

banner

ProHelp is a non-profit website providing a fresh and engaging approach to learn the facts about suicide and promote help seeking. It’s designed and developed by me as my undergraduate thesis project in collaboration with The Australian National University, Center of Research Excellence in Suicide Prevention.

The goal of this website is to introduce people basic knowledge about suicide and suicidal ideas. We want to encourage conversation about how suicide should be viewed and what we can do to help people suffering from suicidal ideas. Meanwhile, we use this website to conduct online survey about people’s opinion and attitude towards suicide. Data collected is then be used for the further analysis by Center of Research Excellence in Suicide Prevention.

 

Final Outcome

Here is a walkthrough of the final website. (*Screen recording makes the animation seems not very smooth. It is not what it should be like, sorry…)

(国内用户请点击此处观看)

The website is built on HTML5 and applies the parallax scrolling, a visual design technic used in web development, which has become one of the most popular trends of web design in recent years. Throughout this project, I was also exploring and experimenting with how to make learning process more interesting and enjoyable, how to improve user’s learning efficiency and how to apply new technologies properly to psychological educational website.

My approach

Wireframe Graph:

wire frame

Realization Principle of Parallax Scrolling

1

Character Design:

characters

Some screenshots:

My Position

Designed and developed the entire website.