Jespaya Web App

Language Learning in Clusters

TL;DR – built a web app which uses node like thinking to step through words, much like how we walk through life – seeing related things connected: jespaya.vercel.app

The beginnings

I was trying to work out when I had a few leaps in logic based on my file timestamps. One of the earliest versions of this “language map” was an InDesign file from back in January 2022. Whenever it was, I know I'd been using some combination of saving words to my Google Translate account or my Context Reverso account, maybe a plain Google Docs version with words… yet in my mind I was formulating some sort of mapping between meanings, a kind of interconnected web to help me "step" to a meaning if I forgot words.

Basically, recalling related words in clusters like we do in daily life. Right now, I have a bottle of water, so a few related words might be water, bottle, green (the bottle colour), and table to name a few.

Initially, it looks like I started to try and build this mental model as a sort of tree, a left to right definitions set which fed like branches or like a waterfall into words with a more narrow meaning. But looking back, I can see and vaguely recall that I evolved it to realize that those "narrow meaning" words can be connected from other broader concepts, which meant I had a left and right channel set, with branches flowing through the middle.

Formulating clusters

I can see that shortly after the tree/waterfall structuring, I started to think more in a “node” sense. It’s the initial clustering and "neighbourhoods” or words that relate to each other, and I could see there were near neighbours that related too.

It’s quite funny to look back at my files without any notes. I can try to get back into the mindset I had at the time, but I also forgive myself for just allowing an organic process to happen and evolve. I was building a system which was intended to build networks in my mind to support recall and relationships between terms. I might have worked in Illustrator first and then come across to InDesign – it doesn’t matter really, I was outgrowing the canvas. I can see I had sometimes put highlights on words – maybe I was checking definitions for accuracy or something.

I saw a solid example this morning in the screenshot above – I had put bonjour (hello) at the middle of a cluster. It is surrounded by words like bonsoir (good evening) and au revoir (goodbye), yet I can also see that I was linking bonjour to journeé (day) because it literally means good (bon) day (jour).

So we have the parsing of words, aspects of etymology even, maybe some potential for prefix and suffix type connections, but probably more fundamentally, a sense of linking that allows a stepping stone of meaning to be walked or mentally navigated.

Outgrowing 2D layouts

Around May 2024, I reached out to an old colleague about somehow trying to take this idea from a static 2D concept into something of a UI. I'd started to pull all the words/concepts from InDesign into Figma not only for a huge canvas size, but so I could eventually start to share and talk through what I was visualizing.

It doesn’t matter that I didn’t hear back from that former colleague. Maybe they never saw my message. But in writing them the message, it was probably the first time I articulated what it was I was trying to achieve in written word. I recall that I chatted to people over the course of several years about my idea, what maybe sounded like a pipe dream – a way to “walk through” words in some sort of UI.

I ended up pausing it for the most part and occasionally jumping back into Figma, and I kept learning the language and using other ways to express myself artistically while improving my illustration skills. If I recall correctly, part of the illustration idea was to somehow bring in symbolic references to the app UI one day. It would mean a lot of drawing, but that's the part that gives the app character – an aspect of self expression which isn’t really a chore, it’s just something that can grow over time.

[A translation with a heavy meaning, walking, and bees!]

The UI and V1 app

Very recently, I started thinking about how I might leverage AI to at least try to start to bring this thing to life – even if not a fully scoped app, at least I would be able to build out a working example of what I had in my mind.

I prepped up a couple of basic UI examples and started working through it, needing to give context and set a few boundaries around the idea, while still allowing the concept to evolve. Funnily but not unexpectedly, I quickly found a few gaps in my mental model, which I was able to resolve through chatting with LLMs about, but perhaps this is where the human part comes in: the LLMs are massive for learning, doing heavy lifting with coding and setting up dev environments, and even making some cool suggestions around how things might be achieved, but I still needed to direct the outcome, and get us back on track on a few occasions.

It makes sense though – it means using a very advanced modern tool to bring something to life, with relation to years worth of thinking, and limiting myself to a “sprint” as to not spend months in some sort of dev cycle while I get animation transitions looking perfect. That stuff can come later… along with an expanded set of meanings, words and translations.

Anchors, satellites, near terms and abstract jumps

Perhaps the most interesting aspect of the entire project was to try and explain what I had in my mind, and continue to refine the meaning around the concept as a whole.

The word node could be swapped out for core, and it could just as easily be called an anchor or a neighborhood. The idea is that a core has general terms that belong to it. It’s a sort of “tier 1” concept, a parent even.

The interface shows that core initially right now as “corps” (and yes, when writing this, I can see the homonym between languages but that wasn't intended). The user might select santé on the right side (or top on mobile view), which means health. Put simply, we understand that the body has a status of health, so it's a near word to body. To the left side (bottom on mobile view), the user might first see “au dehors”, meaning outside, so one takes oneself outside, which is slightly more abstract but still related.

But if you click the left/abstract satellite, the stage color changes, the little pill "GPS" changes, and this indicates that the user has moved cores, or rather, changed neighbourhoods.

It opens up the door to bridge words. It means we can have cores, we can have near words, but we can also have theoretically two near words which belong to more than one core, which enables a bridge between neighbourhoods without having to change cores deliberately.

I accept that I am mixing phrasing here, but I think at this point of the project, it actually demonstrates to me how frequently in life we see these nodal type relationships, and it’s just what we do, mostly without thinking. For a scalable app though, I’m still finding the right language that feels appropriate for the project.

Language learning as the interface

Perhaps the best fruit of the labour is that in testing the app, I was learning and recalling my vocab. I had a few moments where I just sat back and thought – “It works! As a language learning tool, it actually works!”

I've got ideas about more of a learning mode where the user sees all satellites and cores with their definitions, in addition to how it is now, which is more of a "check your knowledge" mode by default.

It gives me scope to expand the JSON file where all the definitions and their relationships are held, and I’m still thinking about how I might integrate illustrations or other symbolic cues to help support recall and visual meaning.

I want to onboard Framer Motion as a library so that I can get some of the UI bugs cleaned up. I can see scope for things like user accounts with learning history.

But those things can wait. For now, it feels fun, it feels like it has character, and most importantly, it’s live!

Jespaya is born

A little post script – I was sitting there last week playing with idea names. First I was thinking that the entire idea is a bit like a game of "I spy", so I started to merge languages with a bit of Franglish to create "Je Spy" (je meaning I). That became "Je Speye" (which introduces eye), which became "Je Speyer" (which wraps the made up word speye with an “er” at the end, which is classic French for verb structures. From there I relaxed it into Jespaya, which is sort of how it sounds but made more Australian phonetic I guess, and I like it since it sounds a bit like papaya.

The V1/prototype is here: jespaya.vercel.app

Happy learning!