PROJECT
CONTEXT
During an internship, I worked together with a client, Lovewell Foundation (LF), to recreate a website that is direct and seamless for their audience. LF is a non-profit dedicated to empowering female survivors of domestic violence, Addiction & Sex Trafficking
The new website aims to provide clear and intuitive navigation for these women who are seeking guidance on independence and career development. Additionally, clarity for the organisation's potential supporters were key to facilitate donations.
ROLE
Lead UI/UX Designer, Copywriter
TOOLS
Figma, Oncord
DURATION
March - May 2024 (3 Weeks)
SKILLS
Research Analysis
User Experience
Wire-framing
Web Design
CURRENT WEBSITE
The Scroll. Never. Ends.
At first glance, the simplest solution is to just dump all the information onto a standard template. But this approach overlooks the critical need for accessibility and thoughtful information placement. This isn’t just any website; it must be a tailored space for female victims, providing a clear, supportive path to the resources they need.
MAIN ISSUES
1
Confusing Navigation
2
Endless Scroll/ Lack of Structure
3
Content Repetition
4
Lack of visual Cues
5
Unclear CTA
6
Poor Directions to Donate
Screen Recording of old/ current site of Lovewell Foundation
PROCESS
Simplifying navigation and organising information logically.
The project began with an in-depth research and discovery phase, where I analysed the existing website’s structure and identified key pain points, particularly focusing on the difficulty domestic violence survivors faced when trying to find information quickly and safely.
RESEARCH & DISCOVERY
Many organisations prioritised donation prompts over clear navigation, hindering survivors from quickly finding the help they need.
During our research, we analyzed three local DV survivor websites that offered resources for survivors. While navigation was somewhat improved compared to others, the sites still relied heavily on text, with few visual cues to guide users quickly.
Open Haven Landing Page, prominent features: introduction video & donate button
White Ribbon Au Need Help? page, prominent features: clear CTA in large text
The most prominent elements were often donation buttons, which aren’t ideal for individuals seeking help. Our challenge was to create a design that was immediate, clear, and supportive of survivors' needs.
Although donations are also a significant priority for the Lovewell Foundation, we aimed to find a balance that would accommodate the needs of DV victims while still highlighting ways to support the organisation.
Friends With Dignity landing page prominent features: Donate button & large CTA words
USER FINDINGS
a. DV survivors often spend only seconds evaluating online resources, which can lead to feelings of overwhelm and indecision
Searching for help can be pretty stressful and overwhelming. There's information everywhere and sometimes they could barely process all the information from different sites. Every site says something different and it just made deciding difficult
- A summary of observations made by a staff members from Lovewell F.
b. Visitors looking to donate reach out via phone or email for more information due to a lack of trust in the website
We often receive calls and emails from potential donors asking for more information. Usually, they want reassurance and many prefer to speak with someone directly before deciding.
- Founding member for Lovewell F.
DESIGN
REQUIREMENTS
Meeting Organisational Goals While Prioritising Survivor Needs
The design requirements focused on meeting the dual needs of the Lovewell Foundation: making donations more accessible, while also creating a platform with strong content architecture. The challenge was to enhance the donation experience without overshadowing the core mission of supporting domestic violence victims.
screen grab of current site's 'what we do' section
Visual observations: removing chunks of text and simplifying the information was the key priority to ensure a concise and understandable recourse hub.
synthesising insights, organisation's priorities from meetings & user findings
DESIGN REQUIREMENTS
Boost Donations Visibility
The donation section was poorly positioned, requiring users to scroll far down the page to find it, making it unclear and easy to miss. The donation feature had to be more prominent and accessible to encourage more support from sponsors and donors.
Be a Hub for Survivors
LF aimed to be a trusted avenue and central hub for survivors seeking help. They wanted the website to serve as a comprehensive resource centre where women could access information and guidance to rebuild their lives.
Easy Programme Sign-Up
It was essential to provide clear pathways for survivors to enrol in the right programmes. With three programmes designed for different stages of their journey, it was crucial that users could easily identify and sign up for the appropriate program
So,
how might we design a clear and intuitive navigation system that allows users to access critical information without confusion?
IDEATION
Uniform Layouts vs A Traffic Light System for Programs
We initially considered a uniform layout for each program, ensuring the information was structured similarly to build familiarity for users. While this approach improved familiarity, it fell short in enabling quick recognition and differentiation between the programs, especially for users in crisis who need to find the right support quickly.
Wireframe of Redesigned Programs Section
To address this, we explored a more intuitive solution: a traffic light system that categorises the three programs using colour-coded themes—red, orange, and green—representing different stages of recovery: Reset, Rebuild, and Reconnect. This approach not only categorised information visually but also intuitively communicated the intensity and focus of each program, making it easier for users to identify which program best suited their current needs.
FIGMA PROTOTYPE
Designing a Clear and Intuitive Navigation System To Minimise Confusion
One key change was renaming the main navigation labels for immediate recognition. Instead of the generic “Programs,” we introduced a more direct call to action with “Need Help?” This immediately signals to users that they can find support resources under this section.
To elaborate, within “Need Help?”, we categorised the three key programs as “Reset,” “Rebuild,” and “Reconnect,” rather than using program names that might be unclear . This intuitive, stage-based labelling helps users quickly identify which program aligns with their current needs, making the information instantly recognisable and actionable.
Overview of site wireframe on figma
THE
SOLUTION
This is the Solution
Just click "Edit Text" or double click here to change the text and make it your own. You can also adjust the paragraph's font, size and color so it fits your website’s theme.
THE
SOLUTION
Reconnect Program Page, with a lighter blue to indicate a more peaceful tone
A Monochromatic Traffic Light System As The Solution
Dark blue represented the initial, most urgent phase (Reset), Neutral blue indicated a transitional stage (Rebuild), and lighter blue signified a more stabilised phase (Reconnect). This visual cue system helped users resonate with the colours at a glance, while also maintaining the organisation's branding colours.
To combat the overwhelming information, we prioritised concise content with shorter headings and a strong visual hierarchy, facilitating easier page scanning. Complex details were aided with recognisable icons, making the information more digestible.
Home Page
Minimising Words and Using Visual Cues
We prioritised visual communication by incorporating icons, website cards, and buttons, making information easier to absorb at a glance. This approach helps users quickly identify key details without needing to read through dense text, especially those who may feel overwhelmed.
For example, we paired program features and volunteer opportunities with intuitive icons that visually represent the information, like a heart symbol for support or a clock for time commitment.
These visual cues guide users through the site, reducing cognitive load and enhancing information retention. By strategically minimising words and leaning into a visual hierarchy, we created a more accessible and engaging experience that allows users to navigate the site effortlessly.
REFLECTIONS
Limitations, Challenges & Learning Points
Using Oncord, a drag-and-drop platform intended to simplify website development, ultimately limited our ability to customise the site. Its constraints made it challenging to tailor the design to the specific needs of our primary users.
Gathering genuine user feedback was another challenge, as the sensitive nature of our audience meant that many survivors needed to conceal their identities for safety reasons. We relied on input from Lovewell staff and team members, which provided insights but didn’t fully capture the lived experiences of those we aimed to support.
Balancing security with usability emerged as a critical learning point. While the quick
exit button was intended to enhance user safety, its limitations revealed gaps in protection, emphasising the need for more robust measures like disabling back navigation or providing clearer guidance on safety features. Striking this balance is essential to creating a site that feels both safe and easy to navigate.
A Continuous Journey of Refinement
Designing for vulnerable users goes beyond technical requirements; it’s about understanding their emotional journey. Each challenge highlighted the need for empathy, adaptability, and continuous improvement. As I refine my approach, I'm reminded that the ultimate goal is to create a digital space that truly serves and protects those who need it most.