Asian Inspiration

Posted January 7th, 2010 in Art & Design, UI/UX by Leonardo

I often find inspiration in the sometimes minimalist, sometimes colorfully-bubbly and always cutting edge style found in UI designs from our Asian counterparts. In fact, some of my favorite work comes from the Eico Design firm out of Beijing which consistently impresses me with their inviting, intuitive and downright slick user interfaces.

Click here for even more beautiful examples from the Pacific rim via Woorkup.com. Domo origato, dudes.

Interaction designers should draw more.

Posted December 31st, 2009 in Art & Design, UI/UX by Leonardo

Some of my best designs (not speaking subjectively, but based on quantitative interaction metrics) come from spending a fair amount of my time literally drawing out prototypes and use-cases. Yes, with a pencil and paper. It’s easy to think through the functionality of a site in your head and assume you have it all worked out, but it’s never wasted effort to take things one step further. Or two, or three.

By putting pencil to paper, an Interaction Designer will spend more time putting himself in the user mind-set and create a bigger window into understanding the properties of their user’s capabilities. In a sense, it allows you to become an architect that brainstorms then refines countless drafts of his building to ensure all the beams and framing will hold up to the physical traffic, customizations, and decorations that future tenants will bring.

“The application of this understanding to the design, development and deployment of systems and services”  — a.k.a. Human Factor — is all the rage for resume buffers. But as a manager looking to hire a real interaction specialist it’s almost too easy to spot the less talented that claim to be UI/UX experts showing such flawed designs in their portfolio. All of which could have been made far more intuitive and useful had they only spent the time with even an online prototyping/mock-up tool.

In some cases, sketching out website pages and functionality as I envision it has lent itself to providing inspiration for design elements. Take a look at these and you’ll see what I mean. And grab yourself some graph paper, a ruler and a nice no. 2 pencil already.

University of the Pacific v2.0

Posted December 24th, 2009 in Art & Design, Featured, UI/UX by Leonardo

About a month ago, Ivan took me on as a ‘consultant’ to help get his senior project off the ground. He’s playing the role of a creative director in charge of designing and implementing a new way finding system for his school, the University of the Pacific in Stockton, CA. The portion of the project that I helped out with was giving the school’s website a new look and feel while buffing out the Maps & Directions section so that it taps into the new way finding system and offers users a more useful and engaging experience. Here’s what we came up with:

Index page: Most of the design changes here were to expose important links, set up a consistent top-down navigation style and create clearer CTAs. These, and the other changes you see, give the structure of this site a more intuitive layout that will improve engagement.

Maps – Directions: By default, the Directions page will use GeoIP information to pre-fill the zip code/city information and display the shortest route by car without having the user to initiate the query. I envision this page tapping into the Google maps API which would give users the ability to show turn-by-turn directions and toggle between directions by car, train and bus.

Maps – Interactive: The ‘jump to’ links at the top would highlight that section and the links themselves would tie back into the on-campus visual queues. Below that on the left, we’d allow users to enable the high level nodes and highlight each building therein. We would also provide check boxes to highlight other things like campus landmarks, wifi hot spots, emergency phones, etc.

Maps – Virtual Tours: Tapping into the student body to assist with ‘virtual tours’ is a great way to further engage potential and existing students. It’s also a great way to promote the way finding system through peer communication – I envision the students talking about the different areas of campus while pointing out the kiosks, signage, etc.

Maps – Mobile site: Much like the iPhone’s Map app, the maps section of the Pacific mobile site will enable users to search for specific buildings, landmarks, cross streets, etc. then click the directions button to map a route to said location. When clicking the directions button, the user’s current position (via cell phone triangulation or GPS for GPS enabled mobile devices) will be used by default, but you’ll be able to overwrite the position using an input field.

I had so much fun on this project. I’m honored that Ivan would even consider bringing me in to help and hope my input will be helpful when he makes this whole mess a reality.