role of ux in a mobile first approach @ nextstep americas 2014

www.outsystems.com

The Role of UX in Mobile First

Gonçalo Veiga Mobile & UX Services goncalo.veiga@outsystems.com

Going Mobile First

Mobile First

1. Growth = Opportunity 2. Constraints = Focus 3. Capabilities = Innovation

Luke Wroblewski

The World is going Mobile

378,000 iPhones sold each day

360,000 babies born each day

2012

378,000 iPhones sold each day

360,000 babies born each day

2014

3,000,000 iPhone 6 sold each day

371,000 babies born each day

2014

What’s the first thing you do when you wake up?

25% go to

bathroom

75% check

smartphone

1. Mobile is now part of everyone’s lives

Does Mobile First apply to Enterprise Applications?

Enterprise Users are confortable with complexity

The rise of bring your own device (BYOD) programs is the single most radical shift in the economics of client

computing for business since PCs invaded the workplace.

Gartner 2014

http://vbridges.com/2013/12/20/byod-skyrockets-popularity-2013-stats-prove/

49% of U.S. IT managers “Strongly Agree that BYOD Improves Worker Productivity”

Intel and ReadWrite

http://vbridges.com/2013/12/20/byod-skyrockets-popularity-2013-stats-prove/

Will the desktop die?

Mobile will be everywhere and everyone will have a device.

Desktops will still be here, but only for heavy-duty work.

70% of mobile professionals will conduct their work on personal smart devices by 2018

Gartner

https://www.sailpoint.com/blog/2013/05/byod/

2. The Enterprise will need to cater to both desktops and devices

What are the opportunities for Mobile inside the Enterprise?

Going Mobile

1

Collect information as it appears, taking advantage of new sensors 2

Access relevant information where it is most valuable

3 Put it wherever customers are involved

Runway tarmac inspection

Hospital ward backoffice

Information decays through the nurse shift

How to put Enterprise Applications in Mobile?

Mobile Challenge

Text must remain readable

Fat fingers need big targets

Zoom kills productivity

By going smaller, things must get bigger

Responsive Design

Choose the right use cases!

Go to Mobile Version

Go to Normal Website

Too simplistic!!

Positive results

Negative results

No results

33%

Based on experiments at Microsoft, both intuition and expert opinion are extremely poor gauges of the value our ideas deliver to users.

Lean Enterprise (2014)

Law of Unintended Consequences

3. Creating a good mobile experience is challenging

How to create a winning mobile approach?

Is it enough to create a pretty interface?

What is usability?

usab

ility

laye

rs

Ubiquitous Pro-active use of various mediums

Task-Focus Fit to user and its specific tasks

Cognitive Leverage conventions and learning

Physiological Respond to how the brain works

usab

ility

laye

rs

Ubiquitous Pro-active use of various mediums

Task-Focus Fit to user and its specific tasks

Cognitive Leverage of conventions and learning

Physiological Respond to how the brain works

Constrast Repetition Alignment Proximity

usab

ility

laye

rs

Ubiquitous Pro-active use of various mediums

Task-Focus Fit to user and its specific tasks

Cognitive Leverage conventions and learning

Physiological Respond to how the brain works

www.outsystems.com/goto/londontheme

usab

ility

laye

rs

business and user context independent

highly dependent on business and user context

usab

ility

laye

rs

Ubiquitous Pro-active use of various mediums

Task-Focus Fit to user and its specific tasks

Cognitive Leverage of conventions and learning

Physiological Respond to how the brain works

Usability means different things for different users

Informal Usability Tests

usab

ility

laye

rs

Ubiquitous Pro-active use of various mediums

Task-Focus Fit to user and its specific tasks

Cognitive Leverage of conventions and learning

Physiological Respond to how the brain works

Learning Applications Pro-active

Context-aware

usab

ility

laye

rs

highly dependent on business and user context

UX design

4. Great experiences depend on both platform and process

UX design

Bus

ines

s A

naly

sis

Use

r Res

earc

h

Wire

fram

es

Visu

al D

esig

n

Live

Sty

legu

ide

Go

Live

Define clear goals

Understand the business Interview main stakeholders

Review current application(s) Get application analytics

Figure out the different user profiles Identify what to ask the users

Bus

ines

s A

naly

sis

Let’s meet the users

Bus

ines

s A

naly

sis

Use

r Res

earc

h

User Technology

The car alone will not win any competitions without a great fit with its driver

Use

r Res

earc

h

Go to where your users are U

ser R

esea

rch

Use

r Res

earc

h Planning

Identify the different user profiles Talk, at least, to 2 users for each profile

Dress apropriately – blend in Don’t take a comitee – 2 people, max 3 Bring someone they already trust Go analog – digital is scary

Use

r Res

earc

h What To Do

Create rapport

Compliments and Complaints Where do they spend their time Known Unknowns vs. Unknown Unknowns

3 things we must fix 3 things we cannot break

Gather, organize, prioritize

Fail fast or fail loudly

Bus

ines

s A

naly

sis

Use

r Res

earc

h

Wire

fram

es

Don’t let ideas escape

Rich context makes it a ton easier Information organization is key

Keep sketching IA comes hand-in-hand with mockups Challenge designs continuously W

irefra

mes

Wire

fram

es

Wire

fram

es

Wire

fram

es

Bus

ines

s A

naly

sis

Use

r Res

earc

h

Wire

fram

es

Visu

al D

esig

n

Visu

al D

esig

n

Visu

al D

esig

n

Visu

al D

esig

n

Visu

al D

esig

n

Bus

ines

s A

naly

sis

Use

r Res

earc

h

Wire

fram

es

Visu

al D

esig

n

Live

Sty

legu

ide

Why a Live Styleguide?

Styleguides are key for consistency and quality perception … but also easily forgotten.

Live Styleguides support development, by providing snippets of code.

Living Styleguides contain ready-to-use components by development, abstracting implementation details.

Live

Sty

legu

ide

OutSystems Living Styleguide

Web blocks ready to use by developers not copy-paste, just drag-and-drop …

Live

Sty

legu

ide

Bus

ines

s A

naly

sis

Use

r Res

earc

h

Wire

fram

es

Visu

al D

esig

n

Live

Sty

legu

ide

Go

Live

Keep it real

Keep testing with real users Identify user difficulties

Prepare users for what’s coming Understand rampup needed for users Teasers and Presentation Videos

Controlled rollout with a BETA version

Go

Live

www.outsystems.com/ux-for-it/

5. Implementation of a UX design process is key for a successful application

1. Mobile is now part of everyone’s lives

2. The Enterprise will need to cater to both desktops and devices

3. Creating a good mobile experience is challenging

4. Great experiences depend on both platform and process

5. Implementation of a UX design process is key for a successful application

Gonçalo Veiga Mobile & UX Services goncalo.veiga@outsystems.com

Thanks

EMPTY