5 Learnings about the Website Redesign Process

an early iteration of our slideshow

I’ve been involved in a terrific challenge these past ten months: the major redesign and redevelopment of an extensive website for a national 501(c)(3) nonprofit membership organization. As the main digital engagement property, this website solicits donations, signs up members, disseminates information, and serves as a resource hub for many thousands of articles about how to harness economic power — the strength of consumers, investors, businesses, and the marketplace — to create a socially just and environmentally sustainable society.

Here are five lessons our team has learned in the process so far:

  • Planning is key
  • Include stakeholder feedback
  • Train continuously
  • Break the process down into manageable tasks
  • Learn when to say “yes”

First built in 2008, the current website is currently in ColdFusion (nostalgia, anyone?), so the task at hand is to redesign the website, make it mobile-responsive, convert important content, move it to the Drupal platform, and provide easier ways for the membership to advance our shared mission.

Our plan is for our new system to allow all privileged users to gain access to the direct information they need to update (e.g. staff biographies, business listings, page content, blog posts, or uploading images, depending on that user’s need). We chose Drupal over other content management systems because of the simplicity of assigning permissions by different roles (e.g. Staff vs. Editors vs. Administrators), the need for multiple content types, and the ability to add on pre-existing contributed modules.

Here’s a more in-depth case study: http://bit.ly/GA2017casestudy with links to many source materials including wireframes, JPGs and PDFs, and theme templates. Thanks to our vendors WDG and MAAN Softwares Inc.

1. Planning is key

Prior to my joining the team, the internal program managers came together and underwent a soul-searching process to understand what was necessary and required in a new web property, as well as how the multiple pieces of information within the organization, and their different service lines “fit” together. All these learnings, when captured into a map of content types and an overall document of website priorities, helped demonstrate to me as well as to external parties such as our funders and contractors, how our content was to be organized and managed moving forward.

For example, the team found that the majority of content needed would fit within four main elements: Actions, which belong to Campaigns, which belong to Programs, which belong to Lenses.

Additional content types such as blog posts, media mentions, press releases, and resource articles were also mapped to our main content elements, and through the learning process, even more content types such as job listings, staff listings, magazine issues and articles, and images and file uploads were also converted into specific collections of fields and “reports” (views) of the information, for example, a list of all our available “Job Listings” or a grid of all available “Actions”.

Investing in a well-thought-out planning process allowed the internal team to delve into the type of content needed and give plenty of time and space to allow program managers to understand how they would prioritize their content, what was to be elevated vs. deprecated, and also which taxonomies (categorizations) were needed across the organization.

An additional benefit of taking time during the planning process was understanding how multiple “daughter sites” could feasibly be brought back into the overall content management system. The “daughter sites” are aggregations of content that currently sit inside their own domain name and are currently handled as separate Joomla and Wordpress entities, and ultimately do well when handled inside one central content management system.

I always tell teams that any hour spent during the planning process saves two hours during the buildout process.

2. Include stakeholder feedback (early and often)

Upon my arrival, we engaged in a RFP process to solicit responses for the design phase of our project, and received responses from various design and development agencies both in our local region and nationally/internationally. The RFP response had a transparent scoring mechanism and was heavy on past similar engagements, as we needed to work with a team with experience. http://bit.ly/2016GreenAmericaDesignRFP

During the RFP period, we offered multiple conference calls for bidders as well as a open list of questions and answers http://bit.ly/2016GreenAmericaRedesignQA.

Out of our initial responses, we then engaged in three successive narrowing rounds of ratings with all the stakeholders on our internal staff, so that each proposal received at least 4 reviews. As an organization, with approval from the executive director (here’s our presentation to the E.D. https://docs.google.com/presentation/d/1VJ93P8LGIjGOgAhitRpJcgXMPZZ6_fZr92uQa-9bUN4/edit?usp=sharing), we settled on the terrific, smart, and savvy team that Ab Emam has put together over at Web Development Group.

Throughout the remainder of the design process we had an ad-hoc team that was available for review, feedback, and sign-off of core deliverables, which helped make the overall process fairly smooth and transparent.

I emphasize how important it is to conscientiously create multiple opportunities to request and receive feedback. Because of the open feedback opportunities, I believe our team gained better institutional understanding of how to go through the redesign process, and ultimately we were able to focus on what was needed to continue, instead of getting side-tracked.

WDG then engaged in a design co-creation process with us that included identifying proto personas, creating an initial site map and content type overview, prioritizing different “sections” into wire frames, then delivering final designs for the homepage, interior pages, and a “kitchen sink” of all available items.

the “Kitchen Sink”

3. Train continuously

We began with a temporary site on Pantheon to test our assumptions and provide a pilot environment for our team to play with. By continuously having our colleagues engage with a demo version, it became easier, as the design became apparent and as content got filled in, for our content editors to add, edit, and delete as needed.

We are still training the 40+ members of the team on the different levels of access they need to post their content and use basic rewards (gift cards to local cafes) upon completion of “units” that our users will need to understand, such as a) logging in, b) uploading an image, c) editing content, and d) managing their own user account.

By using a working version, it has been helpful to our users to have an immediate ability to see the effect of their upload or edit. My next goal is to offer, inside the site itself, a knowledge base of screenshots and screencasts to support the multiple tasks any user will need to do.

4. Break the process down into manageable tasks

I did the content architecture in-house and we are working with Aditya Dwivedi’s team at MAAN Softwares Inc. to do themeing and additional database support, such as importing from external Wordpress blogs, bringing over content initially created through GatherContent.com, and building views of the data.

Because there are so many components to each content type, feature request, view, role, and permission, as well as for the overall content conversion, Trello has been our team’s tool of choice to manage the flow of each “task” (card) from scoping, to gathering details or assets, to implementing, to completing, to documenting.

A task is more achievable when broken down into a checklist of items, and our cards have a better chance of going into the “Finished” column when they have an assignee “member”, a clear set of requests, as well as a due date.

Sample of our Trello board

We have a core set of content editors, as well as managers for each “Lens”, as well as staff handling individual member engagement, as well as staff handling business member engagement. These multiple users are, again, handled well by breaking down specific permissions to each user’s respective level of access. A user may inhabit multiple roles, but they are allowed to do activities on the site based on the permission of that role.

Here are some examples:

  • a staff member may edit their own staff bio
  • a content editor may create a blog post, edit their own blog post, and also edit anyone else’s blog post
  • an administrator may create new users
  • a business listing manager may create and edit business listings

The permissions “grid” is a work-in-process and consistently gets fine-tuned as we enable more features. In essence, anyone utilizing the “roles” ability of Drupal must go through the permissions grid process, which looks something like:

Sample permissions related to commenting

5. Learn when to say yes

One of the joys of being a builder of products is having the creativity and freedom to determine what types of interactions we want to elevate, especially for membership organizations that require close relationships with sponsoring members.

For example, on the business side, our desire is for our business members to have an address of record that certifies them as being a green business, and to allow them, ultimately, the ability to create and edit their own business listing, as well as post images, a logo, and perhaps a discount code or a highlighted story that can then be embedded near our other content.

As another example, on the individual side, our desire is for our individual members to experience a seamless “flow” between easily referencing what next action to take, engaging online and through social media, and integrating knowledge gained from our leaders, partners, sponsors, and business members into their own lives.

Our team and other stakeholders have made many requests and my overall response is that we say “yes” to as much as makes sense, serves our mission, is manageable, and can be easily piloted. As an example, we’re using one big WYSIWYG content box as a section that allows our content editors to put in what they desire. If we see more and more request or usage of things like video embeds, references to other content types, links off-site, and other repeating requests, then we will say “yes” to supporting that desire by creating a field to handle that type of content; however, for launch and during our first iteration on the new platform, we want to start light and allow for some freedom to test instead of hard encoding that feature right away.

It’s exciting!

Because our content experts in-house have such rich history and understanding of their respective fields, and we now have a tool that will allow us to collect and disseminate information with more ease, I’m confident this new implementation of the website will strengthen our community even more. Alongside our members, we look forward to sharing more knowledge, gaining more efficiency, unifying our efforts, and becoming a more streamlined and nimble organization.

The site went live in 2017. 🚀

It’s been such a pleasure engaging with my dear colleagues on this process so far, as well as a source of satisfaction for me, in that I am utilizing all my skills in service to a higher cause. I’m proud of the relationships and knowledge we’ve gained as a team so far, and I look forward to what our team will build next.

--

--

Monica S. Flores
Female Founders Lead the Way: Startups, Pitching, Marketing, Building, Investing

💚 make a positive difference: 🤖 Lullabot Technical Project Manager, ✨#femalefoundersleadtheway Founder, 🏆 NTEN Faculty, ⚡Pantheon Hero, 💨 Arcadia Ambassador