Context

I develop apps and websites for ski areas and other destinations. Destination apps are different. A user is a totally different user before, during and after their trip. When they're planning their ski trip, they're interested in making plans and reservations for the future - think hotels, flights, cars, skis, lift tickets, ski lessons, etc. When they're onsite and on vacation, they're looking for immediate needs and opportunities like where is happy hour? Or what band is playing nearby? They've already booked lodging and plane tickets, so why do we still try to sell them that?

A modern website/app must "know" the customer and tailor the presentation/conversation and sometimes even the vernacular to their persona. This is not about identity or remotely an invasion of privacy. This is caring enough about your customer to ensure your language, content, and promotions are relevant.

A web experience is a conversation with your customers. Don’t talk to all of them all at once the exact same way. No matter how interesting you are to one, it makes you boring to the others. When a user interacts with your app/site, we should listen, learn, and adapt. For example, depending on the content they visit and interact with, we will know whether they prefer the word “luxury” over “discount” or “extreme” over “family”, “wine” over “beer”, “spa” over “party”, etc. and we can adapt the conversation, the content and promotions to their preferences. In short, we can speak their language.

The best way to understand your user is not by their name, age, gender, race, address or personal identification. The best way to be relevant is to know their "Vocabulary" and their proximity. Proximity is the distance between your destination and their current location. Basically, are they onsite, minutes away, or days away? Modern devices with gps, etc. make this easy and it is not the point of this article. Be sure and use it though.

So, given a user's vocabulary, wouldn't it be great to know if they prefer "luxury", "discount", or "family"? Or if one background image is more appealing than another? Or perhaps you could describe an offer or an event differently based on whether they're a skier or a snowboarder or maybe they just like beer?

Introducing Vocabulary.js

Everybody and everything has a vocabulary. Users, actions, websites, ads, memes, etc. This tool can help you track and assess relevance between vocabularies and ensure your content will be interesting for your users. It’s super fast, tiny, agnostic and runs on the client.

Most humans and therefore most documents and websites have limited vocabularies, usually around 20,000 words and rarely more than 50,000 words. Vocabularies are typically much smaller than the documents they represent. A Vocabulary() is simply a hash table of all the words you’ve given it and how many times it’s seen the same word. In this way, every word is ranked by the frequency and size of the word. Like any json object, you can store a vocabulary anyway you like. Given their small size, I cache them locally in window.localStorage and can store them permanently in a NoSql db if desired. Blockchain too? (need help) You really only need to store a user’s vocabulary as they click around your site, return, etc. A page’s vocabulary should be created dynamically by the client and independently of the CMS, etc. I suppose you could calculate and cache on the server too, but that would only make sense if your page has an enormous number of words on the page.

Vocabulary() can run on the server (Node) or the client (Javascript). It does not depend on jQuery or any other libraries, but is compatible of course.

Visit https://chadsteele.github.io/Vocabulary/

User Stories

As a user, I want to be “heard” and “known” as I click around your site(s) over time and while I plan my trip, so that when your sight suggests other products, stories or opportunities they will be relevant to me and my demonstrated interests.

let userVocabulary = new Vocabulary();
userVocabulary.add("all the words on a page I'm interested in");
userVocabulary.add("all the words on another page I visited");
button.click(() => userVocabulary.add("some keywords associated with this button"));

The userVocabulary can be stored in localStorage, the cloud, or wherever. It won't likely be very big because our vocabularies are surprisingly small, especially on a focused website.

As a programmer, I want to maintain a user’s vocabulary and then present the user with relevant options in the dynamic components on the site.

let preference = userVocabulary.order("luxury discount family beer");

switch(preference[0]) {
  case "luxury":
    displayLuxuryOffers();
    break;
  case "discount":
    displayDiscountOffers();
    break;
  case "family":
    displayFamilyPromo();
    break;
  case "beer":
    displayPartyPromo();
    break;
}

As you can see, the possibilities are infinite, but the code is tiny. Please enjoy. You can git it here https://chadsteele.github.io/Vocabulary/

--Chad Steele