Bryan Landers

How To Be A Content Monster

Wed, 22 May 2013 14:41:56 -0700

“C” is for content, that’s good enough for me

I’ve been working with the team at Zapier to help them refine their brand identity. As I work my way through the sprawling expanse of the pages and screens on their destination site and pitch in on marketing ideas, I’ve witnessed an incredible discipline they have as a company for generating new content that finds its way to numerous outlets including social media networks, multiple company and personal blogs, guest posts, and community sites like Hacker News and Reddit.

While it makes me incredibly jealous as a solo founder to see the power of having co-founders and employees, I’ve been learning a lot about how combining forces to generate content can keep a company visible, relevant, and growing. Here are 3 ideas you can use to become a content monster like Zapier.

Everyone Must Publish

Every team member is expected to generate content. Since blogging and posting to social media are common activities for every role at a startup (developer, designer, biz dev, marketing, customer support…), this mandate doesn’t feel like an unwelcome burden; my impression has been that everyone appreciates the opportunity to improve at writing, sharing, and engaging with an audience. The joint effort contributes to a sense of momentum and a large body of content that puts less pressure on individual contributions to gain attention.

I’ve seen a number of stategies they use to generate content including requiring posts that announce new features you build or updates to the service you helped make, sharing a lesson learned in your work, helping customers learn through text and video tutorials, and passing along takeaway insights from conferences attended.

A bit of good-spirited competition can also keep generating content fun. That can manifest as a scoreboard of engagement on posts by author or number of referrals generated by content published across all channels. You could use tracking codes on the URLs shared to track such metrics. I don’t have access to Zapier’s marketing or admin dashboards, so I can only speculate on what they’ve actually built, but I get the sense that they at least recreationally use this sort of competition as motivation for creating content that people want to share and take action on.

Add Value For Customers

The guys at Zapier have a natural ability to identify topics that prove helpful to their audience while simultaneously promoting their product. One reason this occurs is because they write about their own topics of interest and concerns, and since their audience resembles them, the content maps well onto the audience.

Also, Zapier is one of those fortunate products where the value for the company itself and the customers are aligned. You only use Zapier if it offers you value, and the more you use it, the more value you get out of the service, and the more value the company gains from you as a customer. This cyclical relationship means that content that helps customers also encourages use, which leads to revenue, which keeps the company alive.

Be Visible

If people don’t see you, you are invisible to them. If your content doesn’t happen to be in the stream a person is consuming or results they are searching for, you’re left speaking only to those explicitly following you, and even they might miss your content. This is the fate content marketing seeks to avoid, and it’s a never-ending battle to be seen in a sea of tweets, blog posts, pins, status updates, emails… Your only hope is to be relentlessly prolific. If you go it alone, you carry a heavy weight.

Every team member at Zapier individually publishes often, but combined together, they become a content monster that churns out seeming endless actionable quality content. Since I’ve been working with them, they’ve landed on the HN frontpage more times than I can recall (granted, that’s not necessarily their optimal customer demographic, but I’m sure it generates some engagement and awareness), and been republished or mentioned by notable partner services when sharing content related to that service.

Visibility isn’t limited only to chance real-time consumption. Another thing Zapier is amazing at is SEO. Google has made it hard for you to fake relevancy, but if you genuinely craft your content well, you can appear more often in search results, which can at best be a huge source of leads, and at a minimum help with make a favorable brand impression on potential customers.

You also want to be visible to potential new employees, so content marketing is most certainly a recruitment strategy. People want to join a flourishing, active company, not a sinking ship. When startups go silent, it often means something is amiss or there’s an impending acquihire/acquisition/shutter approaching. As a potential hire, you have to be able to imagine yourself in the world the company projects to the outside world. It’s the fodder for the daydreams you have at your existing job or situation. Maybe you’re fortunate enough to have press and other people (investors, notable spokespeople…) helping keep you visible, but it’s far wiser to take control of your image and make choices as to how to appear as desireable to the people you want to attract.

Thanks for reading and if you want to see a content montser in action, here are some of the places Zapier publishes to:

The Zapier company blog
The Zapier services updates blog
Zapier on Twitter Co-founder Wade Foster’s personal blog
Co-founder Bryan Helmig’s personal blog

Cross-posted on Medium / Photo by epiclectic on Flickr

Being new to biking in a city, I try to look on Google Maps...

Mon, 13 May 2013 00:05:26 -0700

Being new to biking in a city, I try to look on Google Maps street view to see where I might lock up my bike when I go places. What I find doesn’t always reassure me.

Photo

Fri, 10 May 2013 10:44:00 -0700

Location

Tue, 06 Nov 2012 14:54:00 -0800

While looking for ways to find customer development interviewees, I stumbled on some slides by Jason Evanish, who leads product at KISSmetrics and recently authored a post about taking your 20s seriously that touched a nerve and landed on the frontpage of HN. I asked for clarification on a particular slide and my query sparked a conversation that moved from Twitter to email and ended with an offer to meet for coffee near his office in San Francisco. It’s so thrilling and helpful to talk with someone about the CustDev process who has actually done it before, so I leapt at the chance and booked a meeting for the first possible weekday. The meeting was great and I came away with actionable next steps and a new ally in the battle against just-do-it-style company building.

During our meeting, I referenced Voxer, the walkie talkie app, and Jason mentioned that they had offices in the same building as KISSmetrics. I had turned on Highlight, the ambient social network so polarizing that it has defender Robert Scoble nearly getting into fights, and its founder, Paul Davison, liked my status post.

There is something undeniably magical about being located in a hub buzzing with activity around something you love. I visited SF for a few hours and I got personalized advice from an authoritative source, a friendly social gesture from a notable founder, and the knowledge of further potential connections in the immediate vicinity should I have something worthy of connecting about. These are incredibly loose ties that you could argue don’t mean anything. You can walk by notable people all day and it won’t necessarily better your career, but it might be that a door has opened before you. If you can see the door, then you have manifested the opportunity to walk through it. One thing is certain: you’ll never find out if you don’t move forward.

Follow @evanish and read his blog!

Games, Art and Creation

Fri, 19 Oct 2012 01:55:00 -0700

I just caught “Indie Game: The Movie” on Netflix Instant. It’s is a compelling documentary that follows a couple of independent game designers and developers throughout different phases of their creation process and product launch. In spite of the highly technical work required to release a game, these dudes are artists making art to express and inspire emotion in other humans. Their social isolation, ever-increasing proficiency, complex dynamic with critical feedback, and giant mood swings are all familiar as the characteristics of artists in the throes of creation.

Confession

I grew up playing games on devices that included an Atari box, the first generation Nintendo box, a Macintosh Powerbook 100 laptop, and the first generation Game Boy. Somewhere in high school, maybe around the time I started getting serious about music, I completely lost my connection to games. I coded a simple version of the game snake for a college programming class, but otherwise, there’s been no return to gaming in my life.

I’ve watched major trends in tech involving gaming from a respectful distance. In 2010, hot social apps like Foursquare got buzzy and “gamification” became the answer to engagement in product design. Zynga’s games gained traction and social gaming grew red hot. The success of the iPhone and the growth of mobile device usage set the stage for popular games like Angry Birds and the gaming space became a favorite for app creators and startup investors. Fun got serious. I avoided all of it because I have no passion for gaming. I would feel like an impostor getting involved with game design, and there are plenty of other things to do in life that I love, so I just didn’t bother.

Some moments in “Indie Game” make me want to do a bit more research into game design, however. Super Meat Boy game designer, Edmund McMillen, introduced the basic concepts of level design, and those concepts could cerntainly inspire non-game software design.

No Cheating

First, you have to teach players the mechanics necessary to proceed in the game by presenting them with a challenge that can only be solved by mastering the skill being introduced. Skippable directions (especially text-based ones) can be ignored. Creating an opportunity for failure is the only way to guarantee success.

This is an exciting concept when applied to an onboarding flow for first-time users of any software. You could argue an app has many possible non-linear paths, so preventing a user from doing what they want creates friction that might result in abandonment. Often though, a well-defined onboarding experience can create a sense of accomplishment and help users avoid the paradox of choice. The gains of providing a path to success outweigh the short-term loss of flexibility.

Build on Simplicity

Next, McMillen describes considerations when choosing game mechanics. He uses circular saws throughout “Super Meat Boy” in increasingly complex configurations that offer players new challenges that build on existing knowledge. This creates an addictive growth loop. Leveraging existing elements leads to a simplicity that results in strong branding.

“As a designer, you want to explore each mechanic and make sure that it can be enjoyed at least 3 or 4 different ways. If it’s only got one use…then it’s pointless, because you need to be able to juice it. You gotta figure out new ways to use it.”

This is great advice for avoiding cluttered, confusing UIs. It’s an inspiring challenge to embrace design limitations to make it easier for users to understand how things work.

Trust

There’s a real beauty in the trust that’s created between a game designer and a player. The player believes that the designer has given them what they need to progress and win. Where is that trust in non-game software? So often you try a social app only to discover a ghost town that offers no value beyond early adopter self-satisfaction. Or worse, you spend time with a utility only to discover it can’t solve the problem you need solved. Imagine a game where there’s no way to get to the next level. Players would grow angry and never return. Why should people be more patient with an app less entertaining than a game?

These short PBS Off Book segments are pretty cool. Here’s...

Wed, 26 Sep 2012 10:13:05 -0700

These short PBS Off Book segments are pretty cool. Here’s one about artists utilizing technological glitch behavior to create experiences that turn error into entertainment. Glitch art embraces ugliness in the way that grunge music harnessed shittily played electric guitar and out-of-tune, screaming vocals. I think it’s an important counterpart to the overly-perfected, auto-tuned, airbrushed world we see most frequently in pop media.

There’s a cool tip in there about how you can get a cool visual effect happening:
1. rename a .jpg file as .txt
2. open it in a text editor
3. randomly delete some characters throughout the file
4. save + close the file
5. rename the file back to .jpg, open, and enjoy!

Why Does Startup Market Size Matter?

Mon, 24 Sep 2012 13:54:00 -0700

I’ve been hefting around my hardcover copy of Steve Blank’s “The Startup Owner’s Manual” to learn how to follow the Customer Development process. The first step of the model is customer discovery, which has four phases: state your business model hypotheses, test the problem, test the product solution, and pivot or proceed. In the very first phase of step one, we’re already into the initially uncomfortable territory of the lean startup, where it’s time to call out your assumptions about your customers and what problems they have in order to prove those guesses right or wrong.

There’s an outlier in the customer discovery step that doesn’t end up on the business model canvas, but is more about communicating to co-founders and investors and weighing your efforts against a possible opportunity - the market size hypothesis. We know this one well, it’s part of the cliché elevator pitch where the entrepreneur states, “x industry is a $y billion dollar market and if we get z% of it, we’ll be rich!” And while in that context, the information tells the listener nothing about the reality of a startup’s future outcome, the exercise of coming face-to-face with the estimated revenue of a market can help you decide if the opportunity you’re pursuing is big enough to meet your hopes and goals. It’s simple: if the best possible outcome isn’t desirable, then don’t bother.

Paul Graham stated recently that the definition of a startup is, “…a company designed to grow fast.” Hearing this from such a well-respected and influential source has forced some people to face their own desires about the outcomes of their company or investments. In defense of non-growth-centric companies, some people have stated a preference for Steve Blank’s definition of a startup, which is, “a temporary organization designed to search for a repeatable and scalable business model.” While it may be convenient to select the expert quotation that supports your preferences, in this case, it’s ill-advised. In the “Startup Owner’s Manual”, Blank’s thinking seems to be inline with PG’s. Identifying growth potential as the reason to estimate market size during customer discovery, he states:

“But because there’s nothing worse than spending years in a startup only to discover that it can never grow to more than a few million dollars in revenue, the market size hypotheses help you size the opportunity of your startup market. Estimating market size helps determine whether the payoff from your new venture is worth the toil, sweat and tears, or whether you’re about to do your first pivot.”

Regardless of what your definition of startup is, it seems we can all agree that estimating market size can be useful. Unfortunately for me, I find market size research to be tedious and inconclusive because most data from valid sources is outdated, revenue estimates in markets with private companies is incomplete, and statements from competitors tend to highlight some glowing statistic they want the press to focus on because it makes them look cool. Combine that with the fact that you’re probably wrong about what market you’ll end up in and add another layer of frustration if you’re not exactly sure which market you want to target initially when you have a product that could potentially meet the needs of multiple markets and you are likely to adopt the psychology of a child stuck at a classroom desk just before recess on a sunny, spring day.

I had some fun with it recently though. One market I’ve been researching is web hosting. Some sources peg annual revenues at $5 billion, while others stretch that range to $12.3 billion. Let’s be pessimistic and call it $6 billion. While skimming through some of the slides on Steve Blank’s Slideshare to get some business model canvas examples, I noticed a slide showing that the Plus-Sized Woman’s Clothing industry had $8 billion in annual revenues. Shit! You mean a small niche of the shopping industry is larger than the market I’ve been focusing on? Not having a co-founder, I share a lot of these kinds of discoveries with my significant other. She was unfazed and suggested I look at something like chocolate. The US chocolate market makes about $17.3 billion each year. Next we thought of the movie industry, which turned out to be $30 billion in annual box-office revenue, but $87 billion total revenue. I thought to check porn, since that might make a novel data point - a measly $14 billion.

It’s certainly interesting to compare the market you’re about to spend years of your life focusing on to other ones through the lens of potential annual revenue. I can’t imagine spending extraordinary amounts of time helping people with their chocolate problem, so I suppose what matters is the combination of market opportunity, your desired outcome, and choosing an area in which you have expertise and that you can stomach for the amount of time needed to find success. Some good advice Biz Stone and Evan Williams, the Obvious Corp. founders, give to all the CEOs of startups they mentor is to, “…be really passionate and emotionally invested in your project, or it won’t work. Don’t just do it because you think that other people will like it. You have to love it and want to use it yourself.”

Photo by the awesome J.D. Hancock on Flickr.

Here’s Sahil from Gumroad on Kevin Rose’s excellent...

Tue, 21 Aug 2012 20:42:00 -0700

Here’s Sahil from Gumroad on Kevin Rose’s excellent Foundation show. It’s a candid conversation between two talented entrepreneurs in very different places in their careers (Sahil is founding his first startup while Kevin is now a VC after multiple exits from his previous companies and several killer angel investments) finding common ground while making coffee in some strange apparatus that looks like it came from a SF head shop.

At around 23:39 Sahil talks about the idea of artists and musicians using Gumroad to share the vast majority of their creative content that is usually just stashed in a hard drive not giving anyone any value. It’s one of the things I love about the product and that I got to ramble about in my guest post on the Gumroad blog, “What about the 99% of your content?”

The Heroku Pricing Gap + Add-on Fever

Fri, 29 Jun 2012 11:54:00 -0700

To give my thoughts on Heroku some context, here’s some background on my cloud infrastructure experience… I use AWS to run 2 small Django-based apps. I’m a reluctant sysadmin. I struggle with the plethora of options AWS provides right from the start. Which AMI do I use? What’s latest version of Ubuntu (“Nonsensical Nautilus”?!) and do I want the latest stable version or the most recently released one? Is the best practice to use Virtualenv in production, or is that not trending right now? Do I need to learn Puppet, Fabric, or Salt for deployment? How about process monitoring - that’s supposed to let me sleep through the night when the gunicorns die or celery goes floppy, right? That sounds good. So, do I use Supervisord or does Upstart cover it? I’ve got Postgres running on an EBS; are snapshots good enough for backups? Seems like not really…they’re saving more than just the data and you have to test the backups… Ok ok. I’m feeling at this point like it’s going to be pretty amazing if all of this works in the end. Somehow, I get through it. I keep smarter friends on IM and google-fu until my fingers burst into flames.

So, on my latest client project I decided to try Heroku. I tried to remember why hadn’t done so already. When I first heard about it, it seemed Ruby/RoR-centric. But, I noticed when they launched Python/Django support, so that was no longer keeping me from kicking the tires. I’ll try almost anything if it’s free. Will it be free? Previous googling on that question led me to: maybe? It depends on what you need. So I’d say, “ok, nm then. I already know AWS, so I’ll just use that again.” This time though, I decided I would just not add a credit card to my Heroku account and see if I could deploy some prototypes for my client. It worked great! This is pretty cool. No sysadmin hassles here. The design is fun and well-targeted at hackers. The UX is simple and well-executed. Now wait, how much am I trading in customization options for ease of deployment? Hmm, looks like you can move off the shared database and be able optimize your Postgres or whatever. Looking good. A lot of the complexity has been abstracted away from me, which makes me very happy.

It’s time to add another developer to help out with project tasks. I clean up the code and add my friend as a collaborator for the repository on Github. I tell him, “hey, I’ve been deploying to Heroku. It’s kinda cool. Let’s keep using this during development a little longer.” We do. He likes it. He discovers add-ons. It’s free to add Redis-to-go, Celery, New Relic…oooo, even Sentry is here! I’ve always wanted to try that. Ok, so hang on, this is all free? Yes. Ok, but does it effect performance? Not at this stage (no users, etc.) Well hell-to-the-yes. I think we have a case add-on fever!

We arrive at a feature that requires a Celery queue to handle periodic tasks, and it looks like we’ll finally need to pay for a worker dyno in addition to the free web dyno. Ok, so we’re talking about $36/month. Np. This is still a great deal. Just out of curiousity, what does the pricing look like in the next tiers up?

WHOA?! Memcache goes from 5MB for free to 100MB for $20 and the next one up is…1GB for $90! That’s a mighty large gap there. Let’s look at some other add-ons.

The pricing for CloudAMQP, which offers RabbitMQ-as-a-service, looks like this: 30MB messages/month = free; 2 GB messages/month = $19/month; 20GB messages/month = $99. This is Heroku’s freemium business model in action. You get hooked on add-ons and then your project grows and…wham! You’re paying a premium for these services. But, you’re getting magic and less stress….but, I suck at devops and somehow both of my apps have stayed up for many months on AWS, so…

It takes at least 5 hours to setup AWS. If your rate is $100/hr, that’s $500 out of the project budget right there. It’ll be roughly $100 to run an app on a small EC2 instance with an EBS volume and using S3 for serving up media. Alright, so until Heroku costs more than $100/month + the $500 one-time setup cost, it makes sense to stick with it. This doesn’t even take into account the maintenance and updates you’d have to deal with on AWS, as well. So, let’s enjoy it until it hurts. Hey, maybe the app never gets popular, you never feel any pain, and you’ve saved yourself a bunch of money.

TLDR; Use Heroku until it hurts (or at least during early development.) Then, switch to AWS (unless you get addicted to add-ons and stress-free deployment and have the cash to burn.)

Update: @glenngillen (Lead Engineer - Add-ons Platform at Heroku) replied on Twitter that it’s the add-on providers who set the pricing for add-ons. https://twitter.com/glenngillen/status/218830351307522048

Thanks to @zen4ever, this post was briefly on the HN frontpage! :)

Comments on Hacker News

Unofficial Rothko Details iPhone 4 Wallpaper “I paint very...

Thu, 15 Mar 2012 14:00:00 -0700

Unofficial Rothko Details iPhone 4 Wallpaper

“I paint very large pictures. I realize that historically the function of painting large pictures is painting something very grandiose and pompous. The reason I paint them, however – I think it applies to other painters I know – is precisely because I want to be very intimate and human. To paint a small picture is to place yourself outside your experience. However you paint the larger picture, you are in it.”

- Mark Rothko

Here is a series of 10 unofficial details that zoom in on Mark Rothko’s beloved paintings. These have been formatted to be used as iPhone 4 wallpaper (640x960 @ 326dpi), which brings this classic artwork to a new canvas and creates a new experience that is in accord with the artist’s desire to create an intimacy between the viewer and the painting.

Worth noting is that Apple’s Steve Jobs was inspired by Rothko’s work in the last year of his life while searching for art that might inspire people to display on the walls of the future Apple campus. Since we can’t all enjoy the original paintings in such a setting, these wallpaper photos can give you inspiration every time you take out your iPhone. Share, remix, pin…whatever strikes your fancy.

Repin these on Pinterest!

How To Like Facebook Apps - The Page Wins Over The App Profile Page

Wed, 28 Dec 2011 00:00:00 -0800

I have 2 Facebook apps I maintain (Card Karma and 3goodthings.me). When I setup these apps, I customized the App Profile Pages since Facebook was directing internal searches there (both from the main search box in the main nav bar as well as the Applications Page.) I started noticing that many Facebook apps had Pages categorized as a “Brands & Products > App” which they were using for the like box on their destination website and elsewhere online. Sometimes this was because the Facebook app was used only for Facebook Connect authentication within a larger external project. For Connect-only apps, Facebook can redirect from the App Profile Page (https://apps.facebook.com/app_name_here) to a Page if you enter that as the Canvas URL. Sometimes though, even canvas apps were using a Page in addition to their App Profile Page. I found this confusing because the App Profile Page had the “Go to App” button, which was a very clear and desirable call-to-action for users checking out the app.

I kept looking around online (the Facebook Stackoverflow, like box documentation, the old developer forums, Google…) to find a definitive answer to which page to use for collecting likes for my apps, but I never found one…until now.

Facebook has announced on their developer blog that they are killing App Profile Pages by February 1, 2012. Existing apps have until then to migrate their likes and vanity URL (sorry, no content from your wall or photos will be transferred - booo!) to another Page. If you need to migrate your App Profile Page, make sure you’ve set the category of your Page to “Brands & Products > App” or else it won’t show up in the drop-down menu of Pages. For new apps, the UX is much clearer now. You’ll see a “Create Facebook Page” button in the Contact Info section of your app settings. The Page selected there will then display the “Go to App” button to the right of the Page’s title (next to the “Like” button if the user viewing the Page hasn’t liked it yet.)

So there you have it. Bye bye to App Profile Pages. Use a Facebook Page for your app and let’s hope the likes you collect there never have to be awkwardly transferred again!

Why It's Hard To Copy Recipients From One MailChimp List To Another

Wed, 06 Jul 2011 15:37:00 -0700

Counter-Intuitive How To

Currently, to copy list recipients from one MailChimp list to another you have to do the following tedious steps.

Click on ‘Lists’ in the main nav.

Click on the list you want to copy from.

Click the ‘view all subscribers’ button.

Select the recipients you want to copy, click on the ‘bulk actions’ link and pick the list you want from ‘copy to’.

The Problem

Why can I never remember this flow? Because, when I want to copy recipients into a list, I’m in that list! On top of that, if I somehow remember that I need to take the action from the list I want to copy from (which would be exporting, I suppose), I can’t find the option for the life of me. I’ve had to Google this 3 times now for myself and clients. MailChimp generally has wonderful UX design, so this is a recurring UX anomaly.

A Solution

What would be much more intuitive would be a clear call-to-action to import or copy from another list into the one I’m currently viewing. Even better, since I find myself going to the ‘Import’ section of the list, how about adding an option there to “import from another list”?

If you haven’t tried MailChimp and you need to manage emailing lists, definitely check them out. Refer to this post if you forget how to copy recipients from one list to another ;)

Google Analytics For Your Facebook Canvas App

Sun, 14 Nov 2010 14:00:00 -0800

In the heat of battle I added the Facebook Google Analytics FBML tag to my Card Karma app, but I was getting a bunch of gobbledygook in my Analytics reports that were completely useless. The reason is because, by default, the Analytics Javascript sends the parent frame URL to Google rather than any content loaded inside the Canvas iframe. So, Analytics was only tracking the cryptic Facebook URLs rather than the URLs inside the canvas iframe.

To get some useful data out of your Facebook Canvas application, you have to add the “page” parameter to the fb:google-analytics tag. For example, here’s the code I’m using in my Django app:

<fb:serverFbml style=”width:0;height:0;display:none;”>
<script type=”text/fbml”>
<fb:google-analytics uacct=”UA-55555555-5” page=”{{ request.path }}” />
</script>
</fb:serverFbml>

You’ll need to replace {{ request.path }} with something else if your app is not built using Django to provide the current page’s URL. And, of course, replace the uacct value with your Analytics account id.

To see what else in the Analytics API is supported inside Facebook Canvas apps, check out the official Facebook documentation for the fb:google-analytics tag:
http://developers.facebook.com/docs/reference/fbml/google-analytics

That’s it! A simple, quick tip, that might save you a few minutes surfing outdated tutorials or docs about Facebook apps.

PadMapper: Effective Pie Topping UI

Fri, 25 Jun 2010 15:41:00 -0700

After checking out tips on Quora for neighborhoods to checkout while visiting Silicon Valley, I followed a recommendation to try out PadMapper. I love this idea of having UI elements simply overlaid on a Google map (as seen in the above screenshot). To keep things clean and simple, this tactic necessitates sparsity in visible menu items. PadMapper uses a slide-out menu for tracking favorites and collapsible menu chunks in the main menu for additional filtering options. Even though this puts common elements like login links in a non-standard position (instead of being in the top-right of the browser window they appear at the top of the main superimposed menu), PadMapper leverages users’ familiarity with Google Maps (with its UI elements in the top left and right corners) and keeps new functionality easy to locate by grouping it together within the superimposed menu. The graying-out of the map pins is a nice touch. To improve the UX I would include the favorites menu as a collapsible side tab off the main menu and reveal rental listing details when you mouseover the map pins rather than having to click on each one.

Stalking Howard Hughes On The Interwebs

Tue, 08 Jun 2010 15:43:00 -0700

The movie The Aviator was sloppy around the edges (what the hell were they thinking with those bizarre Wainwright cameos in the Cocoanut Grove scenes?) in spite of some excellent acting. But, one thing I am left with after viewing the film is a lingering fascination with Howard Hughes. His innovation and ability to execute on his vision were staggering. I can’t get through the film without searching on my iPhone for photos of Hughes with any number of starlettes, the spectacle of the Hell’s Angels premiere, or the morbid glimpses of Hughes on a stretcher being loaded into an ambulance after crashing his plane into a Beverly Hills house.

There’s a wonderful unofficial collection of Hughes images (and a few videos) on Flickr. A former Hughes employee chimes in from time to time in the comments to correct details (see more from Paul B. WInn, Hughes’ former personal secretary, on this sprawling Facebook thread.)

Don’t you just love the web? It makes stalking so easy and media-rich.

New Site: Brin Levinson Art

Wed, 02 Jun 2010 09:54:00 -0700

Introducing the new and improved brinlevinson.com! Brin is an an exciting artist who lives up in Portland, OR. I’ve known Brin since we attended the California Institute of the Arts (CalArts) together, where he was studying character animation. His artwork is highly stylized (tending towards the dark and mysterious), virtuosic, and always tells a story that draws you in and sends your imagination running wild.

This site is built on WordPress and uses the phpFlickr library to pull in artwork posted on Flickr. phpFlickr has some nice features like caching and all the Flickr API integration needed to build a slick gallery. We’re using the nyroModal jQuery plugin for an effective full-screen slideshow feature to get a great look at Brin’s art. One thing we ported over from Brin’s former site was the PayPal buy links that allow patrons to purchase both original artwork and prints in the store.

I’m happy to note that with some prior discussion to get on the same page about the new site, we were able to build and launch this in less than a week! If only every site could go that smoothly… I hope you enjoy the site and please send along feedback (via Twitter, comments…any which way!)

3 New Musician Sites!

Thu, 13 May 2010 09:56:00 -0700

jeremyzuckerman.com

This new site for composer Jeremy Zuckerman has a custom Wordpress back-end that helps to keep a growing amount of content as minimal as possible. I got to play with jQuery Address, which allowed us to load pages like the biography and even the blog inside a div with ajax calls without resorting to iframes. Look for upcoming posts about this one where I’ll share some tips about working with WordPress and jQuery Address.

kateconklin.com

We pretty much created an online magazine for Kate’s new site! It’s another totally tricked out WordPress back-end, lots of jQuery goodness, and some killer features like filtering music and video clips by tag. There’s so much good information on here already and I’m thrilled that Kate has been adding new posts weekly since we’ve been building the site, so expect some great content to come if you’re into voice, anatomy, and how our minds and bodies work.

treeadams.com

This new site is the tour de force Tree Adams musical experience! You can browse his prolific catalog of film and TV works and soundtrack and solo artists record releases. We picked Django to handle the expansive CMS for this site, and I confess I like working with Django/Python more than WordPress/PHP when it’s right for the needs of the project. I threw in some heavy jQuery magic for effects that formerly would have required Flash. The whole thing even works on iPhone!

It’s a pretty exciting time in the web world with such amazing open source software and libraries out there. I’m honored to work with these talented and artistic clients and I hope you enjoy their new sites.

Adventures in User Experience

Mon, 22 Mar 2010 09:57:00 -0700

Here are some UX FAILs I came across while paying bills over the weekend.

So, Time Warner, you’re saying that I’m signed up for paperless statements, but I should also sign up for paperless statements? I’m confused. I’ll probably now spend a couple of minutes making sure my account is setup the way I thought it already was only to discover it is.

I hesitate to mention this one because I’m thrilled that I can renew my car registration online, but it’s a good example of breaking an established convention, so…here are some buttons on the California DMV site that are in the reverse order found on most web forms:

Even though westerners read from left to right, users are trained to find submit buttons on the far right, and buttons in that placement are the most likely to be clicked (let’s call it the next-next-next sydrome). The order in this form places the emphasis on the back and cancel buttons, which might lead to users accidentally clearing the data they’ve entered or causing confusion when they go backwards instead of forwards in the flow of the form. One reason the standard convention works well is because usually ‘forward’ or ‘next’ calls-to-action are displayed on the right (often with an arrow icon pointing to the right), while the button or link for ‘back’ is displayed on the left (often with an arrow icon pointing to the left). Look at your web browser’s back and forward buttons for an example of this. See how this form doesn’t follow that convention?

Seen any UX FAILs lately? Share your links or post a description in the comments!

On Web App Design

Tue, 23 Feb 2010 09:59:00 -0800

Here are some concepts that have surfaced while doing some recent web app consulting and design. This information is all out there on the web for the taking, but so many apps get these items wrong that I’m motivated to share them here as a checklist for myself and to hopefully help others make what’s special and exciting about their apps really shine. To clarify up front, it’s obvious that if your app isn’t going to be of the me-too variety, it will need to be different from existing web apps in some significant way. However, for the majority of the interactions in your app, choosing to stray away from some best practices can simply derail the user experience. Also, most of the following suggestions are related to usability and less about graphic design. I’ve never thought of Google’s apps, for example, as excessively pretty, but they are often usable.

A Feature By Any Other Name

Ok, you’ve got a sweet domain name and corresponding product name, and you want to run with a metaphor for your features (maybe you have a ‘pirate ship’, users are ‘pirates’, friends are ‘maties’…) That’s a cool idea, but if you’re going have common features, like following other users in a social network, it’s better to stick with the terminology that everyone already understands and not force your users to learn something new. The following are some terms that I think web apps should stick with.

- ‘follow’ people or groups of people

- ‘like’ objects (items or things, such as posts on Facebook, a book review, a movie, etc. - ‘favorite’ or star icons can be used here as well…)

- ‘groups’ are collections of people

- ‘lists’ are collections of objects (and sometimes people)

- ‘tags’ are keywords or descriptions usually attached to objects

It should be noted that choosing ‘groups’ or ‘lists’ can be a bit tricky. ‘Lists’ tends to be used for user-created collections of things. However, those things can be objects (products in an Amazon Wishlist) or even other users (like Twitter lists). ‘Groups’ tend to be collections of people centered around some kind of shared interest. Facebook, LinkedIn, and FriendFeed all allow users to create groups for topics (similar to organizations in real life). ‘Lists’ tend to be more geared towards allowing an individual to curate or organize, while ‘groups’ are more geared towards serving more than one person and where collaboration and communication are implicit. ‘Lists’ allow people to filter the often overwhelming river of information within an app, and ‘groups’ help people work together to create as well as filter content.

Regarding tagging, tags are a sort of brilliant catch-all for letting users organize information. In my listing above, the ‘usually’ hints at the fact that tags can be used for anything. You can tag people, groups, lists, and objects. Now, do you want to allow that sort of power tagging? Probably not. First of all, tagging is hard enough for a lot of users to grok, but also, it’s not likely users will want to go that hog-wild tagging everything in your app! It’s much wiser to not include a feature like this and let user demand for it determine for you if it’s even needed at all. I would suggest not even including tagging as a feature at first unless it’s core to the functionality of your app.

Attention To Detail

Let’s be honest, if you’re lucky enough to have a user at all, that user will have the entirety of the interwebz to compete for their attention. Therefore, you should make your app well-suited to drive-by usage. FriendFeed’s UX was validated by its acquisition by Facebook, which had already stolen some great features from them (see more below about stealing.) Being able to ‘like’ and comment right inline with an item in a news feed (or ‘activity stream’) is incredibly convenient. The old school web 2.0 way of handling this would be to require the user to click through to a details page where the item is displayed with relevant metadata and allow commenting/liking/etc from there. Why make users leave the stream to engage when they are probably just scanning items that look interesting and moving on quickly? Ask yourself if you truly even need a details page, and if you do, consider allowing any features on that item to be accessible within the stream or list view where multiple items appear. FriendFeed actually does have a details page (it’s buried in the ‘share’ link menu), but I think that was really only there to attach a permalink to the item for reference outside of the app. Twitter obscures their tweet detail page as well (you have to click on the timestamp to open it). Facebook doesn’t even bother!

For Every Action…

Any amount of user testing will illuminate the tendency for humans to become impatient when an action they take seemingly has no effect. For example, if I click a submit button on a form and there’s no indication that something is loading and I don’t know to look at the browser’s loading bar, I might think my click didn’t work. That’s when I become amazingly good at breaking your web app! Waiting for third-party API responses or just simply the load time for a page is still a factor we need to account for, so be nice to users by letting them know their input was received and something is happening.

One way to make this clear to users is to have reverse functionality replace the initial call-to-action. If you have a ‘like’ button or link, you can simply change it to ‘un-like’ and that lets people know both that their action has been completed successfully as well as making it obvious how to undo or change the results of their action. Do the same thing with follow/unfollow. Put ‘edit’ links inline with the content they effect; people click where their eyes are focused. If your app flow allows it, load search or filtered results via ajax calls to avoid a whole new page load and display a loading icon or text right next to the submit button, since that’s where the user’s eyes are when they clicked (as opposed to text at the top of a form…) You can even use jQuery or similar to change button text to indicate something is happening. For example, ‘search’ can be changed to ‘searching…’ Yes, following this suggestion creates some hoops for us web developers to jump through, but sprinkle in a little ajax magic and your users and customer support staff will be much happier. If you do a good job of communicating activity that’s occurring, you can also disable buttons/links by graying them out and making the cursor be the default arrow on mouseover to indicate the item is no longer clickable. If you do this kind of thing, just make sure to include timeout logic in the back-end to avoid infinite loading or allow users to cancel the action or your app might appear frozen.

Keep It Moving

Never allow users to reach a dead-end in your app. If they search for an object that doesn’t exist, let them know that it doesn’t exist and give them one or more calls-to-action to find something related or notable. “We couldn’t find ‘pink leather pants’, but check out these popular pink items by other users…” If your web app is new or doesn’t have much content on it, take advantage of the lack of stuff to prompt users to add stuff. “You don’t have any bookmarks yet. Add some bookmarks by…See some popular bookmarks…” This creates motivation in your user instead of making the app feel broken or limited. Never make a link direct users somewhere different because they haven’t added content or completed some sort of sign up or profile action. Show them that there’s a gap in completeness (LinkedIn’s percent complete and corresponding call-to-action is a classic example) where they have an opportunity to add info that will enhance their experience (gain attention, better share with friends, help others by being a maven, express themselves…you get the idea!)

Stealing Is Smart

As Picasso once said, “good artists borrow, great artists steal!” If your app has an activity stream like Facebook, FriendFeed, or Twitter, make it look like something like those UIs. Chances are the developers and business decision makers behind these products have more resources than you, so you can get tons of free user experience consulting by just copying these apps. Does your app have a sidebar with items like Twitter (an avatar and username on a user profile, groups of users following the user, users they follow…)? Well, make your life and your users’ lives easier by just lifting the UI straight off Twitter! You probably have a different brand/look/feel than Twitter, so you should skin the content accordingly, but steal enough to make it easy for users to understand what’s going on at a glance.

Spend a couple of honest moments asking yourself which features are truly special in your app. Put those features front and center and make all the other stuff easy to use by keeping it familiar to users of more popular sites. You will be hard pressed to out-user test someone like Google, so don’t bother trying and steal their good ideas!

That’s all for now. Have any tips/tricks/guidelines you’d like to add? Agree or disagree on any of these points? Comment! Respond! Take action and shout it out!

Love + Art (happy valentine's day)

Sun, 14 Feb 2010 10:02:00 -0800

During dinner last night with my family the subject of Woodstock came up, and there followed some speculation on the effect of the free love movement on arts and culture in general. Not having lived through those tumultuous years in America, I look to the great musicians, writers, and poets of that time to surface the best ideas of that generation. I’ve always enjoyed the following prose by Hunter S. Thompson recounting both the climax and demise of hippy culture and I share it with you on this Valentine’s Day.

Strange memories on this nervous night in Las Vegas. Five years later? Six? It seems like a lifetime, or at least a Main Era — the kind of peak that never comes again. San Francisco in the middle sixties was a very special time and place to be a part of. Maybe it meant something. Maybe not, in the long run… but no explanation, no mix of words or music or memories can touch that sense of knowing that you were there and alive in that corner of time and the world. Whatever it meant…

There was madness in any direction, at any hour. […] You could strike sparks anywhere. There was a fantastic universal sense that whatever we were doing was right, that we were winning…

And that, I think, was the handle — that sense of inevitable victory over the forces of Old and Evil. Not in any mean or military sense; we didn’t need that. Our energy would simply prevail. There was no point in fighting — on our side or theirs. We had all the momentum; we were riding the crest of a high and beautiful wave…

So now, less than five years later, you can go up on a steep hill in Las Vegas and look West, and with the right kind of eyes you can almost see the high-water mark — that place where the wave finally broke and rolled back.

- The “Wave Speech” from Fear and Loathing in Las Vegas by Hunter S. Thompson