Finding and choosing this particular view wasn’t just an exercise in navel gazing. It helped provide a certain attitude that focuses on integrity, quality and service while defining the boundaries for self-expression. The latter is important because even though as designers, we need to work within technical specs and other areas defined by rules, let’s face it—we are mostly in this thing for creative expression in one form or another.

So, why craftsman? Why not designer as artist, architect or even control freak?

While ‘craftsman’ isn’t as romantic as ‘artist’, it’s well suited. A craftsman implies someone who makes something using a particular set of tools and skills. It also connotes mastering a technique and producing a quality product—one with aesthetics, sound construction and a good dose of charm. A professional craftsman is at service to a customer, but also works to “free the spirit” and thoroughly enjoy the birth of the new and innovative.

In the same way, a designer’s work is typically focused on meeting the client’s goals. While we get satisfaction from helping our clients be more successful with their business, we also enjoy a process that gives us an opportunity to use our creative talents and provide a meaningful experience that others can appreciate.

I’m a Carpenter?

The archetype craftsman is the carpenter, woodworker or furniture maker. The woodworker needs to have a head for both form and function. A piece of furniture must serve its function first whether it be to provide a seat or a place to store your best china. After all, a chair isn’t worth more than firewood if it fails to meet its most basic goals of supporting. Similarly, a company logo that’s stylish but doesn’t communicate isn’t worth having.

However, if it were only about function, we would all be using logs for chairs and branches for cup holders. A piece of furniture must also contain an aesthetic sense that makes it appealing and desirable. It needs to create a connection between the wood and its buyer just as a screen of pixels needs to create an experience for its user.

The Apprenticeship

In the days yonder, the carpenter would go through an apprenticeship under a master craftsman in order to gain journeyman status where he might then travel to different shops to gain more experience—sort of like how some designers today will hop from agency to agency picking up different skills and building their portfolio.

Typically, an apprentice or journeyman would work within the existing shop’s designs and principles. As their knowledge and experience on the subject expanded, they might begin to try out their own designs. After several years, the journeyman might apply to be elected to ‘master craftsman’ status by creating a ‘masterpiece’ to impress the guild of already existing master craftsmen.

This sounds a lot like the graphic designer with ambitions to someday be Creative Director at a big agency or company. Unfortunately, the attitude today is we all begin as master craftsmen and that any apprenticeship is taken care of at school (or from simply building our own website). Many junior designers, while showing plenty of talent, don’t realize that it can take years to master all the different facets of producing sound design and working with team members and clients.

An internship is probably the closest thing we have today to an apprenticeship. An intern usually starts by taking on smaller jobs that help with the production needs of a studio (but that might lack creative interest). This, however, gives the junior designer time to hone her software, process and communication skills in a working environment. Remember, the most important thing for the apprentice to do is to learn. The second most important thing is to design a lot of stuff!

Designers early in their careers often struggle to find their apprenticeship and to even identify anyone who qualifies as “master designer”. Even after going through school questions still remain such as:

What do I really need to know to succeed in my field?

Who can show me the right skills?

How do I get experience?

What is ‘design thinking’?

How do you really define quality (a.k.a “master piece”)?

The Journeyman

Just like the struggling journeyman, the designer needs to unlock the secrets of the trade. But first, they need to invest in the right tools and have them be second nature. A good carpenter would invest in the best tools he could afford and not waste time on cheap imitations. He would take the tools apart, fine tune them, and learn every part’s name—his good work depended on it.

The designer must do the same, choosing his software tools wisely, and deciding where to put his most time in learning. Trying to become an expert at Flash, AfterEffects, InDesign, HTML and Javascript all at once probably isn’t realistic for most designers no matter what design school’s have to say about it.

The young journeyman knew the difference between a mortise and a tenon and could use a bow saw without much thought. In comparison, the designer has spent hours working with raster and vector images or thinking about design patterns within wireframes. Whether it’s desktop or mobile, the designer knows the medium and how to address it. Even then, the designer’s knowledge and tools go way beyond just Photoshop and being familiar with the latest mobile UI. Methodology, client management, collaboration, presentation, selling, communication, self-promotion, and documentation are all important skills the designer must learn and master.

A good furniture maker would have known his building materials. He would have understood how wood is constantly changing and shifting, which cuts to use, and how it looks with different finishes. In a similar way, the digital designer understands the limitations of technology and what’s possible. She has worked with engineers and app developers, understands the formats and might even know a thing or two about programming. By knowing the “materials”, the designer is able to propose ideas that are both feasible and usable.

The Master Craftsman

“When you’re a carpenter making a beautiful chest of drawers, you’re not going to use a piece of plywood on the back, even though it faces the wall and nobody will ever see it. You’ll know it’s there, so you’re going to use a beautiful piece of wood on the back. For you to sleep well at night, the aesthetic, the quality, has to be carried all the way through.” – Steve Jobs

While there are many aspects of the craftsman that can be used as an analogy, most important might be the craftsman’s devotion to quality. The furniture maker strived to create an object that was desirable, beloved and passed on through generations. There may not exist anything we could call an “heirloom website or phone app”, but a good designer knows that in the end they are judged by the quality of their work and how successfully it meets the goals of the business and its users. Like the master craftsman of yesteryear, the designer can take pride in his work knowing that it has benefited his client’s business and the their customers.

Lastly, the craftsman understands the importance of good service. In the designer’s world that means having good process, organization, communication and learning which battles to pick (and clients to have!).

We all need analogies to help us better understand our creative roles. By using the analogy of craftsman, a designer can gain a clearer picture of what they need to do to succeed and meet the expectations of their clients or boss.

More than ever, designers are being asked to create experiences for a variety of mobile devices. As tablet adoption increases and we move into the post-PC world, companies will compete for users’ attention with the quality of their experience. Part of designing successful apps for Android tablets requires not only a great concept that will encourage downloads, usage and retention, but also an experience that Android users will find intuitive and native to the Android environment.

The following will help designers become familiar with Android tablet app design by understanding the differences between the iPad iOS user interface and Android 3.x “Honeycomb” UI conventions and elements. We will also take a look at Honeycomb design patterns and layout strategies, and review some of the best Android tablet apps already out there.

Note: While Android 2.x apps for smartphones can run on tablets, Android 3.0 Honeycomb was designed and launched specifically for tablets. Future updates promise to bring Honeycomb features to smartphone devices in addition to making it easier to design and build for multiple screen types.

For most of us, our first exposure to tablets was via the iPad. For this reason, it’s reasonable to begin comparing the two user interfaces. By comparing, we can align what we’ve already learned about tablets and begin to focus on what important differences there are to meet the unique UI needs of Android users. This not only helps us get up to speed, but becomes especially important when designing an Android tablet app from an existing iPad one.

It’s just like the iPad, right?

While the Android tablet and iPad experience share many similarities (touch gestures, app launch icons, modals, etc) there are also many differences that designers need to be aware of before making assumptions and drawing-up screens.

Screen Size and Orientation

The biggest difference between the two platforms is the form factor. Layouts for the iPad are measured at 768 x 1024 physical pixels and the iPad uses portrait mode as its default viewing orientation.

With Android tablets it gets a bit more complicated due to multiple device makers. In general, there are 7” and 10” Android tablets screen sizes (measured diagonally from top left corner to bottom right corner) and sizes in between. However, most tablets are sized at around 10”.

What does this mean in pixels? A good baseline for your layouts is 1280 x 752 (excluding the System Bar) based on a 10” screen size using landscape—not portrait—as the default orientation. Like the iPad, content on Android tablets may be viewed in both landscape or portrait view, but landscape mode is how it’s generally used.

Viewing a web page on both Android Tablet and iPad in portrait mode

Viewing a web page on both Android Tablet and iPad in landscape mode

However, for Android screen size is only half of it. Android tablets also come in different ‘screen densities‘ — that is the number of pixels within a physical area of the screen. Without going into too much detail, designers must prepare all production-ready bitmaps for three different screen densities by scaling each bitmap 1.5x and 2x its original size so that a bitmap originally set at 100 x 100 pixels also has copies at 150 x 150 and 200 x 200. By making three batches of graphics scaled at these different sizes, you will be able to provide any necessary bitmaps for medium, high and extra high density tablet screens without losing image quality.

Note: For more information on screen densities and graphics preparation for Android devices, refer to my previous article on Designing for Android.

System Bar

While iOS makes minimal use of the System Bar, Android Honeycomb expands its size to include notifications and soft navigation buttons. There is a Back button, Home button and a Recent Apps button.

The Android Honeycomb System Bar and buttons are always present and appear at the bottom of the screen regardless of which app is open. Think of it as a permanent UI fixture. The only exception is a ‘Lights Out Mode’ which dims the system bar for showing immersive content such as when playing a video or game.

Back Button

While the bulkiness and permanence of the Honeycomb System Bar might appear as an obstacle to designers, it has the advantage of freeing-up real estate typically taken by a ‘Back’ button in apps for the iPad. The Honeycomb System Bar has a ‘Back’ button that works globally across all apps.

Action Bar

The bulk of the UI differences between platforms is concentrated in the top action bar. Android suggests a specific arrangement of elements and visual format for the tablet Action Bar that includes placement of an icon/logo, navigation (e.g. drop-down menu or tabs), and common actions. This is one of the most unifying design patterns between different Android Honeycomb apps and worth taking the time to familiarize yourself with before attempting customization or something iPad-like. More on the pervasive Action Bar later.

Widgets

New to iPad users will be Android’s widgets. As the name describes, they are small notification and shortcuts systems users can set to appear on their launch screen. Widgets can be designed to show stack views, grid views, list views and with Android 3.1, are now re-sizable.

Notifications

While iOS’s notifications push simple alerts to your launch screen, Honeycomb offers rich notifications that pop up (“toast” we used to call it) at the bottom right area of the screen much like Growl on Mac OS X. Custom layouts for notifications may include anything from icons to ticker text and actionable buttons.

Settings

Most often, any settings within an iPad app are presented from a popover triggered by an ‘i’ button. Settings categories are broken up into tables for easy visual separation. Honeycomb has a different convention that looks more like the iOS General Settings screen with the ability to navigate categories on the left and view detail on the right. This is the preferred (and more elegant) way of presenting multiple settings in Honeycomb.

UI Elements

As you can imagine, Android goes to great lengths to do everything opposite its competitor (that’s called differentiation!). Honeycomb has its own UI conventions and new ‘Holographic UI’ visual language for such mundane actions as picking a time/date, selecting an option, setting volume, etc. It’s important you understand this UI language for building screen flows and creating layouts.

Fonts

Question: How many fonts does iPad 4.3 allow you to use?

Answer: 57

Question: How many does Android?

Answer: 3

Yep, that’s Droid Sans, Droid Serif and Droid Sans Mono. However, there is an upside: While that’s all you get with the platform, designers and developers are free to bundle any extra fonts with their app.

Anything the same?

Luckily for designers already familiar with the iPad, there are some similarities between the two platforms:

Touch Gestures

Tap, double tap, flick, drag, pinch, rotate and scroll at will.

Split View and Multi-pane UI

Split View is one of the most commonly used layouts for tablets consisting of two side-by-side panes. Of course, you can design additional panes for more complexity.

Embedded Multi-Media

Both platforms allow embedded audio, video and maps.

Clipboard

For copying and pasting data in and out of separate applications.

Drag-and-Drop

Both platforms have drag-and-drop capabilities.

Design Patterns

Honeycomb carries over many of the same design patterns introduced in Android 2.0 and expands on them. In case you’re not familiar with design patterns, Android defines them as a “general solution to a recurring problem.” Design patterns are important UI conventions designed by Android to help unify the user experience and provide designers and developers a template to work from. They are also customizable, so no need to fret!

As mentioned before, the Action Bar is the most prominent Android UI component and the one we’ll focus on.

Icon/Logo

The Action Bar begins with an icon or logo on the far left and is actionable. By tapping on it the user will be directed to the app’s home screen.

Navigation

Next, we typically find some mode of navigation in the form of a drop-down or tab menu. Honeycomb uses a triangle visual to indicate a drop-down and a series of underlines for tabs which typically take up the majority of the Action Bar real estate.

A left arrow button may also appear to the left of the icon/logo or label for navigating back or canceling a primary action.

Common Actions

Common Actions are as their name implies providing the user with such things as search, share and an overflow menu. They are always placed on the right side of the Action Bar away from any tabs.

Overflow Menu

The Overflow Menu is part of the Common Actions group and is sometimes separated by a vertical rule. The purpose of the Overflow Menu is to provide a place for miscellaneous menu items such settings, help, feedback, etc.

Search

Search is also a part of the Common Actions set. Unique to Search is its expand/collapse action. Tap on the Search icon and a search box expands out for entering your query. Tap the ‘x’ button to cancel and it collapses to its single button state. This is a space saver when you already have many actions or tabs you need to show.

Contextual Actions

Contextual Actions change the format of the Action Bar when an item is selected to reveal actions unique to that selection. For example, a photo app’s screen of image thumbnails might have an Action Bar that changes once an image is selected. In this case, the Action Bar might change to show contextual actions for editing that particular image.

To exit the Contextual Action Bar, users can tap either ‘Cancel’ or ‘Done’ appearing in the far right area of the bar.

Tablet Layout Strategies

Using Fragments and Multi-Pane Views

The building blocks of Honeycomb design are Fragments. A Fragment is a self-containing layout component that can change size or layout position depending on the screen orientation or size. This further addresses the problem of designing for multiple form factors by providing designers and developers a way to make their screen layout components elastic and stackable depending on what screen restraints the app is working with. Screen components can be stretched, stacked, expanded or collapsed and shown or hidden.

What makes Fragments so special? With a compatibility library, developers can bring this functionality to Android smartphones back to Android 1.6, giving designers and developers the option of building an app using a one-size-fits-all strategy. In short, this will allow designers and developers to build one app for everything.

While Fragments may be a term used more by developers than designers, it’s good for designers to adopt the perspective that capsules of content can be stretched, stacked, expanded and hidden at will.

The most common arrangement of Fragments is the split view. This layout is common for news apps and email clients where a list is presented in a narrow column and a detailed view in a larger one.

Another way of presenting a split view is to turn it on its side. In this case, the sideways list Fragment becomes a carousel, navigating horizontally instead of vertically.

Orientation Strategies

While use of Fragments is great for applying one design to multiple screen sizes, they are also useful for setting orientation strategies. Your screen design might look great in landscape but what are you going to do with three columns in a narrow portrait view? Again, we have the option to stretch, stack or hide content. Think of Fragments like a bunch of stretchy puzzle pieces that you can move around, shape or eliminate as needed.

A Word About Animation

The Honeycomb framework allows designers and developers to use a variety of animation effects such as “fades or movement between states, loop and animated image or an existing animation, change colors, and much more.” Honeycomb also boasts high-performance mechanisms for presenting 2-D and 3-D graphics. For a good overview of what Honeycomb is capable of, check out this video.

Learning from Example

Designing apps for Android tablets is still relatively a new space with some brands beginning to test the waters. Below is a list of apps for inspiration. You can download any of the apps from Android Market or Amazon.com.

YouTube

Naturally, Google’s YouTube for Honeycomb is an exemplar app showcasing all the design patterns and UI elements discussed above. To get a real feel for Honeycomb, download this app first and take it for a spin.

CNN

The CNN app makes good use of touch gestures (flicking to view additional content), split view and fonts! In this case, they’re using a custom font (Rockwell) for news headlines.

CNBC

Another good news app with examples of animation (stock ticker tape) and rich graphics and gradients. CNBC has one of the most visually compelling apps.

Plume

With it’s three column layout, Plum is a good example showing how layouts may need to change dramatically from landscape to portrait views.

FlightTrack

A data-heavy app done elegantly. Includes nice examples of maps, subtle use of animation, and standard Honeycomb UI elements.

Pulse

What else can you say…it’s Pulse for Android tablets! It’s still fun to compare the Android tablet version with the iPad one which is identical in almost every way.

WeatherBug

This was one of the first Honeycomb apps in Android Market and makes good use of maps and the Holographic UI for showing pictures from weather cams.

Kindle

Kindle pretty much sticks to the books when it comes to using design patterns and Honeycomb UI elements. Nevertheless, the outcome is very elegant while staying true to Android’s best practices.

Honorable Mention

IMDb
News360
USAToday
AccuWeather
Ustream
Google Earth
Think Space
Gmail

Online Resources

Videos

Designing and Implementing Android UIs for Phones and Tablets (Google I/O 2011)

Android 3.0 Honeycomb Animation Demo

Presentations

Designing and Implementing Android UIs for Phones and Tablets (Google I/O 2011)

Blogs

Tablet UI Patterns

Android Developers

Supporting Multiple Screens
Icon Design
Android 3.0 Platform Highlights

For designers, Android is the elephant in the room when it comes to app design. As much as designers would like to think it’s an iOS world where all anyone cares about are iPhones, iPads and the App Store, nobody can ignore the fact Android currently makes up the majority of the smartphone market share and is being used on everything from tablets to e-readers . In short, the Google Android platform is quickly becoming ubiquitous and brands are starting to notice.

But let’s face it, Android’s multiple devices and form factors make it feel like an uphill battle to design for, and its cryptic documentation is hardly a launchpad for designing and producing great apps. Surf the Web for resources on Android design and there’s little there to guide you.

If all this feels discouraging (and maybe the reason you’re not designing apps for Android), you’re not alone. Fortunately, Android is beginning to address the multiple device and screen size issues, and device makers are slowly arriving at standards that will eventually reduce any complexity.

The following article will help designers become familiar with what they need to know to get started with Android and delivering the right assets for development. Topics include:

• Demystifying Android screen densities
• Learning the fundamentals of Android design via design patterns
• Design assets your developer needs
• How to get screen shots
• What Android 3 is about and what’s next on the horizon

Android Smartphones and Display Sizes

When starting any digital design project, it’s a good idea to have an understanding of the hardware first. For iPhone apps, it’s either the iPhone or iPod Touch. For Android, it spans dozens of devices and makers. So, where to begin?

The old baseline for Android smartphone devices was the T-Mobile G1, the first commercially available Android-powered device which has an HVGA screen measuring 320 x 480 pixels.

HVGA stands for Half-size Video Graphics Array and is the display size for many of today’s smartphones (the iPhone 3GS, 3G and 2G use this configuration).

To make things simple, Android divides physical screen sizes (measured as the screen’s diagonal from top left corner to bottom right corner) into four general sizes: small, normal, large, and xlarge.

320 x 480 is considered a normal screen size by Android and for xlarge, think tablets . However, the most popular Android smartphones out today have WVGA (Wide VGA) 800+ x 480 displays. So, what’s “normal” has changed. For now, we’ll say that most Android smartphones have large screens.

The variety of display sizes can be challenging for designers trying to create one-size-fits-all screen layouts. I’ve found the best approach is to design one set of layouts for 320 x 533 physical pixels and then introduce custom layouts for the other screen sizes.

What You Need to Know About Screen Densities

But screen sizes are only half the picture! Developers don’t refer to a screen’s resolution but instead, its density. Here’s how Android defines the terms in its Developers Guide:

Resolution
The total number of physical pixels on a screen.

Screen Density
The quantity of pixels within a physical area of the screen; usually referred to as dpi (dots per inch).

Density-independent pixel (dp)
A virtual pixel unit that you should use when defining UI layout, to express layout dimensions or position in a density-independent way. The density-independent pixel is equivalent to one physical pixel on a 160 dpi screen, which is the baseline density assumed by the system for a “medium” density screen. At runtime, the system transparently handles any scaling of the dp units, as necessary, based on the actual density of the screen in use. The conversion of dp units to screen pixels is simple: px = dp * (dpi / 160). For example, on a 240 dpi screen, 1 dp equals 1.5 physical pixels. You should always use dp units when defining your application’s UI, to ensure proper display of your UI on screens with different densities.

It’s a bit confusing, but this is what you need to know: Like screen sizes, Android divides screen densities into four basic densities: ldpi (low), mdpi (medium), hdpi (high), and xhdpi (extra high). This is important because you’ll need to deliver all graphical assets (bitmaps) in sets of different densities. At the very least, you’ll need to deliver mdpi and hdpi sets for any smartphone apps.

What this means is all bitmap graphics need to be scaled up or down from your baseline (320 x 533) screen layouts (note: there is also a method for parsing SVG files that provides a way to scale vector art on different screens sizes and densities without loss of image quality).

The bitmap requirement is similar to preparing graphics for print vs. the Web. If you have any experience with print, you know that a 72 ppi image is going to look very pixelated and blurry scaled up and printed. Instead, you need to rescale the image as a vector image or use a hi-resolution photo and then set the file’s resolution at around 300 ppi in order for it to print without any loss of image quality. Screen density for Android works similar except that we’re not changing the file resolution, only the image size (standard 72 ppi is fine).

Let’s say you have a bitmap icon 100 x 100 pixels taken from one of the screens of your baseline app design. Placing that same 100 x 100 icon on a device with an ldpi screen will make the icon appear big and blurry. Likewise, placing it on a device with an hdpi screen will make it appear too small (due to the device having more dots/inch than the mdpi screen).

To adjust for the different device screen densities we need to follow a 3:4:6:8 scaling ratio between the four density sizes (for the iPhone it’s easy–it’s just a 2:1 ratio between iPhone 4 and 3GS). Using our ratios and some simple math, we create four different versions of our bitmap to hand-off to our developer for production:

• 75 x 75 for low-density screens (0.75x)
• 100 x 100 for medium-density screens (our baseline)
• 150 x 150 for high-density screens (1.5x)
• 200 x 200 for extra high-density screens (2.0x)*

*We’re concerned with only ldpi, mdpi and hdpi for Android smartphone apps

After you’ve produced all your graphics, you might choose to organize your graphics library as follows:

Note: There may be some confusion about what ppi (pixels per inch) you set your deliverables at. Just leave them at the standard 72 ppi and scale the image accordingly.

Using Android Design Patterns

Clients often ask whether or not they can use the same iPhone app design for Android. If you’re looking for shortcuts, maybe building an app for mobile web browsers using something like WebKit and HTML5 is a better choice. But for producing native Android apps, the answer is “no”. Why? Because Android UI conventions are different from iPhone.

The big difference with Android when compared to iOS devices is the use of the Back Key to navigate to a previously visited screen. The Back Key on Android devices is always present and available to the user apart from the app. It’s either a part of the physical device or digitally fixed to the bottom of the screen independent of any app (like what we see in the recently released Android 3.0 for tablets — more about this later).

The use of a Back Key other than within the app itself, leaves space for other elements at the top of the screen such as a logo, screen title or menu. While this navigational convention differentiates greatly from iOS, there are also other differentiators that Android calls design patterns. According to Android, a design pattern is a “general solution to a recurring problem”. Here are the main Android design patterns that were introduced with Android version 2.0:

Dashboard
This pattern solves the problem of having to navigate to several layers within an app. It provides a launch pad solution for rich apps like Facebook, LinkedIn and Evernote.

Action Bar
The Action Bar is one of Android’s most important design patterns and differentiators. It works very similar to the conventional Web site’s banner with a logo or screen title linking to a ‘home’ page typically placed on the left and common actions  buttons on the right. The Action Bar design is flexible with the ability to include hovering menus and expanding search boxes. It’s generally used as a global feature rather than a contextual one. Here’s an example of the Action Bar used by Twitter:

Search Bar
Allows a simple way to search by category and provide search suggestions.

Quick Actions
This design pattern acts similar to the iOS popover providing the user with additional contextual actions. For example, tapping a photo within an app might trigger a Quick Action bar to appear for sharing the photo.

Companion Widget
Widgets allow an app to publish notifications to the user’s launch screen. Unlike push notifications with iOS that act as temporary modals, Companion Widgets remain on the launch screen (tip: to select a widget for your Android device, simply tap and hold any empty space on one of the launch screens).

Using established design patterns are important for keeping your user experience intuitive and familiar to your Android users. Your users don’t want to have an iPhone experience on their Android device any more than a Mac user wants to have a Microsoft one within their Mac OS environment. So, understanding the design patterns is the first step toward learning to speak Android and designing an optimal experience for Android users. Your developer will also thank you!

Android design deliverables

OK, so I’ve designed my Android app and am ready to make it a reality. What do I need to hand-off to my developer? Here’s a quick list of deliverables:

1. Annotated wireframes of the user experience based on the baseline large screen size of 320 x 533 physical pixels. Include any additional screens for instances where a larger or smaller (320 x 480) screen size requires a modified layout or a landscape version is required.

2. Visual design mockups of key screens for WVGA large size (320 x 533) screens (based on a WVGA 800 x 480 hdpi physical pixel screen size) in addition to any custom layouts needed for other screen sizes.

3. Specifications for spacing, font sizes , colors and indication of any bitmaps.

4. Graphics library with ldpi, mdpi and hdpi versions of all bitmaps as transparent PNG files.

5. Density-specific app icons including the app launch icon as transparent PNG files. Android already provides excellent tips for designers on this topic along with some downloads including graphic PSD templates and other goodies.

How to Take Screen Shots

My product manager just asked for screen shots of the developer’s build. The dev is busy and can’t get them to me until tomorrow. Now what do I do? As of publication of this article, Android has no built-in way to take screen shots (bummer, I know). The only way is to just deal with it and that means pretending to be a developer for a while and downloading some really scary software. Let’s get started!

The following software must be downloaded:

1. All USB drivers for your Android device

2. Android software development kit (SDK)

3. Java SE software development kit (SDK)

Next, on your computer:

1. Extract the USB drivers to a folder on your desktop

2. Extract the Android SDK to a folder on your desktop

3. Install the Java SE SDK

On your Android device:

1. Open Settings (you’ll find it in the apps menu)

2. Tap on Applications

3. Tap on Development

4. Check the box for USB debugging

Now, for the fun part:

1. Connect your Android device to your computer via USB. Windows users: allow Windows to install all drivers. One of the drivers may not be found and will require you to go to the Window’s Device Manager under the Control Panel. There, you can locate the device (having a yellow warning icon next to it) and right-click on it.

2. If necessary, choose to update/install the driver for your device

3. Go to your desktop, open the Android SDK folder and select SDK Setup.exe

4. Allow it to automatically refresh its list of operating system SDKs available and select to install all packages

5. Once finished, exit the application

6. Go back to the opened Android SDK folder on your desktop and open the tools folder

7. Click on the file, ddms to open the Dalvik Debug Monitor

8. Select your device listed in the Name pane

9. In the application’s top menu, open the Device menu and choose Screen capture…. A Device Screen Capture window will open and you should see the launch screen of your Android device.

Navigating:

1. Grab your Android device and navigate to a screen of your liking. Go back to your computer and select Refresh in the Device Screen Capture window and the current screen from your Android device will appear.

2. If you’re on a Mac, you can just do the old shift-command-4 trick to take a screen grab or you can choose to copy it in Windows and paste it into one of the Windows media applications.

About Android Tablets

At CES 2011, companies launched a downpour of Android tablets with an array of screen sizes. However, after a quick review of the most popular Android tablets we can conclude that the most important screen size to focus on in physical pixels is 1280 x 800.

With the Android 3.0 “Honeycomb” release, Google provided device makers with an Android UI made for tablets. Gone is the use of a hard Back Key which was replaced by an anchored software-generated navigation and system status bar at the bottom of the screen.

Android 3.0 received an updated visual design and incorporates all the design patterns introduced with Android 2.0. One of the major differences with 3.0 is the Action Bar which has been updated to include tabs, drop-down menus or breadcrumbs. The Action Bar can also change its appearance to show contextual actions when selecting single or multiple elements on a screen.

Another new feature added to the Android framework with 3.0 is a mechanism called Fragments. A Fragment is a self-containing component within a layout that can change size or layout position depending on the screen orientation or size. This further addresses the problem of designing for multiple form factors by providing designers and developers a way to make their screen layout components elastic and stackable depending on what screen restraints the app is working with. Screen components can be stretched, stacked, expanded/collapsed and shown/hidden.

The next Android release scrumptiously dubbed “Ice Cream Sandwich” promises to bring this functionality to Android smartphones as well, giving designers and developers the option of building an app using a one-size-fits-all strategy. This could be a paradigm shift for designers and developers who will need to learn to think of app design in terms of puzzle pieces that can be either stretched, stacked, expanded or hidden to fit the appropriate form factor. In short, this will allow one Android OS to run anywhere (with infinite possibilities!).

A Word of Advice
Do get your hands on an Android phone and tablet and spend some time downloading apps and exploring their interfaces. In order to design for Android you have to immerse yourself in the environment and know it intimately. This seems obvious, but it’s always surprising to learn even the product manager doesn’t have an Android device.

Online Resources

Here are some links to online resources I found especially useful:

Presentations
Android Design Patterns
Android User Interface Design Tips
Excellence in the Android Experience

Videos
Android UI Design Patterns (Google I/O 2010)
Designing and Implementing Android UIs for Phones and Tablets (Google I/O 2011)

Documents
Comparison of Android Devices

Blogs
Designer’s Guide to Supporting Multiple Android Device Screens
Android UI Design Patterns
Android Patterns

Product Reviews
Best Android Phones (CNET: May, 2011)
Best Android Tablets (CNET: May, 2011)

Android Developers
Supporting Multiple Screens
Icon Design
Android 3.0 Platform Highlights

Other
Android App Developers GUI Kits, Icons, Fonts and Tools

The problem is there are simply too many angles to assess when deciding on a product’s feature set. Some of those angles include the messiness we call human emotions which have a tendency to be fickle and be influenced by social forces we only notice after it’s too late.

Why does it require magic? Because magic is what it takes to predict the future and innovate after you’ve done everything humanly possible to understand the issues. The magic comes from a team or individual who has a vision—who can immerse themselves in the issues, fly above them for a bird’s eye view and come out the other side with the “right” solution.

Having a vision is a special and rare talent that just because you’ve earned a Harvard MBA doesn’t qualify you to possess it. It’s why we celebrate people like Steve Jobs and his accomplishments. Sure, Mark Zuckerberg created Facebook (perhaps, a little by accident) but it’s Jobs who hits it out of the park over and over again and it’s only Jobs who has enough credibility to call his latest creation the “post-PC device.”

Many CEOs of startups already sense and envy this magic. Where they get in trouble is when they naively believe all it takes is gut instinct to arrive at the right product. They skip the homework and go right to the exam, failing terribly. Not only do they lose by not understanding their customers, but they may not possess that special ability which allows some to make keen observations, feel empathy for their users and stitch together conventional elements to invent something different and delightful.

So, arriving at the right set of features for a product is a combination of both process and magic where one is a tool for learning and the other for predicting a future state. Fortunately for us, the first part is something that can be learned and put into practice. The other one involves genius and maybe more luck than we’d like to admit. (After all, who could have guessed that a micro-blogging tool with a 140 character limit would be such a hit.)

The following covers the part we can learn and outlines a method for arriving at an initial set of product features that can then be designed and tested for perceived value. Each phase builds from the previous one and while it may seem like a lot and take a few days to get through, it’s a necessary process for approaching the problem at many angles. To complicate things further, every product and situation is unique but by covering a multi-vector research plan (looking at customers, trends, technology, competition, etc.) we begin to strategically narrow down the list of possible features for our product and find room for innovation.

Immersion

Before we can begin to talk about our product’s feature set, we need to envelop ourselves in what we’re about to examine. An immersion phase provides the knowledge foundation for making educated guesses that we can then test, revise or throw out. Immersion give us insight into what the issues are in the first place and exposes the different angles to the problem. As you can imagine, skipping this important phase is just like showing up to the exam without studying. Do your homework!

According to Adam Richardson, creative director at Frog, immersion brings together a multitude of factors:

• Competitors (direct and adjacent)
• Comparative companies and products who can provide useful lessons
• Your company’s own business, capabilities, brand and values
• Broad cultural and economic trends
• Technology enablers available internally and externally

It may be added that the tools for arriving at these factors include:

• Competitive and comparative analysis
• Surveys
• Customer/partner interviews
• Ethnographic studies
• Persona creation
• Scenario/task exploration
• Usability testing (current product or competitors’ products)
• Researching new and available technology

A competitive/comparative analysis helps us understand where there’s room for differentiation, what conventions already exist, and what available technology there is. While our user research and documentation helps us understand who we’re selecting the features for and in what context they may be used.

Setting Product Goals

Once we’ve set up our knowledge base we take a day or two to educate all the stakeholders and next, begin the ideation phase. But before we dive into a brainstorm session we need to discuss and list the goals surrounding the product. This will help us not waste time on ideas or concepts that are not in the current interest of the business.

Some examples of project goals include:

Business Goals
e.g. drive foot traffic to locations, educate, register users

Product Goals
e.g. longer user engagement time, provide online support, ease of use

User Goals
These typically come from the created personas which in turn, come from research

Short-Term Goals
e.g. launch for upcoming event, register users, mobile presence

Long-Term Goals
e.g. make money, launch enterprise version, charge for business services

Non-Goals
e.g. maximize revenue, provide full-featured app, satisfy all customer types

Ideation

To begin the ideation phase, we place on a wall or whiteboard four labels. A moderator will use sticky notes to write down any proposed features and place it under a label. Some areas will already be filled with product feature ideas gathered from our Immersion Phase (i.e. business requirements, user goals, features most competitors already have, etc.)

The four designated areas act as catalysts for product feature brainstorming and put both the “known” (gathered from research) and “unknown” (future-predicting innovation) side by side.

The objective isn’t to restrict ideation to confined containers, but to ensure we’re considering all the major product angles. To keep the session free-flowing, ideas may be duplicated under one or more areas and/or combined. Using sticky notes makes it easy to swap ideas from one category to another. Participants then add to the existing pre-populated ideas and debate and discuss additional ways to innovate.

The four areas include:

Features based on business requirements
This area includes pre-populated features (sticky notes) based on stakeholder interviews from the immersion phase. However, additional requirements may be added as the product discussion widens. This typically includes features like user registration, optimization, login, etc.

Features based on best practices
Includes pre-populated features based on competitive and comparative analysis. Features may include the ability to upload images, search, offline support, sync between multiple devices, etc.

Features based on user goals
Includes pre-populated features based on customer research and personas. This essentially shows what users are wishing for but also leaves room for brainstorming unmet user/customer needs and desires.

Features based on innovation
This is the only area without any pre-populated feature ideas. The previous three areas help ensure we’re covering the essentials. The ideas generated for the innovation area come from discussion surrounding competitive differentiation, market opportunity and emerging technologies and typically make room for any ‘blue sky’ thinking.

To capture what was gained from the brainstorm session, pictures are taken of the whiteboard display, summarized in a document and shared among participants.

Narrowing the Feature Set

Brainstorm sessions are for idea generation, not for deciding feature sets. This is sometimes difficult to communicate to impatient CEOs who wish to walk out of a four-hour brainstorm session with a fixed feature set they can hand off to their engineers. One of the objectives of a brainstorm session is to shoot for quantity and so it’s the nature of these sessions to produce more ideas than you need. For that reason, we need a process for narrowing the number of ideas or run the risk of feature bloat (producing a product with too many features). All experienced product managers know the problems associated with feature bloat:

• Unrealistic product schedules that stress team members
• A focus on quantity over quality of experience
• A user experience made cumbersome and complex by too many options
• The burden of providing support for every new feature
• Wasting resources, time and money

In an effort to provide an elegant solution for your users and customers, you need to decide which features really provide value to them. And for first version launches, it’s best to plan for a minimal viable product. That is, the balance point where a product fulfills the necessary user goals with the least amount of features.

This is where you begin to ask questions like “Is it important we provide offline support out of the gate?” or “Is a chat widget something our users can live without?”. An MVP is a good, lean strategy that allows a startup or company to safely maintain costs while they confirm interest in their product.

In addition to thinking about an MVP, a checklist helps to narrow the feature list and cut some of the fat. Every feature idea should be examined by asking:

• Does the feature solve a problem?
• Is the feature feasible? In other words, can it be technically done now (not 5 years from now)?
• Would the feature create more value for the customer or is it driven by selfish interests (e.g., using technology as an end rather than a means)?
• Can it be done within certain amount of time?
• Are there the resources?
• What’s the risk of not completing it in time?

After putting your ideas through this rigor, it’s good to ask which ideas we should pursue immediately and which can can be deferred for later.

Often times, brainstorm sessions result in some brilliant ideas ahead of their time. Don’t throw these out! Save them for when the timing is right. For example, it took over 10 years for Wi-Fi to catch on with the public. In 2000, some of us had only one device connected to our home Wi-Fi. Now we have multiple devices that include everything from printers to cameras. Wi-Fi is now considered a standard feature with most electronic devices. Was 2000 a good time to introduce a Wi-Fi printer? Probably not, not enough people had Wi-Fi set up in their home yet. The point is providing a printer with Wi-Fi was a good idea, just not back in 2000.

Now that we’ve narrowed our feature scope based on business goals, knowledge and perceived customer value, we have a starting point for beginning to build a prototype. With the prototype we will layout the features to see if they make sense within the user flow and then, test the prototype to see if the features make sense to our users and customers. From there it’s an iterative cycle of design-test-refine until we have some certainty that the features we’ve chosen are the right ones.

The Magic

“Where does the magic come in?” you might be asking. The magic comes in deciding which features have the potential to be innovative. Innovation is the introduction of an invention to the broader public that improves the current state or condition of something. Just because you’ve launched a feature that nobody has doesn’t mean it’s innovative—it must be adopted by the public first! That’s why focusing on the right features is so important. Miss an upcoming trend or market insight and you could be toast. The visionary is the one who can take in all the information and predict the next thing—not because everyone says so, but because they see it coming from a mile away. That takes talent, not a learned process.

May you have both process and talent!

And yet, business is often times strangely at odds with exploring the emotional side of things. The authors of the book, Do you matter? How great design will make people love your company couldn’t have stated it better when they said, “We’d prefer to rationalize, measure, process, and systematize. Ironically, we tend to put faith in things that are decidedly not humanistic: Science. Math. Machines. When the going gets gray, we sprint for black or white.”

Empathy may be defined as having an awareness of others’ feelings, needs and concerns. It might be said that empathy requires a certain level of emotional intelligence in order to be sensitive to how customers and users might experience a wide range of emotions at a certain place and time. In the world of business and design, the ability to acutely recognize areas of pleasure or friction could be the difference between a successful product and a bomb.

We are ‘sentient’ beings (from Latin ‘sentient’, meaning feeling). We feel first and then, try to make sense of things after. IBM salesperson, F.G. “Buck” Rogers once said, “Customers buy on emotion and then justify with logic.” We attach a feeling to everything that reaches our senses. Everything in our area of focus is constantly being judged, compared and labeled.

There are many reason for this, one of them being that emotions (however much trouble they bring us) help guide us through life. How many times have we made a decision based on “our gut”. We don’t need to stop and analyze a dark alley to know instantly that danger might be ahead. We feel it and make a decision based on what our internal message is.

Emotions provide us with a shortcut to rapid understanding, a way to quickly size-up a situation and cut through the noise. It’s no wonder we use the same cerebral function to quickly size-up whether or not a recommended web service is trustworthy, safe and not a waste of our time.

I once had a client who brought me in to help them increase their conversion rate for a sign-up process. Their was a rumor that the competition with a similar flow, had a much better conversion rate and every effort would be needed to beat them.

Before the kick-off meeting, I planted myself at a local Starbucks to study the existing user flow and hopefully, have something intelligent to say for our fist meeting. At first glance, everything about the existing UI seemed to function well. All the heuristics were in place: the steps were clearly laid out, the form elements were intuitive, there was error prevention, the pages were aesthetically pleasing without clutter… From a UI standpoint, it was complete.

After briefly panicking about how I was supposed to improve the flow, I remembered the designer’s most valuable tool — empathy. I put on my Luke Skywalker persona, let go and just felt it.

Sure, the mechanics of the user flow were in tact, but what about the emotional elements? What was going through people’s heads as they followed the process? I pretended to go through the sign-up process as if it were my first time, mindfully noting all the different emotions I encountered along the way like a Buddhist practitioner in deep meditation.

To my surprise, I was able to quickly jot down about a dozen negative reactions to the existing user flow and possible solutions. These “first impressions” were so valuable that we ended up referring to them several times during the span of the project. I was exploring the emotional territory of the experience identifying areas of mistrust, confusion, impatience, uncertainty, inauthenticity and deeper qualities that touched on the brand identity and its need to elicit desire and show human connection. The result of putting myself in the user’s shoes and grading the experience on an emotional level, was a product requirements checklist that we could then use to test our assumptions and make recommendations.

As a designer, I consider the ability to empathize my greatest tool. By focusing on the emotional quality,  the designer is able to get at the core of what makes good design. According to Dev Patnaik, author of Wired to Care, empathy is an “antidote to a world of abstraction.” Empathy allows us to boil things down and pursue what matters most to our users and customers. The question to our customers shouldn’t be “So, how did it work? It’s “How did it make you feel?”

There are many reasons why businesses may not like using emotions as a path to designing and building better products and services. After all, the reason why humans are so fickle and unpredictable in the first place is because of emotions and our inability to manage them. Emotions are messy. Management may claim that it’s all subjective anyway — “Is the glass half full, or half empty?” What good are using emotions if everybody has a different opinion?

Decisions based on how somebody feels is a tough sell. If you want to get eaten for lunch by a pool of sharks, try telling a board of directors that from now on your strategy will be based on the emotional quality of your target audience.

And yet, according to Kevin Clark, Program Director at IBM and Ron Smith, Designer and Brand Experience Strategist at IBM, understanding the emotional aspect of offering appeal and transactions to their customers “is pivotal to business success” and business strategy.

Patnaik states, “Companies prosper when they tap into a power that every one of us already had — the ability to reach outside of ourselves and connect with people.” And brand guru, Marty Neumeier adds, “While this trait may have been a handicap in the days of win-lose customer relationships, in today’s customer-centric marketplace, it’s invaluable.”

In today’s customer-centric marketplace, we also have Facebook and Twitter which means any customer satisfaction or discontent travels fast! Better to know what your customers are feeling before, rather than later.

Besides making a good case for why the emotional quality of a product or service is important, there are ways to test your customer’s responses and your own intuition. Traditional qualitative research and usability testing provides support and a methodology for taking the fuzzy math of feelings and making sense out of it.

Learning how people feel about something isn’t the same as whether they like it. Surveys often reveal likes and dislikes, but it’s ethnography studies and live usability testing that often show the thinking process that follows an experience. Ethnographic field studies might reveal how users are approaching a problem with a workaround that could be better designed and exploited. Usability testing requires the participant to think out loud, often times revealing their sincere feelings about an experience.

With an empathic design methodology, we embrace the human condition or as customer development author Steve Blank likes to say, “We get out of the building.” We learn through direct observation and test our assumptions about what customers and users are feeling. We get out, connect and interact with customers versus designing within our four walls, believing we already know everything our audience wants (that’s OK for Steve Jobs and Jonathan Ive, probably not for you).

Like a sociologist or anthropologist, we back our findings with documented test results that measure consistent occurrences. Designers will develop tools such as personas to focus the team on key audience characteristics, behaviors and attitudes. New ideas based on brainstorm sessions and customer research are folded into a prototype, tested and refined.

By these methods, designing based on something abstract is less of a slippery slope and is done in a way that is acceptable within a business environment. Empathy and the emotional quality of your product or service provides meaning and value.

In summary, being emotionally receptive to your customers and product experience is fundamental to success. Experiences and brands live in the minds and hearts of individuals where they are archived in the abstract and sometimes messy form of emotions. As it turns out, great design is more than just sophisticated interaction and beautiful aesthetics.

“But to be great at design, you need to embrace the human condition and recognize that when it’s all said and done, this is what will you serve you the best.” – Brunner, Emery and Hall

I just wanted to take a moment to sincerely let you know how much I appreciate you always trying to please me (and I know I’m not always easy) and to also share with you some areas where we might need some help. You knew from day 1 that I was “high-maintenance” (as you always like to tell your friends), so please don’t be offended by what I’m about to say.

I want to love you, I really do, but sometimes you make it very hard. First, you say you’ve put a lot of energy into it. Well, I don’t really care how much blood, sweat and tears it has cost you. You like to call it “visits” or “page views” or “registered users”. I call it a relationship. Why don’t you see it the same way I do?

When I first met you, I gave you more than 10 seconds to show me why I might want to download your app. At that time, you were free and that’s what attracted me to you. But now you tell me I’ve gotta pay and I’m pissed! How can you twist my arm like this? You give me no options or incentives and now I feel cheated and taken advantage of. Why don’t you ever ask me what I think before making these kinds of decisions? Hello! Customer survey anyone?

Sure, you put your spin on it and try to make everything sound nice and enchanting, but I don’t like your spin. Call off your marketing dogs already. I’ve been marketed to since the day I was born and can sniff-out a liar a mile away. Please don’t lie to me or try to hype things that are just not so.

I told you, “Please don’t make me learn your app. Do you know how busy I am?” You thought it was funny how I always need your support. What support? You make it impossible to get the right answers or contact you when I really need it. I’m not stupid, baby, just very busy. Don’t waste my time.

You like to be social but your bla, bla, bla and “there’s me on Facebook” and “there’s me on Twitter” doesn’t mean a thing if you don’t listen to what I have to say in return. Social is a two-way conversation, get it?!?

And why do you make me connect through Facebook? I like Facebook, but only for certain things. Please don’t make me connect through my social network and friends. Don’t abuse me and my friends, we know what you’re up to.

Mostly, you say you want me but all you care about is your bottom line. I can tell and I’m thinking about going somewhere else. No matter how true it may be, it’s always a turn off to see that your needs come before my own. It really makes me sad that I don’t matter to you the most.

OK, so maybe it’s true about what they say about me being unfaithful and “always looking for the next best thing.” Whatever. Make me truly love you and maybe I’ll stick around and show you how much patience I have for your quirkiness.

Which leads me to say, If you make a mistake, just admit it. I don’t hold grudges, really. Just don’t forget to admit it or hell you’ll pay.

Be always honest with me and I’ll show understanding and patience. Lie to me or put too much spin on it and I’ll throw it right back at you 10-fold.

You want to see PR? I’m a hundred times more effective that your “award-winning PR agency”. Make me love you and I’ll broadcast it to the four winds (Twitter, Facebook, Tumblr, LinkedIn). Piss me off and I’ll spread the bad news like wild fire.

Honestly, I’m compassionate and am not looking for the perfect you, just frequent upgrades. I LOVE FREE UPGRADES! They make me feel like you care and that you’re listening. Upgrades are like little gifts.

Which brings me to how I’ll permit that you spoil me:

I like it when you anticipate my every need and don’t make me think. I like it when you’re polite. I like the small things like free shipping both ways and no taxes. I like it when you pleasantly surprise me with ways that make my life easier and less complicated. I like it when you’re flexible, open and not jealous of others. I like it that you’re everywhere I need you to be.

So, my only question to you is this: HOW WILL YOU MAKE ME HAPPY TODAY?

Forever yours (or not),
Your User Base

For corporations, their mantra was different. It was “we know our customers” (this is good, unless you really don’t know what you think you know!). Ideas were drawn on whiteboards, product teams put together and we were promised a beta before the next board meeting. Four months later, it was doing it all over again—this time with more gusto, shinier graphics and extra features. While this made everyone look productive, customers never saw the value in just another “me too” product and time and money was wasted with another unsuccessful product.

In the old days, there was little or no shown empathy for the customer, plans were constructed based on assumptions and gut instincts, and “testing” meant QA and a beta release. Recently, a new paradigm shift has taken place that challenges our old ways of doing things and brings laser focus to customer needs. This customer-centered approach is accompanied by a no-waste policy and ferocious rapid product iteration.

“Business as usual” is slowing changing with the help of three methodologies: Design Thinking, Customer Development and Lean Startup. They are practices that provide a road map to building successful companies and products on purpose rather than by chance. These three methods have so much in common with each other that upon learning about them for the first time, you can’t stop to wonder — “Aren’t they all talking about the same thing?”

Rather than giving a comprehensive analysis of each discipline, I thought it would be helpful to discuss their similarities, emphasizing a new chorus of ideas coming from academicians, designers, corporations and entrepreneurs.

Design thinking has received the most media coverage in the last year with several books out by well known design industry veterans like Tim Brown of IDEO and b-school revolutionaries like Roger Martin. Customer Development and Lean Startup seem to be the new kids on the block, but are gaining attention as tech startups in particular, strive to be more agile, faster to market and more innovative in a world that is increasingly competitive and hungry for all things tech.

While Design Thinking probably isn’t what entrepreneurs think of first when formulating their company’s plans, many larger companies such as GE and Procter & Gamble and business schools like UC Berkeley and University of Toronto have adopted it and made it a part of their curriculum. Even non-profits are using Design Thinking in an effort to help local businesses pick up distressed cities hit hard by the recession.

A close cousin to Design Thinking is Customer Development. Customer Development is a business model for early stage companies first introduced by retired serial entrepreneur and UC Berkeley professor, Steve Blank. Customer Development is promoted as a risk reduction methodology for early stage startups. However, Customer Development isn’t only for entrepreneurs. Its four step approach of Customer Discovery, Customer Validation, Customer Creation and Customer Development can just as easily be applied to any product initiative.

Lean Startup is as the name suggests, about eliminating waste. Waste may be defined as “any human activity which absorbs resources but creates no value.” Lean Startup takes Customer Development and Agile development and combines the two to produce low-burning, fast-releasing, iterative product development. The term was first coined by Eric Ries (a student of Steve Blank) and was born out of three trends:

• The use of open source and free software services
• Agile development methodologies
• Rapid customer-focused iterations

Lean Startup can be used by startups as well as product development teams looking for an efficient, low-burn, customer-goal oriented methodology.

Design Thinking, Customer Development and Lean Startup are summarized as follows:

• Design Thinking – Innovate via customer empathy and rapid prototyping
• Customer Development – Test your assumptions
• Lean Startup – Stay quick and agile with low burn

While they might seem to be saying completely different things, the means to arriving at their messages is more or less the same. In fact, all three teach the following:

Learning and Discovery
If all three practices have anything in common it’s that they are organized around continuous learning and refinement. Many startups might balk at the idea that their first priority be to learn. After all, who has time to learn when there’s a product to be built! They tend to approach it backwards by building the product or service first, and then learning. Unfortunately, by that time they’ve probably burned through all their cash and it’s too late to take advantage of any lessons learned.

All three methodologies put emphasis on defining what the issues are and for who, and doing research up-front before any product launch. The idea is to guide product design on the deeply understood needs, behaviors and attitudes of the customer, not on technology, business needs or on gut instinct. Bottom line: before any building begins, it needs to be proven that a product would solve a problem for an identifiable group of users.

Direct Observation
Steve Blank calls this “getting out of the building”. You have to talk to and observe real people if you want to get real feedback on your business or product assumptions. While surveys and focus groups are helpful, there’s nothing that matches the benefits of being face-to-face with a complete stranger from your target audience. Surveys are helpful, but you’re missing all the hundreds of nuances and ways human beings communicate frustration or pleasure through body language and verbal cues.

Failing Fast
All three practices emphasize failing early and quickly. All three suggest an ideation period where you develop hypotheses and test them rigorously. This enables you to not only fail cheaply, but also to expand and refine ideas via multiple iterations and feedback from your end-users. The idea is to eliminate all the larger issues early while it’s still cheap to do so. Failing isn’t bad as long it’s done quickly and early in the process. In fact, not failing enough in the beginning could be a sign you’re not testing your assumptions well enough.

Test Your Assumptions
Always test your assumptions. Why? Because the sooner you realize a hypothesis is wrong, the faster you can pivot. Eric Ries explains “by testing, each failed hypothesis leads to a new pivot, where we change just one element of the business plan (customer segment, feature set, positioning) but don’t abandon everything we’ve learned.” Many entrepreneurs and business leaders don’t like to test their hypotheses out of fear of being wrong, especially after having already committed several weeks of time and money. All three camps ask, “Why build a company or product on myths when it can be built on facts and knowledge? And anyway, what’s the point of building a product that nobody wants?”

The lesson: test your assumptions every inch of the way and increase your chances for success exponentially. Any company that doesn’t test their assumptions on a continuous basis is simply rolling the dice. While you’re doing it, test for customer validation, usability and feasibility.

Iterative Development
Lastly, all three methods are in agreement when it comes to iterative development. Iterative development allows you to to improve a concept or product in short correcting cycles. Iterations are done quickly with the idea that a concept gains refinement over several re-designs. An example of an iterative cycle is: ideation-design-test-refine (repeat).

While there are many similarities to all three methods, there are also unique elements to both Customer Development and Lean Startup. In general, Customer Development focuses on providing constant feedback, while Lean Startup takes the feedback and goes a step further by applying it to the actual workings of a startup (e.g., technology choices and software development practices). With Design Thinking, the emphasis is mostly on innovating and not surviving.  Nevertheless, Design Thinking also works well on a limited budget and resources, and is excellent for solving “wicked problems” (survival being one of them).

Product and Customer Development Teams
Customer Development suggests that startups have two teams: one for customer development and the other for product development. In reality, they both feed each other to influence decisions, but with Customer Development what product people would normally call the “discovery phase” is done by the customer development team on a continuous basis. This frees-up the product team to focus on the user experience and build while the customer development team provides constant end-user feedback.

MVP (Minimal Viable Product)
Both Customer Development and Lean Startup methods stress the importance of building a “minimal viable product” or one that fulfills the greatest number of customer needs with the least amount of features. If you’re a software engineer, this is music to your ears. The trick is finding the right balance. Too many features and you run the risk of burning through cash and burning out your product team. Too few features and you run the risk of not finding, disappointing or losing customers.

Taking Advantage of Free Stuff and Agile Management Practices
In the past, companies relied on waterfall development practices and licensed software to build their products and services. To counter these time and money burning methods, Lean Startup advocates the use of Agile product development where product builds are done in “sprints” within days or even hours. It also encourages the use of open source technology.

Resources:
The Four Steps to the Epiphany – Successful Strategies for Products that Win by Steve Blank

The Entrepreneur’s Guide to Customer Development by Brant Cooper & Patrick Vlaskovits

The Lean Startup – Low Burn by Design not Crisis by Steve Blank and Eric Ries

The Lean Startup Wiki

Achieving Flow in a Lean Startup by Ash Maurya

What is Lean about the Lean Startup by Eric Ries

The Promise of the Lean Startup by Eric Ries

Lean Thinking by James P. Womack and Daniel T. Jones

Fast Company: Design Thinking… What is That? by Mark Dziersk

Design Observer: What is Design Thinking Anyway? Roger Martin

Harvard Business Publishing: Why Design Thinking Won’t Save You by Peter Merholz

New York Times: Welcoming the New, Improving the Old by Sara Beckman

BusinessWeek: How to Nurture Future Leaders by Venessa Wong

Business Week: How Business is Adopting Design Thinking by Venessa Wong

Business Week: Design Thinking Can Be Learned Interview with IDEO cofounder, David Kelley

Wall Street Journal: Inspired Design is Essential—and All Too Rare by Gary Hamel

Related Posts:
Design Thinking 101

Tips for Startups

The In-House Design Team
If you have an in-house design team, they are probably your greatest asset for quick turn-around of marketing materials, website updates and presentation graphics. You might also have one or more “product people” on staff who specialize in user experience design, visual design, product management or all the above. These folks are (hopefully) user or customer experts and thoroughly understand both the company’s business and user goals.

Good in-house product people have accumulated countless hours studying the needs, behaviors and attitudes of the customer/user in order to provide the best experience for them. They are an investment in time and education with the result that they know the product inch for inch just as a sailor alone out at sea knows his vessel. Companies like in-house design teams or individuals because they are product masters and will probably stick around for at least a few years.

But like everything, in-house teams don’t come trouble-free. In-house design teams and individuals can become stale and dispassionate especially if office politics gets them down. Motivation is typically the hardest for staff designers who over time can lose inspiration and their ability to think out of the box. One person described it like eating at the same restaurant everyday. Coming to the same job and challenges everyday can eventually lead to boredom and indifference.

It’s also not uncommon for employees (designers included) to be too close to a project for an extended amount of time and lose sight of what’s most important. Being too close to something, they are blind to other possibilities and may seek opinions from the outside. Companies will spend thousands of dollars to have brand firms remind them what it is they do for a living. Seeking fresh eyes is one of the biggest reasons companies invest in outside design help.

The Design Agency
Companies hire design agencies above all, because they are perceived as having almost magical powers. Agencies are responsible for things like memorable ad campaigns, tag lines that stick, saliva-inducing graphics, jaw-dropping interaction and mostly, making a bunch of techies and sales guys look “cool”.

Design agencies know human emotion, how to manipulate it and drive it to bring sales. They know that at the end of the day, it’s not about how it looks or works but how it “feels”. Why? Because human beings are wired for emotion, and eliciting a good feeling is the surest route to winning the mind and heart of every user and customer.

Successful design agencies typically have years of experience, have people who specialize in every aspect of the design process and are driven not only by profits, but by projects that will enhance their portfolio and win them awards. They can bring a new sense of passion to a project, come up with whacky/never-done-before ideas and help drive a company toward innovation. While not being immediate experts of your product, they are quick to learn and may even have the tools and drive to dig deeper than your staff employees.

However, design agencies are viewed as expensive, especially in comparison to an art school graduate willing to do the same logo for 1/10 of the cost. Like any business, they have overhead costs to cover and will typically have several specialists involved on one project.

There is quick turn-around in some agencies and the Creative Director or Senior Designers will sometimes begin a project and then hand-off the rest to junior designers or interns to complete. This can sometimes result in less-than-stellar work. I once went for an interview at a very large and well-known design agency to find that most of the staff (several floors of the building) were in their early 20s. What it indicated to me was the agency was mostly business-driven, using (and probably exhausting) the most affordable design talent available.

Design agencies also usually require a lengthy  “discovery phase” that enables them to get up to speed with the business and user goals. While this is a necessary step in order to design what’s right for the company and customer, this sometimes frustrates stakeholders who see no immediate return on their investment.

Lastly, design agencies typically won’t work on-site, only coming in for meetings. This is one reason why some companies choose to hire freelancers.

The Freelancer/Consultant
Freelancers are known for their flexibility. On one end of the spectrum there are “consultants” and on the other, “designers for rent”. One will provide well thought out analysis and design strategies, while the other will be content working on whatever is placed in front of them. Their prices range from just below agency fees to designers just starting out willing to work for nothing more than a good portfolio piece. Both freelancers and consultants offer companies a way to get immediate design help without committing to long-term financial commitments and employee benefits.

A consultant, like agencies, has worked in many different client situations and can bring a fresh view to any project. A good consultant has worn many hats in their career and probably has experience working with all areas of the company org chart including product, marketing, engineering and creative services. They may specialize in one area–whether it be interaction design, visual design, web design, mobile apps or working with startups–and enjoy working one-on-one. They see themselves as craftsmen and are eager to share their expertise and experience.

A less seasoned designer may see themselves as simply offering “services”. That is, it’s their job to be there on-site fulfilling whatever task is assigned to them. They are typically very agile and work on an hourly basis. They come into projects like rescue workers, filling in for other designers or offering a helping hand when deadlines approach and things get crazy.

Working with freelancers or consultants can also have its challenges. Over time, a company might find they’re investing too heavily in a consultant becoming a customer and product expert. While there are some situations where this is acceptable (e.g. the consultant has a particular specialty that’s hard to replace), it might be better for the company to just hire someone full-time in order to have that customer expert on staff where they always know where to find them. Consultants may also take a longer time than a design team would to complete design phases.

A less seasoned freelancer, not having worked for a design agency or in-house design team before, might be too inexperienced. Less experienced freelancers will sometimes offer to skip important design phases and convince the client they’re a bargain by charging a minimal fee. Unfortunately–like the old saying goes–you get what you pay for and it might take you several junior freelancers and a lot of wasted money before you learn who to work with.

Project Examples
With all the pros and cons, there are certain projects and situations where one kind of designer or team is a better fit than the other. Below is an attempt to show the best match-ups.

I have less than $5,000 to spend on designing a new website for my company.
If that’s your absolute limit, your best bet is seeking out a junior freelance designer and planning on giving him or her a lot of direction.

We’d like to build a prototype to show investors.
A seasoned consultant is an excellent choice for this kind of project, especially if you find someone who has experience working with startups. They should be able to recommend a lean process that doesn’t burn through loads of cash and provide a process that validates customer interest.

We need a new corporate identity.
Design agencies are typically experts at this sort of thing and will probably have numerous portfolio examples.

We need someone to closely and constantly monitor the success of our product.
In-house, all the way.

We think the product could use some UI work.
“We think” means you’re not sure and need an expert. A consultant or interactive design agency will help determine what problems you may have.

We have a conference coming up and need extra graphics help.
Call up that freelance guy your buddy always uses.

We’ve had our heads down on this product too long and can’t see what needs to be done.
A design agency or consultant will bring clarity.

It’s Tuesday and I need this done by Friday.
Tough situation. You might try calling a freelancer to check their availability. Most agencies will politely decline without being able to schedule weeks in advance.

I have the design direction, I just need someone to flesh out the rest.
Try a freelancer.

We have several web assets that need to be maintained on a regular basis.
This might go to any of the groups but most likely, an in-house creative services team would be best.

Users are leaving once they get to the shopping cart page. Why?
A seasoned consultant would be best for this situation.

We need an eye-popping microsite to promote a new product.
Design agencies are masters at this sort of thing.

Related Posts:
Help! My Designer Wants a “Discovery Phase”

The method for building successful products should never, as product guru Marty Cagan likes to explain it, feel like playing darts blindfolded. With companies like IDEO, Cooper, Adaptive Path and 37 Signals sharing their industry secrets, there’s really no excuse anymore for building products haphazardly. It’s my hope the following will help, in some small way, to guide early startups on the right path to creating the next killer app.

Engineers Designer Wanted
10 years ago, it wasn’t uncommon for engineers to both design and build an application. “Graphic designers” were just starting to get their heads around the digital space and for the most part, products were designed and built from start to finish by engineers. While many products “functioned” correctly, often the result was a user experience that lacked empathy for the user (a design skill) and a frustrating process where everyone from product manager to CEO was at the mercy of the engineer’s discretion.

Flash forward to 2010 and what we find are designers doing a lot of the up-front work in order to ensure the usability and perceived value of a digital product. More than anything, what designers bring to a project at the beginning is insurance that what you’re about to build will be successful. How do they do this? They apply design thinking:

• Take risks at the early stages when there’s room for error
• Conduct research to understand the target audience’s goals, behaviors and attitudes
• Test ideas to gather immediate feedback and make any course changes early
• Challenge a product or service’s usability, feasibility and perceived value

All this begins before one line of code is ever typed. Rather than hiring a bunch of engineers to start building from the get-go, the focus is on product discovery via a high-fidelity prototype (HTML with light scripting or Flash) that mimics the user experience. Like building a house, the first step isn’t to begin pouring the foundation, but to work with the architects to create a plan and test the design (with a prototype) before the construction team shows up.

Start out with a good product manager and designer and consult the rest. Between your product manager and designer, you should be able to get your vision off and running, keep costs down and hopes up.

Fail quickly and early (and cheaply)
One of the design thinker’s mantras is “fail quickly and early.” That’s right, go ahead and fail—just do it while it’s cheap and easy to do so.

Prototypes, both low-fidelity and high-fidelity, are a great way to safely test out ideas early in the process. Have a whacky idea that might just be the next Twitter? Test it. Had a heated argument about the validity of a certain feature? Test it.

With interactive prototyping tools like Axure and the soon-to-be-launched Adobe Flash Catalyst, you can put together a wireframe prototype in no time in order to test your vision. And if your idea turns out to be a complete flop? Well…better now than later when it could cost you weeks of code or sending an apology letter to your user base.

Feasible, usable, valuable
So, you have a prototype that matches your vision perfectly and (in your mind) appears to be a Facebook killer. Now’s the time to be asking yourself the following:

Is the product feasible? Somebody grab the technologist because we need find out if what we’re proposing is even technologically possible or if we are light years away. Bringing a technologist into the equation early has both its advantages and disadvantages. In this case, it’s important to understand now, whether or not your concept has wings. A good technologist will also provide insight into what else is possible (i.e., “Did you know we could…”).

On the other hand, some technologists may have a narrow view of what’s possible and you can run the risk of killing innovation. The initial iPad feedback coming from the tech community is an example where technologists don’t see the value in what could be a game-changer for the industry. A good strategy in the early stages is to “shoot for the moon”, drafting plans that are creative and uninhibited by barriers (within reason, of course).

Is the product usable? You “get it,” but will your users? Designers like to use fancy words like heuristic evaluation to describe testing the usability of a product. Some quick heuristics to test are: user control and freedom, consistency, error prevention, efficiency and aesthetics. Again, a prototype along with direct observation of test participants are used to grade the usability of a product.

Is the product valuable? What is the perceived value of the product in the eyes of the user/customer? In other words, will anyone care? An invention only becomes an innovation once others recognize the value of it. Does the world need another Facebook or My Space?…probably not.

I (heart) users
Everyone knows the key to success is building a product people love. Steve Jobs likes to reminds us of this. Are Apple products more expensive that their competitors’? Sure, but it doesn’t matter. We still buy them.

According to the book The Design of Sites, there are four types of design styles. The first is company-centered design where the priorities of the company are put before those of the user. In return, little thought is given to what customers want to do. An example of this is making users register before giving them access to an application’s features.

The second style is technology-centered design. Here, technology is an end rather than a means of accomplishing and end. Just because you can build it, doesn’t mean you should or that anyone will want it.

Thirdly, there’s design-centered design. In design-centered design, “the needs of other people are given less importance than the creative and expressive needs of the design team.” An example is the designer who is only concerned with the emotional impact of the user experience and ignores other key elements such as usability.

Lastly, there’s customer-centered design. This is the sweet spot that “emphasizes customers and their tasks above all, and sees technology as a tool that can empower people.” While it’s important to meet business goals, it’s equally as important to show empathy for the user by deeply understanding their needs, behaviors and attitudes. Lose site of the user and you’re lost. In any case, if you build a product people love, many of your business requirements will already have been met.

Test it, test it, test it

Test it at the beginning, in the middle and at the end. A common misconception is testing wastes a lot of time and money. In the hay day when focus groups were lead by over-inflated marketing agencies, it did. Welcome to the 21st century. Usability testing can now be done in a variety of ways that are both relatively cheap and fast. Sites like UserTesting.com allow for quick turn-arounds and for about $50 a user, you can hire live participants to try out your product at your work place and gather insights. A morning of usability testing at about $150 (3 participants) is time and money well-spent assuring your team they’re on the right track. Learn to enjoy testing and do it frequently. Not only will you find it a nice distraction from looking at documentation and mockups all day, but it could save you a lot of money and everyone headaches along the way.

Build a minimal product
“Build half a product, not a half-ass product” – 37 Signals

Start by building a minimum product to ensure you can get something out sooner rather than later. Build a good foundation and add later as your product gains traction with your users. Many times I’ve witnessed what could’ve been a very nice product launch, turn into something that only the business owners thought was a success. The feeling is “We’ve worked very hard on this and we deserve to feel proud about it.” Unfortunately, your users could care less how many hours you’ve put into it. That’s why it’s important to plan well and bite off only as much you can chew.

“Perfection” is a word people don’t like to use in product meetings. It’s time to bring the perfectionists back with the caveat that the team work on less rather than more in order to achieve both a product that is elegant and do-able by the product team. In the long-run, you’re users will thank you with rave reviews and you can return the favor with frequent updates as you check-off one new feature after another.

Feedback comes in many flavors
While usability testing and free beta versions provide invaluable feedback to your product team, so does social media. Companies now have a variety of ways to gather feedback from their customers, whether it be comments to their blog posts, Twitter feed or Facebook page. Jump on the social media bandwagon early to pick up on the vibe from your users and get people’s reactions to your product early. Consider social media your focus group.

Common pitfalls
As mentioned at the beginning of the post, startups are often lead by people that might not have a lot of experience when it comes to product development. An MBA might buy you business credentials but that doesn’t necessarily equate to being a great product designer. Here are some areas entrepreneurs often get stuck:

“We’ll see what sticks”
The mindset is to throw several concepts at the wall like spaghetti and see what sticks with your users/customers. This brings us back to the throwing-darts analogy. The idea is to test all concepts before they reach your audience. Not only will this save you time and a wad of cash, but it will help maintain a fickle user base while you experiment with other ideas. “We’ll see what sticks” isn’t a plan, it’s a last minute desperate measure to find the right solution.

“Build it and they will come”
Just because you can make something doesn’t mean you should. Just like the Facebook example…does the world need another? Test your concept early to see if people care and whether or not it’s worth spending other people’s money on.

“We don’t have time for usability testing”
With all the tools available for usability testing these days, there’s no excuse for not doing it. A little goes a long way with this one.

“We’ll let the users tell us what they want”
While usability testing offers an invaluable means for directly observing your users as they try out your product, it can also turn into a design crutch. Usability testing should only be used to confirm the validity of your concepts and not as a means to arrive to them. The customer doesn’t always know what they want.

U. of Product Design
Lastly, we’re fortunate to live in a time when knowledge is so easy to come by. Many of the top interactive design studios and universities offer courses for those who would like to become better product leaders. Here are a few, all located in the Bay Area:

Cooper Cooper | U
Adaptive Path In-house Training and Virtual Seminars
Silicon Valley Product Group Public Workshops
Stanford D. School Exec Ed

Related Posts:
Why Some Startups Fail
Design Thinking 101
Help! My Designer Wants a “Discovery Phase”

This is a challenging question, especially for those of us whose job might include a sense of guilt around designing more anxiety-generating products and services. Print and packaging designers have the environment to ponder over. Digital designers may unconsciously worry about our inner environment and how they might be affecting people’s mental health. With problems like ADHD, acute anxiety disorder, addiction and an ever-increasing separation from our natural world, these concerns are real.

We have a constant stream of devices and “clutter” competing for our attention. Even if you vow never again to own a phone or computer, you’ll find it hard to avoid the television which ironically, is used in many public places to fill the empty/quiet space so desperately needed in our busy and information-saturated lives. Bars, restaurants, health clubs, doctor’s offices, gas pumps…even government buildings now have the TV turned on, eliminating any “quiet time” we may encounter as we wait for our number to be called. In the past, these distractions were welcomed. Now with so much already talking to us, they’ve become a nuisance—a distraction we find almost impossible to ignore.

In short, our lives are filled with clutter and there seems to be no escape.

Disconnecting is good for us. It makes us more settled, allows us to evaluate our situation more clearly and lets creative ideas and solutions rise to the surface. Depending on what we’re doing while we’re disconnected (going for a walk, painting, playing with the dog, etc.), it can also help remove us from the world of thoughts, which is actually quite refreshing considering the amount of time we spend communicating and reading news, email, blogs, tweets, etc.

It takes courage to disconnect and break from the clutter of media and technology. Last year, I went on a 10-day silent meditation retreat which I enjoyed doing, in part, to disconnect. Unlike previous experiences, this time I had problems settling into the profound silence one finds in such a place. As a remedy, a teacher suggested I go to my car and check my email! He recognized the difficulty of disconnecting and his prescription was to give me a little dose of modern life so I could relax again. Just one more hit, man!

Seeking solitude is becoming more and more important in today’s always-on world. But maybe we should go to the source of the problem and ask “If so many of us are connected all the time—whether it be email, social media, print media, phone, radio, TV or all of the above—why is it that we are?” After all, what really are the rewards to being connected all the time? Does it make us any happier?

It reminds me of the old saying, “No one on their deathbed ever said ‘I wish I’d spent more time at the office.’” Maybe it should be revised for a 21st century audience to be, “No one on their deathbed ever said ‘I wish I’d posted more tweets.’”

Dr. Matthias Mehl, a psychologist at the University of Arizona showed that people who have more substantive, deep conversations throughout the day are happier than those who spend more time engaging in small talk (i.e. social media). And in an article for the Harvard Business Review, Umair Haque shares a hypothesis. He proposes that “despite all the excitement surrounding social media, the Internet isn’t connecting us as much as we think it is. It’s largely home to weak, artificial connections, what I call thin relationships.” Might technology and social media not do what they—seemingly—promise to do?

What they seem to do is help fulfill our innate desire to connect with others. Like food, water, sex and shelter, we have a need to be with each other. We’re social animals (some more than others). But with the advent of social media like Twitter, Facebook and Foursquare, we’ve put ourselves into social over-drive. Is it possible that new media is pushing our biological buttons just like candy pushes our buttons for the taste of salt and sugar, pornography for sex and McMansions for our desire to have a large roof over our heads? Has man-made invention once again made us into a lab rat?

Our clutter and connection to media and technology will only increase as advertising finds its way into new nooks and crannies and as one device talks to another device, which talks to all your “friend’s” devices, and so on… Everything is talking to us. It’s like the profound and memorable opening to the movie Contact, where we’re traveling into out space away from Planet Earth. As we move farther away from Earth, all the human-generated radio and TV broadcast noise slowly diminishes.

Certainly, the majority of technology and media aren’t what we would consider “harmful”. I don’t want to bore anyone counting the ways technology and media have benefited us. But when singularly relied on for authentic social interaction and re-creation, technology and media can quickly take on a very shallow and trivial role, sending us into dis-ease. They have the potential to clutter-up our lives with unnecessary anxiety, “priorities” and information tid-bits. Through repeated use, they can become what feels like a security blanket. They’re experts at creating value where there wasn’t any before.

In truth, we are still learning how to live with a lot of new technology—Facebook, Twitter, location-based apps, smart phones… It’s still too early to say whether or not these technologies are fads or here to stay. One thing is for sure, we have an exponentially larger amount of “clutter” in our lives than people just 15 years ago, ever had. How we manage it is the responsibility of each of us.

We need to evaluate what adds real value to our daily lives and throw away the rest. My own practice includes giving away books that are collecting dust, canceling magazine subscriptions, deleting RSS feeds that no longer interest me, making it a rule to follow only a few on Twitter and cutting out anything else I consider of little value. As much as I enjoy interacting and working with technology and media, I know that in order to allow other things in life, I must make some room first.

Related Posts:
The Human-Tech Experiment