Instagram: beating Facebook at the job it's hired to do

By now, everyone who reads the Wall Street Journal knows what Instagram is:

Instagram's Wall St. Journal cover story

The article covers the surface level details, which (to oversimplify) are as follows:

• Two Stanford whiz kids made an iPhone app that uploads cameraphone snapshots to the Internet.
• The app generates no revenue, but is growing so fast that big-time VCs invested, valuing it at $500 million.
• The founders sold the app to Facebook for a billion dollars.

Those are the key facts, though the article sheds precious little light on the subject—especially if you’re creating a product and want to replicate their success. The Journal makes only the briefest mention “removing a rival” as a possible motivation for the purchase.

@richziade @iA @dkberman @wblau FB overspent on Instagram to remove a competitor. Focus on the real issue, not false comparisons to old biz.

— Jeffrey Zeldman (@zeldman) April 9, 2012

Let’s stipulate that taking a competitor out of your market might be worth $1 billion and look at how, exactly, Instagram competes with Facebook.

Competing = Doing the same job

If I asked you to picture Facebook in your mind, I’d wager you’d conjure up an image like this:

Facebook

The primary focus of this page is the News Feed (highlighted in yellow below), which is a stream of “status updates” posted by your friends indicating what they’re doing or what’s on their mind.

Facebook's News Feed

Having a textual description of what you’re friend is doing is great, but a picture is worth 1000 words, right? So, something like this might be more engaging:

Popular photos on Instagram

The above is a sampling of the popular photos right now on Instagram. Now, I’ll add annotations to call out some of the more interesting stories:

Popular photos (annotated)

I’d say it’s clear the concept of textual status updates is rather dry and geeky by comparison. If a friend told me she was rooting around in MTV’s archives, I’d think that was pretty cool. If she showed me some photos and gave me a real sense for what it was like, I’d be much more engaged. Also, notice that an image doesn’t have to be a photographic masterpiece to tell a story that your friends might find compelling (see cats wrestling above).

If I want to communicate to you what I’m doing or thinking about, it will almost always be more effective to show you, not just tell you. So by this logic, Instagram is not only doing the same job for me that Facebook is, but it’s doing it better.

Get better by focusing on the Job-to-be-Done

Looking at product based on the “job” it does for the consumer is a useful analysis tool for this type of post-mortem. Clayton Christensen, the Harvard Business School professor most famous for his work on disruptive innovation and The Innovator’s Dilemma, has written about this technique and will publish a book on it soon. If you’ve never heard of the Jobs-to-be-Done theory, start by watching this short YouTube video where he tells a great story about why people hire milkshakes. To dive deeper, check out the work of the The Re-Wired Group.

If you’re working on a product of your own, having a clear understanding of the job-to-de-done is a litmus test that can tell you whether a given feature is core to the user’s experience. If it’s not, consider skipping it. In the case of Instagram, by focusing on the core flow of capturing the moment, adding emotion (via filters), and sharing with friends, they were able to avoid building:

• A full-featured web app
• Sophisticated photography controls (exposure, white balance, histograms, etc.)
• Grouping/sorting your photos into albums or collections

Based on what other photography apps/services do, it would be easy to say that Instagram “needed” those features to be competitive. Instagram’s founders, however, knew all they truly needed to build was a way to shoot, style and share a photo for their users to get the job done and tell the story of that moment in their lives. They could then make the appropriate tradeoffs and divert resources to polishing the smaller, core feature set into a great user experience.

The pace of business is always increasing, and Instagram used focus as a weapon to not only beat their direct competitors (PicYou, Hipstamatic, picplz and many others) but also threaten the 800 lb. gorilla known as Facebook.

What job do your customers hire your product to do?

Sketchnotes from Agile UX NYC 2012

Since I’ve been working on my sketching and drawing skills, I decided to take a page from the Luke Wroblewski playbook and share my notes from the inaugural Agile UX NYC conference. It was an intense day and I don’t have something…legible…for every session, though most of the slides are on SlideShare.

Pivot Your Culture to Win with Agile: Eric Burd

Investing in Design: Phin Barnes

Replacing Requirements with Hypotheses: Josh Seiden

Getting Out of the Agile Building: Tomer Sharon

Managing Your Malkovich Bias: Andres Glusman

Quick, Visual, Collaborative & Continuous: Lane Halley

This one’s a little thin—be sure to grab the slides if you want to go deeper.

Learning to Play UX Rugby: Anders Ramsay

The Design Studio Method: Todd Zaki Warfel

Code Literacy: Jonathan Berger

AToMIC Design: Jennifer Gergen

Demystifying Design: Jeff Gothelf

Emotional Design, Affective Computing and Social Animals

When I see Dan Saffer and Gabby Hon posting long lists of books they've read in 2011, I sink a bit and sigh longingly. Despite my rampant Instapaper-ing, I simply don't make enough time to read long-form content.

I did make it through one book last year, though, and it really stuck with me: The Social Animal by David Brooks. As a developer who's transitioned into design, I made my way through a self-guided crash course in interaction design, visual design and the like, but moving "up the stack" into understanding emotion was uncharted territory. Luckily, Brooks' book made the topic very approachable, since it's written as an allegory.

The Social Animal has many insights, but this is the one I keep revisting: every piece of sensory input a human being receives will evoke an intellectual and an emotional response. The takeaway is that you can fold this into your personal interactions and benefit, or ignore this at your peril.

Interesting stuff, right? But how do we use this knowledge to make our designs better?

Here Comes The Knowledge

Three separate pieces of work have crossed my path that address this topic:

• Designing For Emotion by Aaron Walter is the quintessential guide. Simply put, I don't think we'd be talking about this without Aaron's work.
• Affective Computing by Kristina Höök is a more academic take on the topic that reviews the relevant research. It's deep stuff made more approachable with video interviews.
• Grouped by Paul Adams focuses on the social angle with discussions of influence and how ideas spread between people. Some of the same concepts are in this slide deck, so you can start there to get a sense for the thinking that shaped Paul's work with Google+ and Facebook.

So, What Now?

Have I synthesized all this into a Unified Theory of Human Computing? Um, not quite yet. But I think the sheer amount of activity around these concepts tells us we'll need to fold them into our design practices—where there's smoke, there's fire.

For now, I have all this stuff on my reading list, which I promise I'll get to very soon.

Better code searching with ack

Have you ever needed to find all references to a certain Apex class across an entire code base? If you're a Force.com developer, I'm sure you have. And what if you're not in the Eclipse-based IDE...perhaps you're using the Force.com Migration tool on the command line? I'm guessing you've used a tool like grep.

While grep is still the gold standard, recently I've been using another tool called ack in its place. The ack web site defines it as "designed for programmers with large trees of heterogeneous source code." I've found it to be significantly faster at searching through files, and also has a clean, simple way to search within only certain types of files.

Example

Let's say I installed the LinkForce app into a developer edition org and wanted to explore the code. After setting up this org's code in a new Eclipse project, I can navigate to the workspace directory on the command line and run the following:

ack Short_URL__c

So, again, the above command outputs a simple list of all files that reference that particular Custom Object.

That's pretty good, but let's imagine what I really want is to find custom code (Apex and Visualforce) that refers to that object. Rather than piping the output of a separate find command as an input, I can simply execute the following:

ack --type=apex Short_URL__c

I've configured a file type called apex that ack interprets as Apex Classes/Triggers and Visualforce Pages/Components. This way, I avoid superfluous search results like the definition of the Custom Object itself. ack natively understands many common file types, and can easily support any number of custom types.

Oddly enough, a blog post can't illustrate one of ack's greatest strengths: speed. If you search through large source trees often, you'll be amazed at how quickly the results are returned. The vast majority of my searches complete in less than one second.

Installation

The main ack web site has information about how to install the tool, and I actually used the AckMate plugin for TextMate since I'm a Mac user. In addition to enabling ack as the search tool within TextMate, it's possible to use that same script on the command line by creating a special symbolic link.

The Force.com-specific configuration I created can be found on GitHub as well.

The first line defines the apex file type as consisting of Apex Classes, Triggers, Visualforce Pages and Components. The second line defines another type simply called force for other metadata like Objects, Apps and Profiles. You can treat this as a starting point and break out more or less file types to include Workflows, Page Layouts, etc. Finally, the third line of the configuration specifies that search results will be presented one page at a time using a command line tool called less (which also supports color coding).

Conclusion

If you develop on the Force.com platform and find the command line more efficient, ack can really speed up your work. I'd encourage you to try it if you've never ventured beyond what Eclipse offers.

Citibank: Your touch targets are too small

If anyone from Citibank can read this, please refer to Luke Wroblewski's blog post detailing appropriate touch target sizes.

Citibank Online's mobile login

Compare this to the mobile app for Meebo, a popular multiprotocol IM client:

Meebo's login