Fit your intranet features into one of these buckets: Gamechangers, Showstoppers, Entanglers and Distractions

Fit your intranet features into one of these buckets: Gamechangers, Showstoppers, Entanglers and Distractions

I’ve read many approaches to product management, but my all-time favourite approach is the one described by Slava Akhmechet, co-founder of RethinkDB, in his blog post “How to build great products.”

He puts any given feature into one of three buckets:

  • Gamechangers
  • Showstoppers
  • Distractions

He uses the example of a mobile phone. A mobile phone has to be able to make phone calls. If it can’t, no one will buy it. But they won’t buy it because it’s able to make phone calls. The ability to make calls is a Showstopper feature.

But what if a mobile phone included a video projector? Other phones don’t have that, so that could be a Gamechanger. People will buy your phone because it can project videos.

Distractions are any feature that will have no measurable impact on adoption.

Gamechangers turn into Showstoppers

The Gamechangers and Showstoppers approach is hinted at in Professor Noriaki Kano’s theory of product development. He refers to a Gamechanger as an “Attractive Quality” and a Showstopper as a “Must-be Quality”. There are other dimensions in his model too, but the most interesting part is that it shifts over time. Gamechangers become Showstoppers.

For example, when I prototyped the first version of ThoughtFarmer in 2005, the ability for an average employee to add and edit intranet content was a Gamechanger. It attracted innovative companies, such as IDEO, and they bought ThoughtFarmer because of this feature. However, today that feature is a Showstopper. No one will buy intranet software that doesn’t have the capability for an average employee to add and edit content. But it’s not the reason they will buy it, either — it’s just considered a basic need.

A fourth bucket: Entanglers

I also use a fourth bucket that I call Entanglers. Entanglers are features that make it hard to switch away from a product. For example, in some markets it is difficult or impossible to move your mobile phone number from one provider to another. That’s an entangler. From a vendor perspective, entanglers are great because they ensure recurring revenue. From a consumer perspective, entanglers are undesirable.

If you’re in the business of selling software — especially cloud-based software with recurring monthly revenue — entanglers are vital. You need your monthly churn rate — the percentage of customers who leave your solution — to be as low as possible. Making it difficult or expensive to move off your software is a proven way to reduce churn. A typical entangler in the software world is an integration, such as with a CRM or ERP.

The takeaway for intranets

Spend as much time as possible on Gamechangers. These are the features that delight your users; these are the features that help you win. 

Gamechangers aren’t always complicated. In an early version of ThoughtFarmer we added a visual relationship browser. It was completed relatively quickly; I don’t think it took more than a week or two. But that relationship browser captured the fancy of so many people! And to this day it continues to be a factor in making sales.

Quickly recognize and discard Distractions. If the feature won’t have a noticeable impact on adoption, toss it!

This is easier said than done. Once we had a particularly vocal client lobbying hard for a certain feature, and they had us convinced it was a Gamechanger. It was much, much more difficult to build than anticipated — probably about one person-year of effort. And years later, fewer than 3% of customers use it. Turns out it was a big Distraction.

Beware of Entanglers. If you’re a software vendor, go to town on the entanglers! But if you’re a buyer, understand that vendors want you to be tied to their software. Every business process that migrates to your intranet, every system it integrates with and every piece of data published to it makes it more difficult to get rid of it. That’s not to say you shouldn’t do these things; you probably should! Just be aware of the potential switching cost should you choose to move to another platform in the future. 

Need help designing (or redesigning) your intranet? Contact me.

How to run a remote intranet strategy workshop

How to run a remote intranet strategy workshop

Successful intranet projects always start with a clear strategy. Strategy workshops are best held as half- or full-day, on-site events. But it’s not always practical to gather all intranet stakeholders together to a single location. How can you successfully run a remote intranet strategy workshop?

An effective intranet strategy finds the overlap between business objectives, intranet features, and employee goals. See Step 5 for more details.

An effective intranet strategy finds the overlap between business objectives, intranet features, and employee goals. See Step 5 for more details.

I recommend using a combination of video conferencing and web-based activities stretched over a week or two. I’ve laid out an effective approach below. These activities lead up to two ultimate deliverables:

1. Business objectives: A prioritized list of the top 3 to 5 business objectives for the intranet. Example: “Increase workforce productivity by enabling employees to serve themselves.”

2. User stories: A list of 7 to 15 user stories, in a who/what/why format, that describe how a user will use the intranet. Example: “As a marketing manager, I want to provide easy access to brand assets, especially logos and key photography, so that I don’t have to manually fill requests for them via email.”

Prior to the first strategy meeting, send stakeholders the results of any end user research already conducted. (Conducting end user research is a separate topic not covered here.)

Step 1: Frame the possibilities

Conduct a 90-minute video conference with intranet stakeholders, including the executive sponsor. There are three goals of this session:

  1. Excite the stakeholders about the possibilities of a new intranet.
  2. Put a box around the strategy, limiting it to objectives that can be addressed by a new intranet.
  3. Explain the strategy process.

Here's a sample agenda for this meeting:

10 min: Setup and introductions

30 min: Describe the background that led up to the project. Share the results of any end user research already conducted.

30 min: Demonstrate how other companies are using intranets to solve problems. If you already have a technology platform selected, demonstrate it.

10 min: Ensure everyone has Post-it notes and markers. Give them 5 minutes to jot down, in silence, their answers to this question: What issues will the new intranet help solve?

10 min: Explain the next steps in the strategy process. The immediate next step is to take what they wrote down and enter it on an online form. The link should already be in their inbox.

Step 2: Invite ideas

Immediately after the workshop, give participants 24 hours to enter their ideas in an online form. Ask them two questions:

  1. What problems will the new intranet help solve?
  2. What opportunities does the new intranet present?

The first question concentrates on problems (the negative), and the second question concentrates on opportunities (the positive). Provide space for up to 10 ideas. See a sample ideas form using SurveyMonkey.

After understanding what's possible with a new intranet, stakeholders braintorm the strategic possibilities it enables. Their ideas are entered using an online form

After understanding what's possible with a new intranet, stakeholders braintorm the strategic possibilities it enables. Their ideas are entered using an online form

Step 3: Rank ideas

Next, give participants 24 hours to rank the ideas by priority. Provide a list of all the ideas generated in the previous step. Don’t edit them, except for grievous spelling or punctuation errors, because we want participants to recognize their own ideas. Don’t delete duplicates, either, because we want participants to notice recurring ideas. Ask participants to sort all the ideas into 4 categories:

  • Top Priority
  • High Priority
  • Medium Priority
  • Low Priority

A slick, online way to manage this sorting is through a closed-category, randomized card sort on OptimalSort. OptimalSort also performs the data analysis for you, so you’ll know almost immediately what the top business objectives are.

Participants rank ideas by priority. OptimalSort is a slick online way to manage this.

Participants rank ideas by priority. OptimalSort is a slick online way to manage this.

Step 4: Present, Approve, Plan

In a 30-minute video conference with stakeholders, present the top 5 priorities. Invite the ultimate decision-maker to confirm the results — this assures everyone that an executive-approved consensus has been reached. Then assign 5 teams of 2-3 people to consider each of the 5 priorities. Each team should be in the same physical location. If possible, select cross-functional teams of people that don’t often work together. Ask the teams to consider:

  1. CONDITIONS: What must be true for this priority to happen?
  2. BARRIERS: What barriers stand in the way?
  3. MITIGATIONS: How can these barriers be removed?

Before ending the video conference portion of the meeting, tell each team how much time they have to work on their response to these questions and enter them online. See a sample planning form built using SurveyMonkey.

For each business objective, small teams consider what must take place in order for it to become reality. The results are entered on an online form.

For each business objective, small teams consider what must take place in order for it to become reality. The results are entered on an online form.

Step 5: Convert to user stories

You, as the intranet expert, complete this step on your own.

Analyze the input from the prioritized business objectives and the Conditions/Barriers/Mitigations. Consider what you know about employee needs and goals (conducting end user research is a separate topic not covered here). Look for the overlap between what you know intranet software can do, what the company’s objectives are, and what employees need to get done. That overlap is Fit, and it’s what will make the intranet great. Then put it into short user stories, following a Who/What/Why format, that describe how a user will use the intranet.

For example, perhaps you learned that Marketing is plagued by constant requests for brand assets. The strategy sessions revealed that a top business objective is to “increase workforce productivity by enabling employees to serve themselves.” The Conditions/Barriers/Mitigations from Step 4 indicated a need to reduce reliance on email. With all that background, an appropriate user story might look like this: “As a marketing manager, I want to provide easy access to brand assets, especially logos and key photography, so that I don’t have to manually fill requests for them via email.”

7 to 15 user stories is usually a good target. These user stories will serve as the touchstone to judge whether the final intranet has delivered on its promise.

As a... (who) I would like... (what) so that I... (why)
Marketing coordinator to provide easy access to brand assets, especially logos and key photography don't have to manually fill requests for them via email
Employee to get updates on changes related to the merger know as soon as possible if I am going to lose my job
Sales managerwork collaboratively on Word documents respond to RFPs faster

Use a Who/What/Why format to make meaningful user stories. These stories will serve as the touchstone to judge whether the final intranet has delivered on its promise.

Step 6: Present and Finalize

In a 60-minute video conference with stakeholders, present the user stories. Provide relevant background from end user research and the Conditions/Barriers/Mitigations. Show how each user story clearly connects to the prioritized business objectives. Invite feedback and answer questions.

Because stakeholders were involved in the previous steps, it’s unlikely that any of the user stories will be a big surprise. So strive to get a verbal commitment from the group: “Does everyone agree that if the intranet delivers on these user stories, it will be a success?” You might repeat this question directly to the executive sponsor — everyone needs to hear that the ultimate decision-maker is fully on-board.

When you reach consensus, the strategy phase is complete! Now the rubber meets the road: it’s time to execute the strategy.

Need help with your intranet strategy? Contact me.

Shout-out to ThoughtFarmer's Gordon Ross for teaching me at least half of what I know about strategy workshops! Check out the first chapter of his Intranets 101 eBook, “How to Create an Effective Intranet Strategy.”

25 reasons to rapid prototype the next version of your app

25 reasons to rapid prototype the next version of your app

In my experience, rapid prototyping an app (in Keynote) is at least 100X faster than actually building that app, and at least 10X faster than prototyping in code. Besides the obvious economic benefits, here are 25 reasons to rapid prototype the next version of your app.

Use an app prototype to:

  1. Get started now, without a big team or budget
  2. Perform market research with potential buyers.
  3. Sell the app to customers before building it.
  4. Convince investors to invest in the future of your company.
  5. Convince early employees to join your company.
  6. Create screenshots of a product that doesn’t yet exist.
  7. Generate a product video for a product that doesn’t yet exist.
  8. See if your idea actually makes sense.
  9. File patents for your idea earlier and easier.
  10. Make an abstract idea more concrete so others can understand.
  11. Convince board members to approve funding of a new endeavour.
  12. Lower others' perceived risk of pursuing your concept.
  13. Sell a product customization to a customer before building it.
  14. Provide a focal point for gathering design feedback.
  15. Easily experiment with multiple solutions to the same problem.
  16. Identify new requirements for the app.
  17. Provide a starting point for a user interface designer.
  18. Uncover problems with an app before building it.
  19. Iterate on an idea without wasting development time.
  20. Resolve conflicts between engineers early in the process.
  21. Help a development partner make an accurate cost estimate.
  22. Uncover potential technical limitations of your intended design.
  23. Help developers visualize an aspect of the app they are building.
  24. Create a specification for developers to code.
  25. Perform usability testing on customers.

My app prototyping engagements start at around $5000. Whether you're a founder, executive or product manager, let's explore how we can build you a prototype that will help you attract investors, build consensus, or win early customers. Contact me.

Why Keynote is the best app prototyping tool available

Why Keynote is the best app prototyping tool available

Keynote is Apple’s version of the venerable Powerpoint. Unlike Powerpoint, though, Keynote embodies everything we’ve come to expect from Apple products: it’s simple, beautiful, and very effective at getting the job done.

Most people use Keynote for presentations, though, not prototypes. But a growing community of designers rely on Keynote for prototyping, and I’m one of them. Here’s why.

1. Keynote is fast.

The number one reason to use Keynote for app prototyping is its speed. Prototyping in Keynote moves very, very quickly. Some of the features that impact speed:

  • Powerful drawing and shape tools for basic layout
  • Precise typographic control including kerning, leading and global styles
  • Clever grid lines that help you resize, align and distribute
  • Tasteful builds and transitions for mimicking UI animation
  • Import flexibility: you can import images, vectors, audio, video
  • Export flexibility: you can export as PDF, Quicktime, PNG, Powerpoint

Compare the top and bottom of this video by Frog Design’s Andrew Haskin. The top shows the original prototype video, created in Adobe After Effects. The bottom shows the same prototype video quickly recreated in Keynote. Read the background blog post.

2. You already know how to use Keynote.

You may have been considering learning how to use Invision, or Axure, or Pixate. To be sure, all these tools have their place: Invision for collaborating with a big design team; Axure for modelling extensive user flows; Pixate for prototyping subtle touch-screen animations. But Keynote's interface is instantly familiar. Even if you haven’t previously relied on it for presentations, you can still feel comfortable in it within hours. If you haven’t yet used it for prototyping, it’s a far better place to start than other prototyping tools.

3. Your clients will be glad you used Keynote.

Even if your client has zero experience with design or prototyping, there’s a good chance they’ve used Keynote — especially if they’re a Mac shop. Your client will appreciate receiving deliverables in a format that they can easily use, understand and even modify. And they will have peace of mind knowing that even if you’re unavailable for the next iteration of the prototype, other designers can use and understand your work.

4. Keynote animations are brilliant.

Keynote’s animations — transitions, build ins, build outs and actions — are where it really stands out as a prototyping tool. You can simulate swipes, pinches, and scrolling with a few clicks. The following video, which was built entirely in Keynote, exemplifies what’s possible with Keynote animations:

Linda Dong created this motion graphic entirely in Keynote. Read how.

5. Keynote’s output is pixel-perfect.

Some designers hesitate to use Keynote for high-fidelity prototypes because they feel they’ll have to rebuild each screen in Photoshop at a later time. That’s usually not the case. Current design trends favour web fonts, vector-based icons, simple geometric shapes, and flat colours. None of these components need to pass through PhotoShop — they can go directly to code. And for more complex graphics, Keynote can export to high-resolution JPEG or PNG images.

6. Keynotopia templates give you a head start.

A final reason to use Keynote for app prototyping is Keynotopia templates. Keynotopia is a package of pre-built, vector-based, scalable web components that give you a huge head start. It includes the standard interface components from Android, iOS, OSX, Bootstrap and jQuery, among others. Keynotopia templates have saved me countless hours, and it’s likely they’ll do the same for you.

If these six reasons aren’t enough, consider what Jake Knapp, a designer with Google Ventures, said in a blog post under the subheading, “Keynote is the world’s best prototyping tool”:

  • It’s fast.
  • It’s easy to make things look pretty good…
  • But it’s impossible to make things look perfect, so you don’t get too precious.
  • Anybody can quickly learn to use it; not just designers.
  • The slideshow format is a natural fit for story-based design
  • It only costs $20
  • When you’re done, you not only have a prototype, you have a presentation, like, for free!
  • After your user study, when you learn all of the problems in your design, it’ll take minutes to make changes instead of hours or days.

Would you like me to build a Keynote prototype for the next version of your app? Get in touch.

How To Pick Fonts For Your App Prototype

How To Pick Fonts For Your App Prototype

The short answer is: use Helvetica. No one ever got fired for choosing Helvetica. The long answer, though, is a bit more nuanced than that. 

Just a few years ago, your font choices for web design were limited to Arial, Georgia, Times, Verdana and a couple of others. These were the only fonts you could be sure that everyone had on every platform. But over the last few years, "web fonts" gained full support across all common browsers. Now you can choose from thousands of font options. Typography is cool again.

Not too many years ago, Arial, Times and Verdana were some of the only fonts you could safely use on the web.

Not too many years ago, Arial, Times and Verdana were some of the only fonts you could safely use on the web.

So can you use any font in your prototype? It depends on the format of your deliverable. If you’re delivering a PDF, a static image, a video, or an HTML prototype, then yes — you can use any font you want. If you’re delivering a prototype in Keynote, though, which is increasingly popular due to its speed and flexibility, you should likely stick to fonts that are included with OSX. That lets others use your prototype without needing to install new fonts. 

When I’m choosing the workhorse font for my prototype, I ask myself a few questions:

1. Does the font have the right vibe? Fonts can feel serious, playful, sedate, feminine, dignified, fun. Does my chosen font suit the nature of the app?

2. Is the font sufficiently plain? Many fonts have too much character. They might make a good choice for a logo, but I'll get tired of them if they’re all over my interface.

3. Will the font look good small? The readability of some fonts, especially serifs, tends to suffer when they get small.

4. Is the font versatile? Most fonts have a regular and a bold in normal and italics. But for more interface flexibility, I find it really useful to have options like Light, Medium, Semibold and Black.

With the forgoing questions in mind, here are my top 3 choices for prototype fonts:

Helvetica Neue. Like I said at the outset, nobody ever got fired for choosing Helvetica. It’s a classic font and it’s the default for iOS. Apple includes 14 styles and weights of it on OSX and iOS.

Avenir Next. Specifically designed for on-screen readability, Avenir Next has a slightly friendlier feel than Helvetica. It works well at all sizes, and Apple includes 24 styles and weights for flexibility.

Roboto and Roboto Slab. Roboto is the default font on Android, and its 18 styles can be downloaded free from Google Fonts. Roboto Slab is Roboto's flashier cousin, and it’s the font I use here on chrismcgrath.com. 

My top picks for prototype fonts are Helvetica Neue, Avenir Next, and Roboto

My top picks for prototype fonts are Helvetica Neue, Avenir Next, and Roboto

In some cases you may need a secondary font for accents, such as titles or headings. The most important thing to remember is contrast. Your accent font should be very different: bigger, or bolder, or funner. Typewolf’s Font Recommendations is a great place to browse for ideas.

Finally, remember that many prototypes will pass through visual design prior to development. The visual designer may very well pick new colours and new fonts. So don’t get hung up on font choice. Choose a workhorse font that’s readable, flexible, and doesn’t draw too much attention to itself, then move on!

Also see my post, How to Pick Colours For Your App Prototype

How to Pick Colours For Your App Prototype

How to Pick Colours For Your App Prototype

The purpose of an app prototype is not to establish the app's final visual design. But I don’t want my prototypes to be black and white, either. So how do I establish a colour palette quickly, without getting bogged down in colour design?

I use Google’s Material Design colour system. It’s simple: pick a primary colour and an accent colour. That’s it. Everything else is either a shade of the primary or accent, or grey.

When establishing a colour palette, Google’s Material Design colour swatches are a great place to start

When establishing a colour palette, Google’s Material Design colour swatches are a great place to start

For Snapwork, I chose blue #0C2A89 as my primary and yellow #FEC314 as my accent. For both the blue and the yellow, I also pick a more intense and a more faint hue. That leaves me with 6 options in my palette.

Blacks and whites of prescribed opacities complete the Material Design colour system. For example, primary text is black with an 87% opacity. That slight transparency lets the underlying colour leak through, providing a more pleasing overall appearance.

A prototype using a completed colour palette based on the Material Design colour system

A prototype using a completed colour palette based on the Material Design colour system

Here is my final palette:

  • Primary blue (regular, intense and faint)
  • Accent yellow (regular, intense and faint)
  • Translucent blacks (87%, 54%, 38%)
  • Translucent whites (100%, 70%, 30%)

I add all these colours to my colour picker in my prototyping application, and I’m ready to go. It may not be sufficient for every design situation, but it’s fast and it covers most situations. For great DO and DON'T suggestions on using this colour system, see the Material Design documentation.