HandsOn

Web Redesign

x UI Design

Task

The task is to redesign the user interface of the website, including making changes on the site structure, the content and the visual representation.

My Role

Being working as a sole designer, I was responsible for visual design, interaction design and information architecture of this project.

Client

HandsOn Chengdu, a non-profit organisation, was incorporated after Wenchuan earthquake (2008) as a volunteer center. As for disaster relief, it has been established by members from HandsOn Shanghai affiliate based on previous experiences of global HandsOn network. One year later, the name changed to “HandsOn Chengdu” after making a decision of establishing a new affiliate program in
Chengdu.

HandsOn manages and coordinates a wide range of volunteer programs for different types of volunteers. It promotes its services and tries to invite more volunteers to engages with different local service projects.

Organisation structure

Target users

Main Challenges

Facing three types of users

- The general public

- Existing volunteers (indivisual volunteering, student volunteering, corporate volunteering)

- People or organisation in trouble

The general public persona

Existing volunteer Persona

People or organisation in trouble Persona

Current Website

a) Function:

Increase public awareness;
Making this local NGO look more professional when applying for donations, volunteers, etc.
A communication channel, easy to engage with volunteer individuals and partners;

b) Pros:

A variety of information is provided and could be downloaded
Website is provided with both English and Chinese versions
The location of this organisation is listed on the bottom of the website (footer)
It contains a segment of the upcoming events
A few images are provided on this website
The logo is clearly presented on the website

c) Cons:

Disorganized and overloaded information could distract audiences easily and confused them what you do
Two languages are mixed, which has a negative impact on the readability
The proportion of the text is quite big for most pages
All images on the website are confusing. The reason is that these images do not contain any descriptions
Less image is involved in this website, which could make users get bored or lose interests easily
Many website pages are blank and not containing any information (eg. programs)

Site map

Concepts development

Initial concept

Concept 1

Rubber band

Concept 2

Chinese checker

Concept 3

Bridge

Hold things together
Making a connection
Flexible & elastic
Simple but necessary
Strengthen unity and relationship

Co-operation & assist each other in order to reach everyone’s goal
- Board: a platform
- Chess pieces: various volunteering
-Dot or holes on the board: difficulties or presenting that people who needs help

Span physical obstacles
make the connection
Based on various purposes, the structure and shape of bridges could be different
Promote exchanges and cooperation