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.
Hero section
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.
Poor copywriting along with poor chunking of information.
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.
Some transcripts of one of the user interviews and testing sessions.
Grouping quotes from different interviewees. Synthesising insights and hypotheses.
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.
All B&W wireframes.
An example of a B&W wireframe for initial validation.
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.
Clear display of information. "Slots Left" feature promotes faster sign-ups.
Straight-forward sign-up process, no registration of account required.
Confirmation page.
Clearer chunking of information for increased readability.