Responses by Andy Moliski, designer and developer.

Background: With A Trail Tale, our goal was to create a living web experience designed to invite users from all walks of life to hike right alongside me as I experience the joys and hardships of backpacking the Appalachian Trail—the world’s longest and most challenging footpath—all in real time.

Design core: The site features thousands of pixel art illustrations and animations in shuffled parallax environments inspired by the Appalachian Mountains. I wanted to create a series of landscapes that were as complex as they were familiar. Pixel art was the style of choice based on performance—you couldn’t ask for a more responsive art style! These layers and animations boil down to kilobytes, so we had a lot of flexibility to keep adding dynamism to each scene. We didn’t want users to download an app to experience the real-time updates; the interaction needed to be casual, so web performance and responsiveness were high on our list of priorities.

The site changes based on my location as I progress along the trail. The scene, weather and time of day are all affected by my geolocation to create an accurate, live-updated depiction of the natural environments I journey through. If it’s evening and I’m hiking in the rain in Maine, the site will adjust to feature environmental content accordingly without user input.

While environmental changes are out of my control, I maintain minor updates to the site by adjusting my character’s animation and the site’s music through my disposition: fortitude (physical strength) and morale (mental strength). Most of these changes are accomplished simply through button taps and lever pulls, which makes updating in the backcountry with spotty service very easy.

I also write temporary, tweet-length conversations that appear as chat bubbles over my character’s head, almost as if we were talking while hiking side by side. These conversations create a platform for me to speak casually and vulnerably about the failures and triumphs of the trail.

Favorite details: I’m really interested in the site’s relationship with time. Unlike a blog where you can go back and absorb all the content at once, A Trail Tale encourages repeat visitation. It fosters a more intimate relationship with experiences along the trail because everything is relevant to the context of my live-updated journey. With the exception of more typical journal entries and a log of data, very little on the site is in hindsight. Just like a journey that takes place over time, A Trail Tale cannot be experienced all in a single sitting!

I’m also so excited to have had the chance to create this site with my two wickedly talented brothers, Adam and Alex. They handled the development magic and the site’s spectacular soundtrack, respectively.

Challenges: Managing live updates from the most remote regions in the Appalachian Mountains posed a particular challenge. Our solution to managing most of the site’s updates based on geolocation data played a huge role in cycling environmental content without the need for a stable connection to cell service.

Time constraints: We wanted the site to be robust enough to exist as proof of concept, but over the course of our year-and-a-half design and development phase, we were able to include almost all the core features. But ideas were flowing for the site—and still are!

Technology: We used Unity to assemble the pixel art assets into animated scenes. We built the project in WebGL and used Vue.js to build the UI, which contains the interactive elements and music and controls the display of scenes and animations. The project is built and uploaded to AWS S3, where CloudFront hosts the static files.

A Node.js server using a PostgreSQL database keeps track of dynamic elements like mood, fortitude, location, journal entries and conversation blurbs. The page is updated using a separate Vue.js app, which uses the PWA plugin that “installs” the page as an app and updates even when we’re offline. The updates are synced with the server when we get cell service.