Client
Our Better World

Role
UX Design
UI Design

Background
Our Better World unearths stories of people doing good in Asia, and we share them with a global community through our website and various social media channels.

Through these stories, we connect those doing good who could use mass support, storytellers who need their stories shared; and people who’d love to help but don’t know how to get involved.

portfolio-obw-1

Problem Statement
Our Better World aims to update their existing website to enable their community of users to easily take action (e.g. volunteer, donate, or support in other ways).

They want to make it convenient for users to support people or organisations doing good. They also hope to nurture a community of action takers through the updated website.

portfolio-obw-2

Research Methods

  • User Interviews
  • Usability Testing
  • Information Architecture
  • Analytics & Heatmaps

User Interviews
I wanted to understand our users’ perceptions towards volunteering or donating. To learn what drives them to take an action, and to find out their motivations and frustrations when they take an action. On top of the interviews, I conducted user testing to observe their pain points as they navigate the existing website.

Pain-points and needs
Location of activity
Users want to take into account how far a place or activity is, before deciding on a volunteering activity

Lack of connections
Users want to know who’s attending. If friends are attending as well, they would feel more motivated to go

Donation transparency
Users want to receive notifications that their donation have been received, and the impact of their contribution

Ease of getting information
Users want to have all the information on the activity so they can decide on whether to participate. They want to contact the organiser if they have questions.

The findings from the research allowed us to move into feature ideation and prioritisation.

portfolio-obw-3

In the previous design, users have to scroll to the middle of each story to view all available Actions. I wanted to make actions on a story more accessible.

I added an Actions sidebar to every story page. It lists the type of action and a short description of the activity, with a link to sign up as a volunteer or donate. For the mobile-view, I added an Actions tab. This allowed users to toggle between reading the story, and viewing the full list of actions for a story.

Based on user interview, I wanted to furnish each action with more information such as: time and date of the activity, location of the activity, users who have registered to volunteer. I hypothesized that displaying all of these information will encourage more users to sign up.

I included an Impact tab to display updates from the story subject. This will allow users to see how their donations have created impact, and encourage other users to donate too.

portfolio-obw-4
portfolio-obw-5