Case Study: Redesign and Migration
Website Management Team Leadership, UX Strategy, and Creative Lead on DelNature Side
Delaware Nature Society, 2018
Contributions
Established the need to migrate from the iMIS RiSE CMS. Lead team to select Design Agency. Oversaw move to the more customizable, open source WordPress CMS and to cloud-based hosting.
Contributions
Project Management, Design Agency Selection, UX Strategy, UX Research & Testing, eCommerce UX, Migration Strategy, Creative Direction, Copy Writing/Editing
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 pro vide 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
- Underserved 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-owned, focused on non-profit and minority clients
- Personal knowledge of the skillsets 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. Personal knowledge helped with trust, additionally.
The Decision
Leaned heavily toward Yikes for the ethical alignment, skill, and quality. However, UX research and strategy are instrumental in a successful website.
In the end, the lower price of Yikes and recommendations helped tip the scale.
I would oversee and implement UX Strategy and Testing.
UX Research – Performed Phase 1 & 2
Challenge
Simplification Needed Due to DelNature’s Size and Spread
- 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
Internal vs External
Balance external user’s needs with organization’s needs and the individual departments’ needs
Nonprofit Financial Considerations
Tight financial needs of organization
Tools Recommended
With these challenges in mind, I recommended the tools listed below in “Tools Used,” plus:
- Card Sort
- Mixed-method Personas
- Robust In-person Interviews
Considerations
These last 3 were not approved by managment. 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
Notes on 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. Encouraged stuck volunteers to share their experiences as they encountered them.
Volunteer Selection
Approximately 20 people interviewed and user tested – a limited amount. Users were a variety of ages and genders and included peoples of different races, sexualities, and neurodiversities. Some interviewees had previously interacted with the organization and others not at all.
Proto-personas
Personas were created but limited in scope.
Comparison to Robust Interviews & Proto-personas
This was a very small population. A larger population and recorded interviews would bring more definitive results.
Usability would further benefit by creating fully fleshed-out Proto-personas and User Groups.
Full Proto-personas, User Groups, and Scenarios integrate the customer point of view in every aspect of the strategic planning. Otherwise decisions are more often made based on staff responsibilities and professional perspectives.
Notes on Analytics & Card Sort
Analytics Reviewed
Reviewed website analytics to map most popular pages. Current and historical popularity were considered.
Internal Card Sort
An internal card sort was performed with Yikes and then with DelNature leadership.
Comparison to User Card Sort & User Tree Testing
Explained that Analytics doesn’t necessarily show which pages were most wanted by the user. Could be just easiest to find. Internal Card Sort wouldn’t necessarily reflect the realities of external users. External User Card Sort and User Tree Testing recommended for fuller idea of user perspective and diverse needs.
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
- SYWIWYG 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 changees.
Updatable by Staff
Easier-to update WYSIWYGable to be used by non-technical staff members.
Simplifed 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.
Production Environment & GIT
Production environment and GIT allowed programmatic and template back-restores and allowed iterations to occur without interrupting live 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 Technical Lead at Kanopi) for volunteering to review choices and share his technical knowledge to support DelNature throughout this process.
Retrospective – UX Considerations
Research
Greater Use of Mixed-use Personas
I would also have made a stronger case for greater use of assuring creation of Mixed-use Personas that include more of DelNature’s audiences.
Focus on Inclusion in Personas
Inclusion of lower-income and disabled audiences would be a focus because equity among DelNature’s values.
Interview Enhancements
I would also use my fuller UX knowledge to assure unframed questioning and a larger variety of testing methods to get increasingly more accurate results. In-person Card Sorts, Tree Testing, and creation of User Groups, and Larger Audience would also be an more successfully recommended due to my fuller knowledge. I would research to pull together ROI numbers of other websites to make this case.
Public-facing Site
More UX Optimized Mobile Nav
I would also have advocated more for hamburger navigation for mobile viewports. I would do this to better serve a larger audience with larger CTAs that are easier to touch for larger fingers and easier to see for those who can’t see as well.
Expanded Audience Support
Utilization of elements such as Mutilingual toggles, High-contrast toggles, and other inclusive offerings.
Admin
Reusable, Synched Elements
Set the CMS up with more Reusable Blocks and Synched Patterns.
Stronger use of cards, accordions, block item pages, and other current technologies.
These elements would improve UX for the external users as well as staff admin users.
Staff Training
I would build in a more robust training with iterations expected after launch to assure fuller staff admin buy-in.
Want to work together?
I’d love to hear from you!
