Designing beyond the screen

WELCOME#SoMITP

HANNES VAN DE VELDEProduct & Design Manager, In The Pocket

#SoMITP

DESIGNINGBEYONDTHE SCREEN

#SoMITP

Design is the new engineering.

It is.Is it? Isn’t it?

#SoMITP

We will have to get away from our screens.

WHAT’S ALL THAT FUSS ABOUT?

#SoMITP#SoMITP

#SoMITP#SoMITP#SoMITP

DOWNLOAD

ALL THE APPS

#SoMITP#SoMITP

#SoMITP

+ =

Potential customer Your product Happy customer

#SoMITP

We need an app to support our marketing campaign

We need a functional app, to be ahead of our

competitors

We need a better app than our competitors

We need mobile technology to support

our business

We need (mobile) technology to be at the

core of our business

#SoMITP

IoT

#SoMITP

#SoMITP

Thank you, computer.

AI

#SoMITP#SoMITP

AR & VR A whole new world

#SoMITP

“What no one is working on is the UI. Everyone is building these headsets but unless we have some way of interacting, it’ll be 360 degree cinema.”

~ John Underkoffler, UI visionary

http://thenextweb.com/media/2015/08/31/a-stark-future/

SUCCESSFULLY DESIGNING BEYOND THE SCREEN5 rules of thumb

#SoMITP

Design from the problem towards technology,not vice versa.

1.

#SoMITP

“I’m not so different from a teenager of 2015, I suppose, or any time in the last few decades. I want to hang out and chat with my friends, to be independent, to find my individuality and my place in the world, and to have the right clothes and gadgets to stand out, and fit in.”

~ a teenager in 2030

https://medium.com/ideo-stories/dear-iot-visionaries-8a9a35f616f8

UX UI

#SoMITPBased on: Golden Krishna, The Best Interface is No Interface

UX

peoplehappiness

problem solving

needs

empathy

delight

personalitysatisfaction

gratification

productivity

magicconvenience

efficiency

smiles

#SoMITPBased on: Golden Krishna, The Best Interface is No Interface

• UX is about people, not about screens or interfaces.

• Our job is to understand the everyday problems of people and use technology to solve them in the most elegant ways.

UI

menus

buttons

rounded corners

tab bars

alerts

input boxes

password fields

hover states

animations

swiping

colors

iconsgradients

carousels

banner ads

login fields

notifications

#SoMITPBased on: Golden Krishna, The Best Interface is No Interface

• UI is about screens and interfaces.

• Our job is to design usable and delightful interfaces, so people succeed in reaching their desired goals.

UX UI

menus

buttons

rounded corners

tab bars

alerts

input boxes

password fields

hover states

animations

swiping

colors

iconsgradients

carousels

banner ads

login fields

notifications

peoplehappiness

problem solving

needs

empathy

delight

personalitysatisfaction

gratification

productivity

magicconvenience

efficiency

smiles

#SoMITPBased on: Golden Krishna, The Best Interface is No Interface

#SoMITP

Designing from the problem:

• Solving problems as a goal, leveraging technology and interfaces as a solution

• UX vs. UI

• Building a team with the right people with the right responsibilities

#SoMITP

Work with clients and for users.

2.

#SoMITP#SoMITP#SoMITP

Discovery workshops

Designsessions

Demomoments

#SoMITP

Free our minds and users will follow

3.

#SoMITP#SoMITP

2.486You’ve got mail

Hi there, please log your calories for today

Hi there, please log your calories for today

BREAKING NEWS

A long forgotten high school friend invited you to play Candy Crush

You didn’t reach your fitnessgoal for today

People are interested inyou on Tinder

@somefriend mentioned you in a tweet

Another friend is nowlive on Periscope

We have 12 new stories for you to read

Your device storage is almost full. Please clear some space.

90% chance of rain in the coming 15mins.

#SoMITP#SoMITP#SoMITP1969, NASA moon mission preparation

#SoMITP#SoMITP#SoMITP1997, Deep Blue vs. Garry Kasparov

#SoMITP

Let computers do the hard work for us

#SoMITP

We’ll have to earn the trustof the people

#SoMITPHer, Spike Jonze, 2013

#SoMITP

Overcoming distrust:

• Onboard users, so they know what they can expect

• Explain the choices you make

• Allow people to make the system better, smarter and more personal

#SoMITP#SoMITPFacebook M

#SoMITP

We need to think about:

• What goes in: which triggers, sensors and data do we take into account.

• Processing: what are the rules to define the translation between input and output? Which choices do we make or prepare?

• What comes out: when do we push some information back to the user, and what does that interaction look like?

#SoMITP

Design moments.4.

#SoMITP#SoMITP

Food freshness

…

…

…Time Location

Movement

Weather

Fitness

Blood values

ZZZ

Sleep

Temperature

Heart rate

#SoMITP

#SoMITP#SoMITP#SoMITP

Clear Glanceable Actionable

#SoMITP#SoMITP#SoMITPhttps://www.kickstarter.com/projects/582920317/hidrateme-smart-water-bottle/

#SoMITP

Designing moments:

• Be contextually relevant

• Make your information clear, glanceable and actionable

• Blend in with the user’s current environment

• Think about what to push vs. pull

#SoMITP

Design systems, not screens.

5.

#SoMITP#SoMITP#SoMITPAtomic Design

Atoms Molecules Organisms Templates Pages

Beyond the screen Screen-based

#SoMITP

CONCLUSION

#SoMITP

Mobile technology is capable of delivering elegant and magical solutions far beyond screen experiences.

#SoMITP

Technology is becoming so embedded in our lives, that our job as designers can not just stop at designing the on-screen experience.

We need to design everything around it to make the entire experience elegant and magical.

#SoMITP

With more technology at our disposal, we’ll have to focus on designing the service as the main driver of the user experience and see the interface as an ‘avatar’ to deliver that experience through.

THANK YOU!