Website Redesign for
Handicaps Welfare Association (HWA)

Landing Page . Branding . Personas . Ideation . User Flows . Wireframes . Content Strategy . Card Sorting. Prototyping . UX Writing . Usability Testing
Project Overview
The Handicaps Welfare Association (HWA) in Singapore, was looking to redesign their website. We had to understand their key users and pain-points, and propose a website to engage and improve the experience of the community that uses the website.
The Proposal
A warm, engaging, and professional website that inspires trust and confidence, improve ease of finding and filtering information, and highlight the enduring community spirit of HWA. The proposal also aimed at clear, simple, and logical segregation of information.
Role
UX Designer & Reseach Lead
Duration
5 months, June 2023
Client
Ray of Hope
Tools
Figma, FigJam, Notion, Miro
Starting with the basics.

Who, what and why.

User Interviews . Affinity Mapping . User Insights . Problem Statements

We started with interviews to gain insights on both the organisation's and their community's needs. This encompassed social workers, therapists, caregivers, and people who worked in HWA or similar organisations. We used this to identify key insights, pain points, and needs. From these we worked out a strategy, defined the brand, and it’s target audience.

The consolidated findings from research went on to form a primary and secondary user personas. All of these guided our decisions while working on this project.

Affinity Mapping & Personas

Defining Key Insights

Affinity mapping information gleaned from interviews led us to several insights. Here are the more prominent ones which we believe would be more impactful into solving some important needs and pain points.

Through the interviews, we also discovered that the clients are not the main users. We saw that the main users tend towards two personas -the donors and caregivers.

From the personas, we identified the different problem statements, and then asked some How Might We (HMW) questions. These helped us in our ideation for solutions.

Information Architecture & Content Strategy

Information Architecture

We performed card sorting by grouping pages under categories to better organise them and also renamed some of the pages for better understanding.

Content Inventory

Using the NN Group template, we created a content inventory to audit the current website's content.

Competitive and comparative analysis of the websites of similar organisations was also conducted, contributing to the decisions made here.

User Flows & Wireframes

Defining User Flow

Based on Donna's and Cara's needs as donor and caregiver respectively, we worked out 3 different user flows.

They focus on making a donation, checking for services, and looking up events.

Wireframing

Low-fi sketches were made based on content strategy and information architecture done earlier. From there, improved mid-fi digital wireframes were created, forming the framework.

UX Writing

The approach was to convey important or necessary information in a clear and concise way, while maintaining a professional and warm tone, building rapport with users with empathetic storytelling where appropriate.

Text was kept shorter, and breathing spaces introduced. Interactive components are used to engage.

Content was structured for quicker understanding in a visually appealing way. Eg, Dial-A-Ride rates are presented in a table format for quick comprehension.

Usability Testing

We conducted formal user testing using clear and quantifiable metrics for the two iterations leading up to the final presented prototype. Questions were mostly focused on key functions and critical points in the user flow, aimed at addressing identified pain points. The testing protocol included both task-specific instructions as well as a metric for overall task completion, with a threshold of 10 minutes and a maximum allowable error rate of 4.

Some key findings and changes are reflected in the 4 slides below.

Prototypes

Donor's User Flow - Desktop

Seen here, are interactions added to engage the user. Different groups of information have been sectioned with breathing spaces incorporated between. Here, you are walked through how a donor might read about HWA's mission and the people they help. They are able to quickly navigate to the donation page through dedicated quick-links. And finally, a donation page that is moves down to the next section once a selection is made to lessen cognitive load, speed up the process, making it easier for the user.

Website Pages - Mobile

Seen here, are interactions added to engage the user. Different groups of information have been sectioned with breathing spaces incorporated between. Here, you are walked through how a donor might read about HWA's mission and the people they help. They are able to quickly navigate to the donation page through dedicated quick-links. And finally, a donation page that is moves down to the next section once a selection is made to lessen cognitive load, speed up the process, making it easier for the user.