• Joey Lee
    Developer & Writer

Nautilists: An experimental platform to help creation through curation

Cover image

Joey Lee is a design technologist and an adjunct faculty member and Researcher in Residence at NYU’s Interactive Telecommunications Program (ITP). Nautilists is part of an open education experiment by ITP to support individual creativity and technical growth. Nautilist was designed and built by Joey Lee and made possible through the support of Dan O’Sullivan, Shawn Van Every, Daniel Shiffman, and the ITP community. Special thanks to the teaching assistants— Jiwon, James, Tushar, emily — and to Andy, Alejandro, Markus, and Rik. Special thanks to Sarah Bures for editing feedback.

TL;DR

  • Nautilists is part of an open education experiment by ITP to support individual creativity and technical growth.
  • Nautilists is an open web platform to collect and organize helpful and inspiring links from across the web.
  • Curated lists of links can be picked-and-mixed to allow for quick, individualized pathways for learning.
  • This blog post catalogs some thoughts about building the project and what is next.
  • More at: https://www.nautilists.com/

Background

ITP’s founder, Red Burns, was inspired by the potential of more democratic technologies to augment and enhance our daily lives. Burns built the program on the belief that increasing access to and exploring emerging technologies was essential to making the world a better place. It is therefore no surprise that a major pillar of education at ITP is in the use and development of open source software/hardware/tools to support creative practice.

illustration of people sharing

Projects such as ml5.js, Processing and p5.js, and the Arduino project are examples of the kinds of open source projects that the ITP community supports that reflect the values at the heart of the ITP’s commitment to “treat … technology as something that everyone … could learn, understand, and explore freely.” Despite the abundance of tools that now exist to help make our ideas more tangible, Red Burns has always been right in “consider[ing] … technology as a tool which, in itself, could do nothing.”

ITP is a place to explore ideas —both big and small —where ultimately you create something “real,” “tangible,” or otherwise “experience-able” for and by others. These were the ideals I had in mind when building and testing Nautilists, a platform aimed to help educators help students turn their ideas into reality.

Do-It-Yourself Syllabus

About a year ago, I met with Dan O’Sullivan(DanO) —Professor and Department Head at ITP — and Shawn Van Every — Professor and Director of undergrad studies at ITP —to discuss ways I might be able to support ITP in tandem with my teaching appointment in the department. What I didn’t realize at that time was that the amount of exciting ideas that DanO and Shawn have to enhance their students’ educational experiences was inversely proportional to the time they have to actualize those ideas. In other words they were looking for help.

At the time DanO and Shawn had been brainstorming ideas around ways they could better meet the needs of the diverse student population at ITP and the (then) soon to be undergrad IMA program. In the educational technology space, terms like “personalized learning” were becoming more common and DanO was increasingly fascinated with the idea of figuring out how ITP might be better able to deconstruct the outcomes of their creative projects into an ordered collection of bite-sized steps and references. Essentially, DanO wanted a way to capture those critical moments during the development of a project — a helpful tutorial on websiteA or an inspirational book from sourceB — and to be able to save, share, and build on those moments. DanO called it the “just in time” or “do it yourself” syllabus.

Illustration of character with a list

In brainstorming sessions with DanO and Shawn, we started to envision a structured collection of inspiration, key concepts, and technical references, ordered from start to finish in such a way that builds a coherent narrative structure for learning about a subject, tool, or skill. Taking this idea further, we thought about the potential (and need?) to be able to quickly collect, order, and share these materials — ideally those that would be catered to an individual student’s needs or that could address a specific project concept or idea — in real-time and with as little effort as possible.

We started imagining what students might be able to do if, as educators, we could help break down the complexity of student project ideas down into something like an Instructables or a Subdex. Instead of creating new content for learning, we thought, what about just making it easier to curate existing links and content? “Everything is a remix” after all.

In many ways this is already what we’ve been doing. A typical ITP instructor/student interactions looks something like this:

  • A student has an idea 💡.
  • They email us 📬 with their idea and questions around references.
  • We then search through our emails, bookmarks, etc to collect a bunch of links 📎 that we’ve emailed other students with slightly different references and contextual explanations.
  • We send those links to the student 🤓.
  • Then repeat with the next student 🤓🤓🤓.

Does it have to be like this, we thought? In the true spirit of ITP, we started exploring our options.

Lists for All Occasions

Throughout the course of this project, I had the opportunity to explore different ideas, try new technologies, and work through a lot of design and development challenges. I learned some tough lessons along the way (more on that later), but ultimately, we wanted a tool that emphasized:

  • Curation over creation — we shouldn’t be creating new content, rather we should “just” be curating lists of existing content.
  • Ready-mades and remixes —we should make it quick to find and remix existing content.
  • Collaborative resource sharing — students and educators should be able to work together on list making

The trick for us was rather than developing new content, what if we just made it faster and easier to pick, mix, and remix existing content? Can we collect, sort, and tag website URLs in a nice way to create tailor-made lists? And can those lists be easily adapted to fit the particular interests or needs of a student or student’s concept?

Do we build our own tool? Do we “hack” third-party platforms to do our bidding? Do we collaborate with other similar initiatives? Certainly the idea of social link organizing and sharing isn’t new. Products like Pinterest.com, Are.na, WorldBrain’s Memex, Google Classroom, and even Trello and Github Projects boards all provide ways to share and remix lists of links and content in the kind of way that we envisioned. After trying out a few different options and attempting to “hack” existing platforms to fit our needs, we decided instead to build our own platform customized to our specific goals.

With the upcoming new online class — CODE! 2: Introduction to Computational Media —by Dan Shiffman taking place in the Spring of 2019, we decided to set a deadline to have a working prototype of a collaborative link sharing platform ready for the students use during the course. And so began the Nautilists project.

Making lists with Nautilist

The entire design and development process for Nautilists spanned roughly over eight months, with most of the development time occurring in the last two. In many ways the biggest challenges had more to do with self-confidence than the technical or conceptual hurdles that the project threw at me. Is the architecture solid? Does this data model make sense? Is this the right front-end framework? Am I being dramatic? I found myself getting lost in over-engineering rather than following a process I’m otherwise an expert in: prototyping, testing, refactoring, and breaking down complexity and building projects piece-by-piece.

Process diagram

With the start of Dan’s class quickly approaching, it was time to commit to my designs, trust my tool belt, and barge forward. By March 2019, www.nautilists.com — a web application for creating instant remix-able lists of URLs— was live.

Nautilists “browse” page categories

Unassuming and Functional Aesthetic

From the very beginning, I was inspired by Glitch’s friendly and inviting, flat and geometric, quirky and intentional aesthetic. I wanted to capture the neighborly feeling of Glitch and the lightheartedness of Dan’s Coding Train. My hope was that everyone landing on nautilists.com would feel invited to contribute and share their lists with the world.

Animal OpenMojis for User Profile Images

With the recent release of the OpenMoji project, I could quickly integrate a set of glyphs that had a consistent visual design and felt fitting for the atmosphere I wanted to convey with the project (thanks HfG!). Given the time constraints, it was amazing to have such an extensive and expressive opensource glyph library at my fingertips.

I chose the monospace Monaco font as the default typeface as a modern reference to the kinds of monospace fonts often used as the default typefaces for computing text editors and command line interfaces. I thought the type should be as unassuming as the visual design and functionalities of the website.

The core functionality of Nautilists lies in the URL-adding and list-making process. I drew from the way that Pinterest handles adding URLs and the creation of boards in two ways. Recent Links page (left), Recent Lists page (right)

First, I added a button fixed to the bottom right corner of the site that would allow a user to add a link or list anywhere in the application. This would allow people to easily add links or lists as easily as possible wherever they were in Nautilists. Second, I used modal pop-ups to resolve adding links and lists for the same reason that users should be able to add URLs and create lists anywhere and at any time.

Add List Modal (above), Add Link Modal (Below)

The modal to create a list offers a selection of recently added links for users to quickly select URLs to add into a list. Users then can add in a name, description, and some tags or add them in later.

The modal to add links offers a selection of the user’s own lists as well as sections within those lists where a new link might get added to. If the user decides to just add the URL for later, they can add the URL, the name, description, and the tags in the form to the right.

While the modals were still rough at the time of the project launch, they offered a proof of concept that small interventions in the link submission and list creation mechanisms could help enhance the user experience around these processes.

Reuse and Remix

A list in Nautilists

Every list in Nautilists can be remixed and edited. Users can browse each other’s creations, make a copy, rearrange sections, and add to the list however they like. When users are logged in, they can toggle the list “edit” mode that turns the page into a what-you-see-is-what-you-get (WYSIWYG) page editor.

Buttons on the top of the list page could be used to add sections links, and collaborators, to the list in the “edit” mode but otherwise are hidden from view when the page is rendered.

User page

Users who decide they’d rather follow a list, can do so and keep track of the lists they are subscribed to by navigating to their profiles and toggling the “lists I follow” tab. The user page toggled to the “lists I follow” view.

Every list in Nautilists is given a short and unique URL so that they can be easily shared.

A Test Case for Nautilists

illustration of process of collectiong links, mixing them up, and collaborating

By March 2019, Dan’s course had a total of sixteen registered students. To help with marking and advising those sixteen remote students, four teaching assistants — Jiwon, James, Tushar, and Emily — were hired to help the students develop their final project ideas and were asked to use Nautilists as the central place to put resources and references together.

Illustration of list making and sharing

The course was seven weeks long, with two weeks dedicated to final projects. Students were not required to make their own lists in Nautilists (none did in the end) but rather were only required to check the lists that were created for them by their respective teaching assistant.

The teaching assistants added Dan and me as collaborators on the lists of their assigned students so we could access and make changes to the lists if necessary. Dan would check in to examine the various lists that were being produced and suggest links that might also be appropriate for the specific project.

Lists were often created by one teaching assistant and then copied and remixed by the others to fit the needs of their assigned students. In total, 36 lists were created for the class covering a range of topics from “clicking on things in p5.js” to “getting started with posenet with ml5.js.”

The feedback from the students was generally positive. Students specifically enjoyed the friendly design and having public URLs that were easily accessible, centralized, and shareable.

Despite the fact that using Nautilists added overhead to the TAs’ already busy schedules and the lifetime of the content created on Nautilists was unclear, the TAs were enthusiastic, incredibly helpful, and cooperative in working with me to explore the value and potential of the Nautilists platform. The class was an excellent first test case for using Nautilists and would not have been possible without the support of the TAs and Dan.

In the end, Nautilists didn’t magic away all of the challenges with creating and sharing tailor-made lists of inspiration and learning materials, but it did give us a unique insight into this challenging space.

Lessons Learned

illustration of happy character

With the Nautilists project, I wasn’t interested at all in building a “product” (though I can imagine ways in which it could move that direction), but rather I was curious to poke at a set of interesting and challenging questions that only a full design and development process would be able to satisfy.

When reflecting on the project process, I hope I won’t soon forget these following points:

  • Deploy early and often: I learned the importance of sketching and wireframing as a way of guiding development, but also the necessity of deploying early and often; by setting up a good DevOps pipeline early in the project, it would have been much easier to field feedback earlier and throughout the process.
  • The “best” stack is the one that you know: I spent a lot of time switching between different technology stacks trying to figure out the “best” solution. In the end, I just chose the tools that felt most comfortable and familiar to me at the time.
  • Simple data models for the win: I spent a lot of time experimenting with different data models, complex nested structures, and lots of recursion — it became super messy and unweildy. Several refactors later and with the advice from some good friends, I simplified the data model to something that, while limited in flexibility, was readable and free of complex javascript gymnastics.

Future Directions

illustration of process

The current Nautilists release, while rough around the edges, allowed us to explore the idea of “learning just in time “ rather than “learning just in case.” The project gave me an opportunity to better imagine ways in which social link sharing platforms might support openness and collaboration in service of project ideation and development. In addition to the creation and curation of lists for learning new skills, Nautilists has also become a web space for collecting links to books on topics from typography to data ethics and more generally a place for discovering potentially interesting things across the web.

While there are still many improvements to be made on all aspects of the Nautilists project from the user experience and interactions all the way down to the data models, the project is a helpful reference point for thinking about how we might start to better index the web to find inspiration and to learn.

Thanks for reading!

Technical Notes:

Nautilists is built on Node.js/MongoDB/Express using FeathersJS and the friendly front-end framework Choo.js (mutable state from anywhere, yeah!) and the CSS library Tachyons.io. The glyphs are from the open source emoji library OpenMoji made by the folks at HfG Schwäbisch Gmund (University of Applied Sciences for Design). The project can be found here: https://github.com/nautilist References