DiscoverDesign.org is an online learning environment for youth interested in design and architecture. Chicago Architecture Foundation (CAF), who leads the project, has developed dozens of projects for students to build alone or in groups, in and outside of a formal classroom setting. CAF selected Caxy to update the site with both a new design and layout, and to update the Drupal platform powering the site.
The website was originally built on Drupal version 6. Since it launched in late 2009, thousands of students have developed design projects and participated in competitions on the site. Drupal is an open source content management system that works exceptionally well as an online community platform. The community behind Drupal is global, diverse, and large, providing an excellent foundation for web projects of almost any type, and especially a site like DiscoverDesign.
Drupal 6 was released in February 2008, and official support ended six months after the release of Drupal 8. An upgrade was important for this project because CAF wanted to develop new features, which would have required difficult and extensive customization of an already heavily customized instance of Drupal. The site's user community is predominantly youth, so it was imperative that their personal data and content be secure within the the DiscoverDesign learning environment. HTTPS only access and a new Drupal version with many more years of support assure this security.
Caxy’s experience and expertise building large Drupal projects for Chicago institutions such as the Field Museum and Northwestern University made us an excellent choice to create a new user experience for DiscoverDesign and upgrade it to Drupal 8, the latest version of Drupal. This opportunity has been exciting both in terms of ideas and technical implementation. We are glad to be able to share our collaboration with CAF through this blog post series, which describes some highlights of what we built, and dives into some of the technical details of specific features.
Features of DiscoverDesign.org
DiscoverDesign intends to be a learning environment where secondary school students develop solutions to real world design problems such as school locker design, public transport shelters, public parks and environmentally responsible buildings. The site offers a safe, constructive environment for learning about design from a multitude of disciplines, including architecture, design and construction.
A single view for an entire project and In-place editing
The primary features of the site are design challenge content, and student projects based on those design challenges. Students are guided through a five step design process that familiarizes aspiring designers with the process: the steps instruct them to identify the design problem, do research, plan, build and test their work. Users can give feedback on in progress project work through Drupal comments, deepening the interactions between students and teachers and including mentors from outside the classroom.
Student and teacher dashboards
Students might complete many projects on DiscoverDesign across multiple years of their secondary education — with this in mind, important feature we developed was a dashboard interface for managing and accessing work, and also showcasing it to potential employers, universities, or anyone to whom they might wish to show their work. The student dashboard features also give students a high level view of their work, including any imminent deadlines or unseen comments on their projects.
While students can join and work on the site by themselves, many teachers use DiscoverDesign as a core element of their curricula. The site offers teachers the option to group students into classes, assign design challenges to their students, set deadlines, and develop their own collection of custom design challenges. Teachers can see at a glance the state of all of their students’ projects.
Digital Badges
DiscoverDesign is deeply invested in an emerging digital standard for assessment and credentialing known generically as “digital badges.” MacArthur Foundation, HASTAC and Mozilla have collaborated on an open digital badge standard — OpenBadges — and sparked an open source ecosystem around it. Chicago Architecture Foundation and other public and private educational institutions and youth service organizations across the City of Chicago have been integrating digital badges into their services since 2012. DiscoverDesign's digital badges are coupled with the Chicago City of Learning, a platform maintained by The Digital Youth Network used by many local organizations including the Chicago Public Schools (CPS), to issue badges to students.
Reporting
“The Chicago Architecture Foundation inspires people to discover why design matters.” How well DiscoverDesign advances this mission will be measured by how students, teachers and mentors use the site. We implemented both traditional web analytics as well as custom events representing students' interaction with the projects on the site. By combining public and user-supplied data, CAF will be able to connect these measures of user activity with demographic and economic data about communities served by U.S. public schools which in turn will provide richer detail about needs and outcomes for students who use the site.
Drupal 8 advantages
In order to provide a platform for the compelling features listed above for a highly-respected, socially- and culturally-influential organization such as CAF, we decided Drupal 8 offered the most advantages. CAF’s existing site was Drupal 6, which had just passed its end-of-life when we started this project. A Drupal 8 site would give CAF a long window of official support as well as a huge opportunity for Caxy's own designers and developers to collaborate on a project with this new version of Drupal.
Mature entity references and inline entity forms
We found countless advantages using Drupal 8, but core's mature entity reference field and the Inline Entity Form module were the most significant advances for site builders and developers on this project.
Drupal 6 was released in 2008, before both the Views module and content fields were included Drupal core. Content Construction Kit (CCK) had originated as a contributed module almost three years earlier for Drupal 4.7.
10 years ago, prior to CCK, making a Drupal node have more than a title and a body was quite a trick - one always required different bits of code. A Drupal node would support taxonomy tags in a way differently from how it could support a uploading a file.
Prior to CCK, Drupal site builders would need a module to support, for example, uploading an audio file to a node, without a lot of flexibility. CCK was very mature in Drupal 6, though there were rough aspects that we were reminded about in our work upgrading DiscoverDesign to Drupal 8.
With Drupal 6 and CCK, node reference fields could serve a vital role. However, site builders could not make very sophisticated features with them, and what they could make often depended on still-more contributed modules. For example, even if nodes were related through node reference fields, content managers usually needed to manage these related nodes in isolation from the other content, which would have meant editors would navigate among related nodes and lose their flow and context while trying to edit and publish content.
You could display node reference fields' value in a sort of full page view embedded within the main node, as a teaser, or just the title (with or without a link). In Drupal 6, custom view modes beyond “full” and “teaser” were still impossible, which meant node reference field formatters consequently were very limited, too.
Advanced and stable Media support
Support for image and video media was immature in Drupal 6 ,and relied entirely on contributed modules. Supporting image uploads, video uploads, and non-visual content meant different fields for each of these media types, each with their own peculiar formatting options. Video support in particular often meant taking on features that were not desirable just for basic functionality.
In Drupal 8, media features are still in the contributed module, but there is much better integration and coordination among these projects, thanks to the Drupal Media Initiative. DiscoverDesign.org relies on Media Entity, Entity Browser, and Entity Embed modules for the media upload and display features within design challenges and student projects.
Refactoring the content model
Given these weaknesses in Drupal 6, it was not surprising to find that the project content type managed by the site's student users had 27 custom fields on it, and project instructions (the design challenges) had 83. For both types of content, these fields are effectively a collection of fields — description, images and video uploads, due dates — repeated with a new name for each step of a project or project instruction node. Most image fields were paired with a video upload field, and also repeated for each step of a project or project instruction node. Project and project instruction content supported five steps of the design process, no more and no less.
With Drupal 8, the content model is radically simplified around repeating, composable content structures, which delivers a good experience for content editors. Project or Challenge content nodes are a container around steps that are structurally similar and discrete content nodes. Before Drupal 8, it might have been costly to try to imitate relational databases, but for this project, we reduced the number of fields by more than 50% by adding the step node types for student projects and design challenges.
Design challenges and projects typically have five steps, but this content can just as easily have more or fewer steps if the need arises. The Inline Entity Form module allowed us to support editing step content within the context of the project or challenge node.
Our team recognized early that the primary content types of our core feature — projects and challenges — were very similar. Projects are a reflection of design challenges, so most of our work on challenges was reusable for projects.
On Drupal 6, project files were handled as related nodes of the same type, but those project files had two file fields — one for images and one for non-images. In Drupal 8, the Media entity module allowed us to build custom entities of different types — images, 3rd party video and external links — and relate them through the same field on project steps.
While Drupal 8 has so many compelling new and mature features, its entity reference field is the cornerstone of our simple and flexible content architecture for DiscoverDesign.
Launch and Beyond
The redesigned DiscoverDesign.org launched on Friday, September 16, 2016. The launch coincided with the National DiscoverDesign.org Competition, which students enter by creating projects through the Design an Affordable Housing Prototype design challenge. In addition to the competition, students continue to populate DiscoverDesign with new projects, earning badges and growing the design community through their contributions. This fulfills the goal of our collaboration: through an updated UI and Drupal 8, Caxy and CAF have provided a space for young makers to create and share. We look forward to seeing what they build next.
Caxy Interactive can help your next Drupal development project be just as successful as the Chicago Architecture Foundation's DiscoverDesign.org initiative. Contact us today to learn more.
