WordPress Website Migration

Project Overview

As a freelance designer and front-end developer, I was hired by the non-profit organization Animal Rights to lead the redesign and front-end development of their website. The new site needed to serve multiple goals: enabling donations to the non-profit, newsletter sign-ups, volunteer registrations, daily news updates, and event promotion. With over 2000 pages of content to migrate, the project demanded both strategic design decisions and technical problem-solving.

The Challenge

The old client website was deteriorating because the development company responsible had stopped updating the platform. Another agency was briefly hired, but their solution was essentially a rigid template system. Despite promises of automated page migration, it quickly became clear that all 2000 pages would have to be moved manually. Critical features such as newsletter sign-ups and integrated donation flows, which enable supporters to contribute directly to the non-profit, were also missing.

Recognizing that continuing this approach would not solve the organization’s needs, I advised the client to discontinue that project and search for a better solution. This pivot allowed me to redesign the website from the ground up rather than patching a system that could never meet the requirements.

Research & Planning

I worked with Animal Rights to define clear priorities for the new platform:

• Scalability to support thousands of pages and future campaigns.
• Donor-focused UX with frictionless donation and newsletter flows.
• Flexibility to support multiple content types (news, petitions, calendar).
• Ease of use for internal editors who would update content daily.

After evaluating options, WordPress was chosen as the CMS for its balance of flexibility, extensibility, and familiarity. I took ownership of the design and user experience, ensuring the platform aligned with the organization’s mission and stakeholder needs.

Design & Development

I designed the new website in Figma, creating prototypes that visualized key workflows such as donations, volunteer sign-ups, and newsletter subscriptions. These prototypes allowed me to test and refine user journeys at a small scale before implementation.

When one of the front-end developers originally assigned to the project became unavailable, I carried out the majority of the front-end development myself. My contributions included:

• Writing custom JavaScript and CSS to go beyond plugin limitations.
• Creating and configuring custom plugins to implement unique workflows.
• Optimizing WordPress templates for performance and accessibility.

I also collaborated with the back-end developer to solve one of the project's biggest technical challenges: migrating 2000+ pages from the old website. Together, we translated the legacy data dump into an editable SQL file, then converted it into XML for WordPress import. This enabled a successful automated migration, saving weeks of manual labor and ensuring content integrity.

The Solution

• Donation workflows streamlined into just a few steps, reducing friction. To increase completion, I introduced pop-up donation forms that appear within the user's current flow rather than redirecting them away, which testing showed reduced abandonment.
• Newsletter and volunteer sign-ups with clear entry points and confirmations. Similar to donations, I used pop-ups for newsletter sign-ups to keep users in their flow and improve task completion.
• Dynamic news section updated daily by the team.
• Events calendar given higher prominence compared to the old site, since attendance at protests, info stands, and other events is crucial to the organization’s mission. This repositioning makes event discovery more visible and impactful.
• Consistent UI aligned with the organization's identity.

Example flow: Donation (Old vs New)

The images below illustrate the difference between the old donation flow and the new streamlined flow.

Old site

Old site — Step 1: The user starts from the homepage link to donate.

New site

New site — Step 1: Homepage with a prominent donation call-to-action.

Results

Explore the interactive prototype: Open in Figma

Impact

• Efficiency: Migrated 2000+ pages automatically through a custom-built data pipeline.
• Engagement: Designed donation and sign-up workflows tested for clarity and ease of use.
• Collaboration: Acted as translator between developers and the client, ensuring technical solutions served organizational goals.
• Ownership: Took the lead in both design and implementation, proving adaptable across UX, UI, and development roles.

The site is now live at www.animalrightsinternational.uk and entering its final testing phase before official launch.

Key Learnings

• The importance of recognizing sunk costs and advising clients toward better long-term solutions.
• How custom development within WordPress can extend its capabilities beyond off-the-shelf plugins.
• The value of combining UX research, stakeholder priorities, and hands-on technical work to deliver impactful results.

As my first major client project under my freelance company, this experience taught me autonomy, responsibility, and the ability to take ownership across design and development tasks.

This project highlights my ability to bridge design and development, guide clients through complex challenges, and deliver solutions that are both user-centered and technically robust.