September 12, 2017

Seven tips for a successful website redesign process

How one nonprofit used feedback loops to improve their process

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:

  1. understanding the overall needs of the website,
  2. involving staff in specifying their own needs,
  3. determining content types,
  4. thinking in terms of lists,
  5. testing against assumptions,
  6. creating reporting mechanisms, and
  7. 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):

  1. Increased email sign ups, social engagement, and activists
  2. New donors: the website needs to encourage people to sign up as donors with attractive donation pages
  3. Stay on budget. We are open to creative work share solutions
  4. Clarity and Simplicity: needs to give visitors a clear sense of Green America’s work
  5. Attractiveness: A clean look, beautiful storytelling, and responsive design
  6. 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
  7. Ease of Use on the backend: we will have many editors with various technical expertise (the ability to update the website frequently is essential)
  8. 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)
  9. Authentic product/sponsorship placement
  10. 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
Don’t have a Cow

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

Mindmap about Homepage includes a Box called Enter, with arrows coming out that display Lenses: Food Lens, Finance Lens, Climate Lens, and Labor Lens. Other arrows go to five other sections. 1: Current Program Highlights, which leads to Relevant Programs and Relevant Campaigns. 2: Current Campaign Highlights, which leads to Relevant Campaigns and Relevant Actions. Relevant actions continues to Salsa Action (third party). 3: Current Action Highlights, which leads to Relevant Actions and All Pieces. 4: Piece Highlights, which leads to All Pieces and Focus Areas. 5: Sign up for E-news. 6: Donate (third party embed)

Image: Member Landing Mockup

This is a Balsamiq-generated mockup image to help the team understand different pieces for the member landing. It includes a main block with three tabs called My Biz Listing, My Coupons, and My Ads. There is a second block underneath called Members-Only Documents. On the left sidebar is a list of Announcements. Inside the My Biz Listing tab is four bolded field labels and text as follows: 1st line - Title: My Green Business Listing. 2nd line - Date Updated: 2017 January 7, Description. 3rd line - Description: lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do ejusmod tempor incididunt ut labore et dolore magna aliqua. 4th line - Categories: Children, Pets, Clothing. 5th line: (edit this listing).

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.

Like what you're reading?
Sign up to receive the latest articles and updates on nonprofit tech from NTEN and its community of experts.

Subscribe

Monica Flores
Monica S. Flores (@monicasflores) builds digital products to support a socially just, environmentally sustainable, and equitable society. She works in the technology space to support communities, dreamers, and doers who make a positive difference. Since 2004 she has worked with US-based and global membership groups, non-profits, public agencies, and startups to best reach their online communities through her consulting practice, 10K Webdesign. She also leads and manages large-scale web development projects, including redesign, refactoring, and digital platform buildout for organizations such as Green America, Ashoka Changemakers, and the GIST Network, a project of the U.S. Department of State. Monica's focus is to build community, foster connectedness, and use her technology skills to make a better world. She is passionate about sustainability, social justice, diversity, entrepreneurship, education, and science/tech for positive social change.