Behind the Scenes of the AASHE Website Redesign

By now, we hope that you've noticed that the AASHE site has undergone a transformation. In January, we relaunched the AASHE website with a major reorganization of content and a new design.

So far, we have received a lot of positive responses to the new website. Although there are many factors at play when determining the success of a web project, we think that the following made the biggest difference in the success of this project: our design partner - ATEN Design Group, the methods we used to involve stakeholders throughout the process, and our continued use of the Drupal content management system.

Design Partner: ATEN Design Group

AASHE started working with ATEN Design Group, a web strategy, design, and development company based in Denver, last summer. We were really impressed with ATEN's experience working with nonprofits and their openness to an inclusive process. One of the great features of the new design is that it is extremely flexible and extensible. Common design patterns are used throughout the site and can be easily reused in the future. For more information about the unique role design played in this project and ATEN's innovative use of javascript, please check out their blog post about our project.

ATEN was a great partner throughout the redesign process. Ken, the primary designer on the project, did a wonderful job incorporating feedback from stakeholders into his designs and showing us ways to improve the design and development process on our end. ATEN also introduced us to Basecamp, which we are now using for other AASHE projects.

The Redesign Process

One of our major concerns before we started even looking for a design company to work with on the redesign was making sure that all AASHE stakeholders had the opportunity to participate in the redesign process. We believe that our continued commitment to an inclusive process made a big difference in the success of this project.

Internally, it had been clear for some time that the AASHE website could be considered cluttered and outdated. The AASHE navigation and homepage content had remained relatively consistent since 2007. However, as an organization, AASHE’s major programs have evolved and its membership has grown considerably. We wanted to make sure that all of our programs were represented on the new site and that content was easier to find. In addition, we wanted to make sure that it was a lot easier for our members to browse the AASHE Resource Center. We also wanted to be sure to feature the more interactive parts of our website, the forums and blog.

Before we started looking for a redesign partner, a group of AASHE staff put together a charter document that outlined the objectives of the redesign project. At AASHE, we use a charter template before beginning most projects that we are publicly sharing for the first time here. The template is based on recommendations from The Principles of Project Management.

Our primary goal was to redesign the functionality and look of the AASHE homepage and provide redesigned templates for other website pages in a way that:

• Clearly communicated to those unfamiliar with AASHE what AASHE does and what its main programs are
• Looked professional, clean, uncluttered, and meets the standards of peer organizations
• Let users navigate to popular parts of the site in one click from the homepage
• Highlighted all of the AASHE programs without overwhelming users with information
• Clearly communicated how to join AASHE
• Provided a clear path to sign up for the AASHE Conference and STARS

As part of our charter document, we also developed a plan for involving staff, board, members and others throughout the design process. In particular we identified key decision points throughout the redesign process and then planned for gathering input from our stakeholders at these points.

These decision points included:

• choosing members, staff, and non-members to interview during the discovery process
• reviewing and approving wireframes
• reviewing and providing feedback on first and second-round designs
• approving the final designs
• evaluating the site before launch

We collected most of our feedback through Google forms where we were able to ask targeted questions that were designed to assess whether the project would meet the objectives outlined above. A smaller team of AASHE staff selected to represent each of the AASHE programs and a board member were responsible for prioritizing feedback and determining whether we were ready to move onto the next decision point.

Whenever possible throughout the process, we tried to make research-based design decisions. For example, our navigation was developed after ATEN carefully analyzed the results of a card-sorting exercise. In addition, we decided to reorganize sections of the site after conducting usability tests with users familiar and unfamiliar with AASHE. ATEN conducted in-person usability tests at their offices in Denver. Later in the process, we used Feedback Army to answer quick usability questions about the new site.

We believe that by integrating user testing and research throughout the process, we were able to avoid some of the natural conflict that arises during a redesign process and also develop a better new site.

Drupal

The AASHE site has been powered by Drupal since 2009. Drupal is an open source content management system that was created and is continuously improved by developers, designers, and others around the world. Switching to Drupal in 2009 has allowed AASHE to tap into an amazing array of resources. There are thousands of Drupal sites out there, including the White House website. As a result of using Drupal, AASHE can quickly roll out interactive features like the Bulletin database, forums, wiki, and blog, without having to spend hours and hours doing custom programming. We also benefit from having thousands of people around the world testing Drupal modules and reporting bug fixes and security issues. Whenever possible, we try to report bugs and submit improvements to Drupal core and contributed code so that we can be part of the effort to make Drupal even better.

As part of the redesign, we realized that there were also times when we were overriding code Drupal functionality for aesthetic but not necessarily user-research backed reasons. During this process, we internally set a principle that we should only override Drupal core and contributed module functionality when doing so is in line with AASHE's mission, vision, and goals and will not present an undue burden to maintain over the next few years. As a result of this decision, we were able to eliminate a lot of confusing, difficult to maintain, code.

During the development process, we also realized that we weren't taking advantage of some of the new, very useful modules like Context, Menu Block, and Less. During the migration process, we extensively used Node Export and Migrate, as well as some custom scripts. As part of the development process, we also were able to eliminate a lot of modules that were no longer in use.

Additionally, as part of our site development, we switch from using Subversion for tracking code changes to Mercurial. Now, all AASHE web projects use Mercurial for version control. For those not familiar with version control, it's a method of allowing developers to work together on a project, share their code, and easily merge, revert, and add to shared code.

Finally, as part of the development process, we switched from using a WYSIWYG editor, CKEditor, to a markdown editor, BUEditor. Transitioning to Markdown has not been easy but we think that the switch will benefit AASHE in the long-run. The major advantages of using Markdown instead of a WYIWYG editor is that it is easier to standardize the display of text on the website and to separate content from presentation. The switch also allows us to avoid creating a lot of "bad HTML," a common problem with WYSIWYG editors. For more information about the benefits of Markdown over WYSIWYG editors, please review this blog post by ATEN.

Summary

We are in the process of doing more user testing to evaluate how well the new design meet the objectives established for this project. As a result, you may see slight changes to the AASHE website over the next few months. In addition, with ATEN's help, we are working of updating the design of our newsletters to reflect the new website design.

We are encouraged by the initial response to the website, and committed to continuing to use an inclusive process and Drupal for future projects. If you have questions about this web project or the site development process, please feel free to contact us at webmaster@aashe.org or post a comment below.

• More Information about Behind the Scenes of the AASHE Website Redesign