Scattered research → one library
Wilder
Visitor questionWhere do I go for help, research, or a way to act?
Next stepFind a service, resource, person, or way to help
Live nonprofit platform
UX/UI · Drupal migration · WordPress development
I moved Wilder from Drupal to WordPress.And rebuilt its Research Library.
Wilder’s research was scattered, and its website made information hard to find. I redesigned and redeveloped the public site, migrated its Drupal content, and built a searchable Research Library with the data structure and custom code behind it.
My role in the rebuild. User journeys, design, migration, and development.
What I did
I interviewed staff and users, reviewed behavior, and designed the user journeys, Figma wireframes, layouts, and components. I built the responsive WordPress site in HTML, CSS, JavaScript, and custom PHP, and connected the Research Library through XML, XPath, ACF, and API work.
ThousandsPages organized around real tasks
2 systemsMain site + Research Library
End to endResearch through the live build
01 People
Wilder had the information. Finding it was the problem.
Heavy menus and dense copy made thousands of pages hard to navigate. Research felt separate from the main site. I needed to change how people found information, not just move the same problems to WordPress.
I redesigned and redeveloped the public website, migrated it from Drupal to WordPress, and rebuilt the Research Library. My scope included the interface, content system, templates, and search.
I started with staff and user interviews, analytics, heatmaps, and a content audit. I used that work to map visitor needs, present the direction to stakeholders, and guide the design through migration and launch.
The question behind the redesign
Can people find their next step without learning how Wilder is organized?
Research
I checked where the paths broke down.
I compared visitor behavior with staff knowledge and the content audit. That connected problems in the public pages to the content and maintenance work behind them.
Questions did not match the labels.
I compared the questions people asked with Wilder’s internal language to find where the two stopped matching.
I followed the page paths.
I reviewed entry points, next pages, exits, searches, devices, and paths to services, research, contact, volunteering, and giving.
I checked clicks and scroll depth.
I reviewed click attempts, scroll depth, and where attention stopped, including friction on phones.
I mapped the content before moving it.
I mapped repeated content, outdated paths, naming conflicts, page types, and editor needs before migration.
Who I spoke with
People shaped the rebuild.
I spoke with stakeholders, staff, and users to understand what they needed from the website.
-
Stakeholders
Goals + prioritiesWilder’s goals, priorities, and what needed to be on the site.
-
Wilder staff
Questions + contentCommon questions, internal language, and the content the team maintained.
-
Website users
Tasks + expectationsWhat people needed to find and where the path became unclear.
I connected the findings
I turned those needs into site decisions.
I compared those needs with analytics, heatmaps, and the content audit, then shaped the site around the findings.
- Navigation
- Service paths
- Research Library
- Page templates
People
Different visitors needed different starting points.
Someone seeking help, someone finding a report, and someone offering support were not making the same journey. Editors also needed a way to maintain those paths.
A person seeking services
They may be stressed, unsure of the terminology, and searching on a phone. The next step needs to be clear.
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 navigating a separate database.
Needs to know: Can I find the right research and understand how it connects?
A donor, volunteer, or advocate
They need to understand Wilder’s work and find a direct way to give, volunteer, or advocate.
Needs to know: Where can I help, and why does it matter?
A Wilder editor
They need repeatable page patterns they can update without rebuilding layouts or restoring the old sprawl.
Needs to know: Can I keep this current without breaking the system?
02 Design
I mapped the journey from a question to a next step.
I organized navigation around finding help, research, or a way to get involved. I mapped the questions along each path, then designed the Figma wireframes, visual system, page layouts, and responsive components.
01
What brings me here?
Services, research, partnerships, giving, volunteering, or Wilder’s story.
02
Which path sounds like me?
Choose a task-based label, not an internal program name.
03
Can I understand it quickly?
Plain language and a clear reading order.
04
Can I trust the next step?
Stories, research, details, and expectations near the decision.
05
What do I do now?
Find help, request an appointment, read, contact, give, or volunteer.
Wireframe logic
Each page had to move the visitor forward.
I used Figma wireframes to decide what came first, what context followed, and where someone could act. This representative wireframe is rebuilt for the case study, not an original working file.
I brought services and support forward, placed stories and focused choices after them, and gave the page a clear final action. On mobile, I reconsidered that order rather than shrinking the desktop layout.
The design question: what does this person need to decide next?
Human proof
Action
I carried that journey into the interface.
Navigation labels set the direction. Typography, spacing, cards, and actions carried it through services, stories, research, and ways to get involved.
Start with the task
Navigation and page openings answered the visitor’s question before explaining Wilder’s structure.
Design a clear page hierarchy
I used typography, spacing, cards, and primary actions to give each page a clear reading order and next step.
Rebuild the mobile order
I changed navigation, section order, reading length, and tap targets for phones.
Make the patterns reusable
I designed shared templates, cards, story blocks, research results, and action patterns. Structured fields let editors update the content without rebuilding the layout.
Before the rebuild · Homepage scroll map
Fewer visitors reached the content below.
The desktop scroll map shows less reach farther down the old homepage. In the redesign, I brought service and support choices forward.
Pre-rebuild capture only. Post-launch heatmaps are not included.
Desktop homepage · before the rebuildCropped preview. Open the full capture to inspect.
View full captureVisitors had to sort through the organization.
- Menus tried to show everything.
- Services, research, and giving competed for space.
- Long pages buried actions.
- The Research Library felt separate.
- Desktop structure made mobile paths harder.
I gave visitors a task they could recognize.
- Task-based sections simplified the first choice.
- Shared patterns connected services, stories, research, and impact.
- Actions sat beside the need they answered.
- Research became searchable within Wilder.org.
- Mobile order supported scanning and action.
The structure changed with the screens.
The redesign brought services forward, clarified each page’s role, and connected the Research Library to the main site.
I kept Wilder’s depth while changing how people found their way through it.
Mobile path
On a phone, the first choices moved forward.
I designed the smaller-screen layouts separately: shorter openings, simpler navigation, more room to tap, and service and support choices earlier in the page.
- Task choices nearer the top
- Navigation focused on key paths
- Shorter headings and copy
- Cards and actions built for touch
- Section order changed for mobile
03 Build
I rebuilt the site in WordPress and migrated the Drupal content.
I defined page types, fields, categories, and relationships before migration. Then I built the WordPress theme, responsive components, and custom PHP functions, moved the Drupal content, and cleaned it for the new structure.
The new layouts needed a new content system.
I connected the layouts to structured content and reusable behavior. The site had to work for visitors and for the staff updating it.
HTML + CSS
I built the layouts in HTML and CSS.
I built the page structure and responsive styles for my layouts, including headings, spacing, cards, images, and actions at different screen sizes.
Shared components carried the design.
I turned the interface patterns into reusable components and templates across services, programs, stories, events, staff, and research.
WordPress + PHP
Custom PHP connected the content.
I connected templates, custom post types, taxonomies, and ACF fields. Custom PHP functions also handled research-data cleanup and mapping.
Editors could update the content in place.
I built Elementor widgets and ACF field groups so staff could update content inside the layouts I designed.
JavaScript + QA
Search results updated without a reload.
I connected library search and filters to result updates without a full-page reload, and checked the empty and error states.
I tested beyond the default screen.
I tested responsive layouts, headings, contrast, images, forms, links, and search. I also handled metadata, performance work, and analytics checks.
See the six steps behind the migration and build
01
Model the content
I used the research and content audit to define page types, fields, categories, and relationships before migration.
02
Build HTML and CSS components
I translated the layouts into reusable markup and responsive CSS for cards, stories, navigation, and calls to action.
03
Connect JavaScript behavior
I connected interactive controls, search selections, filters, and result updates, then checked their states in the browser.
04
Write WordPress functions
I used custom PHP and WordPress functions to connect templates, content types, taxonomies, ACF fields, and data cleanup.
05
Move Drupal content into the new model
I built the theme, moved Drupal content, connected research data, and handled manual cleanup.
06
Test the whole path
I checked mobile, search, filters, states, accessibility, links, forms, analytics, speed, and editor workflows.
Design into code
I carried the design through to the working site.
I built the pages I designed, connected them to WordPress content and custom functions, and checked the migrated content in those layouts. The Research Library also needed its own search and data work.
- HTML, CSS, and JavaScript components
- Custom PHP, WordPress functions, and theme templates
- Elementor widgets and ACF field groups
- Content types, taxonomies, and Drupal migration
- Responsive QA, accessibility, SEO, and performance work
04 Research Library
I turned scattered research into one searchable library.
Presto held more than 1,000 records with PDFs, authors, dates, topics, clients, and studies. I redesigned and developed the library in WordPress, turning that uneven data into one searchable experience.
I designed the path from a keyword or filter to a result, a report page, and a PDF. Result cards, related details, and empty and error states kept that journey within Wilder.org.
I modeled, imported, and cleaned the records. Custom PHP connected fields and relationships. JavaScript and AJAX updated search results without a full-page reload.
Read the source records
Presto and XML supplied reports, files, dates, authors, topics, clients, and study links.
Select public records
XPath selected public records by field name, not a position that could change.
Clean the data
Custom functions cleaned dates, filenames, PDF paths, authors, categories, and metadata.
Connect the records
ACF fields, categories, studies, client organizations, topics, and files linked to the right posts.
Build search and filters
AJAX search and filters updated results without a full-page reload.
{PropertyValues/PropertyValue[@name="Public document"]/text()} = yes
This field-name check selected only records marked public, rather than relying on a numbered position.
See the import and data rules
The next import had to update, not duplicate.
The import ran past record 1,000. I built rules for updates, cleanup, and relationships so later imports could update existing reports without duplicating them or spreading mapping errors.
Each field needed a place.
Abstracts, report IDs, page counts, descriptions, excerpts, dates, social images, PDFs, and study links mapped into one model.
Dates and files had to match the source.
I fixed dates, timezones, and PDF paths, created or reused attachments, and checked each date and file against the source.
Existing reports needed updates, not copies.
Unique keys updated existing reports instead of copying them. The import reused categories too.
Useful filters needed consistent terms.
I cleaned authors, overlapping topics, client organizations, project types, subtopics, and other terms for reliable filters.
Reports needed their study connections.
Reports linked to related studies and shared details so visitors could explore the wider body of work.
The automatic pull came after stability.
I tested the Presto connection during development and waited until the site was stable to activate the automatic pull.
Search, open a report, reach the PDF.
I connected keyword search, topic and author filters, report details, and PDF access within the same library.
Useful search depended on clean imports, consistent metadata, and reliable record relationships.
Enlarge imageI had to connect the research behind the search box.
A useful result depended on the right metadata, related study, report details, and file. I built those relationships alongside the interface, with clean imports and a staged connection to Presto.
05 Results
Research Library page views rose 238% in the first 30 days.
I compared GA4 data from July 7 through August 5, 2025, with the previous 30 days. Service and support pages also recorded more views, and mobile use increased. These are post-launch comparisons, not proof of a single cause.
+26%
16,416 page viewsHome
The new homepage recorded 3,435 more views than the previous 30 days.
+365%
8,710 page viewsMental Health Services
One of Wilder’s most important service paths received far more traffic.
+238%
2,476 page viewsResearch Library
The new library landing page received more than three times the traffic of the previous period.
+28.5%
4.8K active usersMobile
Mobile active users rose after the responsive redesign. Tablet use rose 52.9%.
Views also rose on service and support pages.
Views increased on volunteering, giving, contact, and Services. Those visits show people reaching the pages. Completed donations, inquiries, and requests for help need separate tracking.
+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.
How I read the results
The first month showed where to look next.
I used the first month to review behavior and identify the next tracking questions.
01
Service pages received more views.
Gains on mental health, childcare, supportive housing, aging, and Services showed visits reaching formerly buried content.
02
The library was being reached within Wilder.org.
Research Library and Wilder Research pages recorded growth. That showed page activity, separate from whether someone found the right report.
03
Mobile use grew after launch.
Mobile and tablet use increased. I used that signal to keep examining the smaller-screen paths.
04
Completed actions remained the next tracking question.
URLs, campaigns, search visibility, and behavior change together at launch. I treated these as signals, not proof of a single cause, and prioritized tracking completed actions.
Clearer service paths
Visitors could start with the help they needed, not Wilder’s internal structure.
A usable Research Library
Data, filters, result cards, report pages, and PDFs formed one searchable experience.
A maintainable system
Templates, content types, fields, components, and import rules supported ongoing updates.
A measurable foundation
Post-launch analytics showed where to investigate and what to track next.
My full contribution
My contribution
I worked on the journey and the system behind it.
I carried the public site and Research Library from user journeys and Figma layouts through WordPress development, Drupal migration, data integration, and post-launch review.
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
Navigation labels and content restructuring
HTML, CSS, and JavaScript components
Elementor widgets and ACF field groups
WordPress functions, custom post types, and taxonomies
Drupal migration and content cleanup
Presto API connection and staged activation
XML, XPath, WP All Import, and custom PHP functions
AJAX Research Library search and filters
SEO, accessibility, performance, QA, and analytics
The work in one sentence
I delivered a rebuilt website and a working Research Library.
I connected a redesigned public website with the WordPress content system and research pipeline behind it. The work covered user journeys, interface design, Drupal migration, custom development, and launch.