March 2015

Mobile Usability & Design

Lochbridge Digital & User Experience Studio

With over 30+ years of collective UX/UI experience the team has created designs for many of the most respected organizations in the country including GM, Ford, ESPN, Disney, OnStar, VW of America, American Greetings, NetJets, The Henry Ford Museum, Dole Fresh Fruit and many more. Each role in the department plays a key part in this creative process

From Start to Finish UX/UI Best Practices | Involving Developers Closely Knowing Research and Trends | Seeing Projects Through

"Mobile app design is often overlooked in the development process, but companies are finding

that most mobile apps fail because of lack of user adoption caused by poor design and

experience," said Kony Executive Vice President and CMO Dave Shirk

Of users will switch to a competitor’s app after a

negative experience

34%

Of users won’t recommend a business with a poorly

designed app

57%

The Cost of a Negative Experience

8 iOS releases 12 major Android releases

Wearable Technology

78%

2.9x

303%

Higher Resolution Screens

Increase in Screen Size

Larger Processors

2008 HTC

Dream

2014 Galaxy Note4

Wearable Technology

57%

2.5x

340%

Higher Resolution Screens

Increase in Screen Size

Larger Processors

2007 iPhone1

2014 iPhone 6+

Technology’s Changing Fast are you Keeping up?

iPhone 4 iPhone 6+

Stay Current. Stay Relevant. Stay Connected.

Original app designed on iOS 6 guideline standards.

Since app has been developed iPhones have increased in size by 58%.

iOS

Redesigned assets to fit guidelines for

current operating system and screen

dimensions

iOS

The Result iPhone

Stay Current. Stay Relevant. Stay Connected.

In the past, Android users often had to make do with

inconsistent or poorly designed apps.

Android 4.0

With Android 5.0, users will expect an experience in

line with the new Material Design language.

Android 5.0

The Result Android

The “Good” or Successful UX/UI

Put articles, videos or pretty much anything into Pocket. Save directly from your browser or from apps like Twitter, Flipboard, Pulse and Zite. Over 150 5 star ratings in the Apple store 2014 Webby Peoples Choice Award

The “bad” or a UI/UX Failure

Facebook Backlash “The avalanche of protests over the Facebook Messenger app has gathered pace and users are flocking to review pages to vent their fury. Over 140,000, or 73 percent of users gave the Facebook Messenger app a one star rating across Apple's App Store and Google Play” -CNBC "So now I have two apps on my phone to do the work of the one old app? Wonderful. I'd like to leave zero stars but it won't let me," one reviewer wrote on the Apples App Store review page.

Usability Quality Components

Errors: How many errors do users make, how severe are these errors, and how easily can they recover from the errors?

Satisfaction: How pleasant is it to use the design?

Learnability: How easy is it for users to accomplish basic tasks the first time they encounter the design?

Efficiency: Once users have learned the design, how quickly can they perform tasks?

Memorability: When users return to the design after a period of not using it, how easily can they re establish proficiency?

Understanding the users/needs of the current product/concept. Observe the layout and flow of existing software and make enhancement suggestions.

Is Mobile UX A Ranking Factor Now? Not yet.

“Google sees what users see, and if that is a bad mobile experience, it may impact your rankings”

Barry Schwartz on October 8, 2014 http://searchengineland.com/google-may-add-mobile-user-experience-ranking-algorithm-205382

What is UX?

• User Experience is users

• that occur before, during and after use of product, system or service.

emotions

beliefs

preferences

perceptions

physical and psychological responses

behaviors and

accomplishments

What is UX?

Research & Strategy

Interaction & Visual Design

Usability

Few techniques used: • Competitive Analysis

• Contextual Inquiries

• Focus Groups

• Interviews

• Questionnaire/Surveys

• Consultation/Recommenda

tions

Few techniques used:

• UX flow

• Wireframes

• Mockups

• Visual assets

Few techniques used: • Heuristic Evaluation • Usability Testing

UX Stand Alone Services

User research focuses on understanding user behavior. Based on the client’s business and objectives we can provide analysis and recommendations. Benefits: ● protects from designing product that is not useable ● removes assumptions from the design process ● cheaper if done at the beginning ● gets clarity within the team ● gets entire team to buy into the experience

Research & Strategy

• Interview / Contextual Inquiries • Persona

Research & Strategy

Visual and Interaction Design focuses on satisfying the specific goals of well-defined users, structuring visual elements and aligning tone with overall strategy. Benefits: • Present and review ideas early in development • Communicate design effectively across team

Interaction and Visual Design

19

Creative Approach

Flow Wireframes Mockups

We will work closely with clients to create a user friendly flow to increase customer satisfaction and decrease customer support demands.

Our design department will create wireframes which are a skeletal framework of your website. These are concentrating solely on the arrange of elements on your pages.

Before we begin to code your project our designers will provide you will full color mockups which will be a representation of your final project.

• UX Flows • Wireframes

SplashCreate New

Customer

Products

Existing

Customer Login

Shopping

Cart

Previous

P.O.

Client Info.

Scan From Catalog

CategoriesSub Categories

QTY

Product Info./

Selling Features

Add To Cart

Individual Product

Submit

Edit

Remove

Signature/ Name

Save PDF

Email

Thank You pageHom

e

Update Info

Contract

Terms

Alternate Product

Interaction and Visual Design

Usability is a quality attribute that assesses how easy user

interfaces are to use. The word "usability" also refers to

methods for improving ease-of-use during the design

process.

Heuristic Evaluation (HE) • Test products on usability/domain expert

• Deliverables: Testing scenario scripts, evaluation data

Usability Testing (UT) in

Designated or Portable Lab • Test products on real users

• Deliverables: Quantitative and Qualitative data collected

in the lab, analysis report.

Usability

• Heuristic Evaluation Example - Help Users Recover from Errors Report Example

Heuristic Evaluation Issue

Usability

Mobile Visioning

The use of animations and clickable prototypes are used to help you imagine what it could be like to use and interact with a possible app. We make sure to provide strong visuals to help businesses to imagine what an app could look like and help provide a clear image of future goals.

Imagine the future and utilize the creative application of technology while collaborating with our clients.

Seeing Projects Through till the end

Keeping up, think in versions, & always think of the end users

Keeping up

Keeping up

L o c a t i o n L o c a t i o n L o c a t i o n • Taking advantage of knowing where you are T h e E n d o f S ke u o m o r p h i s m • Looking at what style has to say about how up-to-

date you are H i d i n g M e n u s • Using real estate to it’s full potential S i m p l i c i t y • Creating a minimalist environment that

encourages ease of use and understanding

Tre n d s

Think in Versions

Thinking Responsive

• Responsive design is an approach aimed at crafting apps to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices.

• Targets the adoption of a mobile-first strategy.

• In Responsive Design we target Flexible content.

• Don’t sacrifice content for a new medium.

• Make it usable.

• Prevent (or at least minimize) similar problems in the future.

Approaching a Mobile Refresh

iPhone 4s iOS 6

Redesign assets to fit guidelines for current operating system and

screen dimensions

iPhone 6+ iOS 8

Endless Possibilities based on the business and users needs

Blake Almstead Blake.almstead@lochbridge.com