skip vision

Riders of the DC metro are familiar with the signs in each station telling when to expect the next train. These signs are no doubt helpful, but tragically constrained to their fixed physical locations. What if we could view these signs on the desktop of our mobile device, saving us the step of clicking down through an app or website? In this post, I design a theoretical Android widget that imagines what this experience might be like.

I should first note that there are already websites and mobile apps that fulfill this need, answering that important question of “when is the train coming?” But I think this experience still has room for improvement, particularly when it comes to the mobile experience. Specifically, I’m interested in reproducing the experience of quickly looking at a sign, both in its visual aesthetic and the quick-casual-glance nature of the behavior.

The solution? A widget on your phone’s desktop, showing train arrival times at the station of your choice. Wherever you may be, a quick look at your phone would give you the information you seek. Done as a design exercise, below are some mockups of what such an app/widget might look like.

Putting this idea into form, I first created a very literal translation of the sign that greets me when arriving at the Greenbelt metro. I designed this as an Android widget, taking up a reasonable four columns by two rows of desktop space.

Immediately I realized that Greenbelt is in a relatively rare situation amongst it metro station peers: it is at the end of a line, and all trains go in a single direction. A more practical widget solution would need to account for stations with trains going in multiple directions — and possibly, on multiple metro lines (i.e., green, red, etc). For design & layout, I found easy inspiration in the great UI work done by David Desandro and Ian Storm for their recent Next Metro app built for the 10kApart contest.

A nice look & feel for the widget in place, but a few more design challenges remain. How would users select the station to view, and how would they change to show other stations? Keeping this theoretical application/widget as simple as possible is the goal — so I believe a simple list would suffice. Let users mark certain stations as favorites, which would allow them to quickly find their preferred stations from the list of several dozen.

And there we have it! While not 100% of the UX details are in place, the vision for the widget (and background application) are set forth here. Would this be possible on Android, given, the unique ticker typeface in use? I’m honestly not sure. Any font would suffice, on a functional level — but my ultimate aim was to think about how the *look at the sign* experience we all know well could be directly translated on to the mobile devices we use every day.

This post ends with an infographic, detailing a timeline of TV watching spanning six months:

It begins in mid-September 2009, where I found myself armed with a nagging curiosity about the show Lost – a show I had never once watched. For various reasons, the idea of the show intrigued me greatly. Somehow, in all the many Lost conversations I had overheard in years prior, I strangely managed to remember practically nothing in the realm of spoilers. Time travel, something called the smoke monster, and that someone died in season 3: these were the only items of baggage I had accumulated. Not bad.

The final season was only months away from airing. I knew that I had better take action soon if I ever wanted to take part in the experience of watching it live. It was the discovery that the whole show was available on Netflix’s Watch Instantly which spurred me to action. One rainy Saturday later, I was five episodes in to Season 1 and not looking back. In the end, it took me quite a big longer than expected to get fully caught up – but I was able to do so less than two weeks after the premiere episode of Season 6. And tonight, February 17, 2009 – I shall tune in live to watch LOST, fully caught up, for the first time.

On top of Roger Federer winning his 15th major title at 2009 Wimbledon, I wanted to explore the front-running champions who have walked before him. As a result, I’ve put together an visualization of these champions over time.

I should note that in doing my preparation for this infographic, I decided to extend far beyond the start of the “open era” (1968) entirely for the amount of data. A post-1968 graph would give me much less to work with.

Otherwise I feel I should pay respect to the accomplishments of Rod Laver and Bjorn Borg: both of these men had utterly remarkable runs (both earning 11 titles in less than a decade), but neither becoming the true front-runner within the constraints of this graph.

I hope you enjoy! If you find this interesting, also be sure to check out this comparison of Federer and Sampras in their race to 14 titles. Meanwhile, here’s to Federer’s hard work… let’s see how far he can take it.

I recently had the pleasure of attending the User Interface Engineering Roadshow in Washington, DC. The day was chock-full of insight and wisdom from usability guru Jared Spool, founder of UIE.com. In taking notes during the workshop, I decided to take my first official shot at sketchnoting. The results are as follows:

Overall, I found this experience to be wholly satisfying. Putting key ideas into sketches required an interesting use of my attention span: in addition to listening intently to the ideas being communicated, I was simultaneously forced to employ creative sketching solutions that would properly embody the most important parts of the talks.

Upon returning home from the Roadshow, I was quite surprised to find these sketches spanning 5 full pages of my notebook. Upon scanning the notes and adding a bit of chronological organization, I’m left with a sort of visual map of the workshop (as I experienced it). I hope these notes might be of interest to others who attended.

As for adventures in sketchnoting? I look forward to continued exploration when the proper circumstances arise in the future.

With Roger Federer’s recent win of the 2009 French Open, he is now tied with Pete Sampras for holding the most Grand Slam titles — fourteen.  Although the two athletes have arrived at the same destination, how do their respective journeys compare with one another?  With this question fueling my curiosity, I set out to create a rich visualization of the data to add some depth to this story.

The final product is available as follows.  For additional notes about the techniques used to create these graphs, keep on reading.

Here are some tips & techniques I employed to put this together.

Have Your Data Ready

Before diving into Illustrator (or whatever your tool of choice may be), spend the necessary time finding all of the data you will need for your graph.  Go the extra mile to arrange and label everything properly — you may return to the data at a much later time and will be glad you did yourself the favor.  Aside from reaping the benefits of good organization, this step is additionally helpful in keeping the grunt work of data-fetching separate from the creative requirements of the task.

Start with the Simplest Graph Possible

An elegant, attractive graph is seldom created from scratch.  There are usually a number of tried & tested variations that must be wrestled with before arriving at the final product.  With this in mind, a good first step is creating some bare-bones, stripped down graphs to get bird’s eye view of the data.  This phase is all about finding the approach that will best server your original vision.  Sketches work great in this stage.

What is the story you want to tell with your data?  This is an important question to keep in mind, as different visualization approaches will yield different results.  Play around with things.  See what looks good as well as which data comparisons are intuitive and interesting.  Seek feedback from friends or colleagues who might offer a valuable opinion.

Using the Grid

Before long, it will be time to create your final, finished product.  At this stage, the very most important thing you can do to keep things looking straight and orderly is use Illustrator’s grid feature.  You’ll want to make grids visible (CTRL/CMD + “), as well as enable “Snap to Grid” (CTRL/CMD + SHIFT + “).  Additionally, you may want to go into Illustrator’s preferences to customize the grid spacing and subdivision width (which you can modify at any point).

Another useful tip to keep in mind when using grids extensively is enabling Overprint Preview (CTRL/CMD + ALT + SHIFT + Y).  This will have the gridlines appear on top of all objects & paths, allowing you to eliminate any guessing that might otherwise be required in keeping things properly arranged.

Using Layers Wisely

Keeping your objects arranged in layers is a huge time-saver when dealing with moderately complex projects in Illustrator.  This was especially true in my case of creating four separate graphs, each of which contained separate groups of objects.  For example: if I wanted to modify the color of the Roger Federer graph plots, I’d only need to target the layer “Federer” and all plots (on each graph) would become active.

Layers can also be locked, combined, or temporarily hidden to make document management easier.

Go Forth and Visualize

And that’s it!  Combined with a simple bit of color and typography, you can transform any crude visualization into an attractive graph.  Keep in mind that data in itself can be rather inert; though when arranged in a conscientious manner it can tell an interesting story.  Hopefully the techniques above can be of use in recreating your own graphs of a similar nature.

While on a recent plane ride, I embarked on a self-imposed quickfire challenge to use Adobe Illustrator to design the text “@davidpots” (my Twitter username) in the style of the Washington Capitals logo.  I was armed with only 45 minutes and a vector version of the Capitals logo; no internet connection would be at hand for additional assets (such as fonts, etc).

By the end of the plane ride, things worked out great:

Throughout the remainder of the post, I’d like to share an overview of the approach I took and the Illustrator techniques used to make this happen.  The result is not merely a tutorial, but rather a broad look at some Illustrator skills any user might find helpful in such a situation. Continue reading »

Remember when you were a kid and used to think about the future? If you were like me, visions of the future were full of hoverboards, flying cars, and shiny chrome everything. There was no doubt the future would be awesome, even if it seemed forever away.

Things seem quite different as an adult, especially one living in the early 21st century. The future no longer waits quietly over the horizon, but is instead standing at the doorstep. At times, peering ahead one or two decades seems somewhat unfathomable, as our lives change so much with each passing year. How to put it all into perspective?

The solution is simple: turn to a media futurist! Continue reading »

How to setup your Nintendo Wii to watch online video on your TV!  An overview and walkthrough, breaking down not only the steps required but also why this matters.

More coming soon.  For now, enjoy the video!

For far too long I have gone without sharing the great experience I recently had ordering eyeglasses online.  Time to get the word out, at last!

The Past? It’s a blur…

Rewind a few months back, when a gathering forever of accumulated eye strain had finally pushed me to the limit.  I bit the bullet and went to see my opthamologist.  After a few visits, he advised I get glasses.  Fair enough!  I’d be able to see, right?

My next move was a stroll on down to a few nearby retail eyeglass shops, where I was consequently shocked.  Glasses are expensive.  Really expensive.  Even the ones on the lower end of the scale at the cheapo store.  Throw in some extra lens fees and not much help from my vision plan?  The final count was way up there.

Looked like I didn’t need glasses that bad.  And so it went, week after week of me refusing to give in so easily.  But then it happened — a happenstance reader comment at the bottom of a random blog, and my glasses life was changed forever!

But wait, there’s hope!

I had found a post titled Adventures in $40 Eyeglasses, and leaving me hugely intrigued.  I read the post, scoured the comments, followed the links, rinsed and repeated.  This was exactly what I had been looking for.

Long story short?  You can order glasses online.  The very same glasses you’d get at any of the chain/retail places.  And they’re cheaper… so much cheaper.  Reading comment after comment and post after post, I was as good as sold.  Glasses for $40, give or take?  Where do I sign up. Continue reading »

Anyone who has set out to learn Photoshop, Illustrator, or any other design tool has probably tackled several tutorials along the way. Online tutorials are plentiful, surely an invaluable resource for those who seek to learn. However, tutorials alone are certainly not the end-all, be-all of design education. As good as any lesson might be, the true knowledge you take away depends largely on what you bring to the table. Continue reading »