In 2016-2017, a Washington, DC–based nonprofit with a staff of about 40 and a 3.5 million-dollar budget undertook a redesign process to convert a ColdFusion website into a content management system with a custom mobile-responsive theme.
To make sure the finished results worked, the website team made strong efforts in:
- understanding the overall needs of the website,
- involving staff in specifying their own needs,
- determining content types,
- thinking in terms of lists,
- testing against assumptions,
- creating reporting mechanisms, and
- wireframing/building/testing/refining,
Feedback loops were built in to the ongoing process in order to course correct and gain early constructive criticism from internal stakeholders.
Tip #1: Understand overall needs
The team tasked with pre-planning the redesign process undertook a review of existing web pages and reached consensus that content belonged under different lenses, programs, campaigns, and actions.
The team identified the organization’s theory of change, current audience, new website objectives, comparables, desired functions, specified revenue models, and desired budget and timeline, and circulated this information via an RFP.
Example A. Website RFP Top 10 List
Better storytelling -> Optimized content -> Engages more people -> More social change -> Greater financial support -> Fulfills our mission.
Top 10 must-have list (goals for the site):
- Increased email sign ups, social engagement, and activists
- New donors: the website needs to encourage people to sign up as donors with attractive donation pages
- Stay on budget. We are open to creative work share solutions
- Clarity and Simplicity: needs to give visitors a clear sense of Green America’s work
- Attractiveness: A clean look, beautiful storytelling, and responsive design
- Flexibility: we do lots of stuff. Our ability to adapt has always been our secret weapon. Our website needs to be flexible to handle our diverse content and programs
- Ease of Use on the backend: we will have many editors with various technical expertise (the ability to update the website frequently is essential)
- Integration of all our channels and platforms: Daughter Sites, Blogs, Social, Digital Publications, Apps, SALSA (action CRM), Raiser’s Edge (fundraising CRM), Charity Engine (donation pages)
- Authentic product/sponsorship placement
- Visual Story: Telling our stories in a visually compelling manner to better engage audiences and increase shares of our materials
Takeaway #1: What to do
During pre-planning, convene individuals across different teams to construct a shared model for content. Aim for transparency around budget, timeline, and requirements for the website.
Tip #2: Involve staff in identifying their own needs
By mapping out content across major areas, staff better clarified their understanding of how content fit into lenses, programs, and/or campaigns. A pilot content management system allowed staff to test their assumptions against real data.
Example B. Early model of content hierarchy and structure
Team members continuously articulated how content fit into the proposed data architecture. For example:
| Lens | Program | Campaign | Focus Area | Action | Issue | Topic |
| Food | GMO Inside
Good Food for people and planet |
Starbucks
No GE Wheat |
Organic
Say no to GMOs Climate Factory Farms Pesticides |
Tell congress to stop trading our food stystems.
Tell congress to reject TPP Tell Kraft to Remove GMOs from Miracle Whip Tell Starbucks to go organic Let Mars know you say no to GMOs Tell American What Growers Association no GE Wheat |
Soil not Oil
GMOs a case for Precaution |
21 foods to always buy organic |
An external design firm worked with staff to sketch out user personas, delve into content relationships, formalize roles and permissions, and determine the initial menu.
Example C. Sample site map content
| Food | Climate | Labor | Finance |
| Fight GMOs | Fight Dirty Energy | Ending Child Labor | Save for Yourself and a Better World (banking) |
| Beyond Organic | Invest in Clean Energy | Ending Smartphone Sweatshops | Divest from Fossil Fuels, Invest in Clean Energy |
| Fair Labor | Better Paper | Ending Sweatshops in Supply Chains
Finding Fair Alternatives |
Green your Money/ Finances (investing) |
| Take Action:____ | Take Action:____ | Take Action:____ | Take Action:____ |
Takeaway #2: What to do
Allow multiple opportunities for individuals to voice concerns, update assumptions, and validate the model against live data.
Tip #3: Determine content types
Content types evolved whenever staff identified a long bulleted list of the same type of content. For example, blog posts, media mentions, events, staff listings, job descriptions, magazines, press releases, and business listings all converted to “content types.”
Required fields emerged from discussions about content types. For example:
- Media Mention = Title, Website link, Image, Byline, Body text
- Business listing = Organization Name, Categories, Website link, Image, Address, City, State, Zip, Body text
Example D. Sample content type for a blog post
This is an example of blog fields:
| Field | About the Field |
| Blog Post Type | Multiple choice, multiple answer, choose from categories) |
| Body | Long formatted text |
| Display Image | Image upload allowing for pngs, jpgs, or gifs |
| Business Network Recommendations | References a list of all available businesses in a related directory |
| Relevant Lens | Multiple choice, multiple answer, choose from a list of available lenses |
| Relevant Program | Multiple choice, multiple answer, choose from a list of available programs |
| Relevant Campaign | Multiple choice, multiple answer, choose from a list of available campaigns |
| Tags | Free tags in keyword style |
Certain fields existed across content types. For example, the “Relevant Lens” field attached to campaigns, programs, actions, victories, and press releases.
Takeaway #3: What to do
Create fields for each type of content. Identify fields to repurpose across content types.
Tip #4: Think in terms of lists: referencing entities and normalizing data
Certain fields became standardized and used across multiple content types. For example, almost all content types require an image field, so content types used a “Display Image” field.
As another example, blog posts, media mentions, programs, campaigns, and actions all used the same “Relevant Lens” field to reference available lenses.
As a final example, blog posts, articles, and green living pieces used the same “Relevant Program” and “Relevant Campaign” fields as reference fields. The list of all available programs or campaigns continuously updates upon the addition of new programs or new campaigns.
The idea of “entity referencing” allows users to continually grow and easily make changes, because any list of referenced content is always “up-to-date.”
Normalizing means an edit to a specific piece of content perpetuates through all instances where that piece displays. By using normalization, categorization of items, and entity referencing, it became easier and easier for any privileged user to make changes sitewide.
Example E. Data normalization samples
5 Most Recent Blog Posts: On a blog post, a list of the 5 most recent blog posts displays on the bottom of every page, in descending chronological order (most recent first). Any new blog post auto-adds to the list. Any edit to the title updates in all instances.
Fruit List: A fruit list begins with apples, oranges, blueberries, and bananas. Additions like blackberries, peaches, plums, nectarines, mangoes, strawberries, and papayas automatically display on the “Fruit List.”
Fruit List Categories: Categorizations on fruit include “Citrus” or “Berries.” Additions such as “Stonefruit” automatically update, such that a categorized list might read:
- Berries: blackberries, blueberries, strawberries
- Citrus: lemons, limes, oranges
- Stonefruit: nectarines, peaches, plums
- Tropical: mangoes, papayas
- Not Yet Categorized: apples, bananas, starfruit
Takeaway #4: What to Do
If an “edit” button makes sense next to every item in a list, convert that list to a content type: most useful for items such as blog posts, press releases, events, staff listings, directory listings, and similar content.
Tip #5: Test against assumptions
During the buildout, question if the articulated data structure matches staff needs. By taking time to find and correct incomplete/faulty assumptions about content relationships, all stakeholders better understand the final product.
As an example, a “Magazine Issue” offers the ability to choose from a list of available “magazine articles” in order to display “featured articles.” A “Lens” offers a display of “relevant pieces.” In one case, our team mistakenly focused on “parent” relationships for content, and based on feedback, turned that into focusing on “child” relationships.
Example F. Choosing relevant pieces on a lens
A “Climate” lens shows a green living piece “Cut Your Carbon at Home” and a blog post “Add Socially Responsible Investments to Your Workplace’s Retirement Plan.” On any lens, the “entity reference” field helps specify relevant pieces, in their desired display order.
Takeaway #5: What to Do
Course correction takes time. Identify, test, review, and go back to the drawing board based on feedback from editorial and program staff. Large projects require flexibility to address initial incorrect assumptions.
Tip #6: Create reporting mechanisms
Reports help staff understand the website content better. Report-building benefits when customized to the specific type of user requesting that report. Early beta versions help identify gaps and allow the user to continuously access, understand, and download available data in order to make suggestions.
In an iterative buildout, the technology team benefits from early feedback. Conversely, an administrator or executive reviewing a prototype report better understands what is available to them and makes more informed requests about new fields and filters.
Technology teams who engage with end users by requesting, correcting, and fine-tuning build more relevant and useful reports.
Example G. Sample administrative reports
- Recently Updated: a list of all recently created or updated content
- All Green Living Pieces: a list of tips on green living
- All Press Releases: a list of all generated press releases
- All Blog Posts: a list of all blog posts
- All Lenses: a list of all major areas of work
- All Programs: a list of all available programs, sorted by lens
- All Campaigns: a list of all available campaigns, sorted by program and lens
- All Victories: a list of success stories
- All Staff: a list of all people who are staff members, consultants, and interns
Takeaway #6: What to Do
Reports help users understand the existing information. Create a new report for each content type and fine-tune as needed.
Tip #7: Wireframe, build, test, and refine
Prepare to be exhilarated, challenged, rewarded, and exhausted by the minimum viable product process. Technologists build digital tools twice: once in the mind, and second in reality. Prototypes help with the process of getting feedback across internal stakeholders. Drawings, mockups, and paper versions all assist teammates in understanding the proposed redesign architecture.
Build in a refinement period into the website redesign schedule so there is time to clarify and details that weren’t addressed the first time around.
Example H. Mindmap about Homepage
Image: Member Landing Mockup
Takeaway #7: What to Do
Tools such as Balsamiq, LucidChart, and Invision assist stakeholders in gaining clarity around mental models: use them liberally. Your platform never really reaches completion, so build in time post-launch to continuously improve.
Conclusion
Technology professionals create effective tools to champion positive social, environmental, economic, and political change. By integrating feedback loops early and often, these tools spread the message, educate the populace, gain support for the cause, and make a positive difference.
Enter your details to sign up for NTEN updates. We'll send you about 3-5 emails a month and you can change your preferences at any time by clicking on a link in the footer of our emails.
