In the fall of 2009 I worked on a community project for Dell called INsight. You can read about the project here, but the overall gist is that it’s a place where people can test, review, and provide feedback directly to Dell about their experience with various software packages before they are released to the public. The whole project was basically a pitch, something the consulting firm we partnered with could take to Dell and show it’s potential. We delivered a functional prototype that I helped conceive both strategically and creatively.

Generally speaking the portals I’ve seen that follow a similar model of a testing community tend to be boring and overwhelmed with content. If someone is going to willingly sign-up to take part in a beta process then they either a: already have an interest in the products being offered, b: need an incentive to participate, or c: all of the above. We knew that the site needed multiple incentives.

One of the first decisions I made is that this site needed an aesthetic style that would encourage users to interact with it. I took some queues from Netflix since I feel they do an amazing job at providing an interface that makes me want to browse multiple products at a time and easily dive into each if I want to know more. I created these “software tiles” which provide key pieces of valuable information about each product to the user at a high-level. I varied the font sizes, color, and placement of the content in order to create a hierarchy that gives the user the ability to quickly scan these tiles and get the info they need. One thing I don’t show in these sample images is that I designed a information pop-up that displays on hover (after a short delay) which provides a short description of what the product is about (again, a la Netflix) so that they don’t have to click into each page to find that out.

Aside from visually stimulating a user to interact with the site, we devised a system that would reward users the more they used the site and participated in the beta process. On a simple level we instituted a “level-up” ingredient that would tag a user as a “novice”, “expert”, etc. We also included “badges” that a user could earn as they completed certain types of panels or quantity. In a more tangible way we assigned a point value to each product and if the user completed their participation then they would earn points. These points could be traded in for real-world rewards such as free shipping, order codes at Dell.com, and gift cards. In addition we added the option to include a prize giveaway to a panel where a user would be selected at random to win a laptop or something like an Xbox 360.

It was important to provide incentives from varying angles because we knew our target audience would be diverse and that people choose to participate for varying reasons. Plus it was a way for Dell to help drive traffic to certain panels if they wished. Increase the incentive and you have a better chance at getting more people to participate.

Even though it was a pitch and the future of this project has yet to be defined, I enjoyed working on this project, crafting out all of the UI elements, and working up the overall strategy with my coworkers. There were plenty of creative challenges along the way and anytime I can work on fine details and little icons like in the “Rewards Center” I’m in design heaven.

Before the holidays I added a pitch project I worked on in 2009 for Gemalto, one of the world’s leading security chip manufacturers. The RFP Gemalto presented to Springbox asked for fresh ad campaign ideas, which we developed and presented to them. You can read more about my concept and how the ad builds out on it’s project page in my work section.

What I want to focus on in this article is the process I took from concept to comps. Being a pitch project the turnaround was tight and assets from the client were extremely limited. I’ve become used to this to a degree, but this project proved a fairly large challenge due to what the concept demanded. Basically the idea focuses on how Gemalto’s “touchless” technology empowers it’s user to move effortlessly through life almost to the degree that their life’s movements become a dance. I decided that this user’s movements would spell out the name of my concept because the word “go” neatly summed up everything we were wanting to communicate to the viewer. Plus the lines of the “g” and “o” would provide fluid curves that went hand in hand with the graceful movements I was wanting to illustrate.

To pull this concept off properly I knew a top-down orientation was necessary and that a variety of locations would have to be built to illustrate various interactive points along a user’s daily work commute. The first thing I had to do was decide on the look of the “go” since it would drive the path and placement of everything in the comps. I had almost the entire agency handwrite the word “go”  for me on sheets of paper so I could have a varied collection to choose from. I ended up placing these sheets of paper on my Wacom tablet and traced the lines which allowed me to maintain the uniqueness of the various “go’s”.

Next up, collect assets needed for the four environments: subway station, park, coffee shop, and office building exterior. Ideally I would have staged a photoshoot or used a 3D application to build everything, but time and budget didn’t allow for that. Stock sites turned up mostly empty on “top down view” images (not surprised, but there’s a money-making opportunity there I think) so I had to swallow the fact that I was going to have to build practically everything from scratch.

This is a collection of images I used for reference or textures. I took photos of people walking on the street below our office balcony one morning (perfect cloudy weather which gave me the soft lighting I needed) and thankfully got a wide range of characters I could use. Not all of the angles were the same and some were a little blurry, but when reduced to the small size they’d end up at I was able to mask most of those imperfections.

Building the environments and compositing in these people was an absolute blast! This was the first project on which I used my Wacom and it was a perfect fit since the comps required a lot of masking and brush work.

The key to making these scenes look realistic is how well you render the lighting in the environments. You can scale, shift, and position elements into their logical locations but until you add in the light and shadows cast by those elements your scenes will look flat. I spent a fair amount of time working the shadows, adjusting their softness and falloff, and figuring out ways to illustrate lit surfaces. I ended up using adjustment layers for lit areas (mostly Levels and Curves), set them to how I wanted them to look, completely masked them out and then slowly brought them back in with brushes. The level of customization this method gave me was significant and I think the end results turned out nicely. I would have liked to have spent more time on the vending machines as well as continued to add in more elements to truly flesh out the scenes, but time didn’t allow for that degree of detail. If we had won the project I would have absolutely pushed the scenes as far as they could go.

I recently added the comps I designed for an RFP for the Hard Rock Hotel and Casino in Las Vegas. This project was a nice break for me from the work I do for AMD, which is my main client. It was a sizable challenge to create a blend between the Hard Rock’s luxurious, heavily textured persona and a clean, modern presentation of who they are as a brand. I browsed the assets provided by the client and decided the photography of their property would the main driver of the site’s design.

I pulled the color scheme out of the photos (purple and gold being the dominant colors) and mirrored the patterns in the carpets and wallpapers into the background of the site. I didn’t want to overwhelm the site with texture or organic shapes, so I used geometric blocks to house the content and utilized a 16-column grid from 960.gs as the backbone to the site’s structure.

If you’ve followed my work and know me well enough now you’ll know that I’m a big proponent for the details. It’s impossible for me to ignore them or to not zoom in to at least 1200% on my comp to make sure every pixel is perfect. One example in this comp are the social network icons. I could have easily dropped in some pre-built badges and had been done with it, but while those would have filled their purpose they would have stood in stark contrast to the overall aesthetic of the site (especially some horrible “hard candy” styled icons). So why not take some time to find a way to integrate them into the site and make them unique to the comp? The idea of using playing cards actually wasn’t the obvious choice at first, but after landing on that idea there was no other option in my mind. After building them we tweaked the copy to play up on the metaphor. I think they’re one of the best parts of the design and really play in hand with what the Hard Rock Hotel and Casino is all about.

The mobile version of the site was a fun addition to design. I wanted it to be clear and functional, so I made sure it was relatively consistent with the native UI of the iPhone. Thanks to teehan+lax’s iPhone GUI PSD Design Template I was able to mock this up fairly quickly. I completed this design before I had my own iPhone and in retrospect I might have done a couple of things different here with the UI as I’ve grown much more familiar with how an iPhone operates. Still I’m happy with how it looks, the concept behind it, and what it represents as a mobilized version of the main site.

My design was one of 3 that we presented to the client and in the end they decided to go with another agency. Regardless of the outcome this was a great project to work on. I have other projects that I’m hoping to add to my site in the coming days so stay tuned for more new work.

Posted a new project to my work section yesterday called the “Trans-Poser“. This project was an interesting challenge due to my early decision to make the interface look like a vintage device. I really enjoyed creating all of these dials and buttons from scratch. Most of them are made from vector shapes and layer effects. The more I explore layer effects the more I’m impressed with the possibilities they afford. One layer effect I don’t use that often is “Satin”, but found it gave me just the right “sheen” look to the round buttons at the bottom right. I encourage you to explore their capabilities and get creative with layering and blending modes.

A few weeks back I was working on some icons for Dell. You might have even heard me talk about them during this time if you follow me on Twitter. These are the final ones I produced. I hadn’t worked on any heavy icon design like this for awhile and I learned a ton during the process.

These were built mostly in Photoshop, utilizing vector shapes and layer effects for about 99% of their textures, shading, etc. I wanted to limit the amount of bitmap images as much as possible and in the end the only bitmap used is on the front of the green software box in the top middle icon.

At one point during the project I accidentally saved and closed the file at half the original size, which unleashed an initial mad groan and other mental obscenities. Thankfully, due to how I had built these from the start, all I had to do was resize the document back up and all of the shapes and majority of the layer effects scaled up to their original states. Had I been using bitmap images (not saved as smart objects mind you) I would have been ruined.

Detail work like this is what I love. Designing icons can be absolutely frustrating, but once you push though the end result is incredibly rewarding. I think I’m hooked.

Just added a couple of comps I did several months ago of an Interactive Sommelier for Central Market. I designed these in support of several ideas we presented to the client. This one never got the green light and I’ve since moved on to other client work, but they were fun to make.

Shame. I really wanted to drag that cork with my finger.

Here’s an article I wrote recently about how I built custom vector brushes for the whiteboard illustrations I created on the Simpler-Webb site. Talks about the challenges I faced from the start and how I came up with the solution.

I also recommend checking out the other articles that my co-workers have written on Springbox Insight. Plenty of valuable information being offered up.