Archive for User Experience Design


If you're new here, you may want to subscribe to my RSS feed. Thanks for visiting!

Have a great idea for a new mobile product or initiative? You won’t get very far without an equally great mobile prototype. A mobile prototype is the one chance you get to pitch your product or service – whether it’s a mobile app, a mobile microsite, or even an iframe mobile widget. A great prototype is essential to selling your clients, enticing investors, or getting approval from internal divisions on your vision.

Prototyping Top 10

“Prototype” and “demo” are two commonly confused terms. A prototype is an early version of a product with specific functionality. A demo is a story, vision piece or demonstration of underlying functionality as opposed to being an early stage product. While prototype and demo mean two separate things, the terms are often used interchangeably. For the purposes of this post, we’ll use the term prototype.

Mobile prototypes can vary from quick and dirty low-fidelity renderings to months long, enterprise-scale initiatives. However, all prototypes share several things in common. From storyboarding to creating an in-screen mobile demo, a successful mobile prototype must address three fundamental needs:

  • What is the purpose of this mobile product?
  • How does it further the client’s needs?
  • How will users interact with this product?

Why do so many good mobile product ideas get shot down? The company fails to create an effective prototype. Don’t let this happen to you. Whether you need to sell your client on a mobile initiative or pitch a new product to your boss, here’s what to do.

#1: Stay on Target. What will your mobile prototype accomplish? It’s all about driving business results, isn’t it? Start with your business goals and your core messaging. Everything should flow from there. Think about your client’s needs and explaining how your product will meet them. Don’t get caught up in the bells and whistles of fancy technology – stay focused on your client.

#2: WIIFT – What’s in it for them? The goal of mobile prototyping is to sell your product to the client. While demonstrating new technology is fun, it’s not your final goal. Your client assumes that your technology will work. They need to be shown how the technology will benefit them and their customers. To do so, don’t ignore the user interface. Otherwise, when your prototype is sent to senior business developers for review, it will be shot down. Clearly show your client what’s in it for them. Will your product enhance their marketing efforts? Will it help them reach new customers? Show your client that you understand their challenges by demoing a solution that meets their needs. Every aspect of your prototype – including the UI – should show your client that your business is about meaningful solutions, not just fancy technology.

#3: Go big or stay simple. Your mobile prototype should either look like a professional-grade product or be a simple, grey-scale wireframe. Anything in between these two extremes looks unfinished and unprofessional. Worse, customers will get hung up on color changes, logos and other unimportant details – missing the big picture.

#4: Plan user flows and leverage shortcuts to demonstrate features. Map out user flow on your mobile prototype so you are not constantly bouncing back and forth between screens. Use shortcuts to demonstrate functionality and content. Animated feature sequences are an easy solution.

#5: Fake it ‘til you make it. There’s no need to program everything. Use visuals to explain user flow and demonstrate functionality. Save time by demoing one feature and suggest functionality elsewhere. For example, your prototype could include five different menu items, each suggesting specific functionality. Only one of these five items needs to be active in order for your client to understand how they all operate. Unless your product is a server, there probably is no need to connect your prototype to a server. Instead, use an animated progress bar or spinning wheel as a stand-in for the connection.

#6: Auto or Manual? An animated mobile demo is an easy way to show how a user interacts with your mobile product. For example, you could show a finger making different selections to symbolize how a user interacts with items on the screen. Consider whether a self-running web demo or a presenter-controlled demo best meets your mobile prototype pitching needs. A presenter-driven demo, where you remain in complete control of the demonstration, is more interactive and effective. You can also do both, which is helpful if your pitch meetings are both in-person and virtual.

#7: Make your mobile user interface stand alone. No handholding allowed! If your client will be interacting with your prototype, make sure the interface is user-friendly and intuitive. Be sure to test this interface in advance for unforeseen complications from user error.

#8: Set up for fast changes. Pitching the same mobile product to multiple companies? Create an intelligent mobile prototype that can be easily reskinned for each client. A quick swap of colors, logos, and content examples saves time and is more likely to win you the business.

#9: Divide and conquer. When customizing a generic mobile prototype, keep your client’s industry in mind. Start by dividing your prototypes into verticals, such as retail, automotive and entertainment. This will make additional customization quicker and easier.

#10: Sell the sizzle. Don’t overthink it. A mobile prototype is meant to demonstrate capabilities, generate conversation and spark enthusiasm. It’s not a perfect solution to meet the client’s every need. If it were, then you’d already have a finished product! Let the client get excited – your job is to translate this excitement into a successful sale.




Over the past year we’ve worked with mobile advertising partners creating various mobile rich media ad products and HTML5 mobile ad experiences. We want to share some of the latest HTML 5 and microsite concepts we created around the 2012 Olympic Games.

2012 Olympics Mobile Advertising and HTML5 Concepts

Our concepts fell into two groups: for official and non-official sponsors. Since only official sponsors are allowed to associate themselves directly with the Olympic games, we came up with “live-data” concepts for official sponsors. We wanted to tie into the excitement and immediacy of the games. The ideas became ads as news. The concepts tie into close to real-time sports data providers so the ad viewer could get the latest Olympic information. A couple of ideas include:

  • Medal Count – Allows consumers to see up-to-the minute medal count results.
  • Daily Previews & Recaps – Consumers received the latest Olympic news and previews of coverage and events occurring later in the day.

We also needed to broaden the concepts to non-official sponsors to broaden the business opportunity for our partners. Concepts we designed for sponsors (official or not) include:

  • HTML5 Mobile Casual Games – We focused on a basketball mini-game. Remember the game you played as a kid where you had one minute to take as many shots as possible? That’s essentially recreated using HTML5. Many don’t know that interactive games with Flash-like experiences can be developed with HTML5 and be deployed today. The most exciting thing about HTML5 mobile games is that they can be distributed across mobile web. This means larger reach and a larger audience.
  • London Games Quiz – Another concept we developed is an HTML5 mobile quiz game based on Olympic trivia. Users have a time limit and the faster they respond, the higher the score gets. Users are allowed to then share and post results, as well as inviting other friends to play.
  • Sport Timeline – In this concept we created an interactive HTML5 mobile experience where the user interacts with a timeline. As they move their finger across the screen dates, copy, and photos update as the consumer sees information about the innovation for a particular sport. This allows a sponsor or advertiser to associate themselves with any type of sport.
  • Polling & Voting – We wanted to use polling concept that could be run throughout the day around various sporting events. Voting on who you think will win an event ties into the most common discussions people have on a daily basis. Plus you get bragging rights if you guess correctly. Polls were also targeted for specific audiences so not everyone views the same sport. Content and eesults are animated via HTML5. Advertisers can choose any type of sport to focus the polling or voting around.

The experiences we’ve been working on often get served via an expandable banner ad or a mobile microsite. HTML5 for mobile is especially exciting in that it’s enabling wide-scale interactivity and experience over mobile web. You’ll start seeing more and more rich experiences outside of apps.

Sponsors or advertisers can create custom experiences and UI components and are not relegated to standard web UI controls. HTML5 makes mobile advertising more enjoyable and encourages users to linger on microsites longer. An article in Digiday predicts major mobile interaction around the Games this summer, which gives advertisers a great chance at marketing products through dynamic microsites.

Over the next few weeks we’ll be sharing more about our Olympic as well as other concepts. Stay tuned.




In my last post, I talked about how the success of QR really depends on developing a smart mobile strategy and executing that mobile strategy with good mobile design. In this post, I thought I’d further that discussion by pointing out additional factors that influence QR code success. One, you need to thoughtfully integrate barcodes into your print ad and/or packaging. Two, you need to include enticing text that explains to consumers what they get for scanning the barcode. Having a visually prominent barcode accompanied by a solid offer will lead to desired traffic.

Solid QR Design Drives Mobile Web Success

Let’s do a little experiment. Flip through some magazines and look at how different companies are using barcodes in their print communications. How often do you see a barcode by itself with no additional explanation like a simple “Scan here”? How frequently does the copy explain what you’ll get by scanning the barcode? For example, a barcode might be accompanied by text like: “Scan to find the nearest boutique” or “Scan here for a coupon”? Is the barcode sitting in the corner of the ad all by itself?

Your research will probably show that most QR codes look like stickers placed into an ad with no explanation at all. That’s a big problem. Especially with new technology, consumers need to be taught what to do. You have to give them a reason to scan the code. This is where your mobile design strategy comes in. If you want to raise awareness about store locations, lead them to a boutique. If you want to increase product trial, offer a coupon. Good mobile design will entice consumers to take additional action.

When I look at how barcodes are used in print ads, I often think of the barcode as a call-to-action. It’s essentially a ‘button’ that leads consumers to make a purchase or learn more about a product. But most QR codes are not being used that way. Instead, you’ll find barcodes placed in the corner of ads all by themselves. To me, this is the equivalent of using a button on a web page with no text whatsoever.

The solution? Integrate the barcode into your ad and include a solid offer. The code should be seamlessly placed into the ad’s design just like any other element. It should also lead to a site whose mobile design promotes further consumer action. Going back to the button analogy, you wouldn’t put a button off in a corner of a critical web page. Rather, your whole design for that web page would center on driving the user to take action.

The QR code should be similarly integrated into your print communications in a way that is visually appealing and provides incentives for scanning. Check out this slideshow on visually creative QR codes from Mashable. I’d expect to see a lot more creative use of QR in the future as designers become more familiar with them.

Lastly, you want to create various QR offers and test them to determine which one yields the best response. To do this, use the same print ad and only vary the ‘preview’ of what the user gets with the QR code, such as:

  • Scan for location
  • Scan for coupon
  • Scan for video

Then track the hits on your mobile designed site to see which incentive delivered the most traffic.

There are plenty of companies who are using them correctly. According to a post on Online Spin, Home Depot and Best Buy have launched extensive QR centered campaigns, putting tags on their products to enhance the in-store experience. Also, over 45,000 new codes were created last quarter alone. Barcodes are rapidly taking their place as a viable marketing tool. The key is to use them strategically and design them wisely.

You’ll see more success when the QR design experience is thought through.




A recent post from Mobile Insider, called The Path to App-iness, discusses the various factors that affect an app’s success. Incorporating the findings into your mobile user interface can really boost your app’s popularity. Basically, if your app isn’t easy to use and doesn’t offer valuable content, then users are likely to abandon it.

blog post app love 011 Good Mobile User Interface Design Leads to App Love

The statistics come from a study conducted by MTV Networks and presented this month at the OMMA Mobile Show in New York City. When designing an app, you’ll want to consider the following:

  • 79% of users stick with an app because of its ease
  • 53% find apps through recommendations
  • 55% say having fresh content is still important in making an app among a user’s favorites
  • 38% dump deleted apps within 3 weeks
  • 55% of those who deleted an app did so because they found a better alternative

What these numbers mean is that when you’re designing a branded app or creating one for advertising purposes, you have a few slim chances to make your app memorable enough so people use it, keep it and recommend it to their friends. When designing your app feature set and mobile user interface, pay close attention to your app’s core functionality and core uses during the design phase. Good mobile design is not an after-thought. It’s as integral to the success of your app as your content and the features. Create easy and intuitive mobile user interfaces. Know the competition and make your app better.

A second criteria for creating a popular app is fresh content. More than half of app users say updated, relevant content is what leads them to keep an app. When you’re designing mobile user interfaces, make sure you can quickly change and add content, and incorporate a way to notify users when new content is posted. You’ll also want to let users know how you’ll be updating content and when. This way they’ll be more receptive to your app and less likely to delete it.

There are hundreds of thousands of apps out there. Most are not worth the free download. People are less forgiving on mobile and, as the above stats show, are willing to delete your app within three weeks. Yet if you invest time and thought into your mobile app design, you’ll have satisfied mobile app users who will remain loyal to your brand, recommend your app, and spread your message




Pad Gadget had a post about the just released NBC Universal iPad app. Bravo Now is designed to be a companion to live television viewing. Bravo Now delivers a tight mobile user experience integrated into Bravo’s chat network “Talk Bubble” that connects viewers with the behind the scenes creators and stars of its shows.

Bravo SocialTV

Interactive and social television is usually delivered ALONG with a broadcast stream. However, a companion app to a show is a great idea that brings Social Television over and above traditional programming and viewing. The use of a mobile device makes deployment easier and quicker than tv devices. It can also deliver great mobile user experiences that are optimized for mobile devices.

The Superbowl might be the only televised event these days that brings people together at the same time, in the same room to experience a televised event simultaneously. With the evolution of DVRs, Hulu, YouTube and other online streaming sites, shared television watching has been deeply fragmented. Social TV brings together programming, communication and social interaction to perfectly promote next-day water cooler talk. This is vital not only for word-of-mouth promotion but important for advertisers and sponsors.

I had a few ideas about how to expand and improve the mobile user experience on a tv network application:

  • Sell season passes to a show
  • Sell monthly subscriptions to the network as a whole
  • Offer discounts for DVD purchases if you’ve purchased earlier shows
  • Offer viewers a limited amount of recent episodes for free but charge for older episodes
  • Offer discounts for additional merchandise (such as associated games)
  • Offer free content (like daily trivia or wallpapers) that a user can distribute virally

Benefits include:

  • Harvesting valuable viewer demographics by offering free programming in exchange for answering profile questions
  • The ability to promote other shows on network at same time
  • Create deeper immersion with characters and network experience with the ability to look up information on your favorite actors or their characters.

Look for other networks to quickly enter the live TV app market.




Moblie Commerce Daily had a story about a new app that is a great bridge between the physical and the virtual. PixyMe takes the mobile user experience to pretty cool place.

PixyMe is an iPhone/iPod Touch app that uses image personalization. Users can send or share photos via the usual social media channels. The twist is that you can then have your image printed on a postcard and mailed with a stamp anywhere in the world. You don’t need a personal image – the app will integrate a name, word or short phrase into an object within a stock photo – making it look like the words were written in leaves or as fireworks in the sky. Click here to try it out with your name. At $1.99, PixyMe is consistently a best seller for Apple.

You’ve heard me say that successful apps can’t just make use of cool technology or look pretty. PixyMe is a perfect example of a smart app that fits a real-world need. How many times have you been on a trip and wanted (or promised) to send a postcard but you forgot?

The whole stamp/mailbox thing is such a hassle but everyone loves getting non-junk mail. And the personalization angle is great for family, friends or even as a business tool. A feature to remember contact groups – like friends, family, coworkers – would make reuse of the app even easier.

A good idea would be to offer discounts for bulk mailings – instead of sending one card, you could send the same image to multiple contacts. A feature to remember contact groups – like friends, family, coworkers – would make this easier and encourage use over and over. For example, I’d pay extra for the convenience of being able to mail out a holiday card if I missed the deadline to go the standard print route.

Some additional features ideas could be special offers that kick in based on holidays around the world, discounts for promoting PixyMe on Facebook, Blog or Twitter or maybe a sweepstakes for the most creative use of the PixyMe app.




Omega Mobile recently completed a series of tutorials for the Open Screen Project Fund. We created seven demos total that I’ll cover in blog posts coming soon.

Nokia Rich Flash Lite Demos

Each mobile demo/prototype was designed around experiences where Flash Lite and Nokia devices a great fit. These include rich media, personalized experiences, social media, photo sharing, location based information, music, news, video, advertising and marketing.

The demos were designed to be shown as-is, without additional work as well as to be modified easily. Use them to quickly present a concept internally or to pitch outside clients.

One of the main goals of each demo is the ability to be able to easily reskin each mobile user interface. Each demo is designed so that the user interface elements as well as the background can be changed in a matter of minutes.

The tutorials in the series can be used alone or together and cover the following types of content:

  • Video Player – Play an external FLV video file in both landscape and portrait mode
  • Music Player – Play external mp3 audio files
  • RSS News – Read and display RSS feeds
  • Social Media – Leverage Twitter for promotional purposes
  • Photostream – Display Flickr photos
  • Event Info – Use to market an event, make phone calls, and initiate pre-written SMS messages
  • LBS Coffee Finder – Leverage GPS location and Google Maps to find the nearest coffee shop




A few trade stories this week about video ads suggest a opportunity for intelligent mobile user experience design.

Mobile Video Ads

MocoNews reported on a Google blog post about how the company is beginning to monetize the mobile version of the video site. Banner ads will show up on the home, search and browse pages of YouTube when accessed via mobile. Meanwhile, AllThingsDigital.com linked to an editorial about the hatred for pre-roll video as well as its effectiveness. If pre-roll ads are to become the norm, why not design the mobile video ad experience to be intelligent and adaptive?

Why not combine pre-roll with dynamic content tailored to the users? Not everyone needs to see the same pre-roll ad. I’d answer more questions to reveal demographic information in exchange for seeing less ads. If not less, I’d definitely prefer to see an ad of interest to me – like movie trailers - rather than the many makeup commercials I’ve been forced to endure before watching online videos recently.

I’ve recently seen Hulu offer short surveys in exchange for an ad free episode. The experience was hassle free.

Multiple pre-rolls could be created to serve different demographics – male teenagers see video game previews, new parents would get baby products, affluents would get luxury commercials, etc.

So why not give users ads that they want? Targetted ads will result in better ad spends and more purchasing.




Google introduced a new service for searching with gestures for Android 2.0 and above. This gesturing could evolve into some pretty cool uses and mobile user interface design opportunities.

Google Gestures

Basically, users scrawl a letter (or “alphabet gesture” as Google Labs calls it) on the touch screen to bring up a contact, app, music file or bookmark from a list of hundreds or even thousands on your Android phone. The mobile user interface eliminates the need to type in certain cases.

While the gesture feature is currently for searching only, this opens up lots of possibilities for interesting mobile user interface design possibilities for Android. The API could be opened up so that anyone writing Google apps could make use of ‘common’ gestures.

Universal gestures could be explored that could be used across any app.

Imagine that there’s a ’send to the Google cloud gesture’ and a piece of content you’re interacting with could automatically be sent to the appropriate cloud service. For example, you receive a document, gesture it, and it ends up stored in your Google Docs. Or the ability to gesture a phone number on a site and save it in Google voice would make interacting with Google cloud services easier.

I’m happy to see Android evolving and opening up the door to explore more touch based user interface design options. It’s a good time to experiment before rigid standards make their way into the mobile user interface design community.




Fast Company reported on a new promotion that might be a glimpse into the mobile design of smartphone commerce in the future – advertising that combines virtual goods and LBS to tap into on-the-spot purchases and promotions.

Virtual Goods

Location-based game start-up Booyah is introducing in-game, virtual goods placements, based on your real-time location. The Mobile User Experience Design will lead consumers right to the cash register of a “real” store selling real goods for very real cash.

The campaign stems from Booyah’s partnership with international clothing retailer H&M but this could apply to ANY consumer campaign – from liquor to cars to network television. This particular promotion pings mobile users near an H&M location on a piece of clothing or accessory that appears in Booyah’s MyTown location-based social game. Discounts and promotions reward the Booyah user that visits the actual store location.

Here are some ideas I have for additional location based campaigns. Again, any consumer campaign could benefit.

Users could be rewarded with free virtual goods if they spend a certain amount of time inside a retail location. The goods should have a high value perception and be unique to that store. If the user wore or showed off or used a virtual item in a social network, they could get real world discounts on that product line.

The biggest fans of a company – the ever valuable influencers – could receive limited edition virtual that are exclusive or awarded before general public release.

Feedback about the unique product could be analyzed and the most popular ones could turn into physical products.

Another way to engage users (and potentially spark a viral campaign) would be to give the consumers tools to design the next generation of virtual product ala crowdsourcing. Implement a voting aspect and social network exposure to build buzz. Winners could get a high value prize and their creations could turn into physical goods. Imagine a fashion oriented tween designing virtual fashion items and being rewarded for it.

Unique mobile user experiences and advertising seem to be made for each other – mobile is also a great bridge between the physical and the virtual. I’ll be watching the H&M campaign with interest.