A Better Way: Design in Device

I've always been awed by the design work of one of our brain trust members, Jin Kato, who constantly surprises me with unexpected but always on-target digital experiences. He has been advocating and practicing a new approach to digital design, one that offers advantages in speed, cost, decision-making, user testing, learning and communication.

The approach puts function before form. It’s more attuned to today’s needs for responsive design. In a real sense, process is product, and, in my view, this approach to design eliminates some inherent biases in the traditional digital design process. A few questions for Jin:

There is some great digital work out there, based on design practices that the best designers were using in the 90s and great designers continue to use. What’s the problem?

The traditional digital design approach is paper heavy and batch heavy. Typically wireframes are first constructed and approved - basically there are descriptions of functionality and boxed off areas for content. Then comps are created with images and buttons and text. Typically these are photoshop documents. Both the wireframe and the comps go through approval cycles with the client. After all of that a prototype would be created, and that would get client approval. It’s a process that works, but it does take a lot of time, and it does have some built-in problems. In a real sense, it puts form before function. It’s the image and images that matter in the traditional process, not the digital experience. Despite all the wireframes and comps the end-result may not be what the client expected.

With the need for responsive design, that traditional process proliferates. You need wireframes and comps for at least mobile, tablet and desktop versions, to communicate to the client what you are seeing. That’s a lot of paper. A lot of effort. It is time-consuming to move things and re-size things.

Also, increasingly, there are things we need to design that aren’t things easily or practically shown on photoshop, such as a search prototype or a highly immersive digital experience.

With responsive design the traditional wireframe/photoshop process is even more time-consuming and inefficient.

"Design in the device" simplifies responsive design.

What is the new approach? What’s in your workspace to make it happen?

I have three devices on my desk: a mobile device, a tablet and a desktop. I design on the desktop, using different software and frameworks, and I see the designs immediately in the different devices.

I can show rather than tell the client what the functionality will be. He or she can make better decisions by clicking around their iPad rather than imagining functionality from the wireframe descriptions.

White board sketching is always good! But - you can "wireframe" essentially, in the device, saving time and being more accurate.

Can I call this the Kato method of modern digital design? Design in Device method? Design in Browser method?

“Design in device” is most accurate, since you’re not always dealing with a browser or website with apps or widgets. I do see other designers taking this approach so don't give me too much credit for this! Its proven highly effective in my digital products and productivity over the past two years.

Designing in the device offers a quicker cycle time, the opportunity for more cycles, and the opportunity for more productive and decisive cycles - leading to a better product.