User flows always start like this:
And then end up like this. A sort of hybrid user flow/wireframe:
Exploration for the GoPantry pantry screen. I’m trying to make it quickly accessible to the eye and not too “listy”. I want users to be able to use this while walking through a store or similar activity, so it needs to be non-distracting. This version has larger tappable areas and differentiated info that (hopefully) can be gleaned at a glance. I toyed with the idea of icons to denote the types of food (let’s face it, that’d be fun), but I want to reduce cognitive load, not make the user have to decipher another symbol in order to get the info he/she wants.
Now the video, written and produced by Chris Moscardi and myself, directed by Joe Bowden. Yes!
Getting closer to the release of this app, at the moment we’re refining features and user flows so I’ve updated the UI a bit. Also, we’ve started talking about animations to help speed up learning. In this case the items can be swiped off to the left, so the animation has them sliding in to give the user a hint to the action.
User flow for an in-development weather but-really-weather-is-the-secondary-set-of-information application. I’ll update when it goes live. Having done these independently and for large and small clients, determining user flows, creating wireframes and mockups, and testing are some of the most fun you can have creating products.
Quick graphic for a presentation. The theories around the law of diffusion of innovation were popularized in the book “Diffusion of Innovations”, by Everett Rogers in 1962. They become to mean that in order to get mass market penetration, a product had to cross the threshold between the early adopters, the people who buy your product due to emotional connection and an alignment with your philosophy, and the early majority, the people who won’t buy something until someone else has tried and tested it. Simon Sinek does a great TED talk on how great leaders inspire action using this principle, among other things.
Series of posters I did for a restaurant/bar/pool hall in Anchorage, Alaska. They feature the only authentic Chicago style deep dish pizza anywhere in the city, professional pool tables, a full bar, and my old band (at least on this night) on stage. Pretty cool place.
I wanted these to be simple, graphic, and extremely viewable from every location in any venue they were getting placed in. The intent was to cut through the clutter of every other event poster in the vicinity and make the viewer get out of his or her chair and read it.
Few things in this world are as comforting as a user flow when you’re sitting at your desk plowing through image or code updates. To some, it’s merely a bunch of boxes with words and lines connecting them. This one in particular though, can tell you who owns which page, the date the content for the page will be done, and what type of nav system goes on it. All at a single glance.
This is a minimum viable product for an app focused on simplicity. I realize it could be even more minimal without the progress ring, but it isn’t really a feature, just a quick way to give feedback to the user. All actions are gesture based, you swipe up to add a new item, left or right to to move along the days of the week, and down for settings. The goal of this application is to give the user an approximate idea of where he/she stands, so even the input is simple and based on extremely simple language (more about this after it launches – almost there).
Update: Nothing too pressing here, but here’s the all important icon for this app (will be live on the Play store in August). The app is called “Simply Carbs”, thus the (perhaps too) obvious icon choice: a slice of bread.
Update: Yay! This is live – Go to the play store.
I was presented with an opportunity to create a user interface for an existing third party app – which was interesting. Designing apps from the ground up means you know how the user will flow through it and what hardware parameters you may have to contend with. For this project, I was given an example and had to design around memory limitations and someone else’s user experience. Since the functionality of the app itself is fairly complex, I wanted to keep the menu system simple.
Once the user taps the first segment selection, that screen slides out of the way to reveal the submenu. Nothing ground breaking, but I’m intrigued by the way the flat submenu came out.
The second image is the selected state of the submenu, and those gray boxes represent product thumbnails. Both menus had to be scalable, and this progressive disclosure system allows for infinite scroll-ability of both menus. Categories and products can be added with reckless abandon.
This is a mobile application we recently shipped that dynamically aggregates white papers and displays them on your phone or tablet. I was 1/2 art director, 2/3 product manager, 1/3 producer, 7/16 UX designer, and 1/125th copy writer. The fantastic team at Raizlabs did the hard stuff, including integrating it with our systems and helping me get it into our customer response system (of which 25% are opting in, by the way). Many thanks to that whole team, they really know what they’re doing. We pioneered many processes and connections between mobile and our existing systems. This was a fun project with a great (courageous) client and some unbelievable support not only from my team members, but our interior web development, marketing, and sales teams too.
We won a Marcom gold award for this version, and the next shippable iteration will have videos embedded and some added functionality like batch downloading and downloading in the background. Looking forward to it.
This is an icon for an identity I’m working on. If you haven’t guessed, it’s a double-single malt scotch, probably an 18 year. For the overall logo the type solution will remain the same, but there will be a few different interchangeable icons associated with it. They will, of course, all have a similar theme and keep the brand intact no matter which icon is being viewed. Call this a work in progress, more to come!
This is a comp done during preliminary creation of the Flydog brand, which is a pet travel solutions company. While this may never end up getting used, I really like it. The idea behind it was to characterize the dog as a super hero getting ready to take off and go save someone. The asymmetrical shape behind is also supposed to denote movement as well as a sense of power similar to the effect of filming someone from a low angle.
So, once I finished the mobile icon strategy guide, I went ahead and designed the icons using said strategy. The are a series of sorts, with the unifying characteristics being the color scheme and the perspective. Additionally, 5 areas of expertise by different business units within the company are represented with the “material” that makes up the foundation of the icon. All other branding is being done before the user downloads and installs the app from campaign collateral and from the information on the app store itself. Finally, these are intended to build an association between the modern, forward thinking aspects of the company and the user.
My team is launching an app in a week or so, and during the finalization of everything I realized that without an icon strategy these thing could get out of hand really quickly in a huge-giant company. So I wrote up an icon strategy guide outlining a few approaches and suggesting the correct course of action. Obviously we’ll need consistency with the corporate brand without all of them looking exactly the same (which is what we have now), so I focused on having a single unifying characteristic and building off of that. The best part was creating some examples using existing app names (full disclosure, the left one is my concept but executed freaking skillfully by the geniuses over at Raizlabs, the company we’ve partnered with to develop apps with us. Check them out, they really know what they’re doing). Anyway, this a sample of a couple of the icons I included in the document.
As a kid, I watched “Short Circuit” at least 77 times. I still don’t know how Johnny 5 could put on a cowboy hat and a bandana as a disguise and nobody notice that he’s a futuristic robot with tank treads and a GIANT LASER ON HIS SHOULDER! At any rate, this is not Johnny 5. This is his overly temperamental cousin Number 1. He’s not interested in wearing cowboy hats, catching butterflies, or dancing with Ally Sheedy. He just wants to laser stuff. Rocks, computers, various military equipment, you name it, he’ll fire at it.
Done for the hell of it (truth be told I’ve always wanted to draw this robot) in Illustrator.
This is a logo comp for a DC area music consultant. As you can see, the icon is a record with a heart on it. I wanted to incorporate the heart because the client genuinely cares for music and the choirs he works with. And while I’ll be the first to admit that the record is a symbol from days long ago, vinyl has been noted historically for having a warmth and sound quality that is not re-creatable across today’s digital music landscape.
This is a very small sampling of an interface I’m building for a content download and sharing portal. This is one of those projects that occur in real life, meaning that a use case had to be developed, wireframe made, multiple rounds of interface design and mock-ups, and basic usability testing done in an extremely condensed timeline. It is successful so far, and will get additional budget allocated to it for refinements in the upcoming months. Projects like this are challenging due to the nature of the limited initial budget, the VIP stakeholders, and the quick deadline, but hell, that’s what makes them fun.
After meeting with the client some new needs came about, so I refined it and below is the update. It includes a sharing functionality in which the user selects all the assets he or she wants to send to someone, and it generates an email with embed codes to everything, no matter which server it’s served from. Multiple files originating in multiple places available in a single email. Pretty cool. Also updated the buttons and did some miscellaneous cleaning.
This is a logo for a promo company in Alaska. Truth be told, I was merely the technical side of this collaboration, the real artist is my best friend, Joe. The client wanted it tattoo like and illustrative, which is accounted for it’s tattoo-like, illustrative style. Yay!
This project was to develop an identity for a local yoga studio. The criteria were simple:
- Don’t make it look like a typical yoga studio
- No compass illustrations (of course)
The solution I proposed was to use the Flamingo to show strength, with the legs crossed in a way to hint at the four directions without being obvious. Also, since this studio is focused on stability and building one’s inner strength, what better icon than that of a bird that stands on one leg for hours at a time?
This project was a multi-phase monster (in a great way). It was a redesign to the template for this product range, which was getting completely redesigned itself. To that end, we had to start with market research and built the entire program from scratch.
Once I sold the initial concepts to the product and sales teams, I was tasked with designing the new layout, choosing the colorways, creating the icon sets, creating a tiered “good, better, best” visual rating system, updating the product image standard, and art directing the photo shoots.
The project was a huge success with the sales team, and the retail outlets like CompUSA raved about the modern, updated look. Every aspect of this launch was built from the ground up, and due to its vastness it has remained one of my all time favorite projects.
This banner, part of a campaign, was promoting an all-in-one server solution for small to medium businesses. The concept was to show a single rack, but have a magnifying glass area come down to zero in on each solution included within it: power, cooling and management.
My part of this and all online advertising projects was concepting and copywriting, then to execute them in Flash, create a gif backup, and provide to the media team for publication. This particular banner got a reasonable 2% click-through rate in publication. Given the fact that only 8% of users click on ads at all, that’s not too shabby.
This project was a simple initiative, create a portal to teach thousands of sales and product managers how to generate their own product focused videos. Sure, I happen to be an art director on a team that creates video, but research has shown us that user-generated content works, boosting sales up to 30%.
So, I created a website to inform them of that. I did all the layout, concepting, wireframing, and wrote the HTML and CSS. Additionally, I wrote the content and produced and directed the videos that appear on the site. I also had to coordinate talent and closely manage budgets and timelines.
This project has been wildly successful with many people participating. Unfortunately it’s behind a firewall, otherwise I’d include a URL.
So, I incorporated a representation of the Newport Bridge to symbolize the “H” in Hickey, and a single sail boat to symbolize the “A” in associates. The idea was to give the mark a very professional yet familiar, local feeling.
This was a personal project. A good friend of mine was having trouble with rogue product managers assaulting him at his desk asking for Photoshop favors. So he built a bodyguard from a large format printer paper tube – complete with a paper tie – to keep intruders out of his cube.
Naturally, we filmed a short cinematic masterpiece about him on a rampage. Even more naturally, I created a title sequence for said film.
I was recently in China for 12 wife-missing, massive amounts of work having, Tsing Tao and white water drinking, Peking duck eating, language barrier filled days. What an amazing country. The highlight, of course, was seeing the Great Wall and climbing all 5000 miles of it! Photo by Brian Gagnon. Check him out, he does really good work.
I’ve been working on this 10 by 18 inch poster everyday for the last few weeks in the couple of minutes between my pressing power and my laptop actually turning on. The stipulation was that I stop drawing as soon as I got the “Press Ctrl + Alt + Delete” to unlock screen. Species represented include: Giant Squid, Mahi Mahi aka Dolphinfish, Tigertale Seahorse, Giant Octopus, Humpback and Gray Whale.
A huge thank you to Marcello Munoz for producing this one. Very informative!
One of the best quotes I’ve read comes from Todd Gutsche (who wrote “Exploiting Chaos”- close your laptop and read this now if you haven’t already), who tells the story of a young man who offered J.P. Morgan the “Guaranteed Formula for Success” in a single, unremarkable envelope, all for the reasonable sum of $25000 dollars. Mr. Morgan opened the envelop, examined the note, and quickly made a check out for the entire sum.
Written on the note:
1. Every morning write a list of the things that need to be done that day.
2. Do them.