Transforming Website for Usability

The Handicaps Welfare Association (HWA) is a non-profit organisation that aims to improve the lives of people with disabilities in Singapore. The current website is outdated, difficult to navigate and not accessible to people with disabilities. The goal of this project is to create a mobile-responsive and accessible website that will serve the needs of its users, particularly those with disabilities.

- Improve the user experience by creating a clear and intuitive navigation structure. - Provide clear and concise information about HWA's services and how to access them. - Create a visually appealing website that conveys HWA's brand identity - Include resources and support for caregivers, such as information about respite care and support groups. - Encourage users to get involved with HWA through donations, volunteering, or spreading the word about their services.

The website contains important pages that are vital for visitors, but they were previously difficult to locate. For example, the Member's Corner, which includes information on all upcoming events and workshops for members, was not easily accessible. The button to access the Member's Corner was not located near the membership or event page, and could only be found on the homepage in an obscure and arbitrary location. Additionally, the Online Donation feature was hidden and required several clicks to access from the homepage. This important call-to-action button should be prominently placed in the navigation bar for easy access.

As team, I took the intiative and conducted an investigation of the initial site. I extracted relevant information and captured it in the form of screenshots. (shown before) After organizing the screenshots, I identified potential areas for improvement, which could be further developed to enhance the overall performance of the site.

We made a site visit to the facility in Jurong Point, and spoke to stakeholder in contact and the therapists. It gave valuable insight as to the rehab services, and a better idea of the types of clients they work with.

There are scans of their 50th Anniversary Booklet that provided their awards, testimonials which in particular are heart-warming and encouraging and could be shared online.

Since we don’t have access to content inventory, we had to start from scratch. We simplified the process by removing the columns for author, owner, or source as this information was not available. After that, we recorded the name, URL, subject, and intended primary users of each page.

As part of a competitive and comparative analysis, we reviewed other websites and discussed ways to improve specific pages and their content. Our suggestions and comments are documented in the rightmost column of the picture.

After creating the recommended content inventory and factoring in our business goals, we made adjustments based on our personas' needs and goals. We recorded these changes in the rightmost column of the picture.

We highlighted the boxes representing pages that the team will focus more on improving, as these are crucial for serving our primary and secondary personas (Donors and Caregivers).

I reviewed their initial website, analyzing the content of each page and identifying the objectives they aimed to communicate. I organized my findings in an Excel spreadsheet and developed a strategy to streamline the information by merging pages and creating a more concise flow for the content presentation.

As a team, we worked together to prototype. But my contribution was to link components, ensure design hygiene, troubleshoot animation, maintain consistency, and propose creative presentation methods.

(above) Phone Mockups

We also designed the mobile website to provide a visual representation of its functionality and user experience.

66.6% of the users enjoy the look of the site, and say that it portrays professionalism and warmth.



They also shared that they feel more inclined to participate in events or make a donation.

Recommendations: To continue to keep a more personable and warm aesthetic and tone to the website.

Quick links have a hover effect to show that these are clickable.

 100% of the. users did not immediately realise they can click on them.

Recommendations: Add a button to make for a clearer call-to-action.

**Users were able to recognise these as links, speeding up the time to find them by 50%.

Recommendations: Design the page to move down to the next section, guiding the, through the steps, and making the process more seamless.

Recommendations: Design the page to move down to the next section, guiding the, through the steps, and making the process more seamless.

Users were able to complete making a donation faster with lesser hesitation between sections.

The term “Select Dates” seemed ambiguous to some. Users take a while to find the function.

Recommendations: Change it to “Filter Dates” to make it more apparent this helps them to filter events by date.

**Users found the filter faster by about 4 seconds.

Streamline the system by designing a user-friendly interface that allows users to indicate their interest, share, and confirm their participation in activities. This will help create awareness and encourage sign-ups.

Simplifying the donation page and reducing cognitive load. We can achieve this by breaking down the steps into progressive pages and providing clear guidance for donors.

Keep track of the progress of fundraisers by creating a system that reflects the participation numbers of events and the money raised. This will help the organisation track progress and keep interested parties updated.