UX AGENT

Live nonprofit platform Research · UX/UI · WordPress

Wilder had thousands of pages. People still needed one clear next step. I rebuilt the experience around what they came there to do.

The goal: Make Wilder easier to understand, so people could quickly find a service, explore its research, donate, volunteer, or reach the right person.

ThousandsPages organized around real tasks
2 systemsMain site + Research Library
End to endResearch through the live build
Need → information → action Wilder
Wilder website redesign showing the main nonprofit site and connected Research Library
Visitor questionWhere do I go for help, research, or a way to act?
Next stepFind a service, resource, person, or way to help

01 People

The old site asked people to understand Wilder before it helped them.

Wilder.org had become a maze: thousands of pages, heavy menus, dense copy, and several audiences fighting for the same space. The job was simple to say and hard to do: help people find services, research, and ways to get involved without first learning how Wilder was organized.

This was not a brochure site. A visitor might need mental-health support, help for a child, caregiver resources, a research report, a volunteer role, or a place to donate. They were not asking the same question. Some were on a phone and needed an answer now.

I led the work from research through launch. I talked with staff and users, studied traffic and heatmaps, and audited the content to see where people got lost. I presented the findings and redesign direction to stakeholders. Then I turned that work into a new site structure, wireframes, interface, WordPress system, mobile experience, and Research Library.

I stayed in the build, too. I handled the Drupal migration, custom WordPress work, Elementor and ACF components, search and filters, the Presto connection, XML imports, taxonomy cleanup, QA, and post-launch analytics. That mattered because a good plan can fall apart between the design file and the live site.

The question behind the redesign

Can someone find the right next step without understanding how Wilder is organized?

What I studied before changing the structure

The site was too large and too important to redesign by opinion. I needed to understand how staff explained the work, how visitors moved through it, what they missed, and what the team could maintain after launch.

Staff and user conversations

I listened for the questions people asked before they could act. That showed where Wilder’s internal language stopped matching the words a person looking for help would use.

Analytics and traffic paths

I studied where people entered, where they went next, where they left, what they searched for, which devices they used, and how they reached services, research, contact, volunteer, and donate pages.

Heatmaps and behavior review

I looked at where attention stopped, what people tried to click, how far they scrolled, and where the desktop layout became especially hard to use on a phone.

Content and maintenance audit

I mapped repeated content, outdated paths, naming conflicts, page types, editor needs, and what had to survive the migration. The goal was to save the useful content without dragging the old structure into the new site.

Four very different experiences had to work at once

I could not make one audience easier to serve by hiding everyone else. The site needed a shared system that helped each person recognize a path fast, then go as deep as they needed.

A person seeking services

They may be stressed, unsure what terms to use, and searching on a phone. The site has to show a useful path before asking them to be patient.

Needs to know: Where do I go, and what happens next?

A community partner or researcher

They need reports, authors, topics, evidence, and partnership information without fighting a separate database or guessing Wilder’s internal labels.

Needs to know: Can I find the right research and understand how it connects?

A donor, volunteer, or advocate

They need a clear picture of Wilder’s work and an obvious way to help. Giving and volunteering should feel connected to the mission, not buried in a utility menu.

Needs to know: Where can I help, and why does it matter?

A Wilder editor

They need safe, repeatable page patterns they can update without rebuilding layouts or bringing the old sprawl back.

Needs to know: Can I keep this current without breaking the system?

02 Structure

I rebuilt the site around first moves, not departments.

The old navigation showed people how Wilder was organized. The new site needed to show them what to do next. I used the research to turn a sprawling page tree into a smaller set of clear paths, then gave each path a consistent way to unfold.

01

What brings me here?

Find services, research, partnership information, ways to give, volunteer opportunities, or the story of Wilder.

02

Which path sounds like me?

Use clear, task-based labels instead of internal program names.

03

Can I understand it quickly?

Lead with plain language, a clear order, and enough context to choose.

04

Can I trust the next step?

Put stories, details, research, and expectations close to the decision.

05

What do I do now?

Find a service, request an appointment, read a report, contact Wilder, donate, or volunteer.

Principles that drove the reset

These rules helped us decide what to keep, combine, move, or remove. They also kept the same logic working on phones and inside the content system.

Start with the task

Navigation and page openings started with the visitor’s question. Wilder’s structure was still there, but people no longer had to decode it before they could move.

Give each page a job

A page could explain, route, reassure, or ask for action, but it could not do all four equally. One clear next step kept dense pages from becoming another menu.

Rebuild the mobile order

I did not shrink the desktop site. I rebuilt the navigation, section order, reading length, tap targets, and the distance between a need and the action that answered it.

Treat maintenance as UX

The public site would fall apart again if editors had to invent every page. Reusable templates, fields, content types, and guardrails were part of the UX.

Before the redesign

The site exposed its complexity.

  • The menus tried to show everything at once.
  • Services, research, giving, and organizational content fought for the same space.
  • Long pages buried important actions.
  • Separate systems made the Research Library feel detached from Wilder.org.
  • Desktop structure created long, fragile paths on phones.
Redesign direction

The site exposed useful choices.

  • A smaller set of task-based sections made the first choice easier.
  • Services, stories, research, impact, and ways to get involved used the same clear patterns.
  • Important actions sat closer to the need they answered.
  • The Research Library became a searchable part of the same experience.
  • Mobile pages were reordered for scanning, reach, and action.

A reset, not a reskin

The new look is easy to see. The bigger change sits underneath it: fewer competing paths, clearer page jobs, a more direct route to services, and a Research Library that feels like part of the same site.

Previous site Previous Wilder website with dense navigation and a separate research listing
Redesigned site Redesigned Wilder website with clearer first actions and an integrated Research Library

I used the old site as evidence, not as the blueprint. Wilder kept its depth. People just no longer had to face all of it at once.

Site structure Content system Mobile order Research Library

03 Build

The UX stayed connected because I carried it into code.

I did not stop at a Figma file. The content model, mobile order, components, migration rules, search states, editor controls, and QA all changed the final experience. I stayed responsible for them through launch.

01

Understand the real system

I brought interviews, analytics, heatmaps, content audits, platform limits, and stakeholder priorities into one clear picture before I proposed a new structure.

02

Build the content model

I defined the navigation, page types, fields, categories, and relationships so the site could grow without turning back into a maze.

03

Wireframe the first moves

I started with the visitor’s next question: Where do I go? What does Wilder offer? Can I trust this? What should I do now?

04

Design one reusable system

Service cards, stories, calls to action, research results, filters, type, spacing, and interaction states became one shared system.

05

Build and migrate

I built the WordPress theme and components, moved content out of Drupal, connected the research data, and cleaned up the cases no automatic import could handle.

06

Test the whole path

I tested the mobile experience, search, filters, content states, accessibility, links, forms, analytics, speed, and editor workflows before and after launch.

Wireframe logic

The wireframe made the decisions visible.

The original wireframes were working documents. For this case study, I rebuilt the main layout in the same clean style as the rest of the portfolio so the structure is easier to compare.

The logic is the important part: orient people, bring services and support forward, add human proof, focus the service choices, and end with a clear action. On mobile, I changed the order instead of simply stacking the desktop page.

The question was never “what section looks good next?” It was “what does this person need to decide next?”

The system behind the pages

The public site and the editor experience had to work together. I built reusable rules so Wilder could keep changing the content without losing the clarity of the redesign.

Task-based navigation

Clearer labels and page groups gave services, research, impact, advocacy, involvement, and organizational content a more predictable home.

Reusable page templates

Services, programs, stories, events, staff, and research used consistent patterns. Visitors could learn the system once instead of starting over on every page.

A content model that fit the work

WordPress was shaped around Wilder’s content instead of forcing everything into basic pages. Services, programs, news, events, staff, and research each had the structure they needed.

Safe tools for editors

Elementor widgets and ACF fields gave staff room to work inside clear patterns, so they did not have to rebuild layout decisions by hand.

SEO, performance, and accessibility

Clear headings, readable contrast, responsive images, faster pages, useful metadata, and crawlable content were built into the templates from the start.

Measurement and QA

Forms, key paths, search, mobile states, and post-launch analytics gave the team a practical way to find problems and keep improving.

Wilder website redesign showing the homepage and integrated Research Library

Design into code

The build was part of the design.

Because I designed and built the system, I could protect the page order while solving real implementation problems. The experience did not have to drift between the design file and launch.

  • Custom WordPress theme and front-end components
  • Elementor widgets and ACF field groups
  • Structured content types and taxonomies
  • Drupal migration and manual cleanup
  • Responsive QA, accessibility, SEO, and performance foundations

Mobile path

A person looking for help should not have to fight the desktop site on a phone.

The old hierarchy was hardest on a phone. I shortened openings, simplified navigation, increased tap space, moved task choices forward, and kept services, appointments, research, contact, and support within reach without turning the page into a wall of buttons.

  • Task choices moved closer to the top
  • Navigation collapsed around the highest-value paths
  • Headings and copy were shortened for smaller reading windows
  • Cards and calls to action were built for touch
  • Section order changed when the mobile path needed it
Wilder website displayed on desktop, tablet, and mobile devices

04 Research Library

The Research Library was a product inside the website.

The search box was the easy part to see. Under it sat an outside Presto database, more than 1,000 records, PDFs, dates, authors, topics, clients, studies, duplicates, and years of uneven metadata. All of it had to become reliable WordPress content without losing meaning.

The old library felt separate from Wilder.org. Someone could know exactly what kind of report they needed and still struggle to find it because the data lived somewhere else and the labels did not behave the same way.

I treated the library like its own product. I defined the search tasks, modeled the content, built the import, cleaned the data, designed the filters and result cards, handled empty and error states, and made every result lead somewhere useful.

The hard part was not the interface. It was turning years of research into one clear, searchable system for visitors and one maintainable content pipeline for Wilder.

01

Read the source

Presto and XML supplied the reports, files, dates, authors, topics, clients, and study links.

02

Filter public records

XPath rules brought in only records marked public. The import looked for the field name instead of trusting a numbered position that could change.

03

Normalize the data

Custom functions cleaned dates, filenames, PDF paths, author names, categories, and other uneven metadata.

04

Map the relationships

ACF fields, WordPress categories, studies, client organizations, topics, and files were connected to the right posts.

05

Make it searchable

AJAX search and filters turned the cleaned data into a usable library without reloading the whole page after every choice.

{PropertyValues/PropertyValue[@name="Public document"]/text()} = yes

One small example: the import used the field name, not a fragile numbered position, to include only records Wilder had marked public.

The hard work hidden behind a simple search

The import ran past record 1,000. At that scale, one bad mapping can become a site-wide problem. I built rules to update, reuse, clean, and connect data instead of treating migration like a one-time copy and paste.

Field and content mapping

Abstracts, report IDs, page counts, descriptions, excerpts, dates, social images, PDFs, study links, and other fields were mapped into one consistent research model.

Date and file normalization

I fixed date and timezone issues, cleaned PDF paths, created or reused attachments, and made sure the visible date and downloadable file matched the source.

Duplicate and update protection

Unique keys let the system find and update an existing report instead of making a second copy. Duplicate categories were found and reused.

Authors and taxonomy cleanup

Author names, overlapping topics, client organizations, project types, subtopics, and other terms had to be cleaned before anyone could trust the filters.

Study relationships

Reports were linked to related studies and shared details, so visitors could move from one publication to the larger body of work behind it.

Staged API activation

I built and tested the Presto connection during development, then waited to turn on the automatic pull until the full site was stable. Live sync did not need to complicate unfinished templates.

A research system that felt like Wilder.org

People could search by keyword, narrow by topic or author, scan useful details, and open a report without being sent into a separate system.

Wilder Research Library with keyword search, topic and author filters, research cards, and report detail content

The interface felt simple because the data work underneath it was not. Good search depended on a clear content model, clean imports, consistent details, and reliable links between records.

Presto API XML + XPath WordPress + ACF AJAX search
The hard part was not the search box. It was making years of research behave like one product.

The visible result was a cleaner library. Behind it sat content structure, data cleanup, report relationships, files, imports, filters, error states, and a carefully staged connection between two systems.

05 Results

The first 30 days showed which paths people were actually using.

I compared GA4 data from July 7 through August 5, 2025, with the 30 days before it. The biggest signal was not one site-wide number. It was growth on the exact paths the redesign had brought forward: services, research, volunteering, donating, contact, and mobile use.

+26%

16,416 page views

Home

The new homepage recorded 3,435 more views than the previous 30 days.

+365%

8,710 page views

Mental Health Services

One of Wilder’s most important service paths received far more traffic.

+238%

2,476 page views

Research Library

The new library landing page received more than three times the traffic of the previous period.

+28.5%

4.8K active users

Mobile

Mobile active users rose after the responsive redesign. Tablet use rose 52.9%.

The paths closest to action moved too.

Page growth cannot prove that one design choice caused every change. It does show that people were reaching the service, support, research, and contact paths the redesign brought closer to the surface.

+1,174% Volunteer page views reached 3,312.
+235% Donate page views reached 734.
+317% Contact Us page views reached 1,798.
+25% Referral sessions reached 1,696.
+707% Tracked visits to Get Involved reached 5.5K.
+199% The main Services landing page reached 2,985 views.

Source: GA4 page-path, channel, engagement, and device comparisons for the first 30 days after launch versus the previous 30 days. Percentages are rounded for display.

What the results told me

I treated the first month as a behavior check, not a victory lap. The numbers showed which parts of the redesign were gaining traction and which still needed better tracking or another pass.

01

Service findability improved

Large gains on mental health, childcare, supportive housing, aging, and the main Services page showed that people were reaching content that had been buried before.

02

Research became part of the main site

Growth on the Research Library and Wilder Research pages showed that the connected experience was being found as part of the main site, not only as a separate tool.

03

Mobile deserved its own decisions

More mobile and tablet users supported the choice to rebuild the smaller-screen path instead of treating responsive work as last-minute formatting.

04

Measurement still needed context

A launch changes URLs, campaigns, search visibility, and behavior at the same time. I used the numbers as strong signals, not proof of a single cause, and focused the next round of tracking on completed actions.

Clearer service paths

People could start with the help they were looking for instead of navigating Wilder’s internal structure.

A usable Research Library

Structured data, filters, result cards, report pages, and PDFs became one searchable experience inside Wilder.org.

A maintainable system

Templates, content types, ACF fields, Elementor components, and import rules gave staff a safer, faster way to keep the site current.

A measurable foundation

Post-launch analytics made the redesign testable and gave the team a better next list than another round of opinions.

My contribution

What I actually did on Wilder

This was a full UX, content, platform, and integration project. I connected research, design, development, migration, structured data, and measurement so the public site and the system behind it worked as one experience.

Stakeholder and user interviews
UX analysis and stakeholder presentation
Analytics, traffic paths, and heatmaps
Content inventory and governance audit
Information architecture and navigation
User journeys and task flows
Figma wireframes and interface design
Responsive and mobile-first design
UX writing and content restructuring
Custom WordPress theme and front-end build
Elementor widgets and ACF field groups
Custom post types and taxonomies
Drupal migration and content cleanup
Presto API connection and staged activation
XML, XPath, WP All Import, and custom PHP
AJAX Research Library search and filters
SEO, accessibility, performance, QA, and analytics
The work in one sentence

I did not just move Wilder from Drupal to WordPress. I rebuilt how people found help, research, and a reason to act.

The finished site connected a clearer public experience to a system Wilder could maintain behind it. This was far more than a visual redesign. I tied interviews, analytics, site structure, mobile behavior, content modeling, migration, API and XML work, front-end development, and post-launch measurement to one practical question: what does this person need next?