WillingHearts
-min.png)
Redesigned landing page.
2023, ui/ux, user research, user testing, web optimisation, rapid prototyping
In this UI/UX Project, we were given 6 weeks to redesign a single user's flow, focusing on improving user engagement and experience.
Focusing on the Volunteers' user flow, I improved flow, speed and ease of volunteer sign-ups, restructured the information architecture.
Focusing on the Volunteers' user flow, I improved flow, speed and ease of volunteer sign-ups, restructured the information architecture.
outcome
hi-fi, clickable prototype
I developed a high-fidelity, clickable prototype with enhanced user experience and engagement, focusing on clear user flows, effective information chunking, and precise copywriting. The volunteer sign-up process was also streamlined.
clearer, faster onboarding process
"Slots Left" feature was introduced, to signal high demand and foster a sense of shared experience, encouraging faster sign-ups.
A clearer and more straightforward sign-up was implemented by removing mandatory account registration, which was unnecessary for volunteering with Willing Hearts.
A clearer and more straightforward sign-up was implemented by removing mandatory account registration, which was unnecessary for volunteering with Willing Hearts.
"Slots Left" helps to promote faster sign-ups.
Only 3 fields to fill up to sign up for event.
Unique link specific to each event, sent via email.
restructured information architecture
The information architecture was restructured to prioritise sign-ups and volunteer information. The original layout featured blogs, commemorative books, and empty links on the landing page, which were not ideal.
"Get Involved" right at the landing page.
2nd call-to-action at bottom of the landing page.
other pages
To effectively engage and convey information to users, information, images and visual representations were carefully considered throughout the website.
.png)
Only relevant FAQs to the page are displayed.
.png)
Clear headers and instructions.
closing thoughts
All in all, this first-time experience with UI/UX gave me a good glimpse into what it is all about and ignited my strong passion for it.
process
website audit
Through auditing the website, I found 3 key issues. Firstly, the website's information architecture is unorganised, with key information not being prioritised. There were lots of information being dumped onto the user at once with no consideration of their needs.
Secondly, the copywriting is misleading and unclear. For example, "* where help is needed most" was to indicate which time slots required the most help. However, all 3 time slots were starred.
Thirdly, the information is not chunked effectively, leading to inefficient and ineffective navigation and absorption of information, contributing to high website abandonment rates.
Secondly, the copywriting is misleading and unclear. For example, "* where help is needed most" was to indicate which time slots required the most help. However, all 3 time slots were starred.
Thirdly, the information is not chunked effectively, leading to inefficient and ineffective navigation and absorption of information, contributing to high website abandonment rates.
How a regular page in the website looks like.
user research
User interviews and testing of Willing Hearts’ current website were conducted at each key stage of the project, forming the foundation of the project.
By grouping transcripts and research data, recurring themes and problems were identified into meaningful categories. Insights and hypotheses were then synthesised to create direct and effective solutions.
Multiple rounds of affinity mapping were carried out to truly get to the root cause of the issues. Many "Whys" and "So Whats" were asked to further refine and finalise my insights.
By grouping transcripts and research data, recurring themes and problems were identified into meaningful categories. Insights and hypotheses were then synthesised to create direct and effective solutions.
Multiple rounds of affinity mapping were carried out to truly get to the root cause of the issues. Many "Whys" and "So Whats" were asked to further refine and finalise my insights.
A transcript from user research.
Insights from grouped themes and problems.
wireframing
Lo-fi black-and-white wireframes were created to address recurring user pain points and validated through a second round of user testing. Colours and aesthetics were not considered at this stage to focus purely on functionality and structure first. Iterative testing was critical to the success of this project.
Initial Lo-fi B&W wireframes.
Mid-fi wireframes.