Examples of Work DreamYard DreamYard integrates the arts into the curricula of elementary, middle and high school students. They train professional artists to work side-by-side with classroom teachers to help students learn how to express, write and perform their own stories. In the fall of 2001, DreamYard's website was only a single page. Although DreamYard had received grant money to build a more robust site, they had so many ideas for the website that they didn't know where to start. Alder helped them to create a complex site that provides inspiration and lesson plans for students and teachers who want to include art in their classrooms. Below, we walk through the steps we took to create the site. Defining the Features Alder began with workshops and interviews to define the site features. Through workshops, we identified the top goals and audiences for the site. We discussed what feelings the site should convey and brainstormed features. Alder also conducted a series of interviews with board members, teachers, and students to understand what was important to these target audiences. A vision for the website emerged out of this process. The site would be centered on an "ArtYard"-an interactive space where students and teachers could find and submit ideas about integrating art into their classrooms. The ArtYard content, which would change twice a year, would lead users to the more traditional information on the site. The diagram on the right represents this vision. Alder then itemized the specific web pages needed to achieve the vision. We estimated the effort needed, and worked with DreamYard to to define the key pieces of the vision to build in the first phase. View larger image Designing the Interface With the features defined, we turned to the functional and graphic design for the site. To specify the functional design, Alder developed a mockup of every page, and linked them together into a prototype. This prototype detailed the navigation, content, and functionality of the entire site. An example of a page mockup is shown on the right. Alder frequently builds this type of prototype; they are relatively quick to produce and provide a representation of the site that clients, developers, and even end users can easily understand. While we were developing the prototype, an Alder partner worked with DreamYard to define the graphic design for the site. Through a series of different directions and iterations, a design was created which both conveys DreamYard's style and ensures the site is easy to use. View larger image Building the Site Alder worked with partners to write all the text, code the features and the pages, test the entire site thoroughly, and train DreamYard to update the content. We created a sophisticated site that includes: The "ArtYard" section, showcasing artwork, lesson plans, and "do it yourself" activities around changing themes A lesson plans library that can be browsed by subject or grade level A student work gallery, and a calendar of upcoming events An editor tool that allows non-technical staff to update or add to the ArtYard, lesson plans, galleries, and events A twelve page overview of the DreamYard organization The DreamYard homepage is shown on the right. View larger image The Outcome DreamYard's new website helps to educate people about DreamYard itself, making it a source for continuous publicity and contacts. But more importantly, the website extends DreamYard's mission onto the internet. Students and teachers around the country can use the site to find ways to incorporate art into their classrooms and their lives. View the completed DreamYard website now