This and That

"This and That" Web Application

This and That is an interactive story builder to help intermediate English learners understand a series of important English words that have a wide array of meanings. Users construct a unique story as they choose between uses of a given word, and the emoji icon changes to reflect the emotional state of the main character.


This project was a collaboration with Matt Duncan (a fellow student) and grew out of a fascination we both share with language and communication. Our research started with linguistic relativity, semiotics, and exploring the function of emoji as valuable context cues; ultimately we were looking at how context influences meaning. Based on the research of I. A. Richards, we identified a number of highly important English words. The words are important because they cover the ideas we can least avoid using, and they are words we are forced to use in explaining other words (because it is in terms of the ideas they cover that the meanings of other words must be given).

Narrative Structure

We did a lot of experimentation with constructing stories with the words, and finally decided upon a system in which we wrote narratives with modular units that presented expanding numbers of possibilities as the story progressed. The narratives we present are only a small sampling of the many meanings of these words, and certainly only a fraction of the many words of this type, and therefore this project is more of a proof of concept rather than a comprehensive pedagogical program.

Some of the Japanese influences
We selected an English-learning Japanese young adult audience to help guide our design decisions. We watched J-pop videos, collected kawaii items, and looked at Japanese design competitions. Ultimately we decided to make the project relevant to a broader audience, but some of the influence remained.
Visually representing the pathways was not a good solution.
Proficiency in language is gained by repetition, so to encourage users to explore the network of use cases available, we developed a visual representation of the narrative pathways by placing connected nodes over the location of the key words in the paragraph, then highlighting the current position and indicating which paths had been previously chosen. We explored many visual possibilities and developed several interactive approaches, but after user testing, we discarded the map altogether because it was found distracting at best, and confusing at worst.

Through this project we present the curiosity of these words’ diverse uses with a co-important function as a teaching tool for intermediate-level English learners. These words in almost all cases can be very ambiguous alone; their meaning is contingent on the context they are used in. We believe that a strong understanding of these core words is paramount in communicating effectively in the English language, and due their crucial role, these words were chosen to be implemented as our primary arsenal of vocabulary for this project.