This Website

I thought it might be helpful to share the process Meyer Memorial Trust went through in creating this website. We hope it will help visitors understand why we built what you see, how it expresses our mission and values and how we got here from there. We wonder if there may be steps in our process that are helpful to others as they go through website creation or reinvention. It's also fascinating to see where one lands when you begin with the end in mind.
        – Marie Deatherage, leader of the MMT website team.

The Backstory

Once upon a time, Meyer Memorial Trust did not have a website.

But because a couple of people on our staff (Charles Rooks and moi) were actively using the Internet and were passionate about its potential in the early 1990s, MMT was the first foundation in Oregon to develop a website. Just like most other nonprofit organizations, we developed a website using the staff we had, educating ourselves through listservs and publications. Our site launched in late 1996, using only the most basic HTML. It looks downright pre-Cambrian at this point...

Over time we improved navigation and organization of our content and streamlined the design, but the site remained as basic as could be.

During 2003 we figured out all the ways we wanted our website to be better and in early 2004, we issued a request for bids to make our vision come true. We hired a firm to create our new website. Long story short, we launched the new site in late 2004. It's largely the same site we had until March 2010.

The site never actually did all the things we hoped it would do back in 2003, but it was a great leap forward from our earlier web presence. The shortcomings that were visible on the user end were minor when compared with the administrative nightmare we faced on the back end, which essentially prevented us from making basic changes when we wanted to and it was punishingly difficult to add anything new.

Three years ago we started dreaming of the new website we would have someday, but limitations of time and other resources stalled the achievement of our vision. In 2007, we hired our first software engineer, vastly increasing our in-house technical capacity. Grant Kruger had experience with Drupal, an open source content management platform he convinced us we should adopt.

In early 2009, we began making real plans for a website befitting a national model of a regional foundation. MMT's website is, of course, our most visible and ubiquitous public face. It's where most people form their first impression of us. It's where people decide how accessible we are. It's where people feel welcome or not. It's where people learn what they need to know in order to apply for a grant.

We've always intended that MMT's values of openness, transparency, sharing knowledge and so forth be visibly present on our website, of course. But this time, we had much greater understanding of how to use the web to achieve our vision. Having in-house talent made a world of difference, both in knowing the possibilities and making them happen.

We thought we would share some of the highlights from the process that led us to the launch of the site we have today.

The Vision

We began by writing down some of the essential elements we wanted in our site redesign:

• Maintain friendly, open, welcoming tone
• Be accessible, accountable and transparent
• Improve navigation
• Clear direct paths to destination
• Organize info into more useful sections
• ID what's working and do it better
• ID what's not working and figure out how to do it differently
• How can we contribute more to community?
• How can we share more?

Values

In developing our vision, we kept going back to our values. While technology is sometimes seen as value-neutral, we find the choices we make in this arena to be another opportunity to put our values into practice. For example:

• Sharing: License everything under Creative Commons
• Open and accessible: Use Open Source tools, in this case the Drupal CMS, program for best results on browsers that use open web standards (e.g., Firefox)
• Highest and best use of resources: Look for an opportunity to provide support above and beyond our grantmaking to nonprofit organizations with every step we take; support local business by hiring local design talent for things we couldn't do in-house, use a local hosting service, etc.

Because the home page is where most people meet us for the first time, we started our new site design there and let it set the tone for the rest of the site. I still have the piece of paper with the words I jotted down as they came to me.

This is how I began imagining it:

We used results from the user survey we conducted in summer 2009 and MMT staff feedback to refine our approach. Granted, some respondents didn't want us to change anything about our site because it was just fine as it was and much better than many foundation websites. But there were some consistent themes:

• The font was too small and (especially reversed out text) was hard to read
• It's hard to navigate to what users are looking for, too many clicks to a destination
• Too much jargon
• Immediate access to the application form needed
• Too much static content, not enough pictures!

Though we received many more positive survey comments than negative, we learned a lot in the process. In addition to feedback, we looked to the web to help us imagine the possibilities: What do we see that we like? What features must we include? Are there things we can imagine that we don't see elsewhere yet?

In the interests of sustainability and efficiency, we pored over every inch of our existing website's content to see what could be reused or recycled.

Implementation

Over the next couple of months, we put our vision into action. First, we decided on a design theme, selecting colors and formats. We wanted a distinct departure from our previous site, a simple clean uncluttered design, with colors and style that communicated a clean fresh feeling like a drink of cold clear water, conveyed vitality and innovation and provided a sense of place. This was all complicated by the fact that our logo included the color red. Pridemore Design suggested a color palatte of greens/blues and it felt exactly right.

• Blue (Darkest Blue: #1E41B1, Lighter Blue: #8DA0DF, Lightest Blue: #D2D9F0)
• Aqua (Darkest Aqua: #2e7b82, Lighter Aqua: #84B4BE, Lightest Aqua: #CCECEF)
• Green (Darkest Green: #0A681D, Lighter Green: #93BE84, Lightest Green: #CEEAD4)
• Red (One value: #C32026)

We developed menus and a rudimentary navigation, trying several approaches until it jelled.  This is one of the most challenging stages of website development, because it's simultaneously forest and trees. You have to begin with the end in mind and develop an organization that accounts for everything you see at the beginning but be flexible enough to include all the things you have forgotten or haven't accounted for yet. We went down several paths before finding the one that took the best route to our destination.

After we settled on colors, themes and some styles, we began to put together wireframes to provide a coherence to the site, and to do so we had to determine how to organize all the content, exactly where it would live, how it would relate, and so on and so on.

The overarching structure we settled on divided the content of the website into three main categories, driven by the reason we think most visitors approach us for the first time: you want to know if your organization can secure funds from us. This is reflected in the overall design of the home page. Beginning on the left, you see the word APPLY. From there you will quickly discover there are three ways to approach MMT for funding: apply for a Grant (in Responsive, Grassroots, Emergency Grants Program or through Special Programs that have Requests for Proposals) or Loan or participate in one of our Initiatives. Once visitors figure that out, they are likely to be willing to settle in for further study and that's why the next major section is LEARN. In this part of our website, you can learn a lot About Us (Who We Are, What We Do, How and Why We Do It), About Applying (our Help Desk, Awards Database, Requirements & Other Resources) and About Our Work (Stories about the Work We Fund, Our Special Projects and Lessons We've Learned). After all this learning, we hope you will want to CONNECT with us so we can easily communicate with one another through our News Alerts, Social Media, Blogs, Forums and connec+ipedia.

This stage really tested us and actually led to the development of a lot of new content we hadn't imagined including. In fact, more than half of the content on the site is new. At a fairly early point, we decided we would use the new website development as an exercise to ensure that Meyer Memorial Trust meets all the accountability measures of the Sarbanes-Oxley Act and the transparency standards of the Glasspockets project of the Foundation Center.

To do so, we spent a lot of time going through our archives to collect and analyze reports on our grantmaking, clarifying and refining some of MMT's policies, discovering ways to illustrate essential elements, and so forth. Every pixel on the screen represents at least one – and often many – decisions. And redecisions. Sometimes it seemed as if we would never be finished.

Take the matter of fonts, for example. It's not a simple as, "Hey, that's a cool font, let's use it!" Local font guru Bram Pitoyo gave us a seminar on font use, explaining which fonts are copyrighted in which way, which ones are open source, which ones work on which operating system, which ones don't have equivalents on other operating systems, what different browsers do with them, whether we would have to host them on our site and so on and on.

The fonts are set for most things in cascading font lists. This means if the user doesn’t have the first font, we load the second, and continuing on. Since we used mostly common fonts, in most cases the first font will almost always be used. (In Internet Explorer the Serif12 Beta isn’t going to work because it can’t dynamically load the font, but it deprecates well with Georgia.) The fonts we used are:

• Top level headers, like the three tabs, mission statement, sidebar headers:
  • Serif12 Beta, Georgia, Times New Roman, Times, serif
• Second level headers, like some of the headers in the content area, and the Go links:
  • Georgia, Times New Roman, Times, serif
• Majority of text content: 
  
  • Helvetica, Arial, sans-serif

This website is truly the result of teamwork and every single person in our office was part of it. Phoebe Owens manually and painstakingly moved content we wanted to keep from the old site to the new one, she worked to sort out permissions for all photos and format them and tended to our web garden in a number of other crucial ways. Candy Solovjovs managed all content about preparing good applications for grants and loans at MMT, with special help from Paul Reich on PRIs and Sally Yee on Grassroots Grants. Kim Thomas also contributed significantly to the material in our Help Desk. Barbara Gibbs managed the content for the Education and Affordable Housing Initiatives and Pam Wiley and Eric Jones did the same for the Willamette River Initiative. Cathie Glennon, Maddy High and Aisha McCoy performed what might have been the most difficult but most important task: they proofed every page and made valuable suggestions to improve usability. Sayer Jones prepared financial data and facilitated providing content from our finance department, working with Wayne Pierson and Terry DeBruyne. Phoebe O'Leary provided content about GrantIS, made sure the GrantIS database worked with the website, and supervised all information that had to do with application procedures and grants adminstration. Sandy Thomason and Donna Parsons and provided key data and documents when they were needed and helped enormously with historical questions. Karissa Lowe lent a hand with anything and everything that was needed (and talked like a pirate for us!) Aaron Nelson gave us his customary brilliant IT support, solving impossible problems and providing us with secure, reliable and powerful servers to develop and host our site. Basically, he keeps the world running. Our intern Sam Weige was our master scanner. And last but not least by any measure, Doug Stamm provided critical guidance and support to ensure that MMT's website is, above all, a reflection of our values and one that a national model for a regional foundation deserves.

After developing the basic Drupal code that forms the foundation of the site, our superhero PHP programmer Grant Kruger tested and selected a number of modules to perform tasks to make our site work. There are so many really cool features only website mavens may notice, but trust me, they enhance your user experience. Just one example: watch what happens when you play one of our videos. Because the window pops up as it does, your visual experience is great and you never lose your place in our site. I really believe that Grant and Theresa Pridemore have provided us with the best WYSIWYG editor in the history of the universe. The list goes on...

Some of the ways we addressed the limitations of our old site include: every major section and important location is visible and accessible from the home page, there are multiple paths to every destination, navigation is clear, sidebars encourage exploration, fonts are simple and readable, photos rotate through the home page from our image gallery that everyone is invited to join, and so on. We've think we've made interacting with us easier and more rewarding.

It's kind of funny, but when you look back at the rough sketch we made at the beginning of the project, you can actually see a relationship with where we ended. I think that means our dream came true.

Not that we're ever really finished. We think of our website as a living space, always growing, changing, improving. We welcome your feedback and suggestions. A nice thing about developing a site in-house is that we have complete control over changing things and we can figure out how to do it.

The Code

To complete the circle, Grant has documented the complete recipe for our website, available here. We invite you to make use of this powerful document. You're welcome.

And now, if you don't mind, I'm going off to take a much-delayed nap.