Designing a self-directed learning network: work-in-progress v0.1

core ideas, the process and an early prototype

This is an experiment to design in public and document the process — it is mostly iterative and raw. The intention is to open-source the outcome, whatever form it may take.

I have been working on expressing some of the high-level ideas expressed in this post into something coherent:

Designing a space for self-directed learners

Recapping the basic premise

To design an open learning network that will enable anybody to learn whatever they want, however they want, and tap from a collective intelligence — drawing connections between silos of content which already exist.

The core ideas

refer to the original post for details

• Unstructured and non-linear
• Design and curate our own learning experience
• Tap into the collective wisdom
• Anyone can learn as a peer
• Include the best learning sources: people and places
• Display connections and context
• Allow for divergence or depth anytime
• Magical sorting

Kickstarting the process

Some basics I wanted to design around:

1. Mobile first. Anybody in the world can participate and learn on the go, especially emerging markets — people with low cost mobile phones but not the more expensive desktops.
2. It is a network of learning paths, each path is represented by a stack of cards. Each card would represent a node and they can be rearranged in any manner. Anybody can create or fork one.
3. The cards will be links to external content — there is great content out there, just not easily discoverable or strung together in a cohesive manner, or people may have specific learning preferences (disliking videos, for example).
4. The network is designed for the diversity of learning. It will be weighted according to the learner’s preferences — social trust or metrics, but the goal is not to reach consensus (like wikipedia). There should not be one top quality path on Philosophy for example, but a diversity of them, and ideally a way to visualize or track their divergences. There should not be one way to learn most things.

I had to indulge my designer fantasies at first — I had imagined multiple zoom levels and swipes:

I wanted a visceral replication of an actual learning experience, the delight and fun of flipping flash cards. Not some long scroll-y thing with video after video, or text chunk after text chunk.

Then, I had an epiphany one night:

“thinking about the p2p self-directed edu network I’m designing: if I truly believe in the openness of it, it has to be designed for the web. not to mention, designed for mobile phones with low computing power and resources. hence it has to be stoically simple.” — source

While giving myself the space to explore the ideas, I had forgotten one of the early core ideas — that this has to be accessible to as many people as possible, or it will defeat the original purpose of being a democratizing force.

New constraints were set

1. It has to be a web app.
2. Tap only, no gestures.
3. To not rely on the browser tab bar for backwards navigation.
4. No complicated animations to load any interactions or screens.
5. Render information as quickly as possible, with the lowest bandwidth/processing costs as possible. (no zooms, I guess :~\)
6. Try to keep it simple stupid.

With these, I was free from thinking about the interaction patterns, and it brought me clarity on the areas I should focus on.

Core behavior this network should enable

The goal is not to compete with, or replicate the efforts of existing infrastructure but to enable modes of learning that is not being supported right now.

Design your own learning path

Search for existing paths, fork them, rearrange them in any order you want, add or delete cards; or create from scratch:

Endless depths of rabbit-holes

Pivot endlessly from any learning path or card because everything is connected to the greater whole:

General flow

1. Search for learning paths
2. View path
3. Fork, follow or pivot
4. Add new card or path

If looking at flow maps is not your thing, here’s a GIF of the Marvel prototype:

Core pieces

Parts of the design I focused on in this iteration cycle

The card

This took quite a number of iterations, mainly because it was an exercise in discipline — enabling the core behavior desired instead of designing for visual impact.

Primary action
The light-weight investment decision

The hypothesis: the bulk of learners will be quickly scanning through the cards, and favoriting them if it catches their attention(to come back to it later), so that will be the primary action. Hence the card is designed to be quickly evaluated for interestingness.

Visual focus is placed in the “snippet” area, where it can contain a thumbnail, a quote, an embed, etc — the piece of information that can represent the essence of the card.

Secondary actions
Actions after more investment in the card:

• (…) popup menu: saving the card to a specific playlist, sharing, marking the card as complete
• viewing the meta information: which other paths it belongs to, how many people are learning this

Tertiary actions
The investment decision is made:

• Reading the notes, clicking into the notes
• Attaching notes: this requires investment from the learner, the call to action here is prioritized in the interface because we want to encourage this interaction, even though the assumption is only a minority of learners will engage this way.

The path

I was taking a very different direction with this, until I realized I wanted a path to exist in a path too — a path can contain multiple other paths (very meta, I know). Hence it closely resembles any other card, except…

The design is prioritized for the “follow” decision. How quickly can a learner find out whether this path is worth investing in or not?

Depending on the learner, it will be helpful to know more of any of the these:

• How many people are following this path and who? Are any of these people my trusted connections?
• What does this path contain, in a glance?
• Auxiliary information: network statistics, notes attached

Up in the air

Ideas or decisions that are not concrete yet and would require more thought

All other screens not mentioned above

Most of the other screens are designed simply just to demonstrate the core ideas behind them.

Each card is a single instance that exists throughout the network

Imagine a book in a library. It is borrowed by countless people, but it is the same book. What if each time the book is borrowed, the person writes their reading notes on the margins or include them as an insert?

What would it be like if each of these cards are the same card no matter how many learning paths they belong to, and one can find out:

• which learning paths include them
• the sum of all notes attached to this card through out the network
• other network statistics like how many people have completed this card

The concept of attaching notes

Instead of comments, responses or reviews, I thought the best way to leverage on real-world learning metaphors is to keep the idea of attaching notes to pages — in this case, cards.

The Dewey decimal system

In the original post, I wanted something that would allow each path or card to demonstrate their taxonomy connections to the entire network, e.g:

…history-art-philosophy-politics-economics-sociology-psychology-neurology…

For now, I am wondering if it is possible to use the Dewey decimal system. It will allow learners to understanding the connections and position of a particular object.

Words

Right now there’s some inconsistency between the usage of “paths” and “playlists” and I am deferring the decision for now.

The creation process

This is where it stands now — I envision it to be really simple, but it wouldn’t be known until I try to map out the entire process.

The future of the open web: open APIs

Perhaps this would eventually be designed as an API so people can make apps to sit on top of it. So it can exist as a simple text-based web app or a fancy zoomable native app.

Lessons learned or re-learned

• Always be checking the progress against the original core ideas, either to re-evaluate the progress or to evolve the core ideas.
• Flat mockups translate very differently once they are in an interactive prototype, especially for mobile. Always be prototyping and feeling them in our hands.
• The design process is like trying to create puzzle pieces while fitting them together at the same time; be prepared to change the entire puzzle while evolving these individual pieces.

Explore more with me

• Play with an early prototype. I really mean early.
• Follow the process or get more in-depth notes on a tumblr
• I am also sharing WIP as I go: makersmake.space
• Respond to this post with feedback, criticism (building up courage to hate mail) and ideas!
• Will any of you be interested in contributing in anyway: remixing Sketch files if I provide them, respond with your own prototypes, etc? The eventual goal is to open source the outcome, whatever it becomes.

Next steps

• Design the learning path creation/editing process.
• Work on the other screens that were not part of the focus on this iteration cycle.
• Potentially migrate to a html/javascript prototype because there are limitations on Marvel (and similar prototyping tools), I will need to see how all of this translates on an actual web mobile experience.
• In parallel, perhaps I could hook it up to React & Firebase and discover how far I can go with it
• Write the v0.2 version of this.
• Set up a website to outline the core ideas, maps and prototypes so I don’t have to recap them each time I share WIP (for people new to this).

Postscript
This post is one of the hardest posts I ever had to structure and write to demonstrate the coherence of ideas so dear to me, and I am probably not satisfied with it. However, the lesson learned here for me, is to publish often in smaller chunks and be comfortable with iterative progress, than to hoard so much for the big reveal.

This is part of an experiment: making anything I want for a year. Follow “The experimental year” for updates.