Updated UI Exploration, and a look at life before GoPantry:

Menu Version 002

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!

Updated UI. Now with interaction!

PantryScreen_animation_R

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 flows are so damn fun.

Weather_Not

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.

The law of diffusion of innovation

Diffusion_of_innovation

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.

Cold Beverages.

Flattop_grandopening_06-3

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.

Flattop_grandopening_group

A thing of beauty.

User_flow_whiteboard

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.

Almost too simple.

Carb_loader_01_iphone

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).

SimplyCarbs_iconUpdate: 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.

The bad ass iPhone illustration is from the Flat3D Mockup Kit designed by Frank Rapacciuolo – http://freesbie.it, and of course the status bar is from the Teehan + Lax iOS6 UI kit.

Not another sliding UI.

iPhone user interfaceI 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.

sub menu UI

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.

The white paper application

mobile application for white papers

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.

You can get it for iOS from the app store here, or for Android, here.

Asymmetrical super dog!

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.

iOS icon execution.

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.

iOS icons for strategy document.

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.

Can’t you see that’s a robot?!?

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.

The UI for the super secret portal.

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.

Update:

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.

The one built from the ground up.

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.

The slick, Flash server magnifier.

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.

The “90 seconds to fame and fortune” web portal.

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.

The one about setting boundaries with product managers.

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.

The Great Wall. For best results, view in China.

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.

Waiting for my glorified calculator to start up:

Ocean scene. With a big ass squid.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.

Worth every penny.

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.