Alex Bovee

I’ve read a lot of great posts recently on the future of wireframes and if the low-fidelity mockup should go the way of the dodo.  In one post, the writer advocates using the technology framework itself for creating a mockup – or in other words, producing web-ready HTML/Javascript/CSS (and corresponding graphics from Photoshop or Fireworks) to create a semi-close-to-real-world model for the end site.  Another post has the perspective that low fidelity wire-framing tools do not provide the modeling capabilities for the interactivity and dynamic nature of web 2.0 sites.  A central theme to both posts is that iteration takes time and that the low/medium fidelity wireframing process adds an unnecessary layer to the design process. 

In general, I agree on both fronts.  I can certainly understand how each of these arguments is valid given a set of circumstances.  However, I do think there are cases in which it still makes sense to produce low-fidelity wireframes.  I’ve outlined these below, but first, some definition:

The “Throw-Away” Mockup – Defined

I’m defining the throw away mockup as a wireframe which, for all intents and purposes, is completely unusable to produce anything that will go in production.  This includes mockups that are just rough drafts done on paper, perhaps designed in powerpoint, or in a rapid low or medium fidelity wireframing tool such as Balsamiq.  The outputs from these tools cannot be transformed directly into HTML, but rather are good for socialization, brainstorming, and rapid iteration.  Their final drafts must later be translated into a production format (images, CSS, & HTML) which can then be staged to a developer.

When would you use Low-Fidelity Design Tools in the Design Process?

There are several reasons why you might want to use low-fidelity design tools to rapidly prototype a design.  Here are a few:

• When the Design Concept is Still a Rough Idea: If you don’t have a good idea of how something should work, it’s probably not smart to dive right into Photoshop. At the early stages of an idea, you’re going to go through lots of iterations.  Redesigning user experience and optimizing interactions takes time, thought, and lots of rework.  Unless you’re a supreme whiz at photoshop and can burn through iterations quickly, you’re probably better off starting on paper and then migrating the design to something more industrial strength later.
• When the site is extremely sophisticated: I recently drafted up some Balsamiq designs for a Health 2.0 consumer web company.  If you’ve ever touched the healthcare space, you’ll know it’s very complicated.  There are lots of data elements and translating user flows into simple, intuitive interfaces requires thought and iteration.  Creating production ready mockups in this case would almost certainly be a waste of time.  Throwing out a fully drafted HTML page with CSS and Photoshop template to boot is costly (both to your time and sanity).  Using a low-fidelity mockup tool helps keep the cost of this rework down to a minimum.  Designing Interactive has a good, short write up on this same point.
• When feedback is critical, but comes after design: In a real-time collaborative environment, feedback is immediate.  Drafting up screen elements and flows on a whiteboard lends itself to instant iteration.  However, there are many times when design is done independently and feedback comes after the fact.  In this environment, collaborators may be much less likely to tear down your design if they believe you’ve put a lot of effort into creating it.  Paper, Powerpoint, and Balsamiq mockups look ugly… and that’s the point.  No one will be afraid to tell you your design stinks if it looks hand drawn.
• When product owners are not proficient with high fidelity design tools:  In most startups, the product is owned by the founders.  Sometimes founders are great with design tools, but that’s just not always the case.  Furthermore, becoming proficient with sophisticated graphics tools is not an easy task and probably isn’t a learning curve you want to tackle when you’re already biting off more than you can chew.  In this case, it’s better to work with low-fi mockup tools to create good enough mockups that you can then collaborate on with designers.

You may notice that three of these four reasons could also be put succinctly: “when you believe you’ll have lots of iterations” (the 4th reason is skill centric).  Before jumping in to create high fidelity wireframes, use this litmus test to think about how much iteration it might take to get the design right and select the right tool accordingly.

Hotpot, Google’s new product for local search and recommendations, was released a few days ago to mixed reviews.  Some were great (Mashable) and others were less than stellar (Wired, GigaOM, SEW).  Personally, I like the idea behind Hotpot and think there’s potential.  Personalized recommendations for places to go to, businesses to patronize, and interesting things to do is something that would add a lot of value to my life.  Furthermore, since Google has a plethora of personal and user behavior data, they’re uniquely positioned to provide accurate and interesting recommendations.  Gmail, for example, is a holy grail of information about my personal preferences, hobbies, and passions.

Given the mixed reception, I sat down and thought up a few ideas on how Google could improve Hotpot.  Here they are:

Idea 1 – Call out the Benefit

aka: What’s the Catchphrase?

Hotpot needs to clarify the value proposition and benefit for consumers.  I felt like this was missing both at signup time and within the application.  The signup page says: “Start rating now with Hotpot”.  That sounds like work.  Yuck.  What’s in it for me?  Once you’re inside the application, it doesn’t get much better.  Hotpot’s catchphrase is … well, there isn’t one.  Under the search bar it says: “by Google Places”.  The first flip card says: “Recommendation for here or to go”… I’m not sure what that means.  Conversely, a glance at Yelp’s homepage yields the following catchphrase: “Real People, Real Reviews”.  That doesn’t sound like work and I understand the value that’s in it for me.  Hotpot needs to do a better job of explaining what it is and how it’s going to make my life better.

Idea 2 – Provide Immediate Value:

“Now eventually you might have dinosaurs [recommendations] on this dinosaur tour [recommendation engine]?”  Dr. Malcolm, Jurassic Park

Google has access to a plethora of my information via gmail, buzz, and a host of many other services that I use.  But once I was on the Hotpot site, I sat and scratched my head wondering exactly where the recommendations were on this “recommendation” engine.  It wasn’t intuitive even after rating a handful of businesses.  I spent my first 5 minutes clicking star ratings for several of the businesses that I recognized, but nothing seemed to get better. No additional businesses popped up.  No changes in my existing card set happened.  After a handful of reviews, I wondered what the heck I was doing. It took me logging back in a few days later before I actually saw any recommendations.  Hotpot should start providing users with valuable recommendations from the first click.

Idea 3 – Focus on User Experience:

“Think in Flows, Not Screens” Jason Putorti

Right now, the only flows in Hotpot consist of signing into the application, clicking reviews, and clicking businesses.  This experience feels awkward and stuffy - like I’m interacting with a databot whose job is to suck valuable review information out of me and shove it into a large database.  Hotpot is Google places with a weak social (friend connect), game mechanic (leaderboard), and input/recommendation engine (flipcards) layered on top.  The application could be dramatically improved by focusing on user engagement and flow.  Hotpot could initially ask a user to select a category of business they would like to explore.  The user could then scroll through that category and spend time on things that are relevant and meaningful to them.  That would also help avoid situations where a user is presented with completely irrelevant places.  After six reviews, I was surprised to get a card for: “Encinal High School”:

I’m not in high school.  I just graduated with my MBA from Chicago.  My little one is 2 years old and unless she turns out to be a Doogie Howser, MD, she won’t be in high school anytime soon either.  Hotpot needs to design flows that maximize value for the user and engage them relevantly.

Excited to See What’s Next

Despite some shortcomings, Hotpot did a lot of things right on this release.  Signing up for the service was painless and easy.  It’s layered on top of Google places and uses Google authentication, so if you already have a Google account, it’s just a few extra clicks to get started.  I was also really impressed with the review aggregation functionality.  They’ve sourced reviews from several different locations and boiled all of that information into an easy to understand, 5-star based review system.  Awesome.

All that said, Hotpot is certainly no Yelp killer and will need some work to better engage users.  Some of these changes will be small tweaks, such as clarifying their marketing message for the application.  Others will take substantial investments in time and money.  It will be interesting to see what Hotpot does next.