“User-Centric Approach to Multi-Device Cross Platform Mobile

Solutions”

Information Worker SolutionsAt the forefront of facilitating productive, secure communication and collaboration throughout enterprise.

Architecture & DevelopmentA regional leader in the technology community since the pre-beta bits of .NET 1.0 were released.

Mobility SolutionsAssists organizations to visualize, create, and/or execute a mobility strategy.

User ExperienceEngages all aspects of the customer’s interaction with your brand, company, and products and services.

Advanced InfrastructureHelping companies migrate, upgrade, and grow their network capabilities leveraging Microsoft technologies.

Connected SystemsWe help our clients connect discrete systems to make business operations and partner interactions more agile

Business IntelligenceOur Business Intelligence team helps you gain insight into your data.  Our team offers skills that span the range of the BI landscape, from Self-Service BI to Enterprise BI to Big Data.  

Dynamics SolutionsWe specialize in delivering solutions that centralize your customer touch points. A “Customer Hub“ that is mobile ready and cloud enabled.

BENNETT ADELSON

Experience team of consultants that lead projects from analysis and

design through execution and development.

PRESENTERS

Wendy Trem, Practice Director – UX Experience: Wendy possesses over 16 years of corporate and agency experience in creative and user-centric based solutions. She works closely with clients to map out digital strategies, identify user needs and application pain-points and ensures each project is delivered with ultimate client and user satisfaction.

She works collaboratively and manages creative teams comprised of: creative directors, user experience designers, art directors, developers, project managers and copywriters. Wendy leads digital projects from initial creative conception through final production and delivery on a number of high-profile consumer-focused and business-to-business projects.

Wendy’s client list includes: Nestle, Humana Medicare, Troy-Bilt, Speedway, Fisher-Price, MTD Products, Cleveland Clinic, Invacare, Swagelok, Proctor & Gamble and The Discovery Channel.

Mark Kramer, Senior Consultant – Mobile Practice: Mark is a member of the Bennett Adelson Enterprise Mobility team and has 12 years of solution architecture, system implementation, system integration, and software development experience.  Mark also has several years of experience in designing, developing, and implementing innovative mobile solutions.  Most recently, Mark has been exploring new tools for developing cross-platform mobile solutions.

INTRODUCTION

Over 60% of internet access is accounted for through the use of mobile devices. In order to be successful mobile marketers in 2014, companies and big brands must stay ahead of the curve by delivering content in concise and seamless mobile experiences. With a sea of frameworks, platforms and technologies at our disposal, as designers, technologists and developers, it is critical to understand which of these tools may limit the design process and impact the overall user experience. In this session, we will review a user-centric mindset to mobile solution design and how to deliver best-in-class user experience by matching user needs and limitations to business goals and objectives. We will demonstrate how user experience and development teams collaborate to design and build a mobile app that meets the requirements for cross-platform, multi-device deployment (including Windows Phone and Store apps). We will discuss the process of selecting the tools and the setup for building a hybrid mobile application.

MOBILE STATISTICS

• 67% of consumers say they are more likely to purchase from a mobile-friendly website than they are from a website not optimized for devices other than desktop.

• 4 out 5 consumers use smart phones to shop

• 75% of Americans admit to bringing their phone to the bathroom.

• 52% of Americans user their devices while browsing in-store in order to research the product online

• 70% of mobile searches lead to online action within an hour.

• 57% of users will not recommend companies with poor mobile sites.

USER NEEDS DRIVE TECHNOLOGY SET

Our approach to mobile design is very user centric and collaborative. We work closely with our clients to determine the following:

• What are the business goals and objectives of the app?

• What is the industry landscape (competitive research and analysis)? What are their competitors doing, what’s working and what’s not?

• Who will be using the app? We clearly define user demographics and user limitations.

o Age groupo Level of technical aptitudeo Environmental factorso Physical limitations

• Are there specific limitations or inefficiencies that could impact the overall design or layout?

• What are the project requirements?

• What are your technology requirements and limitations?

THE VALUE OF A UX DESIGNER

The Bigger Picture Connections: The Visual UX Designer will ensure that they are designing with the end user in mind. They will be able to translate this to the developer discuss to ensure that the interactions work correctly and can be implemented in the way that they were envisioned

Operating Systems: UX Designers are well versed in the standards of the operating system they are designing for. They will know the differences between feature styles, buttons and menu designs native to each mobile device.

Overall Application Flow: The overall flow of the application will be more seamless and streamlined from action to action.

“With any great TV series comes great production. The sets need to be perfected and the actors flowing through the scenes without error, ensuring that the viewer feels that they are right there, sharing the experience with them. The same situation needs to happen when providing a user with a great experience in their application. The interface should be polished and pleasing to the eye, and the architecture should allow a user to flow through the app without even needing to think about what it is they should do next”. -Jessica Seiler, Solstice Mobile

THE VALUE OF UX DESIGN

Color schemes: the ability to think through colors that will work together as a cohesive unit. As well as the ability to work with a client’s existing brand standards.

Icons: designing custom icons to represent the correcttopic or idea and ensuring the style matches the rest of the iconography.

Visual Hierarchy: the organization and prioritization of content as a means to communicate a message. Prioritizing content in the correct order in which a user would naturally consume information.

Responsive Design: understanding how the content and imagery will fit, flow and look on the page by considering the correct break points. Best practice states to design for mobile first, so it can be determined what content is the most important for the user.

THE VALUE OF UX DESIGN

Navigation: choosing the correctmobile navigation structure that will best accommodate the content and how it needs to be organized.

Layout: creating a consistent look and feel by using the same visual elements, structural grids, and general spacing rules across platforms and screen sizes. As well as creating structural and visual consistency creates an environment for the user that is recognizable across products, which facilitates usage by providing users with a high level of familiarity and comfort.

Buttons: designing buttons that are in the correct device format and ensuring that they visually work within the overall design.

THE VALUE OF UX DESIGN

What happens when we leave design up to the developer?

TYPES OF MOBILE APPSNative Apps:

• Live on the device and are accessed through the icons on the device home screen• Installed through an application store (Apple Store or Google Play)• Developed specifically for one platform• Can take full advantage of all device features • They can incorporate gestures• Can work offline, they do not need a wireless connection

Mobile Web Apps:

• Are not real applications; they are websites that look and feel like native applications• They run by a browser and are typically written in HTML5• User has the ability of “installing” them on their screen by creating a bookmark to that page• Development costs are typically cheaper with mobile apps and the maintenance is lower

Hybrid Apps:

• Part native and part web apps and they can live in app stores• Allow for cross-platform development (which can lower development costs)• Take advantage of many device features• Rely on HTML being rendered in a browser, with caveat that the browser is embedded

within the app• Can be leveraged as a “wrapper” for an existing website, which the ability to still get

presence in the app store.

HOW TO CHOSE THE RIGHT APP

Native:• Existing Native Skills• Single Mobile OS• Native functionality• Rich/Native UI Requirements• Access to Latest Features

Web:• Direct Distribution• Pilot Application(s)• High Visibility• In-house skills

Hybrid:• Deploy to Multiple Mobile OS• In-house skills• Some Device Features Required

• GPS, Compass, Camera• Prefer Common User Experience• Performance is not a key factor

HOW TO CHOSE THE RIGHT APP

NATIVE VS. HYBRID VS. MOBILE

criteria NATIVE APPS MOBILE WEB HYBRID APPS

Device Features 3 1 2

Offline Functioning 3 .5 1

Discoverability 1 3 2

Speed 3 1 2

Installation 1 1.5 1

Maintenance 1 3 2

Platform Independence 1 3 2

Content Restrictions 1 3 2

Development Costs 1 3 2

User Interface 3 2 2

1 = Good 2 = Better 3 = Best

Score Care: Good, Better, Best Methodology

MOBILE APP

• Are not real applications; they are websites that look and feel like native applications.

• They run by a browser and are typically written in HTML5.

• User has the ability of “installing” them on their screen by creating a bookmark to that page.

• Development costs are typically cheaper with mobile apps and the maintenance is lower.

HYBRID APP

• Part native and part web apps and they can live in app stores.

• Allow for cross-platform development (which can lower development costs).

• Take advantage of many device features.

• Rely on HTML being rendered in a browser, with caveat that the browser is embedded within the app.

• Can be leveraged as a “wrapper” for an existing website, which the ability to still get presence in the app store.

NATIVE APP

• Live on the device and are accessed through the icons on the device home screen.

• Installed through an application store (Apple Store or Google Play).

• Developed specifically for one platform.

• Can take full advantage of all device features.

• They can incorporate gestures.

• Can work offline, they do not need a wireless connection

FRAMEWORKS

• Sencha Touch

• JQuery Mobile

• Angular JS

• Kendo UI

• Backbone

• Twitter Bootstrap

• Etc…

TOOLS

SELECTING A SET OF TOOLS

• Cost

• IDE Preference

• Language

• UI Abstraction (Use of Native UI Components)

• Build Environment

• Proprietary Technology?

Developer Economics 2013 report:

Developers most often use several cross-platform tools; on average CPT developers will use 1.91 CPTs, confirming the lack of maturity and niche nature of cross platform tools much like we observed in our dedicated CPT survey just over a year ago. Moreover, we found that one in four developers will use more than three cross platform tools.

HYBRID APP DEVELOPMENT

Best Practices:• Minimize Code• Avoid Inline Styling!• Minimize Use of Third Party Plugins• Use A Framework• Become Familiar with Platform/OS Requirements

• Asset size/format• Required elements

• E.g. - App Certification Requirements for the Windows Store

Helpful Tools for Testing:• Chrome Inspect – Remote Android Debugging • Chrome Mobile Device Emulation• GenyMotion Emulator• iOS Simulator• Safari

HYBRID APP PACKAGING & DEPLOYMENT

Android:• Requires a signing certificate

• Follow instructions at http://developer.android.com/tools/publishing/app-signing.html

• Requires a valid Google Play Account for deployment to the Play Store

iOS:• Requires a valid iOS Developer Account• Need to Create a Provisioning Profile at the Apple Developer Site• Requires a Mac for Building the Application

Windows Store App:• Use Visual Studio to package and distribute• Requires a Valid Developer Account

Windows Phone:• Upload Packaged XAP File to Windows Dev Center

DEMO

WHAT HAVE WE LEARNED?

By including UX Design in to the development process it allows for:

• A better overall user experience; navigation, style, visual design and layout and content hierarchy.

• It increases overall user engagement (downloads).

• Increase brand confidence.

• From a development standpoint it increases clarity around requirements.

• It allows for the developer to focus on the things they are good at – LOGIC!

QUESTIONS?

QUESTIONS?