New Vision Organization
Case study
1. Mission & Initial Problem
The New Vision Organization asked me to modernise their existing website and ensure it worked seamlessly on desktop, laptop and mobile. On initial discovery calls with organisational representatives, I learned that the site’s structure and content no longer reflected their mission or scale, and it failed to display properly on smaller screens.
My goal was to craft a responsive, user‑centred site that better represented the organisation and made it easier for people to learn about its advocacy work.
Because design thinking starts with empathy, I began by listening closely to internal stakeholders to understand their goals. However, I recognise that truly empathising means hearing from actual site visitors, and due to time and access constraints I could not conduct user interviews - a gap I plan to address in future iterations.
Industry:
Non‑profit social‑justice/advocacy
Company:
New Vision Organization
Role: Sole product designer - led user research, journey mapping, UX/UI design, prototyping, responsive development and QA
Type: Non‑profit advocacy website redesign (responsive, multi‑platform)
Timeline: 3 months
Tools: Figma, Google Forms (for client discovery), HTML/CSS/JavaScript fundamentals, Squarespace (for implementation)
A look at the final mobile, Desktop and Tablet versions
Desktop version (Made using Squarespace)
2. Problem Statement
New Vision’s outdated website hindered engagement and credibility.
Content was buried, navigation was inconsistent across devices, and the lack of a mobile‑friendly layout meant many potential supporters abandoned the site.
The organisation needed a refreshed, accessible interface that communicated its mission and converted visitors into volunteers, donors and partners.
Although discussions with organisation leaders clarified internal priorities, I did not validate these problems with end‑users; this is noted as a limitation, since skipping research risks missing valuable insights and can lead to suboptimal products
Previous version of the site
3. Research plan & insights
To ground the redesign, I held multiple calls with leadership to gather requirements, learn about their programs and understand pain points.
We prioritised responsive design, clearer information hierarchy and stronger calls‑to‑action. I also reviewed analytics data (provided by the organisation) to identify drop‑off pages and common visitor paths. The research literature I reviewed emphasises that user research provides “vital user data” and reduces the risk of designing based on assumptions.
Because we had no access to actual site users at this stage, I treated the insights from internal stakeholders as provisional. This underscored the need to plan user interviews and usability testing after launch, aligning with best practices that call for generative research at the outset and evaluative research throughout
4. Vision
Informed by stakeholder insights and design‑thinking principles, my vision was to create a responsive, modern site that conveyed New Vision’s compassion and urgency while making key actions (learn, volunteer, donate) obvious on every device.
The site needed to feel professional, welcoming and activist without overwhelming visitors.
I aimed for a clean layout, simple navigation and flexible content blocks so the organisation could maintain it without development expertise.
Following design‑thinking guidance, the vision centred on the user: the site should serve people seeking information on advocacy, volunteering or partnership, not just satisfy internal preferences
5. Opportunity
The research highlighted a clear opportunity: by reorganising content, simplifying navigation and embracing responsive design, New Vision could reach more people and build trust.
A consistent mobile experience would open the door to younger supporters, while improved calls‑to‑action could convert casual visitors into advocates or donors.
The organisation also saw potential in adding volunteer, donate and partner‑with‑us pages tailored to different audiences, creating a funnel for deeper engagement. Such improvements align with user‑research advice that user‑centred design can reduce development rework and minimise usability issues down the line
6. Ideation, prototyping & testing
The Process:
Drawing on design‑thinking methods, I explored multiple layouts on paper, sketching variations for hero sections, calls‑to‑action and responsive grids.
I selected a promising structure and built a low‑fidelity wireframe in Figma, iterating based on stakeholder feedback.
As fidelity increased, I refined the hierarchy, typography and colour scheme, then constructed a high‑fidelity mock‑up.
Although I didn’t run formal usability tests, internal reviews served as informal tests, revealing small issues (e.g., button placement and form labels) that I corrected.
Throughout, I embraced the design‑thinking mindset of iterating quickly and treating feedback as an opportunity to improve.
Final prototypes were then rebuilt in Squarespace, where I adjusted layouts for mobile, tablet and desktop breakpoints, translating design decisions into a functioning site.
Sketch and Ideation
Sitemap (Created on Figma)
Colour Palette and Typography (Created on Figma)
Sketch, User flow & Protoype
Sitemap sketch
User flow (a small section of it)
Midefi Wireframe (a small section of it)
HIfi Mockup (Small section)
7. Solution
The final site features a responsive hero section with clear mission messaging and primary calls‑to‑action (Volunteer, Donate, Partner), an updated navigation bar, and dedicated pages for each programme area.
A clean colour palette and imagery reinforce the organisation’s compassionate, activist tone.
The site is built in Squarespace using modular sections to ensure content is easy to update. Forms are streamlined and accessible on all devices, and calls‑to‑action remain visible without intrusive pop‑ups.
This solution meets the project goals by providing a consistent, compelling experience across devices and offering clear paths for visitors to support the cause.
8. Impact & Metrics
Because this version of the site only recently launched, formal impact data is limited. Early indicators include positive feedback from staff and volunteers about the streamlined content and mobile usability.
After launch, we plan to track metrics such as bounce rate, time on page, conversion rates for volunteer sign‑ups and donations, and device usage patterns.
These metrics will help determine whether the responsive redesign improves engagement.
Best practices from user‑research literature remind us that user research and usability testing can reduce rework and development time; capturing these metrics will validate those benefits.
9. Reflection & Next Steps
While the redesigned site addresses many structural and accessibility issues, my biggest learning is the importance of including end‑users early. Without interviewing actual site visitors, we risked prioritising internal assumptions over real needs.
For the next iteration, I plan to conduct moderated usability tests with volunteers, donors and potential partners, using both desktop and mobile devices. I will also incorporate surveys or brief intercept interviews to gather qualitative feedback.
These insights will inform refinements to content, navigation and calls‑to‑action. Additionally, I would like to test alternative layouts or micro‑interactions (e.g., A/B testing donation button styles) to see how small changes affect conversion
10. Credits & Constraints
I served as the sole designer and developer for this project, responsible for research, ideation, prototyping and implementation.
Stakeholder interviews were conducted with the organisation’s leadership team, who provided valuable insights and feedback.
Technical constraints included working within Squarespace’s template structure and limited budget for external tools.
Time constraints meant that comprehensive user research and testing were deferred until after launch.
These limitations are acknowledged, and plans are in place to address them in future cycles.
