challenge

How can we redesign the website to boost engagement, simplify donations, and enhance OVD’s mission delivery?

process

Navigating the redesign journey

We started by aligning with stakeholders on the website’s goals. Benchmarking OVD’s site against top nonprofits revealed critical gaps. Leveraging competitive analysis and user research, we crafted prototypes to address these issues.

I guided the team through a flexible, feedback-driven approach, ensuring our designs were WIX-ready. This method allowed us to refine the user experience efficiently and meet project goals.

Process that the team used to achieve the objectives with efficiancy.

Competitive analysis

How did our platform compare to other non profits?

We compared OVD’s platform to top U.S. nonprofits, diving deep into the websites of leading charities. Using Forbes'list as a guide, we pinpointed areas where OVD could improve. This analysis revealed key opportunities to optimize the site for better donor engagement and increased contributions.

A comparison table outlining the strengths of the largest non-profit websites in contrast to OVD's website.

WIX did not support recurring donations for users.

WIX only allowed custom donation amounts, with no option for predefined buttons.

heuristic evaluation

Identifying usability flaws

We discovered that while OVD’s site shared some strengths with top competitors, its execution fell short. To address this, we conducted a thorough heuristic evaluation, identifying key usability issues that needed immediate attention.

[data-wf-bgvideo-fallback-img] { display: none; } @media (prefers-reduced-motion: reduce) { [data-wf-bgvideo-fallback-img] { position: absolute; z-index: -100; display: inline-block; height: 100%; width: 100%; object-fit: cover; } }

Screen capture of the old website, Sep 2023

1/7

Weak call-to-action

The hero section lacks impactful CTAs, leaving users uncertain about what to do next. Small article tiles further hinder engagement by reducing visibility.

No clear, compelling CTA in the hero section.

Tiny article tiles reducing engagement and visibility.

2/7

Disjointed information flow

The structure of the content feels disconnected. Sections are scattered without a clear rationale, making it hard for users to navigate or find what they’re looking for.

Sections are not logically structured—FAQ and volunteering sections are in between members' section.

Content placement appears random and lacks purpose—article placed adjacent to the members' bio.

3/7

Gaps in content

Significant gaps in content and excessive white space create an unfinished experience. Users are left without key information, which diminishes their confidence in the website.

Content is missing with excessive white space.

4/7

Inconsistent section breaks

Without consistent section breaks, the flow of information is interrupted. This inconsistency leaves users feeling disoriented as they scroll through the site.

Irregular section breaks disrupting content flow.

No clear separation between sections, leading to a fragmented experience.

5/7

Uneven page margins

Visual harmony is disrupted by inconsistent page margins. This lack of uniformity makes the site harder to read and affects its overall professionalism.

Irregular section breaks disrupting content flow.

The oversized logo dominates the page, taking up too much space and distorting the layout.

No clear separation between sections, leading to a fragmented experience.

6/7

Text heavy blocks

Dense text blocks overwhelm users, making information difficult to digest. The small font size exacerbates this problem, further straining readability.

Dense blocks of text without any visuals overloading users.

Small font size impairing readability and usability.

7/7

Limited payment flexibility

Relying solely on PayPal limits options and redirects users away from the OVD site, which disrupts the payment experience and may raise concerns about credibility.

Only PayPal as a payment option may reduce credibility.

Lack of multiple payment options disrupting the user journey.

Users are redirected away from the OVD site to PayPal, leading to potential drop-offs.

understanding the users

Who are the target users?

The OVD website served its purpose, but it wasn’t making a big splash. Through traffic analysis, we identified two key user groups: curious newcomers and loyal supporters.
Notably, 81% of visitors were first-timers. With this in mind, our focus shifted to prioritizing these new faces while still valuing our dedicated supporters.

Traffic analytics from WIX dashboard, where the website is hosted.

How do the new comers navigate our website?

With 82% of visitors being new and 73% using desktop, understanding their journey was crucial. We mapped out how these users moved through the site, from initial curiosity to becoming potential donors.

By focusing on their behavior—especially on desktop—we uncovered key opportunities to streamline their experience, making it easier for them to engage with OVD’s mission and take action.

This map tracks a new user's journey on the Opening Village Doors website

Concept map

What's our game plan?

Armed with insights and a clear donor journey, we crafted a focused strategy. Our goal was to create a user-centered site that aligned with OVD’s mission.

We prioritized transparency, streamlined donations, and enhanced engagement with compelling, interactive elements. This blueprint became our guide for transforming the site into a powerful tool for boosting contributions.

This Concept Map shows Opening Village Doors' website redesign game plan, broken down into four key goals.

Information Architecture

Laying the groundwork

Before we jumped into the nitty-gritty of visual design, we laid out a solid blueprint with our information architecture (IA). Think of this IA as the foundation we built upon, carefully arranging the content and features to meet the identified needs. It's the master plan that guided us in defining clear goals, ensuring every part of the website serves a purpose and leads users smoothly from A to B.

Here’s our site’s blueprint: a clean and easy-to-follow info architecture making information finding a breeze.

visual identity

What drives our Visual Design and Brand Identity?

A website's visual identity is like a handshake – it should be memorable yet seamless. In our website evaluation, we identified inconsistencies in branding: misaligned sections, uneven spacing, and a jumble of fonts. It felt like information was crammed in wherever it fit, rather than following a cohesive visual language.

Modern

A clean and contemporary aesthetic that reflects Opening Village Doors' forward-thinking.

Simple

Eliminate unnecessary clutter allowing users to complete tasks with ease.

Cohesive

Logical flow for the information, making it easy for visitors to find what they need.

Style guide

Crafting the visual language

This is a detailed playbook that outlines how we use color, typography, imagery, and other design elements to communicate the foundation’s brand and mission.

It’s not just about making things look pretty—it’s about creating a consistent and memorable experience that embodies the organization’s values and resonates with users.

Colour Palette

We chose a sleek charcoal and bright white for a trustworthy vibe, added greys for depth, and picked vibrant and warm oranges from the logo to highlight action areas and spark excitement. It's a clean, energetic look designed to inspire and motivate.

#2C2C2C

#616161

#969696

#CACACA

#F0572A

#FFA53D

#FFFFFF

Typography

We chose Poppins Semi Bold for headings because it’s bold and inviting, perfect for catching the eye. Questrial for paragraphs keeps the text readable and clean, ensuring the message is easy to follow. Together, they balance visual appeal with clear communication.

Heading
Poppins Semi Bold

Paragraph
Questrial

Call to action

Button Resting

Button Hover

Link Resting

Link Hover

Iconography

Images

We want to spotlight images of scholarship recipients, with their bright smiles and school uniforms, to vividly illustrate the impact of Opening Village Doors Foundation. These pictures tell a success story with each grin and highlight the joy that access to education brings. It's visual proof for site visitors that their support turns into real, life-changing education for these kids.

final design solution

1/8

Compelling landing page with clear CTA

The homepage needed to make a strong first impression, so we designed a clear landing page with CTAs, engaging visuals and interactions to reduce bounce rates.

[data-wf-bgvideo-fallback-img] { display: none; } @media (prefers-reduced-motion: reduce) { [data-wf-bgvideo-fallback-img] { position: absolute; z-index: -100; display: inline-block; height: 100%; width: 100%; object-fit: cover; } }

Prominent CTA buttons like “Donate Now” and “Learn More” for clear user guidance.

Captivating images and interactive elements to encourage exploration.

Focused on fast load speeds to reduce abandonment rates and improve user experience.

2/8

Showcase mission and values to build connection

We wanted to ensure visitors understood OVD’s mission and the positive impact they aim to create. The About page was designed with clear sections to effectively communicate these key messages and build a strong emotional connection with users.

Clear, distinct sections like “Our Mission” and “Our Vision” to communicate core values.

Informative, concise content to help users quickly understand OVD’s impact.

3/8

Demonstrate process and outcomes

Transparency about the donation process and clearly outlining how donations are used to achieve specific outcomes.

[data-wf-bgvideo-fallback-img] { display: none; } @media (prefers-reduced-motion: reduce) { [data-wf-bgvideo-fallback-img] { position: absolute; z-index: -100; display: inline-block; height: 100%; width: 100%; object-fit: cover; } }

Visual representation to make complex information easy to digest.

Clear explanation of how donations directly support students.

4/8

Highlighted beneficiaries and their testimonials

Shared the voices of beneficiaries and their Personal stories with powerful visuals, and data-driven metrics to build trust with donors.

By showcasing both qualitative and quantitative results, we emphasized the impact OVD is making.

Limited access to success stats, such as the total number of donations raised and number of donors.

No donor or volunteer testimonials were available to feature on the site.

Personal stories and testimonials from beneficiaries to humanize the cause.

Data-driven metrics—number of beneficiaries to showcase the tangible impact of donations.

5/8

Success stories and articles

Showcased real-life examples of how donations made a difference by putting them together in articles with testimonials of beneficiaries.

Articles featuring success stories and real-life examples of OVD’s impact.

Beneficiary testimonials embedded within the articles to personalize the stories.

Regular updates to the articles to keep the content fresh and relevant.

6/8

Continued engagement through newsletters

We crafted a banner allowing users to sign up for newsletters to stay connected with the foundation by receiving regular updates on the progress and impact.

7/8

Secure and user friendly donation checkout

Made the donation process simple and secure with a user-friendly interface. This will minimize frustration and encourage completion.

[data-wf-bgvideo-fallback-img] { display: none; } @media (prefers-reduced-motion: reduce) { [data-wf-bgvideo-fallback-img] { position: absolute; z-index: -100; display: inline-block; height: 100%; width: 100%; object-fit: cover; } }

Limited options for offering recurring donations to users due to platform constraints.

Integrated payment checkout, keeping users on the site without redirecting to external portals.

Simple and less steps to reduce friction during the donation process.

Secure payment options to build trust and ensure safe transactions.

8/8

Multiple payment options

Catered to donor preferences by offering a variety of in-built secure payment options.

WIX didn’t support adding Apple Pay, Venmo, or Google Pay on the current subscription plan.

Multiple secure payment options, including PayPal and various card options, to suit different donor preferences.

impact and outcomes

Measuring our MarkHere’s—the results.

We’re talking increased engagement, more donations, and tangible evidence that what we’ve created is doing more than just sitting pretty—it’s making a difference. So, let’s roll out the numbers.

The metrics showcased below reflect the website’s performance over a 3-month period following the launch of the new design.

10%

Avg. pages per session

The average number of pages people visit during a session

10%

Bounce rate

Visitors who left our site after only viewing one page

38%

Avg. session duration

The average amount of time people spent on our site

The metrics are sourced directly from the WIX analytics dashboard.

While these figures provide insight into user engagement, I do not have access to data on donation amounts, so I am unable to report on that aspect.

challenges

Navigating Roadblocks

The design process wasn’t without its hurdles. Each challenge required a mix of creative problem-solving and collaborative effort, turning obstacles into opportunities for growth.

The team did not always see eye to eye

I dove into some serious research, talked it out logically, and kept a positive attitude allowing to find common ground and make choices that everyone agreed with.

The stakeholders wanted the moon

We used MoSCoW, sorting features into 'Must have,' 'Should have,' 'Could have,' and 'Won't have.' It helped us focus on what really mattered and kept things realistic.

Limitations of the dev platform

We adapted our design recommendations to fit the platform's capabilities, finding alternative solutions that met our objectives within the given limitations.

whats next

While this website redesign marks a significant step forward for Opening Village Doors, my journey doesn't end here. As I continue to work on this project, I am committed to continuous improvement, ensuring the website remains a powerful tool for fundraising and fostering community. Here are some features we will be integrating in the next phase:

Targeted fundraising campaign posters

Donation tiers with preset amount

Recurring donations (monthly/quarterly)

Introduce additional payment methods

By implementing these features, we aim to empower donors, personalize their giving experience, and ultimately, maximize Opening Village Doors' ability to carry out its impactful mission.

Stay tuned for exciting updates as I continue to refine and optimize the website for an even greater positive impact!