Aug 22, 2013

Plotting UX

Character designs for a story by one of my genius kids.
Character designs for a story by one of my genius kids.

What is User Experience (UX)? That’s a big question and a lot of considerably more talented people have tackled this subject much better and more eloquently than I probably can. But it’s been forefront in my thoughts lately. So I figured I’d share where my thoughts about UX are heading by drawing a loose parallel using an increasingly popular notion of how it relates to plot development in storytelling.

From my perspective, a User Experience is how someone, or a group of someones, experiences something. While not initially apparent, plot development in a story is useful as a comparative tool. Be it an app, theme park ride or meal, the contributing elements of a user experience—and a compelling story—are all present: Understand (Exposition and Rising Action), Build (Climax) and Launch (Falling Action and Resolution). By looking at the UX process as a story’s plot development—a formula successfully used for hundreds of years—these disparate elements combine to form a richer whole. Translating these storytelling elements into a technology-based, UX process might feel odd, but let’s take a look shall we?


In stories, exposition and rising action is often the longest part of a story. They set the stage, introduce the characters and set them off on their adventure. (Every story is an adventure—even paranormal teen romances with teenage girls fawning over sparkly, moody, ancient vampires. Stories I will never read.) Within the technology field we typically call this the ”Discovery” phase, where the problem is identified, defined, possible solutions explored and a direction chosen and planning done to implement the next phase. I’ve swapped out Discovery in favor of Understand because this is the root of what we’re trying to accomplish in this phase.

Often this critical phase of User Experience Design is dramatically shortened because, “You’re talking waterfall, we do agile here. We’ll iterate through this as we go! Besides, we’ll stretch our budget further this way.” This does the eventual experience a great disservice by removing the best possible opportunity to truly understand—and begin an effective process of finding an appropriate solution to—the problem. Research, exploration and planning (like exposition and rising action in a story) provides you with the foundation and vision of your experience, which you can then iterate and build upon to your agile heart’s content. Shortcutting here can, and usually does, lead to a disorganized development cycle, confused users and unhappy clients.


The climax is supposed to be the most exciting part of a story. Your characters engage their nemesis in battle and are triumphant, or are defeated and left to regroup. In building a product or service this point in our story marks the beginning of crafting the code, aka the “Create”—or as I like to call it the Build phase—where things starting falling into place for you and a light appears at the end of the tunnel, distantly.

While it doesn’t appear logical that the initiation of coding your product or service serves as the climax of a project, it truly is. The effort required to reach this point often has involved significant work and overcome many difficult challenges to reach this point. If the research, exploration and planning have been done correctly by involving the technical team early and often in the Understand phase, everything should—theoretically—fall into place from here on out without too many surprises. When it does it’s magical and everyone’s euphoric ready to dive into the next phase and continue on the adventure.


In the last book you read, the final chapter or two wraps up most of the loose ends, gives you a warm fuzzy and sends you on your way. Many organizations have called this phase “Delivery”, I like Launch better.

Why? Well, with most digital products the end of a project marks the completion of a phase of work on a product. It is rarely, if ever truly finished beyond passing some arbitrary date on the project plan calendar, but the completed work should launch. There will always be tweaks and improvements to be made. Psychologically we need to finish the book, close and return it to the shelf and start another one, even if it’s a sequel.

For me, delivering a completed project is a satisfying feeling. It means we were able to stick to it and deliver something of value to our customer. That’s not to say it’s perfect or won’t be refactored by the next team to work on it (or us), but for us our work is completed and out in the wild—just like the last book I read. And hopefully I’ve learned a thing or two along the way that will help me make the next project I work on that much better.

Jun 3, 2013


Welcome to the new! For nearly a decade this site has sat neglected. To my chagrin—and by being active on Twitter, Dribbble, LinkedIn and the like—I haven’t done much with my personal site and it has become extremely long in the tooth.

So I’m changing that. The new design is fully responsive, uses lovely web fonts served up by the great folks at WebInk and is much better looking visually and simpler to navigate than the previous incarnation. My trusty old blog has been put out to the electronic pasture, and while things aren’t perfect they’re heading in the right direction. With that as introduction, here’s a bit about how I got to the new design:

Content and Priorities, it’s elementary.

First to get attention was content. Since mine is a personal site and I’m a designer: samples of my work, my thoughts on various topics and a way to share things that piqué my interest made sense and felt right to me. I started fiddling with how to organize my portfolio—since that is the most important part, right?—when the realization hit me that I needed to apply the same level of planning and effort to my personal site as I do with my other projects. So I refocused, starting with my site’s priorities, and discovered that the site could be broken down very simply: Show and Tell.

Pow! I felt like I’d just gone through a wormhole back to kindergarten. The simple elegance of this thought really excited me. Before I was mired in inane questions like “Should I have categories and tags on my blog?”, “Maybe I should have a tag cloud?” or“Do I really want to use WordPress, or is there something new and fancy, like Barley?” All of these questions melted away to reveal a more focused strategy as I attended to my overall priorities and something considerably more doable and friendly—free of impending technical decisions—appeared.

Keep on sketching

With my priorities squared away I plodded on and started noodling with the layout. As a longtime fan of 19th and early-20th-century broadsides with their single column layout and dense information delivery, but knowing that we live in a flat, minimalistic digital world, my design goal was to have something that referenced both. As my sketches evolved, I saw some encouraging progress.

Mind you, none of the sketches I did were masterpieces by any stretch of a gnat’s imagination. Rather they served as visual markers for me as I worked through concepts and ideas as they rattled out of my head down my arm and onto the page. These sketches were quite raw and very minimal—just enough to trigger my memory about the direction I was heading—and perfect for my purposes.

Once happy with the concepts emerging from my sketches, I fired up Illustrator to flesh out details like color, typography, icons and the like. Perhaps I could have gone straight to code, but I’ve found that staying static when working through initial concepts is very helpful. I’ve even put together an Illustrator template that helps me visualize a typical range of breakpoints by using multiple artboards. It might not be the best approach, but it works.

The hot pokers of branding

The last time I worked on my site, I didn’t do too much about branding. All of the social networks we use today didn’t exist and avatars were infrequent. Since then I’ve continually fretted about the right level of personal branding and as a result, it’s nearly always proven my undoing. This time—while it wasn’t easy—I’m happy with what I’ve created. It’s fun, current and references many of my eclectic likes and personality without being cheesy.

By the way, many projects I’ve worked on have bypassed this level of thought with regard to branding because it’s typically the last thing to be fully fleshed out—and it can be tedious. A project/product takes on a life of its own as you’re working on it and the end is often when you’re most familiar with it and it’s at its most vibrant, which makes it the best time to put the finishing touches on the visual identity. Just because your deadline is stampeding toward you like a runaway herd of elephants doesn’t mean you should push it off and launch without. Stay engaged just a little longer for the final details and you’ll find the effort well worth your time.


Over the years I’ve written my fair share of code and have accumulated a lot of baggage. This time I wanted to stretch out of my comfort zone. Do stuff I’ve not done before without the predetermined constraints of this or that framework. I chose to use LESS for CSS, jQuery (because I couldn’t get some functionality rewritten that would work with Zepto in time to launch—I’m not the best with javascript) for some JSON and other functionality and good ol’ HTML. That’s it. Nothing more.

Honestly, my success has been mixed. I did manage to get some dynamic elements loading with JSON (Thank you Joe and Daniel for your help!) and have simplified how I present my work. I’m not a true javascript ninja and there are parts I want to improve. So while I conceptually know the direction I want to go, from a practical standpoint I still have some distance to go before I can do it all myself.

For example, the Work section started with a great tutorial of a thumbnail grid with an expanding preview for inspiration which I modified to load using a JSON file and tweaked the CSS to display a bit better. I also found an improved version of a resize debouncer that helped eliminate some weird behavior on touch devices, but it also tied me to jQuery. I’d like to tweak that and the thumbnail grid so I can use Zepto instead of jQuery and allow more flexibility with the data I feed into the outgoing links in the expanding preview—provided there is a link.

With my blog, I’ve eschewed all blog software in favor of hand-coded entries. I don’t write posts too often, although Editorially that might change. Eventually I’d like to create something more robust utilizing server-side Markdown files and javascript to generate static HTML files (I know: node.js, but I have a few constraints like not having root access with my shared hosting account. Ember looks promising in this regard.) There will be additional functionality introduced as I write more, currently, I’m happy with what I have.

Testing things out

Building the site responsively, I am keen to have it work well on a range of devices and have informally tested on a few of the more popular devices and browsers and am pleased with the results, for now. Sure there are things I’m missing, but from a UX perspective, it’s what I’m aiming for. Plus it’s better to launch and improve as time goes on. So if you see something that might be improved, drop me a note or a tweet.

All wrapped up with a bow

And there you have my rambling account of how I arrived at my new design. Thank you for reading all the way to the end. I really do appreciate it and hope you like the new design. Here’s your Special No Prize. Enjoy!

Aug 24, 2011

Rick Roll IE

The other day on twitter, John mentioned that there should be a Rick Roll for IE. Blake thought it should be a javascript plugin. I realized that you could do this with conditional comments and no fancy javascript at all. So without further ado, introducing Rick Roll IE:

<!--[if IE]>
<meta http-equiv="refresh" content="0;url="/>
< ![endif]-->

Oh, and it's on GitHub. Just in case.

Jun 28, 2011

Conan 2011 Commencement Speech

Fantastic speech by Conan O'Brien.

Gem for me is:

It is our failure to become our perceived ideal that ultimately defines us and makes us unique.

May 30, 2011

WebVisions 2011

Just posted my slide deck on Slideshare for those of you who came to WebVisions last week. Huge amounts of thanks to Brad Smith for pulling together a great event and all the attendees and presenters I had a chance to meet last week.

Apr 7, 2010

Fishing for lte IE8 CSS3 goodness

Looking for help with some CSS3 goodness for lte IE 8. Is it hopeless? (Probably.) Help a brother out with your brilliance.

Read more

Feb 17, 2010

Acid 3 and Mobile browsers

Blackberry showing its new browser piqued my curiosity on how other mobile browsers do on the Acid 3 test.

Read more

Oct 9, 2009

The Kelmscott Chaucer

Considered a masterpiece in fine art book printing, The Kelmscott Chaucer is an inspiring book to anyone who has the opportunity to view it.

Read more

© 1998-2020 Ty Hatch. All rights reserved.

Copyright © 1998-2018 Ty Hatch. All rights reserved.

Copyright © 1998-2018 Ty Hatch. All rights reserved.