Redesign & WordPress Migration
Website Management Team Leader
Website & Graphic Design Coordinator
Delaware Nature Society, 2018
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.
Project Management, Design Agency Selection, eCommerce UX/UI Strategy, UX Research & Testing, Migration Strategy, Copy Writing/Editing, Admin Staff Training
Redesigned website on WordPress platform, integrated with eCommerce, and optimized for UX, SEO, Social Media, and Readability.
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.
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
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
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
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 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
- 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
- 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
Meet Feb 1 deadline in time for Summer Camp surge.
Managed the redesign, working closely with Yikes’ project manager and designers and DelNature’s Website Management Team.
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
Website Design Agency Search
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
Attractive Offerings & Experience
- Quality website design
- User story creation and other UX offerings
Data-driven decision-making is instrumental to effective, efficient, and profitable website designs. For this reason the UX offerings gave WebDev an advantage.
Attractive Offerings & Experience
- Quality website design
- They lead the nearby successful Save the Valley effort which saved a local natural area from development
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.
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
Their mix of experience with WordPress, quality, and ethics was an advantage.
UX Research – Performed Phase 1 & 2
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
Considering these challenges, I recommended the tools listed in the “Tools Used” section, along with:
- Card Sort
- Mixed-method Personas
- Robust In-person Interviews
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.
Usability Testing & Interviews
Information architecture, UI, interactive design, and visual design before, during, and after the website redesign.
Watched volunteers navigate website, given variety of tasks. Invited them to share thoughts as they went. Pain points were noted and improved.
Approximately 20 people interviewed and user tested. Included a variety of ages, genders, racial and sexual identities, neurodiversities. Some familiar with DelNature, others not.
A larger population and recorded interviews were recommended as an upgrade for further data.
Analytics were reviewed for clarity on top-performing blog posts and website pages. This was a starting point for considering Website Architecture.
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.
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.
Personas were created and used to inform some decision making.
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.
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.
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
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
- 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
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
- 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
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
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.
Going forward, continued UX Testing and worked with Yikes and Altru to update Activities Calendar to fit UI needs.
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.
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.
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.
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.
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.
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
Want to work together?
I’d love to hear from you!