Category Archives: Mobile Context

Shape Magazine Tries Alternate Reality But Fails to Engage

Today’s post explores what has sometimes been called the future of mobile engagement, alternate reality (AR). While still in it’s infancy due to the complexity of implementing and the need for yet another app on the consumer’s part, some commercial efforts are out there. Below we experience a very rough implementation and learn how not to use AR.

_________________________________________________

Not long ago I was visiting my sister and picked up one of her fitness magazines, the September issue of Shape. I decided to thumb through it to see if there was much use of QR codes or even the ill-fated Microsoft Tag. There were a few QR codes, which I scanned of course, but there was also this on page 10:

image: Layar CTA

Interesting! I happened to be familiar with Layar, the developer of Alternate Reality (AR) technology, from some research my students had done a year or so ago. In a nutshell, AR uses a phone’s camera and other sensors to layer (no pun intended) a digital experience on top of an otherwise physical environment. I was going to have to download their app so I knew this wasn’t going to be a quick endeavor but I never would have thought the whole thing took as long as it did.

First, I had to get the app so I headed to Google Play, tapped in “layar” (it would have been handy to have a QR code in the magazine for this) and downloaded the app. Once downloaded I opened the app which forced me to swipe my way past 4 promotional pages to get to the Start Now! button. The time required for all this was starting to add up. With the app open I did as instructed and scanned page 10. After quite a bit of fiddling with how much of the image to include in the viewfinder the images in the viewfinder began to glow with a blue outline. It continued to glow for quite awhile (tick-tock, tick-tock) when a rotating gear showed on the screen. I don’t know what it is or what it means but it was rotating on my screen for a very, very long time.

image: Layar Shape Animation Layar Loading Image

Just as my patience was getting short the spinning gears gave way to a little blue button inviting me to “Click for More Details”.

image: Layar Button Animation

What? No fancy 3D graphics or cool animation of the model? All this for a frigging button??

And details on what? I scanned the entire 2-page spread, what exactly am I to get details on? Confused, I tap the blue button and the Layar app presents me with a selection of women’s clothing from Macy’s. None of which appeared to be the items worn by the model in the magazine.

image: Layar - Shape - Macy's Page

Perhaps the sports-bra thingy was the same but it was a different color and on a different model – this one brunette rather than blond. The pants and shoes on the model in the magazine were nowhere to be found. Where are those details??

At this point I was several minutes into this little experiment and my sister had wandered off having been ignored the entire time.

FAIL.

********************************************

What could have saved this campaign?

Overall this was a ridiculous exercise in technology that did nothing that a QR code couldn’t do. The point of AR is to create a more engaging experience. That’s the payoff. I’m not sure who was really driving this experiment, Layar or Macy’s, but here’s what needed to happen.

1) Use a QR code. If all you want to do is present people with an opportunity to shop then use a technique that people are likely to be familiar with and for which they are already equipped. Readers of Shape probably know how to scan a QR code and it is certainly more likely they have a QR scanning app than a Layar app.

2) If asking people to download a new app, familiarize themselves with it, and learn to use it in order to “Snap and Shop” there had better be a dazzling payoff. Layar or whomever handled the technology side of this needed to animate the page in some way. For example, they could have had pop-out bubbles that pointed to each clothing item and gave details on that item. Tapping the bubble could then take you to that item on the Macy’s page.

3) Finally, the landing page needed to have only the items featured on the page I scanned. What else would have caused me to scan the page to shop? Mobile is about impulse so it needs to be quick and simple to satisfy the desire someone might have to wear what the model in the magazine is wearing. Sure, let me keep shopping if I want to but keep the page focused on the items featured. Then, use the same model in the shopping experience as used in the magazine to create even more continuity.

Ripon Printers Uses A QR Code In A B2B Fail

Businesses who offer products and services to other businesses often lag behind in the use of new techniques to reach their customers. So I was intrigued when I saw a QR code on the back cover of the recent Chief Marketer magazine. Like the mobile nerd that I am I read only the headline, “Print and Digital Go Together Like Sugar and Spice, ” and then skipped right to the QR code (the ad was for a company called Ripon Printers). The code itself was unremarkable but there was some copy next to it that I found somewhat helpful, “Scan the mobile barcode with your Smartphone camera to download our white paper.” It was clear to me what would happen as a result of scanning the code. But what, exactly, would be downloaded? Based on previous attempts to download a document of some sort I figured it would be a .pdf, which was the first sign of potential trouble.

image: Ripon-magazine-ad-barcode

I happened to be sitting in a coffee shop so I popped out my phone and used the iNigma app to scan the code. I was taken to a web page that loaded very quickly (kudos to Ripon for that!). This being a B2B scenario the white paper was a lead generation tactic and on the web page was a form to complete in order to receive the download. Here’s the whole page:

image: Ripon-mobile-web-form

At this point I didn’t even know what the paper was about but to a degree that was my fault – I hadn’t read the whole ad, just the headline. On my phone this site was three screens long and there was no way I was going to tap out all that info using my phone’s tiny keypad just to receive a white paper.

At this point I declared this effort a modest FAIL — hardly a heinous one.

But I pressed on to see what would happen. I took the time to enter all of the required information — not a fun task with my big thumbs and the little keypad. The result was a bit confusing. The screen flashed momentarily after I tapped the Submit button but I was left on the page looking at my completed form. Did it work? It took me a while to notice the little icon in the phone’s status bar that indicated a download of some sort. I dragged the notification bar down to find that the white paper had arrived. Here we go, I thought. And this is the unfortunate result:

image: Ripon-whitepaper-on-mobile-phone

This is page 2 of the .pdf and there was no way I was going to pinch-zoom and side-scroll in order to read this thing. It was a nicely designed document but completely unreadable using a mobile phone.

FAIL.

************************

What could have saved this campaign?

There are two approaches to saving this lead-gen campaign when it comes to engaging people on their mobile phones (tablets, too, I suppose but does anyone scan 2D codes using their iPad??):

1) Shorten the form, reformat the .pdf   I understand that the sales team wants as much data on a prospect as possible but re-purposing your regular web form is the kiss of death for mobile. The form should simply ask for an email address and perhaps a name. Then, the downloaded .pdf should be one that was designed for reading on a mobile device with a single column, minimal graphics and large fonts. Lastly, make the web form give an indication that the download had started.

2) Change the channel to email   Mobile is a great way to capture impulse. In this case the web form could say something like, “Thanks for your interest in Ripon’s mobile expertise. We know you’re busy so just enter your email address and our white paper will be waiting for you in your email inbox.” There’s nothing urgent about reading the white paper. The key is to make it really easy to express that initial interest.

In either approach Ripon would at least have an email address they can use to follow-up and they would distribute many more copies of their white paper.

GoWallet Forgets That It’s A Mobile App

I was standing in line at the grocery store the other day, loyalty card in-hand, when I saw an image of a mobile phone on a nearby display. On it was printed, “Access Your Gift Cards – anytime, anywhere” (I’m really tired of companies who have anything at all to do with mobile using ‘anytime, anywhere’. In this case, there’s a picture of a mobile phone. I get it.) Then there was a picture of a phone with a few logos on the screen such as Best Buy and Safeway (the store in which I was standing). At first I thought it was suggesting I could load my Safeway card onto the phone, probably because I was actually holding my card.

image: MobileMarketingFail.com GoWallet Display

I was going to try it (or at least get the app – I didn’t have any gift cards at the time) and impulsively reached for my phone to scan the QR code. But in a brief moment of disbelief that quickly turned into disappointment I found no code to scan.  There was a URL for gowallet.com but it was my turn in line and I had to pay for my things.  I had enough time to scan a code and that was it.

FAIL

After checking out I looked for an empty check-out isle and found the same sign. I opened the browser on my phone and tapped in gowallet.com. After several seconds and a bit of forced patience (is it that hard to make a mobile site that loads fast?) I was offered the following on my screen:

image: mobilemarketingfail.com GoWallet site

 

Eh? This can’t be happening. This is a full web site! What am I supposed to do with this? Arrrgh..

FAIL

******************************

What could have saved this experience/campaign?

This multi-level fail needs a lot of work to make it a good mobile experience. It’s surprising that a service that has mobile at its heart is so un-friendly to the mobile user. Let’s start at the top.

1) Call-to-Action – Even with the questions about the long-term viability of QR codes this would have been the place to have one.  For those who know what to do with a QR code it is simply the fastest way to create a connection with the mobile user.  Just putting the URL is not enough. Opening a browser and tapping in URL - even a relatively simple one - is not as fast as scanning a 2D barcode.

2) Mobile Web – The GoWallet web site, whether someone tapped or scanned to get there,  MUST be made mobile-friendly. If for some reason the site can’t be made friendly at least create a landing page that briefly describes the service and allows the mobile user to easily show some initial interest (no-one will complete registration from their phone) by entering their email address or linking to a download of the mobile app.

3) Promote the App – Using basic device detection it is relatively simple to re-direct mobile phones to the mobile app in the appropriate app store. Then, tell them more about the app and the overall service once they are there and only one tap away from a download. Don’t make mobile users read a detailed web site and then hunt around for the link to get the app. Take them to the app, get them to download and walk them through the process.

******************************

5th Avenue Theater’s Mobile Site Fail

This is a guest post from Kim Sklar, a student in the University of Washington’s Masters in Communication in Digial Media (MCDM) program. Here original post can be found here. She recently attempted to use the mobile site of Seattle’s 5th Avenue Theater.

*************************

 disclaimer: I only say these things as helpful suggestions and observations because I love the 5th Avenue Theatre…Broadway gods please don’t smite me or take away my season tickets discounts for the criticisms I am about to make. Love, Seat 4D).

Big fan of musical theatre here (did I mention that yet?)…not a big fan of the 5th Avenue’s total lack of mobile savoir faire. Here is a comparison of their regular web site and the mobile web site.

5th Ave's regular web site vs. mobile site

As far as I can tell, the only differences are:

    • the layout
    • there are now three navigation boxes to choose from, instead of six
    • any of the buttons I might have clicked on before (buying tickets for an upcoming show, renewing subscriptions, subscriber benefits) are now gone. Only donate, summer program discounts and info for one show remain…only one of those I’d need from my mobile phone.

Maybe they used a auto-mobile convertor? The real mobil-emma (mobile+dilemma, wait for it, it’s gonna catch on) is that neither set of navigation areas actually direct me to where, as a subscriber, I need to go.  The site takes nearly a minute for all the pictures to load, and the menu button (which is most likely the button that you’ll need to use) is about 3 pixels wide and shoved in the upper left corner of the screen where you can’t actually tap it very easily. I know that season ticket holders are not the only business, however, I do feel like they are the one that would be the main mobile users.

Le sigh. This is a organization that could really benefit for a mobile site redesign.

As a subscriber who often accesses the 5th Avenue’s site at least one a month, I would love to see the mobile platform focus on:

  • Directions, contact info and
  • Parking information (the 5th offeres free parking to season ticket holders, but I can never find out which garages are participating)
  • Show information (dates, start time, cast, description, etc. I’m not looking for HD picture slideshows on my phone).
  • Subscriber perks (restaurant discounts, special events, renewal information)

*************************************************

What could have saved this campaign?

Well, Kim is right. The 5th Avenue Theater needs a separate mobile site. Their full site contains too many rich graphics for mobile and the content of the full site is not organized around the needs of the mobile theater goer. The theater needs to understand who their mobile customers are and define the experience they want to provide.

It appears their site is attempting a form of ‘responsive design’ or ‘graceful degradation’ – techniques used to alter the way a web site displays based on the device/browser that is accessing the site. Typically, however, these approaches use the same web content (images, copy, etc.) and just use style sheets to change the way the content is displayed by hiding certain things and changing their location on the screen. From purely a display standpoint this can work but it is nearly impossible to use these techniques to affect the  changes in IA (information architecture), content quality and UI (user interface) required for a good mobile user experience.

The 5th Avenue Theater needs a separate mobile web site.

The Bellevue Collection App Promotion Fail

I was recently at the Hyatt Hotel in Bellevue, WA and noticed the following sign as I walked through one of the many passageways and bridges that connect the hotel to the broader shopping experience that defines this shiny, affluent city.

image: Bellevue Collection Sign

It was the image of a mobile phone that caught my eye. (Side note: I feel like the iPhone is the ONLY phone image ever used in promotional materials. I can’t remember ever seeing an Android phone. Ever.) In fact, I actually had my phone in my hand – like a lot of people – and was preparing to try the Personal Concierge app that they were promoting.  Take a closer look at the picture. See if you can figure out how to get the app…..Waiting….

FAIL.

The sign has roughly two messages: one for Belle’s Vue, the fashionista blogger and the other for the mobile app. I see no clear path to downloading the app but there is a URL for the blog, thebellevuecollection.com/bellesvue. Determined, now, to see just how hard it is going to be to get this app I open the browser on my phone and tap in the not-so-short url. Here’s what I got:

image: Bellevue Collection Blog

Hmm. It’s a blog alright but it sure wasn’t meant for a mobile phone. I was using WiFi and not the mobile data network, fortunately, as the images are pretty high-quality. The links and navigation are far too tiny to tap on. I see nothing about the mobile app.

FAIL.

***************************************************

What could have saved this campaign?

The problems embodied by this campaign really speak to the complexities of mobile as well as the inexperience most marketers have with the medium.

To address the complexity issue there’s no easy way for people to get the app in this case. Even if a QR code had been used – and one should have – it wouldn’t have gone to a site with the smarts to detect the device and re-route the person to the appropriate app market; that would be a sort of mobile nirvana. At best it might have pointed to a simple mobile landing page where the user could self-select their mobile phone type. But that would require building a mobile page, which adds complexity. At worst – and this is where inexperience shows – The Bellevue Collection could have made sure their desktop web page that promotes their app was at least serviceable (it isn’t) for someone dedicated to downloading the app and just point the QR code there. As is, the marketers at the Bellevue collection are relying on people to proactively go to their respective app market, search for the app, and download it. It won’t happen.

In addition to the missing mobile call-to-action there is nowhere on the blog that offers the app. (We’ll ignore the fact that the blog is not mobile-friendly) This is a case of not recognizing the mobile user. The Bellevue Collection is offering a mobile app but has presented only one clear option to anyone who is interested, a link to the blog. The mobile app should be prominently promoted on the blog.

A URL is being promoted to people who are walking by; they are mobile. Do they think someone will write down the url? On what? Well, probably their mobile phone, right? And maybe right into the browser for a quick check to see what’s there.

HenryGill’s QR Fails In The Wild Blue Yonder

Not long ago I was flying. Well, actually, I was sitting while the Frontier Airlines pilot was flying. And as we sailed along I had the opportunity to check out the seat pocket in front of me as a way of killing some time without having to work. I pulled out the May edition of Wild Blue Yonder, the in-flight magazine for this little airline.  The cover promised information about Colorado, which happened to be my destination. Nice.

Thumbing through the short articles (did you know Frontier Airlines will accept bicycles as regular checked baggage?) I came across an article on The New Mobile Office. Butimage: HenryGill QR chaos ad before I started to read I noticed the full-page ad on the opposite page. “Turn chaos into a quick response,” it shouted in all caps. Above those words, and taking up almost half the ad was a cleverly designed QR code. Each ‘pixel’ was made up of some type of media device. There were TVs, boomboxes, newspaper receptacles (more of a media receiving device, I guess) and billboards.

Notably, all the ‘devices’ were decidedly old-school but wrapped into a new media interaction technique. A technique that required me to use my mobile phone, which was powered off as is customary and required during air travel.

How was I supposed to scan a QR code while 30,000 feet above the ground? Even if my phone were on (and in ‘airplane’ mode) how would I possibly connect to whatever destination the QR would take me? Sigh.

FAIL.

I put the magazine in my briefcase. I intended to scan the code when I got on the ground.

[Update] Since the in-flight fail two things have happened.

  1. I scanned the code a day or two later when I returned to the office and emptied my briefcase. The scan directed my phone to the decidedly non mobile-friendly HenryGill web site. Fail #2.
  2. Re-scanning the code for this blog entry resulted in, well, nothing. I couldn’t get any of my many scanners to recognize the QR.  Fail #3.

*****************************************************************************

What could have saved this campaign?

Here’s what I think happened. HenryGill’s designers created what they thought was a clever ad as part of their print media campaign. Then they handed it over to the media buyers who purchased space in Wild Blue Yonder and probably – well, hopefully –  several other magazines. Media buyers aren’t there to question the ad design and they aren’t used to thinking about context in which an ad will be read – or rather, interacted with. This is where they were set up for the initial fail. HenryGill as an agency just isn’t up-to-speen with mobile across their various departments. Specifically, the media buyers didn’t realize that the design was a QR code that was meant to be scanned by a mobile phone connected to the Internet.

The second fail was something all too common, a non-mobile web site; the remedy for which should be obvious. Companies need to stop pointing their QR codes at their regular web site. It’s an automatic fail from a user experience perspective.

The third fail is something new! It’s a problem with the design. The images they used as ‘pixels’ for the QR code aren’t a solid color and there isn’t enough contrast between the little images and the white background of the page. Without enough contrast QR scanners can’t read it. The ink used for print has faded just enough in 4 months as to make the code un-readable.