How to run Balsamiq wireframes on mobile

whiteboardingThere are many new desktop and web-based wireframing applications, but Balsamiq is still a favorite go-to tool for many product managers and UX designers.    The main reason Balsamiq is far better than simple Powerpoint or Omnigraffle wireframes is that Balsmiq wireframes are interactive.  The compiled wireframe is functional, giving your engineering and marketing teams a visceral experience of actually using the proposed functionality.    Viewers can tap on buttons and links, see page transitions within the wireframe, and get a feel for how the app would actually behave.

balsamiq screen sizeThis interactive experience is far more valuable than just looking at pretty Photoshopped mockups of an app.   “We need to avoid the mindset that we need to develop a picture perfect Photoshop mockup for every deliverable.  Instead, get feedback earlier. If we work as part of a balanced, cross functional team, then we can constantly get feedback from other members of the team and learn more quickly than if we design on our own.”

What about mobile?

One obvious missing feature in Balsamiq is the ability to run the wireframes on a mobile device itself.   Sure you can mockup mobile screens, but what about running the wireframe on mobile?  Do UX designers need to abandon Balsamiq and switch to mobile / tablet based prototyping tools?  Not necessarily.  Here are some tips on how to leverage your existing Balsamiq toolset and run wireframes on mobile:

Balsamiq-desktopDefine your mobile screen size

First determine which phone you will be porting your wireframe.  For the purpose of this test I chose my HTC One, which has a 1080 x 1920 screen size.   Of course the same process will also apply for iOS.  Using the same screen aspect ratio, I reduced my workable Balsamiq screen size down to 270×480.

Export your mockups to PNG without margins

When you’ve finished your mockups, export them to PNG images instead of a PDF document.   You will link those PNGs together later on your mobile device.  Grab the set of PNGs and move them to your mobile device’s photo gallery via Dropbox or your preferred desktop -> mobile file transfer method.

Success!

Success!

Use the POP prototyping app

For the purpose of this test I used the POP prototyping app.   Open the app and create clickable areas and links within images from the app.  Note that links you defined in Balsamiq won’t work on mobile.  You’ll need to recreate those links in the POP app.   To define links, identify a tappable area, then define which page it should link to.  Once your links are all defined and tested, give it a test drive.  Check that your images fit the screen correctly and that all links are working.  Transitions from page to page are a bit clunky, but it’s completely functional.   You just build a light mobile app that shows functionality that doesn’t exist in your production version!

Next, hand users your phone and watch them click around the app.  Success!

Advertisements

Why Treehouse Logic shut down

quora-logoWondering why Treehouse Logic shut down?  Lucky you, I wrote up a detailed summary of where we went wrong on Quora. 

So you want to sell custom products? (Part 1)

Albert Wenger of Union Ventures

Here at Treehouse Logic we talk to a lot of start-ups that are betting on the design-your-own business model.   We’re seeing some major shifts in shopping behavior, most of which are discussed in this blog.

Albert Wenger of Union Square Ventures probably explains this phenomenon of mass customization the best: “We’re pretty convinced that mass-market consumer products are now so cheap and widely available that they’ve lost a lot of their appeal. We think people are looking for something unique and customizable. We’re interested in the social fabric — bringing people together that design things, and people who want to buy them.  Mass produced goods are dominated by a few large brands. But everywhere you look there are movements seeking to bypass those brands, whether it’s the locavore movement in food, or something such as NikeID, which has seen double-digit growth year over year.”

So how can new entrants to the customization market build businesses that focus on providing something unique and customizable, as well as tap into the power of the social fabric of designers and buyers?   Here are a few tips for up-and-coming custom product vendors:

Don’t repeat the mistakes of past customization businesses

Dell's product configurator

About 10-12 years ago we started seeing the first consumer-facing visual configurators.  Nike ID, Dell.com, and Timbuk2 were pioneers of the design-your-own movement.  What worked for them?  What didn’t work?   Why did Levi’s drop their customization program?   Why did Dell give up on customization?  A lot has changed in both shopping behavior and web technology in the last decade, so be sure to learn from others mistakes, and don’t replicate them.   Do your homework and focus on creating a NEW spin on customization that is innovative, simple, and core to your business model.

Build the brand first

Your value proposition has to be much more than “have it your way.”  You need a brand story that resonates with your customer.  Instead of customization itself, focus on what your core product values are, for example; product quality, locally made, sustainable, fashionable, built-to-order within a week, etc.   Yes, design-it-yourself is a selling point, but your customers don’t buy from you because your products are custom, they buy from you because your products are what they want.

Consider avoiding the ‘custom’ term altogether.  The term ‘custom’ can imply difficult-to-make and expensive.    Eventually, all products will include some level of mass customization.

Focus on product quality

Custom Burberry trenchcoat

Users are taking a big leap of faith by buying your products online.  Don’t let customizability get in the way of product quality.  Highlight your product with high res photos.   If you’re going to differentiate from commodity products you need to stand out in quality and design.    Luxury brands like Burberry use customization as an engagement tool that helps build their luxury brand.    “Honestly it makes no difference at all” how many custom coats Burberry sells, Ms. Ahrendts says. “It’s customer engagement. You want them to engage with the brand.”

Launching a customization program is a lot more involved then just bolting a build-your-own feature onto a website that features mostly “standard” products.      How do you plan to stand out?

Look for more best practices in future posts…

[video] Personalization is about people: customink

Great video from http://www.customink.com describing the value of personalized products.

Personalization adds a level of value beyond the surface it is printed on.  Personalization delivers emotion, fun, captured memories, and brand relationships.  T-shirts unite!

Ecommerce growth trends to watch: Mobile, Facebook, Crowdsourcing

What is the state of the ecommerce market in the US?  According to eMarketer, “2011 is showing very positive signs of being a good year as the forecast from last year is that sales are expected to raise 13.7% to $188 billion in sales.” The second quarter of this year alone has seen a 14% increase and that is as a result of the growing confidence that consumers have of making secure purchases online. There is a 16% increase in the number of people who make online purchases and it was recorded that during this past second quarter, 70% of people who use the Internet made at least one online purchase.

According to Inc Magazine, Ecommerce and online auctions is one of 6 top performing industries.  “E-tailers have also upped the savvy factor with widespread discounts, targeted advertising, and elegant, efficient site design—all created to lure customers out of brick-and-mortar stores and onto the Web. Popular product categories include clothing, footwear, jewelry, electronics, sporting goods, toys, and furniture, often sold through online commerce communities such as eBay, Newegg, and Etsy.”

What’s fueling this growth?   Here are a few growth areas leading the charge in the ecommerce market.

Mobile commerce

  • Coda Research Consultancy forecasts that mobile eCommerce revenues in the US will reach $23.8B in 2015. This is a compound annual growth rate of +65% over 2009.
  • 1-in-2 Americans will have a smartphone by Christmas, 2011, according to GigaOm.
  • Apple iPad sales have gone bananas.  During the last quarter, Apple sold 9.2 million iPads for $6B in revenue.

F-commerce

  • “It’s a matter of time – within the next five years or so – before more business will be done on Facebook than Amazon.” ($35 billion / year) Sumeet Lain, CMEA Capital.   Source:  Social Commerce Today.
  • “In three to five years, 10 percent to 15 percent of total consumer spending in developed countries may go through sites such as Facebook” Mike Fauscette, Analyst, IDC Consulting

Crowd-sourcing / Mass customization

  • VCs like Balderton Capital are betting on user-generated product companies.  “We believe that Gemvara (an online jeweler) can become the world’s first billion-dollar user-generated product company.”
  • The design-your-own arm of Nike, NikeID, generated over $100M in 2010, according to the Economist.
  • CafePress, a leader in the crowd-sourced online print business, is planning an $80M IPO, according to TechCrunch.
  • BetaBrand raised over $1M, “E-Commerce is such an exploding area, and there aren’t really companies failing at it. There will be a ton of online clothing brands that pop up over the next year. The next Quicksilver or the next Patagonia is going to start on the Internet.”  BetaBrand is disrupting the conventional online destination site model by frequently generating new inventory via a strong community of designers.   They “design, manufacture, and release new inventions every week, thanks to collaborations with all sorts of local designers as well as our growing global community of Betabrand Model Citizens.”

New Balance – Customizable, local-made, and fast delivery

New Balance is one of many athletic shoe companies changing the way consumer goods are sold online.   Along with messenger bags, jewelry, and dress shirts, shoes are one of the most popular market segments of the customization movement.   Shoes of Prey and Munich My Way are other examples of shoe customization.

New Balance offers a design-your-own shoe experience on their website  just like Converse, Puma, and Nike.   Shoppers can select color combinations and add personalized text as well.

This informational video highlights New Balance’s commitment to 3 key elements of the customization business model: consumer control, local manufacturing, a fast delivery time.

Consumer control

Shoppers make selections from a palette of supported colors.  The shoe-builder offers multiple views of the shoe so that the shopper knows exactly what they will get if they make a purchase.   Color options are curated by New Balance.  The shopper can choose any combination of colors to create a one-of-a-kind shoe.  Additionally, the user can personalize the shoe with custom text on the heel.

New Balance taps into the power of the crowd, ie co-creation, by allowing shoppers to post their creations to a public gallery.  Anyone can select a pre-designed shoe from the gallery and buy it from the store, or make last minute customizations and buy it.  Customer galleries are important for inspiring the creative process, since most shoppers don’t want to start the design process with a blank canvas.  Along with performance and rich visualization, consumers demand creative guidance from the community while they are designing consumer goods.

US Manufacturing

The US based New Balance facilities produce up to 7,000 pairs of shoes per day.  New Balance is the only athletic shoe company to manufacturer shoes in the US.   Increasingly, offering a local made product is important to ecologically sensitive consumers.

Fast delivery time

A primary benefit of maintaining US based manufacturing is the ability to deliver quickly to US customers.   Custom 574 New Balance shoes are shipped within 1 week of ordering.  Many custom-made product companies suffer from supply chain problems and cannot deliver quickly.  Indeed, Zappos-like customer service and delivery times is part of a successful customization business.

Storytelling

Lastly, I would also note that the video itself is part of a larger branding strategy that is based on storytelling.  The New Balance brand has strong roots in the New England area, and telling that story and communicating core brand values is part of a successful long-term marketing strategy.  Indeed, New Balance is a great case study in successfully creating a rich brand identity in a highly competitive market.

Mobile support – HTML vs. Flash

Are you considering Flash for your product configurator platform?  How important is it for your product configurator to support mobile platforms? How many of your customers will be visiting your site from mobile devices?   10 years ago Flash was really the only choice, and mobile support wasn’t even on the radar.

Today, it’s important to consider mobile support as you plan your mass customization strategy. Check out this report on Apple’s iPad sales in 2Q11 to see how the “post-PC era” is shaping up.

It’s important to use web platforms based on web standards like HTML and javascript, rather than Flash. These standards-based protocols are supported by all mobile devices, including the Apple iPad.  Flash is not.  And with advances in features supported by evolving HTML and CSS protocols, it’s unlikely that there’s any design requirement that would justify sacrificing mobile support in favor Flash.

Mobile by 2020