masterclass: designing for the mobile world

47
MASTERCLASS: DESIGNING FOR THE MOBILE WORLD

Upload: reactive-part-of-accenture-interactive

Post on 20-Aug-2015

641 views

Category:

Documents


1 download

TRANSCRIPT

Page 1: Masterclass: Designing for the Mobile World

!

MASTERCLASS: DESIGNING FOR THE MOBILE WORLD !

!

Page 2: Masterclass: Designing for the Mobile World

!

MEET DAVE AND GABE

Page 3: Masterclass: Designing for the Mobile World

1. THE CURRENT STATE OF MOBILE

2. DESIGNING FOR A MOBILE WORLD

3. DIGITISING VIVID SYDNEY !

Page 4: Masterclass: Designing for the Mobile World

!

THE CURRENT STATE OF MOBILE

Page 5: Masterclass: Designing for the Mobile World

!

WHY ARE MOBILE EXPERIENCES SO IMPORTANT?

Page 6: Masterclass: Designing for the Mobile World

OF AUSTRALIANS OWN A SMARTPHONE 65%

MILLION AUSSIES ARE EMBRACING MOBILE 15.2

REFERENCED FROM: WWW.THINKWITHGOOGLE.COM/MOBILEPLANETTHE CURRENT STATE OF MOBILE

Page 7: Masterclass: Designing for the Mobile World

OF USERS BROWSE DAILY ON THEIR MOBILE DEVICE

REFERENCED FROM: WWW.THINKWITHGOOGLE.COM/MOBILEPLANET

90%

OF THEIR DAILY MEDIA INTERACTION 38%

THE CURRENT STATE OF MOBILE

Page 8: Masterclass: Designing for the Mobile World

WE SEARCH ON OUR MOBILE 1ST OVER OTHER DEVICES

REFERENCED FROM: WWW.THINKWITHGOOGLE.COM/MOBILEPLANET

1

OF SEARCH IS LOCATION BASED 77%

THE CURRENT STATE OF MOBILE

ST

Page 9: Masterclass: Designing for the Mobile World

WOULD RATHER GIVE UP TV THAN THEIR MOBILE DEVICE

REFERENCED FROM: WWW.THINKWITHGOOGLE.COM/MOBILEPLANET

30%

SAY THEIR MOBILE IS THE BEST WAY TO KILL BOREDOM

67%

THE CURRENT STATE OF MOBILE

Page 10: Masterclass: Designing for the Mobile World

THE CURRENT STATE OF MOBILE

TODAY, NOT DESIGNING FOR MOBILE IS STUPID.

Page 11: Masterclass: Designing for the Mobile World

!

5 DELIGHTFUL MOBILE EXPERIENCES

Page 12: Masterclass: Designing for the Mobile World

MOST POWERFUL ARM // CAMPAIGN

Page 13: Masterclass: Designing for the Mobile World

MOST POWERFUL ARM // CAMPAIGN

Page 14: Masterclass: Designing for the Mobile World

MOST POWERFUL ARM // CAMPAIGN

Page 15: Masterclass: Designing for the Mobile World

ANZ BUZZ

Page 16: Masterclass: Designing for the Mobile World

ANZ BUZZ // TABLET EXPERIENCE

Page 17: Masterclass: Designing for the Mobile World

ANZ BUZZ // TABLET EXPERIENCE

Page 18: Masterclass: Designing for the Mobile World

TENNIS AUSTRALIA // SOCIAL SHACK

Page 19: Masterclass: Designing for the Mobile World
Page 20: Masterclass: Designing for the Mobile World
Page 21: Masterclass: Designing for the Mobile World
Page 22: Masterclass: Designing for the Mobile World
Page 23: Masterclass: Designing for the Mobile World

MICOACH ELITE // ADIDAS

Page 24: Masterclass: Designing for the Mobile World

MICOACH ELITE // ADIDAS

Page 25: Masterclass: Designing for the Mobile World

MICOACH ELITE // ADIDAS

Page 26: Masterclass: Designing for the Mobile World

SWAJP // DAREVILLE

Page 27: Masterclass: Designing for the Mobile World

SWAJP // DAREVILLE

Page 28: Masterclass: Designing for the Mobile World

SWAJP // DAREVILLE

Page 29: Masterclass: Designing for the Mobile World

SWAJP // DAREVILLE

Page 30: Masterclass: Designing for the Mobile World

!

DESIGNING FOR MOBILE

Page 31: Masterclass: Designing for the Mobile World

!

WHAT TO CONSIDER

Page 32: Masterclass: Designing for the Mobile World

KNOW YOUR USERS

Page 33: Masterclass: Designing for the Mobile World

WHAT’S YOUR BIG IDEA?

Page 34: Masterclass: Designing for the Mobile World

SKETCH AND ITERATE

Page 35: Masterclass: Designing for the Mobile World

PROTOTYPE YOUR EXPERIENCE // REFLECTOR

Page 36: Masterclass: Designing for the Mobile World

TESTING WITH USERS // INVISION

Page 37: Masterclass: Designing for the Mobile World

DESIGN ON A MOBILE SCREEN // SKALA APP

Page 38: Masterclass: Designing for the Mobile World

!

CHOOSING THE RIGHTAPPROACH

Page 39: Masterclass: Designing for the Mobile World

NATIVE MOBILE APP

AN APPLICATION DEVELOPED FOR USE ON A PARTICULAR DEVICE.

POSITIVES NEGATIVES

• Works with the device’s built-in features (e.g. accelerometer, GPS, light sensors, bluetooth, WiFi)

• Because they are native, they can use the devices native interactions, making the design experience more seamless for user.

• They perform faster on the device

• Content can be accessed offline once the app is installed as it can be downloaded with the app

!

!

!

• Native apps tend to be a more expensive proposition, especially when they need to be re-created for multiple platforms

• The cost of maintenance in much higher, as multiple versions needs to be managed

• The process of getting the app approved at the app store can prove to be long and tedious

• Users on mobile platforms may be on different versions, which means you need to make sure your app is backwards compatible as well

!

!

Page 40: Masterclass: Designing for the Mobile World

MOBILE SPECIFIC WEBSITE

A SITE OPTIMISED SPECIFICALLY FOR THE MOBILE EXPERIENCE.

POSITIVES NEGATIVES

• Typically a simplified experience of the website that focuses on giving users quick access to the most important information relevant to them as they explore via a mobile device (e.g. click to call, location information, enquiry forms)

• No download or installation required, unlike a mobile application

!

!

!

!

!

!

• Is a variation of your desktop website, and therefore requires its own content, separate from the desktop website

• Mobile websites do not use native operating system interactions; they’re defined by HTML and CSS which means they may run slower or be more restrictive

• Cannot be accessed offline, like a mobile app

!

!

!

!

!

Page 41: Masterclass: Designing for the Mobile World

RESPONSIVE WEBSITE

POSITIVES NEGATIVES

A SITE CREATED TO DELIVER AN OPTIMAL VIEWING EXPERIENCE ACROSS A WIDE RANGE OF DEVICES.

• You only need to manage content in one place, rather than having to re-create content to suit different experiences

• Any updates to a responsive website are applied across the viewing experience as well (desktop, mobile, tablet)

• Your website will optimise to suit any device it’s being viewed on, meaning your site is accessible by anyone, no matter how they’re exploring it

!

!

!

!

• Designing and developing a responsive website means you need to consider how your site will work across all devices at one time

• Creating content for responsive websites means you need to consider how your content will react to the layout changes as it gets resized (e.g. images in portrait/landscape)

• Less real-estate on mobile devices and users who are on the move means you need to consider how your experience supports a users behaviour more thoroughly

!!!

!

Page 42: Masterclass: Designing for the Mobile World

!

DIGITISING VIVID SYDNEY

Page 43: Masterclass: Designing for the Mobile World

THE BRIEF

WHAT IF YOU COULD CREATE A DELIGHTFUL MOBILE EXPERIENCE THAT HELPED CONNECT VIVID SYDNEY WITH ITS VISITORS?

Page 44: Masterclass: Designing for the Mobile World

THE BRIEF

THINK ABOUT…• What mobile experiences could you create that makes the festival a more

delightful, interactive and engaging experience?

• What could you do to keep people in the loop and up-to-date with what’s going on at the festival while out and about?

• How could you use social media to connect visitors with the festival or its contributors??

• How could you encourage creatives to get involved and share their ideas as part of the festival?

• What if you could use your mobile device to connect and interact with a light installation? what could you do?

Page 45: Masterclass: Designing for the Mobile World

1. GET INTO GROUPS OF 4-5

2. SKETCH AN IDEA & GIVE IT AN ELEVATOR PITCH

3. PRESENT THE IDEA BACK TO EVERYONE !

THE PLAN

Page 46: Masterclass: Designing for the Mobile World

WHAT A SKETCH CAN LOOK LIKE

Page 47: Masterclass: Designing for the Mobile World