NEXT.cc is an educational nonprofit that creates interactive online Journeys to introduce what design is, what design does, and why design is important to children of all ages. But the existing web site was difficult to navigate and even harder to administer — over 100 Journeys existed as more than 300 individual HTML files — requiring significant time for even the smallest site-wide changes. The new version of the site has been developed as a Ruby on Rails web application to reduce these administrative pains. Further, a custom content management system was developed to allow NEXT staffers to easily create and update content from any web browser — no longer is it necessary to train staffers to write and maintain all of the individual HTML files.
Working with the NEXT.cc team, three key features were added to the design of the public-facing site to improve its usability and experience. The splash screen that previously greeted visitors to the site has been removed and a comprehensive listing of all Journeys is now front and center. But if that comprehensive listing is too broad, users can, for the first time, easily filter the list of Journeys by NEXT.cc's recognizable Scales and Subjects. Each individual Journey page — previously split into three or more pages — is now a single continuous page, reducing the friction required to progress through it.
Behind the scenes, the management section of the site allows NEXT.cc staffers to easily create and update content from any web browser without the need for any coding experience. The design of the management section began from the bottom-up with the necessary HTML documents and forms for creating, updating, and deleting different kinds of database collections and then applied the logical divisions of the public-facing design to create a more recognizable, intuitive and usable experience for its users.
The main page now features a comprehensive listing of all of the site's Journeys. It's now easier than ever to get started, and students can quickly find a Journey by its name for the first time.
If the comprehensive view is too broad, students can click on NEXT.cc's recognizable Scales and Subjects to filter the list of Journeys. Hovering over each reveals more information about it.
Inside, each Journey features a number of activities, a review quiz and additional resources to explore.
The review section allows students to test their knowledge. Students can quickly select and check their answers multiple times without the hassle of unnecessary page refreshes.
Administrators can access a separate management version of the site. Journeys can be previewed with additional information — the red border shows the extents of the image and the thickened corner communicates how it is anchored to the page.
Although a single HMTL document, the form for updating Journeys is divided into a number of smaller sections corresponding to the design of the public-facing Journey pages.
A top navigation bar allows users to quickly switch between Journeys, or to change the context to different collection of Journeys.
Each section of the form focuses on a single section of the public-facing design, reducing the cognitive overload a comprehensive form might impose.
The review section displays how fields for three separate models — the Journey, its questions, and its questions' answers — are brought together to form a section better representative of the true nature of the Journey's design.
Resources in the explore section — as well as questions, answers, and activities — can be dynamically added and removed. Those checked for deletion are prominently marked so that nothing is accidentally removed.
If any errors occur while creating or updating a Journey, an error message is shown, each section that contains an error is highlighted, and any associated fields' labels are given a more specific and accessible error message.
Journeys may be deleted by first checking the “Delete?” checkbox and then confirming by selecting the associated submit button. Accidental single-clicks will still need to be confirmed and accidental double-clicks will have no effect, reverting the checkbox to its initial state.
New Journeys can be created effortlessly and are initially marked “private”, allowing the user to work on them as much as necessary before they are made viewable to the public.