Omega Mobile: Mobile Experience Design Blog
We’re Passionate about Mobile User Interfaces, Experiences, Interactivity, and more!

Archive for Resources

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.

This is the first in a series of excerpts from our white paper on How to Create Successful Mobile Apps: Strategies and Tactics for Brands, Advertisers, Agencies, & Marketers.

create successful mobile apps How to Create Successful Mobile Apps White Paper Excerpt #1

Mobile Apps Enable Richer Consumer and Brand Interactions

About Mobile Apps

Similar to software installed on a desktop computer, Mobile apps are software that is stored and run on a mobile device. This allows the software to take advantage of the capabilities provided by the mobile device it runs on. From consumers’ standpoints, apps offer instant gratification. They see an icon for an application directly on their mobile device. When they select that icon, the application loads immediately and is ready for their use.

People carry their smartphones everywhere they go.

Mobile Apps Offer Limitless Communication Possibilities

Mobile apps offer almost unlimited capabilities. As long as your targeted handsets support it, you can deliver virtually anything. This benefit, along with mobile’s highly personal nature, renders it a critical tool for marketers. People carry their smartphones everywhere they go. GPS capabilities further facilitate interaction between your message and the viewer.

Plus, when you send your messages, smartphones also allow consumers to respond immediately through a simple button press. When they press it, behavioral profiles and analytics are delivered to your company.

Below we’ve included some examples of content you can deliver to your mobile apps users from app installation to follow up.

Stay Top of Mind with Messaging

Keep consumers tuned to your brand by inserting standard messages, photos, graphics or videos within the app, then updating them with new information whenever you wish. Note that sending messages at regular intervals is more important than the number of messages you send. In fact, too many messages may turn off mobile app users. So always consider why you’re sending a message and its value to the receiver.

Engage Users with Offers

Exciting new offers keep app users engaged, causing them to return to your app more frequently to check out the latest promotions from your brand. You don’t always have to offer substantial product discounts to attract users. Just send them on a regular basis and make them fun and engaging.

Drive Purchasing with Coupons

Most people enjoy receiving discount coupons to purchase products or services. You might even try a theme. For example during holidays or special events, consider sending a coupon related to that theme. If you’re an athletic shoe company, you might send promotions tied to large athletic events. If you’re a toy store chain, you might ramp up your coupons during the holidays. Having a reason for sending the coupon makes it much more relevant to the consumer.

Enhance Messaging with Videos

Everyone likes viewing videos. You can use them to better explain products, services, almost anything. The key is to keep your videos concise and only send quality videos to your app users. In our age of YouTube and smartphones with built-in high-resolution cameras, app users expect and recognize quality.

Today’s media-oriented consumers are accustomed to having instant access to rich media.

Use High-End Graphics to Maximize Your Brand Image

Appropriate graphics are particularly adept at quickly and effectively communicating a brand’s image. However, if you want your mobile apps to positively reflect upon your brand and/or match existing campaigns, quality graphics are critical. They need to match the sophistication consumers have come to expect from you and your branding. You can incorporate any graphics you like, including animated ones that complement text and other content.

Mobile apps allow you to develop highly customized, rich media experiences that engage mobile users.

Excerpts from this white paper are being published on Omega Mobile’s Mobile Experience Design & Strategy Blog.

You can download a full copy of the white paper here:
How to Create Successful Mobile Apps White Paper – Strategies and Tactics for Brands, Advertisers, Agencies, & Marketers

I’m presenting a webinar this Wednesday September 29th at 10 am Pacific on Mobile Marketing with Apps. It’ll be with the Direct Marketing Association of Northern California.Mobile Marketing with Apps Webinar

The webinar is oriented towards marketers and advertisers and covers the following topics:

  • Benefits of mobile apps
  • Technical capabilities
  • Viral and marketing capabilities
  • Recommended Features
  • Tips & Strategy

The following direct marketing best practices will be shown how to apply to apps:

  • Showcase Products
  • Lead Capture
  • Testing Offers
  • Harvesting Demographics
  • Viral
  • Spreading Info to Social Networks
  • Managing Communication
  • Loyalty Programs
  • App Stickiness

The cost is $15 and you can register here.

Mobile user interface designs need to be user and client friendly. The best way to keep this a top priority is to be able to easily present and adjust the design throughout the creation process. One difficult hurdle is not having access to a devise or designing for hardware that isn’t complete. When we’re working on a new mobile user interface design without access to hardware, there are a few things that make the process run smoothly and ensure our success. One key step is printing variations of what we’re doing on photo paper. 

Design Tip Photo Paper

We print out designs on glossy photo paper to mimic the look of the screen and to see our design with pixel-level detail. Spending time on the details in the beginning of a job is paramount in designing a successful mobile user interface.

Viewing an image of a mobile device on a computer screen doesn’t give an accurate representation of the finished mobile user interface design. The pixel density (pixels per inch) are much higher on a mobile device. When we don’t have access to hardware, our solution is to design the mobile user interface at real size in terms of pixels on a computer and then scale it down and print on photo paper at the real size the screen will be on the hardware. This gives us the real size that an image will be on a mobile device.

Using this method we can see if the layout and fonts work. It’s critical to determine if the user interface will be functional with big enough fonts and clear user interface elements.

This is also very handy when we’re designing for touchscreen mobile user interfaces as spacing is another issue that is distorted on a large computer monitor but solved by printing out. We can test to see if any user interface elements overlap and see if we need to adjust them for the mobile device.

Printing out our design also makes it possible to present our mobile user interface concepts to our client to give them a more accurate feel for the design. It also helps them in their presentations (remember the missing hardware…) We’ve seen our photos used in the past presented on plastic model prototypes. It was cool to see as people would dissect the interface and analyze it as if it was digital.

I’d love to hear any other User Interface Design challenges you face and you solve the problem.

When designing mobile user interfaces, we always face the design challenge of pixel density on a mobile device. What you see on a computer screen is usually larger than what you will see on a mobile device and sometimes we don’t have access to the target device we are designing for.

Mobile UI Design Tip Pixel Density

There are a few ways to address this and make sure that a mobile user interface design is appropriate when smaller. One solution is simply shrink it down to the exact size of the mobile device we are targeting. This is fine to determine if the general layout works. However, it doesn’t work well with fonts as the text can get distorted and then you can’t determine whether you’ve chosen a good font size.

Many graphics applications (Photoshop, Flash and Illustrator to name a few) allow simultaneous views of the same visual document. This is an extremely helpful tool when designing mobile user interfaces.

In the above screenshot, two views of the same document are shown. The one on the left is at 100% and the one on the right has been reduced to match the exact size of the mobile device screen we’re targeting for this user interface. We can make any changes to the image on the left and manipulate the view in any way we want while keeping the right view open to see how our user interface will look on our target mobile device. To do this in Photoshop, with a document open, select WINDOW>ARRANGE>NEW WINDOW FOR…

Another way we use dual screenshots is to make sure the user interface controls for a touch screen UI are spaced correctly. We simply touch the design that has been sized on the monitor to match the mobile device to determine if the user interface elements are far enough apart.

The Mac has a tool we like called Screen Shrink that allows us to literally shrink a screen so we can see what part of it may look like on a mobile device. This also works well when you see an inspiring design on the web and wonder if it could work well at a smaller size.