ui/ux,
website redesign

2024
ui/ux principles
web optimisation
rapid prototyping
user research
user testing

overview

In this UI/UX Project, we were given 6 weeks to redesign a single user's flow, with focus on improving user engagement and experience.

Focusing on the Volunteers' user flow, I improved the flow and speed of volunteer sign-ups, restructured the information architecture and included other new features.

Landing page of a redesigned Willing Hearts' website.

Hero section

challenge

I discovered several key problems with the website during user interviews and testing.

Willing Hearts’ website had poorly defined user flows, which stemmed from poor filtering of information, along with unclear copywriting.

Information architecture was messy and disorganised. Poor quality images used led to confusion and distrust on the users’ end.

Example of poor copywriting in Willing Hearts's current website.

Poor copywriting along with poor chunking of information.

process

i) user research

User interviews and testing of Willing Hearts’ current website were conducted at each key stage of the project.

The transcripts and data gathered were then grouped to find common, recurring themes and problems that users face. Insights and hypotheses were then synthesised to solve the problems in a direct, effective manner.

Proper, user-backed research was the spine of this project.

User interview transcripts.

Some transcripts of one of the user interviews and testing sessions.

User interview's synthesis of insights and hypotheses.

Grouping quotes from different interviewees. Synthesising insights and hypotheses.

ii) wireframing

Lo-fi B&W wireframes were then designed in direct response to the recurring problems that users faced. These wireframes were then brought to a second round of user testing for initial validation before I moved to a hi-fi prototype.

Constant testing and iterating were key success factors in this project.

B&W wireframes of prototypes.

All B&W wireframes.

A wireframe created during the process of redesigning Willing Hearts website.

An example of a B&W wireframe for initial validation.

outcome

After several iterations, I developed a high-fidelity, clickable prototype of the website that has greatly enhanced user experience and engagement.

Focus was placed on clear, defined user flows, effective chunking of information and clear copywriting. Volunteers' sign-up process was also streamlined.

Below are some snippets of the project.

Upcoming Events page of Willing Hearts' redesigned website.

Clear display of information. "Slots Left" feature promotes faster sign-ups.

Sign-up page of Willing Hearts' redesigned website.

Straight-forward sign-up process, no registration of account required.

Thank you and sign-up confirmation page of Willing Heart's redesigned website.

Confirmation page.

This picture shows a page clearly showing the roles and responsibilities of a Kitchen Volunteer in Willing Hearts.

Clearer chunking of information for increased readability.

hello,

want to try the clickable prototype?

contact me