How to run Balsamiq wireframes on mobile

There 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.

This 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:

Define 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!

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

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

Custom products market landscape

Here’s a nice graphical representation of the customization, personalization, mass customization, crowd-sourcing market landscape. Pretty!  Thanks, Musen Lin.

The building blocks of social commerce

Send the Trend founders

Send the Trend is a great example of a ground-up social commerce company.  In a video interview with Entrepreneur Magazine, CEO Divya Gugnani explains the company’s core DNA:

Curated content

Like Fab.com or Gilt Group, Send the Trend takes on the role of fashion curator by constantly editorializing their product mix.    Visitors who come to the site expect a level of fashion quality, just as they would from any trusted luxury brand.  Consumers depend on Send the Trend’s fashion expertise and contribute their own style by creating their own MyStyle page.

Social by design

The brand experience is based on the way fashion shoppers inherently search, browse, and share great fashion finds, ie social by design.   The curating and sharing environment created among like-minded shoppers generates a community ecosystem.

Send the Trend already has a strong social media presence with nearly 250,000 Facebook fans and 12,000 Twitter fans.  Additionally, they use Youtube to publish rich content, Pinterest for first-view photos, and Tumblr for an inside peek at the company itself.

Social incentives

For starters, Send the Trend uses a classic “tell a friend” marketing technique.    Users are asked to invite a friend with $10 cash credit.   When that sendee purchases, the sender gets $10 credit.

Like Polyvore or Pinterest, users can collect items and place them in their virtual, hosted collection.  The user is then asked to promote their MyStyle page.  They earn a commission when someone registers on the site or purchases via their MyStyle page.

Additionally, users are literally given store credit when they share Send the Trend items on Facebook or Twitter.   Users become brand advocates just by sharing their favorite items with their network.  The social insight here that fashion-find sharing feels nature because shoppers have always behaved this way, even before social media.   Send the Trend community members are proud of their finds and happy to share them among their fashionista friends.

Geo targeting + personalization

In addition to product curation and incentives to share, the Send the Trend website detects your location and services geo-specific recommendations, like sweaters for visitors from the Midwest and sunglasses for visitors from California.     Together the combination creates a more personalized browsing experience.

Focus on sales

Lastly, Gugnani emphasizes the importance of sales in every faction of the business.  Remember that your brand and all your shopping features are built to sell.  The entire social commerce flow needs to optimize the shopping experience.  The entire brand experience, including all the social building blocks, is a finely tuned, guided sales experience.

Democrotizing design-your-own tools

Instagram filters

Innovation often focuses on improving usability in order to access a broader audience.  Photography is a good example.  You can buy a powerful, complicated SLR camera and take a photography course, or you can buy a point-and-shoot camera and get started right away.  Further, you can upload any basic image from your phone to Instagram and add a filter without having to know anything technical about film processing.

The Internet economy has always been focused on improving usability and empowering the masses.   Successful Internet companies provide self-service tools that allow non-technical users to engage with their products and services.  eBay, for example, empowers anyone to become an online merchant, SurveyMonkey empowers anyone to write and deploy their own web survey, and WordPress empowers anyone to become a blog publisher.   The theme is “no programming skills required.”

Any product or service that can be templatized or configured via an admin panel will be.   We’ve written previously about such trends as “democratizing fashion” and the proliferation of product configurators (customization) and online design tools (personalization).   Here are a few examples of the next frontier of the digital do-it-yourself movement.

Design your own video game

In the education space there are many self-service training tools like CodeAcademy, Treehouse (no relation), Lynda.com, and Khan Academy that give aspiring web developers the tools to learn new skills.    Along these same lines, Game-o-matic allows aspiring game developers (or aspiring computer science students) learn the basics of object relationships through an interactive video game development platform.   The interface is drag-and-drop intensive with no exposure to the game code itself.

Design your own toy

Cubify lets anyone design their own toy.  The 3D product configurator allows a user to make functional and color selections.    According to Cathy Lewis, Vice President Global Marketing, 3D Systems,  “Cubify Bugdroids underscores 3D Systems commitment to democratize creativity.”  Indeed the online product customization tool enables anyone to play the part of an industrial designer.  The experience is limited and guided, of course, minimizing the risk of user error.  “Creativity loves constraint.”

Cubify

Similar to the maker’s movement transforming the US economy, we’re seeing an increased interest in “pride of authorship.”

As we’ve often written on this blog, there is a fine line between designing and shopping.  Designing used to mean manual aesthetic creation by trained professionals, while shopping used to mean selecting and buying mass produced products off the shelf.    Now we’re seeing the worlds of product design, product selection, product customization and crowd-sourcing merge together as the Internet continues to produce innovative, browser-based, do-it-yourself, design / shopping tools for the masses.

Personalization tools round-up

Customization is a $1 Trillion market

Personalization, in the context of ecommerce and mass customization, can be defined as providing consumers with a web-based toolkit to input custom text and images on to the surface of a product.  Most often personalization applies to printable commodity products like t-shirts, mugs, tote bags and stickers.  Anything that can be printed can be personalized.

How big is the personalization market? 

According to the CafePress SEC filing, “Based on 2009 U.S. Census Bureau data, we estimate the U.S. market for customizable retail goods is approximately $1.0 trillion.”

What is personalization?

A personalized mug

Personalization can also be classified as cosmetic customization, as per Joe Pine’s definition:  “Cosmetic customization, where a standard product is presented differently to different customers. The cosmetic approach is appropriate when customers use a product the same way and differ only in how they want it presented. Rather than being customized or customisable, the standard offering is packaged specially for each customer. For example, the product may be displayed differently; its attributes and benefits advertised in different ways, or the customer’s name may be placed on each item.”

As outlined in a previous post, personalization services are built with online design tools, which is a separate kind of toolset from Treehouse Logic’s unique hosted product configurator solution.  These design tools are essentially hosted editing tools – like a lite Photoshop in the cloud.  And, much like desktop editing tools, these design tools often include desktop-like navigation features like drag-and-drop.

Here’s a snapshot of a few sub-segments of the personalization market.

Print shops

Dozens of online printers offer personalization.   Examples include Custom Ink, Uber Prints, and Funky T Shack.   (Yes, seriously).   These consumer-facing printing companies offer design-it-yourself web tools that include text overlay and image upload.  Once an order is taken, printing and shipping are handled at the company’s manufacturing facility.

Personalization marketplaces

Additionally, print shops like Zazzle, CafePress, and Spreadshirt invite the community of quasi-designers to post their designs on their site and sell it to the public.  Like an eBay or Etsy marketplace, buyers and sellers converge in an ever growing network of virtual goods.  Designs are crowd-sourced by micro-entrepreneurs, and the network makes money by charging a commission on every sale.

This consumer/designer model differs from other crowd-sourced print companies like Threadless that require that designers submit more professionally designed image files (in Photoshop or Illustrator format) rather than using standards-based, consumer-facing browser based design tools.

Embedded design tools

Threadless drives customization innovation

Some software companies make their front-end design tools available to back-end printing businesses.  Spreadshirt offers an API that enables anyone to embed and skin their design tool, but printing itself must be processed via the Spreadshirt supply chain.  Inksoft offers printers a front-end design tool template that they can used to process print orders, but the template is not very flexible.

The worlds of customization and personalization toolkits are colliding and evolving quickly.   Although many of these t-shirt designers brought innovation to the market by publishing design tools on the Internet, the market is demanding more flexible toolkits that allow brands to build their own branded personalization experiences.  We’ll see a lot of disruption in the personalization space in the next few years, especially now that social commerce is taking a leading role in ecommerce innovation.

Customization gets celebrity endorsement

Maybe what the mass customization movement needs is more celebrity endorsements?  Golf has always been an example of an industry that is heavily driven by professional endorsements.    Golfers want to put like Tiger, drive the ball like John Daly, and win like Arnold Palmer.  And why wouldn’t they want to design their own golf clubs with an online product configurator like Phil Mickleson?

Golf club customization

“Golf is already the most personalized sport there is in terms of custom equipment options, and our new udesign by Callaway platform brings personalization to a new and exciting place,” Jeff Colton, SVP of Global Brand and Product at Callaway said. “The opportunity to design your very own driver in the colors of your favorite team, alma mater or whatever you happen to feel looks best has never been offered on a mass scale.”