Icon Design for Banana Republic

We come back from break to do an exercise in icon design. The premise is that main navigation categories on the Banana Republic website is being swapped out with icons. And off we go.

I created hand drawn sketches of the options and created a formal survey requesting rankings of first impression / visual appeal, clarity of meaning of each icon, and overall success of communicating the intended meaning (after those being surveyed took a stab at identifying each icon of each option first).

As with all design, not every option is good, so much hilarity ensued on some of the more ambiguous icon designs.

It was unanimously voted by those surveyed that Option C was the way to go.

So Option C is the concept that got graphically designed out. I did some general surveying on Facebook on how well these icons work, and they communicated what they needed to quite well, so I was happy that it worked out. :)

KitchenAid KitchenMentor Fridge and iPhone App

Our individual project assignment was to create a touch screen interface with accompanying iPhone app called KitchenMentor for KitchenAid's smart fridge. The goal is to help busy everyday folks manage their food and groceries by providing timely information such as when certain food items are low or out, or will be expiring soon.

Many other features are included, but one of the more interesting things we did was hack PowerPoint to create an interactive prototype/demo. I recorded the portion of the presentation that was the demo in the video below. For some reason blogger's video screen freeze is really pixelated below, but the actual video isn't so bad. Give it a bit of time to load fully before playing for best view experience. :)

The demo is just illustrating the touch screen interface that is mounted on the fridge. There is also an accompanying iPhone app that has a subset of the full functionality the fridge mounted display would have. Here are the samples screens that illustrate taking the user from Home -> KitchenDoc -> Recipes -> Recipe Details.

It's my first iPhone app design. Given Apple's rigorous guidelines on buttons and navigation at the top it looks pretty standard iPhone app. But I was glad I could get the custom colors in there to match the fridge display.

CarMe iPad App

Assignment 2 is to design an iPad application called CarMe, which is a car finder application. The point of the assignment is to go to the basics, do some card sorting of user goals and needs, and create several different conceptual models of how this app should work. I came up with a generic Specs Concept that every car finder out there does, a Behavior Concept that would be more inquiring of your driving needs and behavior, and a Personality Concept that's a take off on dating sites. Find your perfect (car) match! =P

Printing to scale again, I am glad I found an iPad background because it really puts the actual UI elements in context. That big black border ate up so much of my ink I had to go buy new cartridges over the weekend but the final effect was really good, so I'm glad I did that. The flow is pretty self-explanatory once you get past the fact that the initial questions are posed as if you're on a dating site looking for your perfect (car) soul mate.

For example, if you had answered you would want to "Hike the Grand Canyon", and the most important trait is "Frugal to a fault", the system will have some super cool intelligence to match you with the cheapest 4 wheel drive car it can find. =)

Presto! Salata's Automated Salad Bar

I'm taking a class on software user interface design for the HCI certificate program at Tufts that I got into at the end of last year. The amount of focus on graphic and visual design surprised me quite a bit. Although it takes me a long time, the one really positive thing is I get to add a few pieces to my portfolio. :)

The first assignment is to create a touch screen interface for Presto! which is an automated salad bar that can build custom salads per user's input. Imagine that there's a display attached to the side of a "cart" of sorts that will magically put the salad together. I designed out 6 sample screens in the user's workflow.

The Welcome screen introduces the concept of the kiosk and allows the user to switch to one of 6 different languages the interface is offered in.

To start, the user can choose from several preset options, or choose to build their own. This user selected the Chicken Caesar salad.

Once selected the salad details are displayed. This user wanted to go back and create their own.

 Within the custom creation screen, they can choose the greens, meats, toppings, and etc that they would like.

Then they can add beverages (it appears Salata has a partnership with Nantucket Nectars) and buy Salata's signature dressings with their order.

At the end, the order summary is shown to the user. They can complete their transaction on the pin pad and Presto! will whip up the desired order!

So for the class, we had to print the design out in color, on stock paper, and to scale. It totally killed my ink but they do look pretty nice. One really good thing about printing drafts out to scale was testing the "pressability" of buttons. Unlike using a mouse, if buttons are too small or too close my fat fingers would press them together. I made modifications to the initial drafts with that in mind, so I was glad that they needed to be printed to scale. 

Believe it or not, I managed to do the bulk of this design using Visio, which has been my tool of choice for wireframing, but never thought of as a design tool. For some elements I had to go out to a real photo and graphics program (like the masked round photos on the Welcome screen) but that's about it. I learned a lot about what Visio can do from a graphical perspective and realized it's a bit more powerful than I originally thought. Assignment 1, check! :)