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.

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.

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.

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)

One of the most revolutionary aspects of the Internet has been the ability for customers to self-serve on company websites. Rather than standing in line or waiting in a phone queue, a customer can log in to a website and immediately begin managing their relationship with the company. It may be paying a bill, changing communications preferences, updating a phone number or street address, or even tweaking the settings of a service. By 2011, most companies with these types of customer interactions have introduced a way to perform them online.

Just having the service online doesn’t mean it’s an easy or good experience for the customer, though. Companies want their customers to use online self-service because it greatly reduces costs through fewer calls to the call center, less re-keying of data and more reliable data. As such, it behooves a company to put a concerted effort into making their online self-service features as quick and painless as possible. More…

If an App Is Your Content Strategy, You Are Doomed

Bloomberg takes a look at newspapers and magazines that considered the iPad their savior.

Storyboarding iPad Transitions

Greg Nudelman walks through the amazing detail of iPad (and iPhone) animations and shares his thoughts on how to document their design for developers.

How To Build A Mobile Website

This deep dive from Smashing Magazine includes a lot of often-overlooked details of implementing a mobile website.

Progressive Signup: A Better User Signup Process

QuietWrite segments their users by step of the sign-up process to provide a low-effort account creation flow.

This Shell by the Gamits

Similar to what the Arcade Fire did a while back with incorporating video and HTML5, this hit the webs recently. It was created by some very cool folks at Legwork Studios as well as the Denver band, The Gamits.

Controlling text size in Safari for iOS without disabling user zoom

456 Berea Street takes a look at the intricacies of text scaling and orientation changes on iOS.

iOS Icons Made in Pure CSS

A stunning collection of iOS icon replications made purely with CSS. Be sure to use a webkit browser to check these out.

Learn HTML5, JavaScript and CSS With Mozilla’s Free “School of Webcraft”

Mashable runs down Mozilla’s expansion of their School of Webcraft to 30 classes.

Five UX antipatterns to avoid when designing Log-in & Registration areas

Harry Brignull uses real-world examples to remind us what NOT to do when designing log-in and registration flows.

Apple engineer re-creates ancient computer with Legos

I remember using a computer to control Lego models back in school. Now the computer itself is made of Legos!

Mies van der Rohe Society

An appropriately stunning website for one of history’s greatest designers.

Telescopic Text

A new take on “progressive reveal”.

user – a person or thing that uses
experience – a particular instance of personally encountering or undergoing something

User experience is the series of encounters and interactions that your customers have with your business, online and offline, and the process of designing and building them. More…

As a small agency, Malenke | Barnhart has often acted in an ad hoc manner. One area we never addressed specifically was how we dealt with new employees–both full-time and contractors. Without a process in place, each new employee would have a different first-day experience at M|B. Depending on the team they joined and the meeting schedules of their first day, there would be a quick run-down of important points about working at M|B–but often some critical notes went missing. More…