Case Study

Redesign & WordPress Migration

Website Management Team Leader
Website & Graphic Design Coordinator

Delaware Nature Society, 2018

Website Graphics - firstread bg dark
Website Graphic of DelNature Website Migration to WordPress Platform

Contributions

Established the need to migrate from the iMIS RiSE CMS. Led the team to select a Design Agency. Oversaw move to the more customizable, open source WordPress CMS and to cloud-based hosting.

Contributions

Project Management, Design Agency Selection, eCommerce UX/UI Strategy, UX Research & Testing, Migration Strategy, Copy Writing/Editing, Admin Staff Training

Deliverables

Redesigned website on WordPress platform, integrated with eCommerce, and optimized for UX, SEO, Social Media, and Readability.

Adobe Photoshop
Adobe Indesign

Client

Delaware Nature Society (DelNature) logo

Delaware Nature Society (DelNature) is a 59-year-old nonprofit organization whose mission is to connect people with the natural world to improve our environment through education, conservation, and advocacy. They envision a healthy and sustainable environment for all. DelNature is a state affiliate for the National Wildlife Federation. They provide the tools for communities to take action and promote the health of the environment through land preservation, wildlife protection, and watershed stewardship.


Audience

DelNature’s 4 locations across the state exist in high-income and low-income areas with diverse populations. These locations include varying accessibility offerings. Many offer free programming options and access for visitors. They are undergoing an effort to grow their audience to welcome more Millennials and underserved populations

Environmentally-focused Outdoorsy
Parents and Retirees
Teachers and Scout Leaders

  • Active families
  • Group leaders and school teachers
  • Under-served populations
  • Seniors, teens, singles & couples interested in outdoor activity and community-building
  • Based in Delaware, Eastern Maryland, and Southeastern Pennsylvania

Challenge

Overview

DelNature’s website existed on the iMIS RiSE CMS which was integrated with their iMIS Database Management System. Their online storefront for Program Registration was also handled by iMIS. Hosting was in-house with emergency backups of website brought home daily by a staff member so they wouldn’t be in the same building. iMIS RiSE was a non-custom solution that allowed few editing and interactive capabilities.

Plan and Considerations

2-phase Plan

Phase 1: Migrate Main Website from iMIS to WordPress CMS

Move main website from iMIS to get website onto new host before looming cloud move deadline. Redesign of Architecture, UI, Content, and more. Updated UI of iMIS store page for better UX.

Phase 2a: Find New Database Management System

Concurrent with Phase 1, Phase 2 began search for new iMIS replacement. Would need to be a Database Management System with accompanying storefront.

Phase 2b: Set Up Store and Integrate with Main Website

Once the Database Management System was selected, we would set up a new store that would integrate with new website with an improved UI.

Deadline

Deadline Feb 1

Summer camp launches Feb 1 every year, with heavy website use and great income impact. Goal to have migration, redesign, and store integration completed by this deadline.

Goals for Migration and Redesign

Improve User Experience for Visitors

  • Needed to be responsive so optimized for major devices and viewports
  • Allow customization of templates to accommodate user needs
  • Ability to add interactive elements such as carousels, social media, and custom Google Maps
  • Organize wide array of services so that easy for user to find
  • Must balance visitor desires against DelNature mission and financial goals

Accommodate Wide Array of Services

DelNature offers:

  • Many different types of services varying, in part, by population: groups, individuals, schools, businesses, and more
  • Multiple locations statewide with varying amounts of ownership and different audiences
  • They educate on many different topics

Profitability & Flexibility

  • The open-source nature of WordPress reduced time finding workarounds
  • WordPress accompanies a larger pool of high-quality programming personnel to choose from.
  • The increased flexibility of WordPress allowed for greater UX optimization

Increase Security & Redundancy of Host

Advocated to upgrade hosting from in-house to a trusted website host for:

  • Host redundancy
  • Security
  • Other industry standards

Allow Staff to Update Website

  • Desire for an easy-to-use WYSIWYG option
  • Assure 10-20 staff members could update pages and forms without knowing HTML

Uphold Timeline

Meet Feb 1 deadline in time for Summer Camp surge.


Process

Overview

Managed the redesign, working closely with Yikes’ project manager and designers and DelNature’s Website Management Team.

DelNature Redesign and Move of CMS to WordPress

Advocated for Customizable CMS and Redundant Hosting

Established Clarity on Need

  • Spoke to directors, managers, and staff in support of the need to move to a more versatile, customizable CMS and a more secure, redundant hosting solution than in-house. Positioned WordPress and professional hosting as optimal solution.
  • Why WordPress? After over a decade working at Design Agencies designing websites, where I had sampled many CMS options. WordPress fit DelNature’s price, customization, and ethical needs.

Sought Plan Proposal Buy-in

  • Proposed a 2-phase plan for separating iMIS store and main website before leaving iMIS. This would allow DelNature to complete its new website without worry of complications when it came time to move to a new Database Management System.
  • Researched and provided, for both phases:
    • Full project plan
    • Projected financial costs
    • Staff time commitment
    • Timelines

Website Design Agency Search

Overview

Lead team in finding, reviewing, and choosing a website design company.

  • Interviewed several trusted professional Website Software Engineers.
  • Searched online for ethically-focused website design companies in alignment with DelNature’s mission. Read through their offerings, portfolios, case studies, social media postings, and “About Us” sections.
  • The WordPress-friendly finalists came out to be WebDev, Yikes Inc., and Trolley Web.

Choosing a Design Agency

WebDev

Attractive Offerings & Experience

  • Quality website design
  • User story creation and other UX offerings

Takeaways

Data-driven decision-making is instrumental to effective, efficient, and profitable website designs. For this reason the UX offerings gave WebDev an advantage.

Trolly Web

Attractive Offerings & Experience

  • Quality website design
  • They lead the nearby successful Save the Valley effort which saved a local natural area from development

Takeaways

Their use of website, social media, and events was powerful. This could be a benefit to DelNature not just in the website redesign but in future efforts – especially Delaware-based.

Yikes

Attractive Offerings & Experience

  • Quality website design
  • Ethics: LEED certified, minority- and LGBTQ- focused
  • Personal knowledge of their skill-sets and quality having previously served as one of their Project Managers and Website Designer

Takeaways

Their mix of experience with WordPress, quality, and ethics was an advantage.

The Decision

Leaned heavily toward Yikes.

Deciding Factors
Ethical alignment, skill, quality of work, and lower price.

Considerations
I would take on UX Interviews, UX Testing, and parts of UX Strategy not included.

UX Research – Performed Phase 1 & 2

Challenge

Simplifying Varied Services for Statewide Impact

  • Vast array of services:
    • Advocacy efforts
    • Conservation efforts
    • Programs for a variety of ages, groups, schools, and businesses
  • Multiple locations statewide
  • Educational information on a wide variety of topics: various types of wildlife, gardening, land conservation, clean water, and more

Service Multiple Audiences
Balance external user’s needs with organization’s needs and the individual departments’ needs

Nonprofit Financial Considerations
Tight financial needs of organization

Tools Recommended

Considering these challenges, I recommended the tools listed in the “Tools Used” section, along with:

  • Card Sort
  • Mixed-method Personas
  • Robust In-person Interviews

Considerations
These last 3 were not approved by management. Was allowed to do In-person Interviews, User Testing, Proto Personas, and external Card Sort only on my own time. Directors opted to perform Card Sort only with staff stakeholders.

Tools Used

UX
Strategy
User
Surveys
In-person Interviews
Competitive
Audits
Internal
Card Sort
Website
Analytics
Usability
Testing
Proto-
personas
Usability Testing & Interviews

Elements Tested
Information architecture, UI, interactive design, and visual design before, during, and after the website redesign. 

Testing Process
Watched volunteers navigate website, given variety of tasks. Invited them to share thoughts as they went. Pain points were noted and improved.

Volunteer Selection
Approximately 20 people interviewed and user tested. Included a variety of ages, genders, racial and sexual identities, neurodiversities. Some familiar with DelNature, others not.

Leveling Up
A larger population and recorded interviews were recommended as an upgrade for further data.

Analytics Reviewed

Analytics were reviewed for clarity on top-performing blog posts and website pages. This was a starting point for considering Website Architecture.

Leveling Up

This may only show which pages were easiest to find. To uncover the most wanted or sought pages, surveys and card sort was recommended as an upgrade.

Internal Card Sort

An Internal Card Sort was performed with Yikes and Marketing/Development team. Then performed again with DelNature leadership.

Leveling Up
This card sort being internal meant it wouldn’t necessarily reflect the realities of external users. External User Card Sorts were recommended as an upgrade.

Proto-personas

Personas were created and used to inform some decision making.

Leveling Up
Fuller Proto-personas were recommended as an upgrade. They help integrate the custormer POV throughout strategic plans. This protects against decision-making based heavily on staff responsibilities and professional perspectives.

Leveling Up

Tools that would help increase the user experience:

Further Recommended Tools

These tools would give fuller idea of the real needs of a diverse audience and those with the outside perspective.

Robust Recorded Interviews
Proto-personas
User Groups
User Card Sort
Scenarios
Surveys
User Tree Testing

Implementing UX Data

In the years following the redesign launch, continued to perform and analyze website. Used the above UX tools to guide website upgrades.

Results of the above testing communicated with teams. Improvements made to User Interface, Interactive Design, and Copy.

Redesign Phase 1:
Migrate Main Website from iMIS to WordPress

Step 1: Creation of New Website

Worked together with Yikes and DelNature’s Website Management Team to:

  • Created a new, more UX optimized UI
  • Decided look/feel aligned with brand
  • Used internal Card Sort to create navigation and architecture
  • Implemented UX tools listed above to further refine navigation and user flows
  • Worked together to create templates and specialized pages

DelNature New Website
DelNature Redesign of Temporary Store

Step 2: Redesign Temporary Storefront Still on iMIS for Better UX and Redesign Alignment

Using User Research tools mentioned above, created and implemented UI upgrades within iMIS for better UX

  • architecture
  • user flow
  • visual design of main store to match WordPress

This store would continue to perform the functions of membership status management, program registration, and donations until Phase 2.

Worked closely with a RiSE programmer to improve user experience using creative solutions to the CMS’s limited abilities.

Step 3: Content Migration

Position: Leader of the Content Migration Team

Overview

Collected old and new content and worked with a group of staff to enter it into the new website.

Ensured simple, smooth, and inclusive readability experience by optimizing:
  • ADA Compliance
  • Search Engine Optimization
  • User Interface
  • Page Layout and Content Organization Utilizing Cards and Other Easy-to-digest Elements
  • Copy-editing
  • Readability Further Improved Through Use of Yoast SEO Plugin Tools
Team Members Trained
  • WYSIWYG Training to Hasten Migration and Help Update Website
  • Yoast SEO Plugin Training to Assure High-level SEO, Social Media Performance, and Inclusive Readability
DelNature's Redesigned Coverdale Farm Website Page

Step 4: Website Launch

Oversaw successful launch of separate main and store websites. Website launched in time for Summer Camp and worked as hoped.

Made sure to lead preparation meetings, provide food day of, and give appreciation to the team and staff.

Redesign Phase 2:
New Store and Database Management System

Overview

After launch of Phase 1, served on DelNature team tasked with choosing new Database Management System to replace iMIS. Worked with Database Manager and Yikes to integrate new storefront.

Advocated for Improved Storefront UI/UX

DelNature leadership ultimately chose Blackbaud Altru for its fundraising-related database capabilities. Made team aware that it was less user-friendly from a website UX, UI standpoint than the iMIS storefront.

Storefront Integration & UX Opimization

Altru Storefront Integration with Yikes Plugin

Alongside DelNature’s Database Manager and Yikes, lead integration of Altru’s storefront capabilities with WordPress.

Yikes happily had a customizable Altru-ready Activities Calendar plugin which we used. The plugin allowed the Activities Calendar to live within the main website.

This was a priority to increase stickiness. It also created a more enjoyable, efficient, and simplified experience for the user as they selected and registered for activities.

Worked with Yikes to tweak to fit our specific needs.

Usability Improvements to Align Needs with Data Management System

Within Altru’s store backend, designed and added a template that matched the new website as much as possible. Innovated with team on creative design and coding solutions to usability challenges presented by the Altru end solution.

Contributed Wireframes and UI Strategy and Design. Performed UX Research and User Testing for new storefront.

Ongoing UX

Going forward, continued UX Testing and worked with Yikes and Altru to update Activities Calendar to fit UI needs.

DelNature Redesign and Move of CMS to WordPress

The Solution

The customizability of the WordPress website and redundant professional hosting was a groundbreaking change. It allowed for the below deliverables.

Increased Search Engine Performance

Increased SEO and a more organized, professional search engine display.

Improved UX

User Interface and User Experience is more attractive, pleasurable, user-friendly, interactive, and responsive for staff and external users.

An Independent CMS

CMS now stays consistent regardless of Database Management System changes.

Staff-friendly Management

Empowered non-technical staff members to contribute and manage site content.

Simplified Article Handling

WordPress blog capabilities allowed for the organization and easy posting/editing of DelNature’s publications, blog, job postings, and other needs that required consistent layout and elements.

Multiple Environments & Version Control

Separate Production and Development environments backed by Git version control allowed iteration on both technical features and content without interrupting the Production site.

Plugin Access

Access to plugins for pressing new needs and backups should they be required. Programming them ourselves recommended whenever possible to avoid conflicts.

Dynamic User-focused Capabilities

Ability to add and change templates to fulfill varied and evolving UX needs.

A special thank you to Ryan Leeson (WordPress Staff Engineer at Kanopi) for volunteering to review choices and share his technical knowledge to support DelNature throughout this process.


Retrospective

Presentation UX

Strengthen communication of the importance of UX to stakeholders.

Utilize tools like User Journeys and Experience Maps to increase the excitement of the UX presentation.

Note: I am currently studying Presentation UX. The results and takeaways are being pulled together for a report for my blog.

Interview Enhancements

Use UX knowledge gained since this project to:

  • Assure unframed questioning
  • Reduce interviewer bias
  • Use data to help include more low-income and disabled populations

Add New Technologies

Set the CMS up with more Reusable Blocks and Synced Patterns.

Stronger use of Cards, Accordions, Block pages, and other current technologies. Note: Have been adding these recently.

These elements improve UX for the external users as well as staff admin users.

Administration Tool Buy-in

Build a more robust training to increase staff buy-in for the site administration tooling, including:

  • After launch, plan to iterate on administration tool UX
  • Utilize updated administration tool usability features

Support Wider Audiences

Make greater use of inclusive elements such as:

  • Multilingual and High-contrast toggles
  • Hamburger navs for mobile to assure larger CTAs for larger fingertips

Christi Leeson circle biopic

Want to work together?
I’d love to hear from you!