Home page featuring games designed by MATTER

Interior shot of Array; a game designed by MATTER (concept by Funnybone Toys)

CUBU, a game designed by MATTER (concept by Funnybone Toys).

Funnybone Toys is a game and toy company that came to MATTER to bring their game concepts to life. MATTER designed the identity, the games, the boxes, the cards themselves, and even had a hand in determining the rules. Funnybone Toys is a new company, but has already landed a distribution deal with retail giant Barnes & Noble.

On this project I helped determine the rules of the games, helped design the game packaging, the rule booklets, and the cards themselves. I was also responsible for designing, developing, and maintaining the website.

View site

Design by Colorado Home page with Full width slideshow Header

Interior Typographic Layout

Mobile Layouts designed around saving bandwidth

Design By Colorado was an interesting project. MATTER was tasked with creating an exhibit for the Denver International Airport that showcased Colorado grown talent in Design. The exhibit was broken into 2 parts – the physical specimens of work displayed throughout the airport, and supplemental information available on the web. The site was used as a promotional tool as well as an integral part of the exhibit for those that wanted to learn more but had to rush and catch a flight.

View site

Desktop view of the Home page

Mobile layout

Press Section Web Typography

With 45 minute wait times not uncommon, it’s readily apparent that Jelly is one of Denver’s hottest breakfast spots, and one of MATTER’s favorite clients. As the Senior Interaction Designer at MATTER, I was responsible for designing the desktop and mobile layouts based on the unique menu typography of the restaurant, all front end development (HTML5, CSS3, Javascript), and connecting the site to the Yelp, Facebook, and Twitter APIs to capitalize on Jelly’s tremendous word-of-mouth success.

View site

Genesis

Process Sketches

Contrary to contemporary belief, gamers are more social now than ever. They also love a great sale.

I was talking with a friend one day about a game I recently bought when he brought up that there was a huge sale on Steam. The caveat was that there was only a few hours left on the special price and I had no intention of heading home at the time. So I got to thinking.

Why can’t I convert this initial impulse to purchase a game a friend just told me about at this very moment? Why do I have to wait until I get home to hand over my hard earned cash?

This lead me to thinking about the current market prevalence of smartphones, particularly the iPhone and phones that run Google’s Android. With a direct to consumer digital distribution system like Steam or Battle.net, there’s no reason I couldn’t make a transaction on the go and take advantage of that purchase upon my return home.

Process

Button Detail

I started by sketching different interface layouts for a mobile version of Steam. I considered the needs of a content provider while imagining what I, as a consumer, would want from a mobile game purchasing client.

I evaluated the current Steam site as well as the desktop client and determined the most important pieces of information – The store, active downloads, and friends list – while also evaluating my favorite iPhone applications for usability and interface best practices. I then compared my findings against the sketches that I created and chose to the basic layout.

To create the layout, I laid down a typographic grid to help organize information, images, and to take the guess work out of proper harmonious proportions. Eventually I had an interface that I felt accomplished the goals I set in my research while maintaining a handsome on-brand appearance. But I wasn’t content. I then decided to conduct an informal poll of Steam users.

Their reactions and comments can be found below.

As a new Steam user, I’m quickly becoming interested in all things Steam. I think this app would be an amazing way for me to keep up to date on content new to the store as well as see what my friends are doing online. Another awesome feature of this is that it would be a first-party application and would maintain the high quality that Valve demonstrates over and over again. Judging by Justin’s stellar mockups shown here, this already looks like a first party Valve app that I would put on my phone and iPad in a snap.

Steam User HellaBoss and host of The Games Day Podcast.

I’m actually kind of pissed that this doesn’t exist already.

Steam User BanginSkrypt

Looks pretty awesome, I like the idea of a voice chat feature and the videos tab to check out some sweet Portal2 clips. Since Steam is pretty much always running on my PC, I definitely see the advantages of having this little app on my droid. Gaming sites are blocked at my workplace, and this would be a great way to keep up with what’s on sale and who’s online looking for me. Very cool app indeed.

Steam User IcedDale

Final Logo chosen by the Mejia for Mayor campaign

Initial Sketches

James Mejia is the first candidate to announce that he is running for Mayor of Denver in 2011. When the campaign was still very much under wraps, James came to the owner of ibu for counsel on web services. After talking with James it became clear that they did not have a truly solid identity to build their campaign on.

Evan (the owner of ibu) then came to me and asked me to put together a pitch for the Mejia for Mayor campaign. Having already worked with James on the Denver Preschool Project I felt that I had a solid understanding of him as a person, and one quality really stuck out to me.

James has the admirable quality of carefully considering all sides of problem before taking action. It is from this trait that the idea of running “as the voice of all people” began to shape the Identity.

Work In Progress uploaded to Dribbble

I began researching successful Democratic campaigns and gathering inspiration. From there I tried to dump as many ideas as I possibly could as loose sketches. These sketches were then examined and refined into initial mocks. These mocks were posted to the popular design community Dribble, where fellow designers were able to critique and give feedback as the work was being done.

This feedback was then incorporated into the mocks and they were refined further. After I and the rest of ibu were satisfied with two logos, we put together a pitch package showing the logos on various campaign materials. The pitch was an overwhelming success and ultimately lead to ibu securing a contract to handle the campaign identity as well as all of the campaign’s web work. The site is set to launch in late October to early November, 2010.

I designed the first americantransplantfoundation.org in 2008, and in 2010 it was time for a refresh. They hit the ground running and quickly outgrew their old static HTML site.

It was time for a content management system to make their updates fast, safe, and reliable. When discussing the move it was agreed that we should take the opportunity to refresh the design with a focus on usability and reorganizing content  hierarchy. Since the site has gone live they’ve experience an increase in hits, interaction, and sales conversions.

Screen capture of the redesigned home page.

Detail of the Shop layout

True Stories list detail

Screen Grabs

Screen Grab of Lock Screen

Screen Grab of Home Screen

Download

To save the wallpaper to your iPhone, tap and hold it and choose "Save Image".

There were no guidelines or requirements other than the sponsor logos. The Rocky Mountain Rollergirls are a pleasure to work with and nothing but professional. No one throws a party like RMRG.