The folks behind the book Business Model Generation, Alexander Osterwalder and Yves Pigneur, have come up with a business “handbook” that is not only user-friendly, helpful and applicable—but brilliant from a business model perspective.

Before launching the book, they created an innovative business model that includes some interesting ways to generate money, a unique visual design approach and a targeted marketing plan. Not only have I enjoyed the book and applied its insights to Malenke | Barnhart, but I also love the model behind it.

The business book publishing space is incredibly competitive and has a horrible reputation for producing puffery. With thousands of business books published per year, many of which fail, they had to do something really different to climb above the clutter. What I have noticed, and they certainly overcame, were common business book pitfalls. Most business books are:

• Boring
• Text heavy
• Too light on visuals
• Lacking in visual design
• Not applicable
• Not tactical
• Too theoretical
• Not modern or fresh
• Fluffy
• Too heady

Here is what they did to create a best-seller:

Made it highly profitable
470 people from 45 countries paid to be a part of the book. Initially they paid around $24, and that quickly scaled to $450 per person–just to be acknowledged in the book. This helped pay for the design and production. They then self-published.

Made it highly visual
With funds raised by the contributors, the authors were able to hire a talented illustrator and designer to create a book full of graphics that appeal to visual people—which is most people. The pages are filled with graphics that tell a story much quicker than a slew of words ever could.  The book is actually fun to read, and most importantly— easy to put to immediate use.

Made it highly usable
The “handbook” is based around the “Business Model Canvas”, a highly usable template for building a business model from the ground up. The template is downloadable from the book site, and there is also an iPad app to help facilitate the process. The canvas helps businesses quickly evaluate current models as well as establish new ones.

The model is based on nine building blocks:

1. Customer Segments
2. Customer Relationships
3. Channels
4. Value Proposition
5. Revenue Streams
6. Cost Structure
7. Key Partners
8. Key Activities
9. Key Resources

Made it highly marketable
The creators gave away the “Business Model Canvas” and a 72-page portion of the book for free. They created numerous channels for marketing: Alex’s website, the book website, Alex’s blog and numerous YouTube videos,  which share the vision of the book.  There are now seminars, conferences and webinars surrounding the “Business Model Canvas” concept. They have a huge unpaid sales staff in the form of consultants and conference speakers using the canvas in their material all over the world. Brilliant.

This book is a must-read for leaders, entrepreneurs, intrapreneurs, innovators, startups, strategists and consultants.

A few good links:
http://www.businessmodelalchemist.com
http://alexosterwalder.com/
http://www.businessmodelgeneration.com

Another interesting business model:

App Cooker: http://www.appcooker.com/Overview.php
This is a great tool for managing iPad and iPhone development, but what is interesting here is the pricing model. They have created a sense of urgency with a “sliding scale” pricing model. For a limited time, the product is discounted at $19.99, then it will scale to $49.99 as they release new features and reach milestones. But if you lock in now, you get the discounted price. What a great way to get some critical mass and some much-needed funds flowing.

Following the announcement of the iPhone 4S release, there has been an overwhelming negative response. Apparently the entire media (tech and mainstream), and most of the population, had convinced themselves that the form-factor of the iPhone was going to change yesterday. And it would seem that looks are all we care about.

To start, the iPhone having a drastically redesigned case only one year after it was initially released is pretty un-Apple. For how many products do you see Apple completely redesigning the form on a yearly basis? Correct: none. That’s not Apple. It may be what some people want from Apple (after all, when they do redesign something—or design something new—it’s almost always awesome), but that’s not how they work. They refine and iterate to a final design internally, then launch to the public and make incremental changes over time. If the initial form wasn’t elegant enough to stand the test of time (which isn’t very long in the cell phone market), it would not have been released.

So yesterday we were introduced to the latest and greatest iPhone: the 4S. Consistent with all of Apple’s products, it iterated on an existing design. Unfortunately, this is as deep as most of the analysis of iPhone 4S has gone. It looks largely the same, so it’s not a big deal. Yeah, maybe there are some little tweaks inside but it LOOKS the same! How will all the people you pass on the street know you have THE COOLEST, LATEST iPhone?!

But what was really announced yesterday was monumental. It’s obvious why Apple needed a slightly longer release cycle to get this iPhone to market. Everyone seems to be overlooking these major points:

World phone

Remember antennagate? Not only has Apple fixed the problem, they leap-frogged the concerns to offer a CDMA-GSM-capable world phone that intelligently switches antennae to optimize transfer performance. And it supports HSPA+, which means effectively 4G speeds (twice iPhone 4).

Camera

Sure 8 mega pixels is nice, but new optics and sensors, a collection of new software for facial recognition, and auto-leveling of 1080P video? I just bought a nice, new point-and-shoot camera a few months ago, but I wouldn’t be the least bit surprised if iPhone 4S out-performs it—particularly with video.

Processor

A5. Twice as fast a processor in a phone that was already universally considered to be the quickest, most responsive smartphone in the world. And if there was any doubt that iPhone was the greatest mobile gaming device available, that can be set aside now.

Battery

Not only is there a more powerful processor, heavier-lifting software and twice-speed data transfer, but battery life actually improved!

Interface

We saw hints of iOS5 over the summer and began to see how a new notifications center and deep Twitter integration could evolve how we use iPhone. Yesterday we saw how Siri could completely change how we interact with a device. This isn’t “read my touchscreen” voice control like Android introduced. This is intelligent, contextual, human language interaction. Remarkably, it was only 4 years ago that Apple redefined human-computer interaction with multi-touch. Now they have introduced the next major revolution in human-computer interaction. Siri alone would have been a monumental announcement. It will have enormous, far-reaching impacts in technology.

Sorry if you didn’t get your tapered case.

Is it a service, or series of services, that gets tacked on to copywriting or information architecture? Is it a mindset that promotes designing stuff with users and content in mind? Is it just the latest buzz word? Or is it an actual thing—a deliverable in agency-speak?

I hear these kinds of questions a lot. The answer: It is definitely a thing. A thing with tremendous value in and of itself. A complete content strategy for a website includes:

1. Content Analysis

• Target audience overview—A prioritized list of target audiences with descriptions of who will consume the content (personas), what their needs are, and the contexts in which their needs are present (scenarios).
• Business goals assessment—A prioritized list of website and content goals developed with the client.
• Content audit—A detailed inventory (quantitative, qualitative and/or specialized) of the existing content.
• Messaging audit—An overview of the current messaging.
• Competitive analysis—An overview of key competitors’ content and messaging.
• SEO audit—An assessment of the website’s current status with search engines, including keyword research.
• Analytics study—An examination of the Web analytics of the existing website to see what content is, and is not, being used by visitors.

2. Content Recommendations

• Themes and messages—An overview of key themes and messages that should be present in the content for it to be successful.
• Tone and voice—The recommended tone and voice to be implemented in content creation.
• Topics and types—A detailed outline of the major content topics that should be included (such as product descriptions, articles, promos, press releases, bios, FAQs, blog posts, forms, shopping cart and registration), as well as the main types of content (such as text, PDF, audio and video).
• Goals and purposes—A prioritized list of reasons for each content topic and type to exist and how the content will meet both the audience’s and the business’s needs.
• Distribution channels—For content that will be distributed beyond the website, recommendations for channels, such as other public websites, mobile sites, intranets/extranets, e-mail, paid search, ads, press releases, print and TV/radio, and distribution mechanisms, such as feeds, social networking sites, etc.
• Languages—A summary of the content’s translation needs, including whether it will be globalized or localized.
• SEO considerations—An overview of any content ramifications of the SEO strategy, such as a need for landing page content.
• Timeline—A timetable showing the order in which content should be created based on the prioritized goals and purposes.
• Ongoing management—A plan for the management of the content over time, including information about any content management system, governance board, standards and maintenance needed.

3. Content Plan

• Gap analysis—A detailed comparison of what content you have (from the content audit) vs. what content you need (after the recommendations are approved) AND how you will bridge the gap.
• Content matrix—A detailed spreadsheet that includes all content needed, where it will come from, who is responsible for it, and more.
• Content template / copy deck—A Word document arranged by site map ID that captures each content block needed to complete the website.
• Editorial strategy— An overview of content creation standards and timing, including a style guide and editorial calendar.

Of course there are variations, but in general, when these elements come together—usually in the form of a comprehensive report developed in phases—you have a content strategy. A thing that changes everything in the success of a website project.

We can’t automate everything. But we can come close.

Often when we start a new project that involves applications or flows there is a baseline assumption that technology should handle everything–the user shouldn’t have to be bothered. As we diagram flows and sketch interfaces, there is a nagging thrust to push every bit possible off on the technology. Many times this is a good idea. I shouldn’t insist a user learn the format I use for dates and properly map it to the day they have in mind, or click repeatedly through a calendar to find their day. Technology is more than capable of parsing a date in almost any format the user prefers and converting it to the format I need. I put the onus on technology to automate the date formatting task.

But what about a more complex task? Or something that involves interpretation, reasoning, balancing alternatives and subjective thought? Where is the line–or is it even as clearly defined as a line?

There is a continuum from users doing the work (manual) to technology doing the work (automated). Historically, all processes start on the far left of the continuum as a manual activity. Automation is introduced when the manual process becomes tedious, repetitious, overwhelming or burdensome. The intention of automation is to make a process more efficient. Automation doesn’t inherently make processes more efficient, though.

How do you know when to automate?

Variability: how much repetition is involved?

Automation favors tasks that are repeatable. The more variability a task involves, the harder it will be to automate. Tasks with a limited amount of variability (<25% of instances involve an exception to the rule) may benefit from a partially automated interface that allows for adjustment at the user’s request. Tasks with no variability are excellent candidates for automation. Tasks with high variability (>25% of instances involve an exception) should probably be left to the user.

Volume: how many people do this thing?

The more people performing a task, the greater the benefit from automating that task. If a relative few have to perform the task, carefully consider whether the effort of creating a technological solution is going to be less than continuing with a manual process.

Effort: how much time does this thing take?

Tasks that consume a lot of time are good candidates for automation. Time is relative, though, as it can be compounded by volume. In a task with high volume, a few seconds may be a long time. In a task with low volume, it may take minutes, hours or days to have the same impact.

Bottlenecks: are current executors a bottle neck?

Generally, a task considered for automation is part of a larger process. If the task in question is the bottleneck–the step that slows down the whole process–it is a good candidate for automation. The effort of automating a task that isn’t a bottleneck may not be worth it.

Susceptibility: is an error more likely by lots of humans, or a few algorithm authors?

A manual process relies on each individual user to execute correctly. A technological solution doesn’t remove that susceptibility to error, it just transfers it to a small team of algorithm authors. Both groups are susceptible to making errors. When individual users make an error, it only impacts their instance of the process. If algorithm authors make an error, though, it impacts every instance of the process. Generally, a team implementing a technological solution will exhibit more care than a standard user, but it is still important to consider which group is more likely to fail in your task.

Critical: what are the ramifications of an error?

The potential consequences of an error go hand-in-hand with susceptibility. In the date picker example above, the ramifications are very minor. In other tasks, errors could result in much larger issues. If a task is critical, it makes consideration of susceptibility that much more important. If a task is not critical, the automation versus manual decision has much less impact.

In most cases, there is not a yes-or-no answer for whether to automate. The answer lies somewhere along the continuum from user to technological responsibility. Tend toward automation for that which is repeatable and known. Keep users involved when there is high decision-making variability or a degree of algorithmic complexity that would be cost-prohibitive to get right. Most situations will land between the endpoints: some components will be automated while others are manual. The trick is to find the ideal placement for your application along the continuum.

IA Summit 2011

This was the first time I’ve attended the IA Summit, and it came with some good, some bad and some in-between sessions. I love useful, actionable and applicable sessions, and many of the sessions fell short as they focused on theory and concepts but didn’t deliver something I could take back to my office and implement.  One session stood out.

How to make a DIY mobile user testing kit for under $200

Our friend Jakob Nielsen notes that the average success rate with a mobile experience is 59%. He notes that sites that are specifically designed for the mobile device are 64% successful – better, but not great. The numbers do go up depending upon whether they are “feature phones”, “smartphones” or “touch phones”. But the responsibility is on us, UX practitioners, to both create experiences that are appropriate for mobile devices and TEST them with real users on THEIR phones.

Why don’t we? Because testing on mobile devices is often expensive, awkward and not representative of real-life situations. You can buy complicated document cameras that cost thousands of dollars, screen capture software that doesn’t work on all devices or mounted table cameras that limit range of motion. But none of those options meets all necessary criteria: easy, cheap, repeatable, one-handed and flexible for various devices.

So, on the final day at the IA Summit I attended the “DIY Mobile Usability Testing” seminar. Belen Barros Pena and Bernard Tyers walked us through how to create a testing kit using pieces from an erector set, some blue tack and a couple cameras – all costing under $200. Now this is useful stuff!

The Ingredients:

• 4 Erector set pieces (think ebay)

• 1 Jubilee Clip (gotta like the name)

• 1 HUE Flexible Web Cam (they are cute)

• 1 Web Cam (any kind will do)

• Screen Flow Software

• Blue Tack (reusable adhesive-like clay)

The HUE Flexible Web Cam connects to the laptop via USB to capture the experience the user is having in real-time, while the desk web cam captures his expressions and comments. The device is easy to handle with one hand and doesn’t require that the user interacts with it while it is fixed to the desktop to capture video. The two video streams are captured simultaneously for easy playback with your team or clients.

So, “wahoo” to Belen Barros Pena and Bernard Tyers for presenting such a useful session. And, although they were few, I will share the other usable, useful and applicable lessons learned from the IA Summit over the next few weeks.

Listing “customer personas” instead of features improves CTR by 200%

It’s often the little things that make the biggest impact. No new design. Same functionality. Just a tweak in messaging.

PearWords Startup Resources

Not sure what should be in your privacy policy? What about your NDA? PearWords offers some free templates with language to get you started.

How Paywalls Are Changing News Organizations’ Social Media Strategies

Most interesting just for its brief synopsis of the different pay models various traditional news organizations are trying online.

yiibu

A collection of thinking and proof of concept on the mobile Web.

Top 10 Mobile Internet Trends (2/11)

Lots of great data and trends from Matt Murphy and Mary Meeker.

Design Principles

Jeremy Keith shares his vast collection of assorted design principles.

f8 Conference Badges

A whole-scale re-consideration of what a conference badge is.

Comic Sans Criminal

A concise history and explanation of why you probably shouldn’t be using comic sans for *that*. Sweet presentation, too.

Measure Anything, Measure Everything

A peek behind the curtain of the Church of Graphs.

Wireframes are one of the earliest steps of the design process. At M|B, they fall into the Information Architecture part of our process. Once the architecture for the entire site is defined (in a site map), the next step is to design the architecture for key pages or templates. This is what a wireframe is used for.

A wireframe is kind of like the blueprints for a building. It shows all the elements of the page, suggests how they should be organized and begins to talk about interactions or states of the page. They do not show the “look & feel”–they are just a gray-scale representation of what makes up the page. For example, a wireframe will show primary navigation, but not what that navigation will look like (buttons, tabs, a colored bar, something else?); a wireframe will identify where a hero image will go and the type of message it will communicate, but not show the actual picture or final text.

To relay this information, at M|B we use gray-scale drawings of lines, boxes, shapes and words. We then overlay annotations that further define the meaning of elements and the thinking behind their purpose, location, interactions, content and any other details that will help communicate to designers, developers and writers.

Each template of a site should have at least one wireframe–sometimes more if a page has multiple states. Wireframes can also be used to show the major steps of a flow. These help define what form elements, buttons and actionable items make up each step of the flow.

Wireframes are the building blocks that identify the pieces of content that need to be written, the modules of a page that the CMS will need and the elements of the page that the visual designers must account for.

At M|B, we believe a wireframe:

• stipulates the elements of a page.
• stipulates the types of information on a page.
• creates a baseline for layout of elements on a page.
• creates a baseline for relationships of elements to one another on a page.
• recommends interactions of elements on a page.

A wireframe doesn’t:

• define the color scheme and visual design of the site.
• identify what images will be used.
• require how mark-up will be written.
• define what words will be used.

How is a wireframe different from a prototype?

While a wireframe is a static view of a page or template, a prototype has some interaction–it changes. Wireframes can be used as prototypes in some situations. For example, paper prototypes are often a series of wireframes, presented in a specific order. Generally when we build a prototype, though, we’re looking for more advanced definition of interaction and flow–a “clickable” prototype. In this case, a prototype is electronic (we like to use ProtoShare) and shows interactions as a user clicks (or touches) and navigates about the prototype.

For heavily informational sites, we generally tend towards wireframes. For applications or flow-oriented  sites, prototypes usually communicate better.

How is a wireframe for a mobile site different?

It’s not! While a mobile wireframe will generally have less real estate than a desktop wireframe for communicating ideas or presenting forms, the concepts stay the same. A mobile wireframe communicates all the same things that a normal wireframe does.

We often create mobile and desktop wireframes side-by-side. The desktop wireframe shows the priority of elements and the general organization for a desktop experience while the mobile wireframe shows how things change in the mobile experience. Sometimes the only difference is organization (particularly when working with responsive design). Other times, the entire navigation or purpose of the site might change for a mobile user. Regardless, the concepts of what a wireframe does all remain the same.

What does a wireframe look like?

Generic Wireframe (.pdf, 45kb)

It’s been a long time since our last “sweet links”–too long. So let’s get to it!

Planetarium

In anticipation of the pending release of Firefox 4, this CSS3 demonstration shows off the power of transitions. Until FF4 is released, check it out in Chrome or a similarly capable browser.

Apple’s Role in Japan during the Tohoku Earthquake

We love their products, but it’s behavior like this that can make you love a company.

Configuring the Viewport

An enormous amount of detail about the “viewport” in Safari on assorted platforms and how to make it play nice with your site or application.

Open Source Ampersands

Exactly what the title says: Mark Pilgrim put together a page of single-character ampersand fonts that can be used on the Web. Because…

D3.js

A new JavaScript library for manipulating Web documents based on data sources. Now we’re just dying for a need to use it!

How an Illinois Rest Stop Inspired a Web Page

The folks at 37Signals remind us that inspiration can be found anywhere in life.

We were lucky to be able to work with Denver Zoo to create Zoo Lights 2010 campaign. Of the three concepts we presented, they chose the “Ode to the Nostalgic” design. The campaign centers on capturing the awe of Denver Zoo’s magical winter wonderland with a father and his daughter enjoying the over two million holiday lights and animal sculptures. The key element in the creative is the imagery, and we searched for the right pairing of people and lighting through various stock image libraries, unsuccessfully.

It was important to have a close-up of the child’s and parent’s face to engage the audience with an emotional image. “I want my child to enjoy this experience and I want to be able to share it with them.” We are lucky to have an amateur photographer enthusiast (who doubles as our Flash Guru) on staff, and as a result, we were able to keep all the photography in-house and keep the costs low. We used our own lighting equipment, props and models. The images were shot with a Canon EOS 5D Mark III SLR, and we think the final image captured the nostalgic and soft feeling we were looking for. Being able to provide our clients with some in-house photography when needed helps to cut costs and get the shot we need without sacrificing quality. Once again, Denver Zoo Lights was a great success, and we are looking forward to hopefully working with Denver Zoo for the 2011 Zoo Lights.

The federal government is considering new legislation to allow users to opt-out of online tracking. The concept is similar to the national “do-not-call” list–allowing citizens to choose not to receive targeted marketing messages when online. Understandably, this has generated a good deal of concerned buzz in the online marketing world. Tracking an online user’s behaviors, website visits and content views has long been the holy grail of online marketing. The idea is that gathering all of this data on a user will allow marketers to display messages targeted to the specific user’s interests to increase the likelihood of conversion.

In anticipation of new legislation, a number of browser makers have already begun to take action to implement systems to support a “do-not-track” list. More…