The Digital Cairn Project
Interact with the live project here: Digital Cairn
- Micro User Testing
- User Interface Design
- 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.
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.
I wanted the interface components to be beautiful to look at
Developing The Interface
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 markup and jQuery issues in the browser
Take-aways From Micro User Testing
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.
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.