The Digital Cairn Project

Interact with the live project here: Digital Cairn

I had the opportunity to take a JavaScript course at RISD (Rhode Island School of Design) this year to grow my JavaScript skills. We covered some common JS libraries like jQuery UI, and Processing.js. One of the goals of the class was to give Artists the tools they need to build highly interactive digital experiences.

Tools

  • Micro User Testing
  • User Interface Design
  • Rapid Prototyping with JavaScript
  • Hand coded HTML/CSS, portions of JS/jQuery
  • UI Kit

The Concept For The Cairn Project

I had become fascinated with Cairns while hiking in the White Mountains with some friends, the mystery and lore stuck with me when I came back to civilization. I wanted to bring a piece of that experience back with me and share it with others.

My goal is to honor the tradition of Cairn building, and to see if that tradition could be complimented by a digital interactive experience.

Pemigewasset Wilderness, NH, 2018

I wanted the interface components to be beautiful to look at. The pebbles stones and rocks used in the outdoor Cairns can be oblong, chunky, smooth, or cracked. To capture that in my rendering I went to my sketchbook with charcoal to build texture for my Cairn.

Charcoal marks in sketchbook
I wanted the interface components to be beautiful to look at
These are the stones I crafted using the charcoal textures

Developing The Interface

This is an early prototype used for in class discussion.

After I crafted the individual pebbles for the Cairns, I investigated JavaScript libraries to use to build interactive objects that could be clicked and dragged. My code was very crude. I was more familiar with HTML and CSS, so I did work there first. I built out the front end concept before the logic was in place for interactivity. I was able to find some examples of “Drag and Stack” UI that used HTML5 canvas, but quickly moved out of my depth. I didn’t want to built something that I didn’t understand, and many of the libraries I skimmed were pretty dense. All of the HTML and CSS was hand coded.

I added the pebbles in a row at the bottom of the screen after sharing the first prototype above. The canvas to stack the pebbles was above that, and the new pebbles appeared there after they were added.

Bringing the pebbles into the DOM
Working out jQuery issues in the browser

Take-aways From Micro User Testing

My notes from observing and asking questions while Michele used the site.

After completing the second iteration of the project, I received feedback that one user was not sure what they were supposed to do, and didn’t get it. After hearing that I decided to do a deliberate micro user testing session with my wife Michele. That way I could receive feedback quickly and in person, and observe how Michele used the site right there at the computer.

Adding clearer instructions for how to use the pebbles.

This is the updated pebble block with instructions

In the original design the instructions for copying and moving a pebble were at the top of the page. This would get skimmed and ignored. Michele did not notice it was there and had to perform random clicking to figure out how the interface worked.

Defining the Cairn canvas area more clearly.

An issue with the original layout was that the entire page worked as the canvas to build your Cairn. The user did not have any guides or prompt as to were they could place their Cairn. This could cause confusion if part of the Cairn covered instructions, and other content.

My solution was to add a CSS border to the Cairn canvas. This gave clear identifiers to the user that this was a good spot to build their Cairn, because it was framed in space.

Adding a site description to clarify the concept

There was also confusion as to what a Cairn actually was. To give an explanation and illustration of one in the wild I added a project brief at the top of the page. This description acts as an introduction to the concept, and the added image illustrates the proportion and dimension of a real Cairn.

The updated UI and content based on user feedback

When the instructions, concept, and canvas had been defined and updated, I decided to lift some of the HTML and CSS off of my shoulders by using UI Kit to hook into some prebuilt and styled elements and components.

Final Take-aways

This was a joy to build. I was able to exercise JavaScript and jQuery in a quick and dirty way, so there is definitely room for more elegant code in the .js file, but the value I am leaving with here is the skill to build out UI concepts quickly, and then gathering feedback from testing to improve it.

Cheers!