masterclass: designing for the mobile world

!

MASTERCLASS: DESIGNING FOR THE MOBILE WORLD !

!

!

MEET DAVE AND GABE

1. THE CURRENT STATE OF MOBILE

2. DESIGNING FOR A MOBILE WORLD

3. DIGITISING VIVID SYDNEY !

!

THE CURRENT STATE OF MOBILE

!

WHY ARE MOBILE EXPERIENCES SO IMPORTANT?

OF AUSTRALIANS OWN A SMARTPHONE 65%

MILLION AUSSIES ARE EMBRACING MOBILE 15.2

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

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

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

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

THE CURRENT STATE OF MOBILE

TODAY, NOT DESIGNING FOR MOBILE IS STUPID.

!

5 DELIGHTFUL MOBILE EXPERIENCES

MOST POWERFUL ARM // CAMPAIGN

MOST POWERFUL ARM // CAMPAIGN

MOST POWERFUL ARM // CAMPAIGN

ANZ BUZZ

ANZ BUZZ // TABLET EXPERIENCE

ANZ BUZZ // TABLET EXPERIENCE

TENNIS AUSTRALIA // SOCIAL SHACK

MICOACH ELITE // ADIDAS

MICOACH ELITE // ADIDAS

MICOACH ELITE // ADIDAS

SWAJP // DAREVILLE

SWAJP // DAREVILLE

SWAJP // DAREVILLE

SWAJP // DAREVILLE

!

DESIGNING FOR MOBILE

!

WHAT TO CONSIDER

KNOW YOUR USERS

WHAT’S YOUR BIG IDEA?

SKETCH AND ITERATE

PROTOTYPE YOUR EXPERIENCE // REFLECTOR

TESTING WITH USERS // INVISION

DESIGN ON A MOBILE SCREEN // SKALA APP

!

CHOOSING THE RIGHTAPPROACH

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

!

!

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

!

!

!

!

!

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

!!!

!

!

DIGITISING VIVID SYDNEY

THE BRIEF

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

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?

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

WHAT A SKETCH CAN LOOK LIKE