Navjot Pawera - product design « Navjot Pawera's Blog

Posts Tagged ‘product design’

Product Design – Mobile Apps

If you have never been to Vietnam, I have a few tips for you from my first ever trip there (to Saigon):

When paying, count your zeros
When counting your zeros, decimal comma is not the same as decimal point
Don’t leave your $30 t-shirt in your $15 a night hotel room
Ice in beer can prevent hangovers
Saigon Red beer is better than Saigon Green

I was in Saigon, Vietnam over the weekend for BarcampSaigon and I really liked it. Loved the food, the people, the weather & the barcamp. At the Barcamp, I spoke about my workflow for designing products – mobile apps to be specific. I’ve uploaded the slides from the talk for download here

Prototyping iPhone apps with Keynote & Kodak Picture kiosks

Last week I hosted the “UX Panel” at Echelon 2011 and after the event quite a few people asked me about my workflow for wire-framing and prototyping. I’ve been meaning to talk about my this at the next IXD Session meetup, so I thought I’ll write some about it here as well.

Below is a summary of my pre-production design methodology specifically for iPhone apps. It’s relatively cheap, allows for quick iterations and has been working well for me so far.

1. Sketching (pencil/paper or whiteboard)

Lately I’ve become very obsessed about sketching every Idea we discuss in the stage where we are brainstorming to define the product. This always makes me convey my thoughts better and helps me remember more.

2. Wireframing using Keynote

I know a lot of people who swear by Omnigraffle. Especially folks who’ve been wireframing since early OSX days, for instance my good friend Wolf. I’ve personally never been able to warm up to it. Instead I’ve been using Keynote & Mockapp. I start with a base template (outline of the iPhone) which you can download from the link below:

Download: iPhone4 base template for Keynote wireframing

I’ve found keynote simple enough and quite versatile to do quick wireframing. With Mockapp it’s just a matter of dragging and dropping the iPhone controls (and they are made as shapes so you can edit them within keynote all you want).

3. Prototyping & User testing

My keynote wireframes turn into my paper-prototypes. I export the wireframes as images, put them on a USB stick and print at the nearest Kodak Picture kiosk I can find. It’s cheap and I can iterate very quickly as well. I use these for testing – which ofcourse, is the most important part of the entire design process.

4. Final wireframes and design comps

After the testing I aim to have exhaustive wireframes with as many screens as possible – including error scenarios and detailed settings. From here, the mockups are designed in Photoshop/Illustrator.

This is a rough workflow and ofcourse gets tweaked depending on the project. Hope this can be of help to someone!

PS – I was totally excited and extremely nervous about moderating the panel at Echelon 2011, but a big thanks to my panelists who absolutely rocked! – Richard White, Ian McFarland and Dustin Curtis.

Published on: June 20th, 2011

Tags: interaction design, interface design, product design, prototyping, testing, wireframing
Posted in As it goes, Conceptwise

WVIL Concept Camera

This prototype blew my socks off! Even though the idea isn’t something completely new, but the execution here it is pretty impressive. The WVIL basically separates the body (or the viewfinder) of the camera from the lens – allowing you to fire the shutter in the lens remotely from the viewfinder. Their viewfinder interface seems to be quite interesting as well.

I actually tried something like this a while back. If you have any two from iPad, iPhone, iPod (atleast one has to be camera enabled) – download the “Camera for iPad” app on both. You should now be able to use one of your devices as a “lens” and the other as a “viewfinder”. It won’t be even close to the awesomeness of the WVIL but it should give you a feeler

I’m tempted to think of a camera that can work on it’s own and at the same time, can be completely controlled wirelessly by a phone/tablet/computer interface as well.

WVIL Concept Camera by Artefact

Published on: April 26th, 2011

Tags: product design, prototype, review
Posted in Caught my click, Conceptwise

Gems from the Apple Human Interface Guidelines (part1)

Started going through the iPhone Human Interface Guidelines lately on the 40 minutes bus ride to work in the morning. It’s really well written and reading it word for word is actually quite enjoyable. Here are a few parts I’ve highlighted from the first part:

When in doubt, make it simple.
… apply the 80-20 rule to the design of your application. Estimate that the largest percentage of users (at least 80 percent) will use a very limited number of features in an application, while only a small percentage (no more than 20 percent) will use all the features.
Note how elements at the top of each screen make it easy for users to know both their current and previous location in the application.(a very important cue that I find missing in a lot of custom interface applications)
A great user interface follows human interface design principles that are based on the way people—users—think and work, not on the capabilities of the device.
… a good product definition statement doesn’t just focus on features, it also describes the intended audience
It’s especially important to eliminate those elements that don’t support the product definition statement, because iPhone applications have no room to spare for functionality that isn’t focused on the main task.

Published on: November 22nd, 2010

Tags: hig, interface, product design
Posted in Caught my click, Conceptwise