Case Study
Redesign & WordPress Migration
Website Management Team Leader
Website & Graphic Design Coordinator
Delaware Nature Society, 2018
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.
Client
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.
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
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
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.
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
Want to work together?
I’d love to hear from you!