1/2 Early sketches for interactive How to Use a Compass module, exploring animated elements and display on small devices.

1/2 Early wireframe sketches for new Series content on navigational pages.

2/2 Early sketches for interactive How to Use a Compass module, exploring animated elements and display on small devices.

2/2 Early wireframe sketches for new Series content on navigational pages.

Sketches for Ayu

Ayu, I tracked down some sketches of the interactive compass module from REI Innovation Days. Here you’ll see some early explorations into what an Anatomy of the Compass module might look like. In these sketches I was in discussion with our motion designer and devs about visual ways to call attention to the specific parts of the compass, but more specifically how the learner could step through the content on a mobile device. There’s a lot to say about each part of the compass (and how you use them) but real estate is limited on a mobile device, so it was a special area of focus for our Hack Days team. Unfortunately, the early prototype was built directly in REI’s publishing tool, which I no longer have access to, so I don’t have more to share. 

I’ve also included some very simple wireframe sketches that I created for our navigational pages. This work was done at a time when we were rolling out learning Series, a new collection/curriculum approach to our content. The new Series would display alongside our one-off educational experiences on these navigational pages. So here I was exploring how to differentiate one from the other and express that the Series included a collection of educational pages. These sketches are very simple, but this is how I first like to ideate. I quickly sketch, keeping it simple, focusing on the concept, and build from there. I think this sort of exploration could easily translate to something like the EdX dashboard.

Info Vis for Tim

Tim, here is a collection of some information visualization graphics produced for REI. While many of our topics were technical in nature, we rarely included a lot of data in our educational content. But I do think these examples illustrate a variety of ways to express information with the aid of visuals (be it illustrated or coded). I could see some of the basic concepts used here – allowing a line to draw the eye, comparison graphics, multiple views of the same subject, highlighting – translating well to something like the EdX dashboard. Please note I wasn’t the illustrator for all of these,  but I did have a hand in the concepting.