Josh Coe's user experience design portfolio » Mobile

The Power Tourist

Josh — Sat, 18 Jul 2009 15:28:23 +0000

Duration: 2 months | Course: Interface and Interaction Design | Site: http://powertourist.joshcoe.com
Teammates: Daniel Wagner, Josh Zuniga

Interactive demo

Blogmapper

Josh — Sat, 06 Jun 2009 21:27:04 +0000

Duration: 1 month | Course: Interface and Interaction Design
Teammates: Sofia Nunes, Nuno Santos

My teammates and I conceptualized and designed a location-aware application for blogging on the go. The final design had the capability to record events as they happen; add photos, video, audio, and text; find content based on its location; and show readers a map of where the content was found.

Process

First, we constructed a persona of the target user:

Then, we formed a scenario for this persona:

● Journalist must post a blog entry about an art festival
● Quickly records audio interviews, photos, and notes; system organizes them by location
● Stumbles onto a parade and instantly posts a photo with a map of where the parade is happening
● Adds the content of the day into a blog entry and selects a template; system organizes content layout
● Posts her blog entry and views it in the app’s browser

The design features were consequently drawn from the needs of the actual users.

Making iPhone mock-ups with the best tools

Josh — Sun, 31 May 2009 22:41:55 +0000

The popularity of the iPhone has yielded a comprehensive set of resources for designers to use to create prototype interfaces for iPhone applications. These resources include a rich set of stencils that can be freely downloaded from the web. Stencils are available for many of the most common tools that designers use to create medium- and high-fidelity mock-ups (Photoshop, Illustrator, Fireworks and OmniGraffle).

A notepad is still the most effective tool for low-fidelity prototypes (uistencils.com).

On iPhone mock-up workflow: I’ve always used OmniGraffle for medium-fidelity iPhone mock-ups. The alignment and resizing capabilities of the program make everything feel like it snaps together perfectly, especially when you use the resources listed below. The workflow in Photoshop feels a bit clunkier, but of course for fine-detailed control of hi-fi mock-ups Photoshop is much more robust. I like to create custom details in Photoshop and import them into OmniGraffle, or assemble an OmniGraffle stencil out of custom parts made in Photoshop. This way, I don’t waste time getting lost in a Photoshop unnamed-layer maze.

On mock-up stencil resources: There’s some overlap amongst the three OmniGraffle stencils, of course, but it’s worth having more than one; they complement each other, and each one seems to have something that the others don’t. Theresa Neil’s stencil works for medium-fidelity prototypes, and the other two are great for taking them hi-fi. When I need a more customized element, I use Mercury Intermedia’s UI vector elements so I can stretch and manipulate without worrying about pixelated images.

I’ve listed many of the popular available iPhone stencils and toolkits below. Please let me know if you find any that could be added to the list.

•• Top picks

• I use these regularly

Josh Coe's user experience design portfolio » Mobile

The Power Tourist

Interactive demo

Blogmapper

Process

Making iPhone mock-ups with the best tools

OmniGraffle

Adobe Illustrator

Adobe Photoshop

Adobe Fireworks