Heavy Chef March: Building Great Mobisites

Post on 22-Nov-2014

1.615 views 1 download

description

We had the incredible opportunity to have Tim Bishop from Prezence Digital come talk to us about building great mobisites at last week's Heavy Chef event in Joburg.

Transcript of Heavy Chef March: Building Great Mobisites

timprezence

Tim Bishoptim@prezence.co.za

This presentation is luckily brought to you without Tim’s inane and ‘cocky’ ramblings over the top.Therefore things may make a lot more sense ;) Apologies for

some slide deletions. We also apologise to any brands that Tim may

upset during the course of this presentation but this is a precious new medium (and user) that we must treat with respect. All relevant trademarks are acknowledged.

DIGITAL: We want to trulyLIBERATE our brands... BUT

Does everyone have thetools to engage with us?

If you mobilise,YES THEY DOIn the palm of their hands!

NO they don’t... BUT

Not sure about mobile? You can’t argue with facts

More cellphones in SA than the entire SA population

South African household technology* Source AMPS 2009 B

Apart from calls, how are people using their phones?

0 5 10 15 20 25 30 35 40 45 50

SMS

Please Call Me

Take Photos

Video Recording

Play Games

MMS

Short Code SMS

Download / Listen to Music

Mobile Internet

Send / Receive Emails

South African Mobile Data Usage

* Source Nielsen AMPs data 2009

South African Mobile Data Usage

By the hour! *Source - TNSGlobal

Mobile has changed us from an access at work nation

Only a 2 million cross-over= 10 million new people

12 million on mobile web6 million on desktop web

has spoken!...the numbers say it all

0

20

40

60

80

100

120

Weekdays Weekend

Mobile Search Web Search

60% of all Google Searches are done from a mobile device during the weekend in South Africa!

Mobile Search - rapid growth in SA

mobile 25%

mobile

desktopdesktop

60%

So who are these mobileweb users in SA?

0% 5% 10% 15% 20% 25% 30%

LSM 1 -3

LSM 4

LSM 5

LSM 6

LSM 7

LSM 8

LSM 9

LSM 10

* Source Admob July 2010

South African Mobile Web users LSM

LSM 6 Black mid 20’s, Slight Male skew

Mobile is the Power-house of SA digital touch points

STER KINEKORSelect Options1 – View Movies2 – My Cinema3 – Book Movie4 – My profile--------------------Reply

Touching the Masses – OPPORTUNITY!

WEBSITE

Sorry, had to kill these images as sites release in the next month ortwo.

Was for Heavy Chef live presentation only.

MOBISITE

What exactly is a ‘Mobi’ device anyway?

6000+ of these....

A non-desktop device, that due to its size and context of use, needs to be treated differently

Mobi building is complexIt is not the same as web!

Bliss! – Luxury of desktop PC design!

Lots of space, a few browsers and easy input controls

S*%T - The problems of mobi design

No space, 6000 devices (more variants) crude input controls

The first considerations(especially in SA) Speed and cost

CONSIDERATIONS DATA COSTS

A Pay as You Go society in SA means your mobi

site costs users VERY VISIBLE Rands and Cents

R2.00 per Mb for most Pay as You Go customersLower rates are available for bundles or contract customers

Only deliver the content they need or ask for!

CONSIDERATIONS CONNECTION SPEED

A variety of connection speeds, handset capabilities and network coverage issues.

3G users could also be out of range! OPTIMISE MOBI TO THE MAX!

Maximummobi page target size of 35 Kilobytes 15 secs 6 secs 3 secs >2 secs

+

Size, length and width IS important!

Isn’t that right ladies?

No really.... with mobile it IS very important!

Unlike web: One size does not fit all!

If you build your mobi to cater for small phones...

Samsung E250 - 128 pixels wide

One size does not fit all!

It is unusable on larger ones!

Blackberry 9000 - 480 pixels wide

?

?

One size does not fit all!

If you build for larger phones...

Blackberry 9000 - 480 pixels wide

One size does not fit all!

It will be very difficult to use on the smaller ones!

Samsung E250 - 128 pixels wide

Wow!I can see a cloud!

If you design for the average sized phone...

One size does not fit all!

LG K360 - 240 pixels wide

One size does not fit all!

It won’t be an ideal experience for anyone else!

One very important thingthat is always overlooked

TOUCH The rules change yet again...Fingers are not matchsticksSo leave room!

TOUCH What to give your users...Menu space clickable areas large buttons more links

There are many challenges when building for mobile

So many devicesSo many screen sizesSo many browser typesSo many file formatsSo many device manufacturersSo many connection speedsSo many platforms and op systemsSo many shit Jozi drivers in Cape Town

Touch or cursor inputs...So much to deal with before we even start considering the design!

Mobilising the masses...We start with technology

6000+ different devices =HCA

Handset Content Adaptation

6000 mobi sites

Some real world examplesWho could do better?

Real world examples supersport.mobi

No device resizing (HCA)No touch provision

44kbNo images8.6c

44kbNo images

8.6c

Real world examples mweb.mobi

No device resizing (HCA)

Only for larger phones

101kb20c

101kb20c

Real world examples 24.mobi

Limited device resizingNo touch space

25kb4.9c

34kb6.8c

Real world examples

Device resizingNo touch space

24kbNo images4.7c

19kb3.7c

m.iol.co.za

Real world examples ewn.mobi

14kbWith images 2.7c

24kbWith images

4.7c

Device resizing (Full HCA)

Touch provision

Real world examples timeslive.mobi

27kbWith images 5.4c

52.2kbWith images

10.4c

Device resizing (HCA)

No touch space

Real world examples

Device resizingTouch provision

entertainmentafrica.mobi

29kbWith images5.6c

19kbWithimages3.7c

So, to mobilise properly...Let the tech do some work

Handset downscale and upscalingPerfect rendering to all handsetsTouch aware and layout adaption

Dynamic image resizing/optimisingHandles compatible file delivery

HCA

The mobile web is not as expensive as you think!

Greater, richer interactive experience for little cost

19kb with images =

3.7c per pageV

Sms your name to 33008 and

win. Sms’s cost R1.50

Equivalent cost experience on Mobi ?

40 mobi site pages!

Deliver perfect experiences ...regardless of handset

Multimedia VIDEO

Easy, small and low quality... NO!

The ideal experience

SK (2) We are encoding 20 variants per trailerfor perfect experience!

Streaming Video – Now on mobile!

Compelling, Emotive and straight to the point...

A ‘moving’ picture paints 2000 words!

Sorry, had to remove this image as is confidential client work. For Heavy Chef live presentation only.

So that’s some technology...what else is there?

Consider your user...

Always design for the lowest common

denominator and enhance upwards for

the most content hungry users

Consider those who have limited mobile experience - education

Consider those who have lower literacy capabilities - intuitive

Consider those who want the basic information – FAST - snack

Consider those who are experts and want everything - expand

everyone!

(Content) CONTEXT is KINGConsider where and why!

21% males – 12% females use their iPad on the loo!

‘MOBILE’ also describes the user...

A MOBILE user’s circumstances and situation vary. Content becomes less relevant if we ignore the CONTEXT of the viewer!

CONTEXT first: then relevant content• Browsing one handed (coffee)• In a queue and wants to jump it• On the loo with time to kill• Lost and needing fast directions• Needs traffic / weather info• Product research and comparison• Want to engage with your brand • WANT TO SOCIALISE AND CHAT!

CONSIDER WHERE AND WHY!

Mobile design approach......its a little cramped!

Mobi design = organising a tiny desk

Place the most important things close by and work outwards

Hierarchy design computicket.mobi

W/W/WHEN

LOGINOR REGISTER

EVENT DETAILBOOKING DETAIL

MORE INFOMAIN CATEGORY

STOR

E FIND

ERG

EO M

AP

PIN

G

CALL USCLICK TO CALL

TER

MS+

CO

NS

DIS

PLA

Y/A

CC

EPT

ALL EVENTSW/WHERE/WHEN

BUS/TRAVEL HOME PAGE

LESS IMPORTANTLESS IMPORTANT

HIGHLIGHTEDEVENTS

SEARCH ALLEVENTS

MAIN ACTION

AREA

MAIN ACTION

AREA

70% OF BOOKINGS

MOBILISE... Do not MINIATURISE

User’s need FAST snacky info + NavRemember CONTEXT - Make it OBVIOUS AND EASY...

UX: Make clicks meaningful...use Action Areas

Where am I? I am sure I just clicked!Build information ‘above the fold’ to make sure the user knows where they are... Show change to the user in ‘Action Areas’ (Visible Screen)

No obvious changeCursor Nightmare!

Top menus

Each click shows a clear change on each page refresh and re-affirms user’s previous selection criteria.

Enhancing upwards...unlock device capabilities

For the minorities (but future majorities)

Enriched functions & UX for handsets

Optimise video & rich content for enhanced handsets Custom mobi interfacesGPS integration for

mapping and geo-location

Mobi can access advanced handset features such as geo-location for mapping and geo-targeted content.

Custom mobi interfaces can be aimed at handsets

Easy mobi management... Use a single cms platform

Single content upload...Multiple automated deployments

Sterkinekor.com/mobi(Web, Mobile, Touch, Mobile Apps)

Sorry, had to kill these images as apps release in the next month ortwo.

Was for Heavy Chef live presentation only.

Sorry, had to kill these images as apps release in the next month ortwo.

Was for Heavy Chef live presentation only.

Computicket.mobi

Computicket.mobirecord SA mobi transactions in 1st day BETA test!

Computicket.com

Poor student to flush student.....in 10 minutes!

Mystudentloan.standardbank.co.za

Standard Bank – Student Achiever

Look & feel by our goodFriends at Aqua Online

• Mobile can be beautiful!

• Fully integrated into Predator web publishing CMS system

• Customised CMS modules to expand mobi capabilities

• Phased approach to full deployment

• User generated imagery

• Competition management

• UGC ENGINE

Seventeen.mobi

• Fully integrated into existing CMS system

• Video management

• Content feed aggregation

• User generated feedback

• Premium content integration

• User comments engine

• Multimedia downloads

• SMS alert system

EWN.mobiEye Witness News

EMI.co.za• Dual Web / Mobile deployment

• Fully integrated into customised publishing CMS system

• Multimedia management

• Content feed aggregation

• Buy-Now outbound links

• Genre / label based search

• Category sorting and listing

• Competition management

• 'We are indebted to the amazing men and women at Prezence Digital who developed our web and mobi properties for no cost at all. What an act of dedication and commitment to making South Africa a safer place for us all!' - Danny K.

SHOUT - Prezence CSR

Digital donated by

Mobi is a brand touchpointIt should look the part!

Mobi should leave a great impressionWhen built properly, your mobi site will be a perfect brand ambassador

Context, Content and Brand are spot on.. For all phone users!

So why are great brandsgetting it so wrong?

CocoPops did everything right....

Does this mobisite do a great brand (targeting kids) justice? WHY NOT?

except the mobisite!

Great engagement opportunity lost?

Less is more on mobile!!!!What a load of BULLS&!T

Kulula does what? Do they not sell flights and also help me manage the flights I have booked?

I can see how much I’ll miss my flight by?And what flights I could book if online!

WEATHER? I’m mobile!I can LOOK UP!

Mobile for mobile sake Utterly useless!Check-in process – That looks promising! NOPaperless Ticket – to my mobile perhaps? NOChange my booking – I’m late, that’s great! NO

‘Click to call’PLEASE!I cant write it down & then call.. I am mobile!

WHY? To find

out when you do the mobisite well?

‘Dear user, If you weren’t silly enough to be accessing us via mobile, you could do all these useful things!Get yourself a proper computer and then you can!

Great! So what’s

their number orURL?

Mobile is powerful – use it!Give users the choice!

Facebook mobile...

Less is more on mobile...? NOT TRUE!

CALL CALL CENTRE

CALL CALL CENTRE

CALL CALL CENTRE

CALL CALL CENTRE

CALL CALL CENTRE

CALL CALL CENTRE

CALL CALL CENTRE

CALL CALL CENTRE

CALL CALL CENTRE

CALL CALL CENTRE

CALL CALL CENTRE

Kulula style!!!

Make your life easier!Great things are out there

Mobile Social Media in a box: Motribe“When you can’t always speak to your brand fans... Let them speak to each other!”

YOUTUBE Channel Integration

YouTube has useful mobile video integration tools...Better still – They are Free!

Location location locationProximity brings relevance

(Where I am and where my friends are is important)

Location based brands – network + hardwareMobile experience can add morerelevance by using location as hooks.

Find and interact with friends while skiing!Augmented reality

location SM apps

Spreading your message...not just ‘LIKE’ing it!

Beyond the ‘Like‘ function on Mobile!Facebook Connect can now be thoroughly integrated onto all S40 and limited capability type devices for SM in Africa.

‘Profile' use their social profile to greet, be

relevant and ‘tap up their friends’.

Sharing (post to wall with link / event / image

or pre-determined updates (such as purchase) from a drop-down bar.

'Like' button is possible to implement on even

the most limited of devices if you know what you are doing!

Using enticing content...to keep them coming back!

Application or Mobi?In Africa – spend carefully!

Don’t believe the hype... South Africa is very different!

App v Mobi - We are not the US!

US DATA – NOT SA DATA

Less important

Don’t believe the hype... South Africa is very different!

App v Mobi - We are not the US!

Less important

Think of the SA market...only 150k iPhones in SA!

(40% active app users = 60,000 + 20,000 iPads max!)

39.8%

29.9%

7.7%

5.9%4.6%

3.0%2.0%

0.9% 0.8% 0.4%

0.0%

5.0%

10.0%

15.0%

20.0%

25.0%

30.0%

35.0%

40.0%

45.0%

Nokia Samsung SonyEricsson LG RIM Motorola Apple HTC Openwave MAUI

* Source Admob July 2010

HANDSET PENETRATION - South Africa

Smartfone = 8%(will grow eventually)

Samsung 29.9%

Nokia 39.8%

Apps can help exposure...Let the stores to the work!

20 Million Nokia handsets in SA....

100+ Devices

NOKIA Ovi – EntertainmentAfrica.com

250,000 downloads – March 2011

APPs for all platforms Nokia OviBlackberry AndroidiPhoneiPadWindows Mobile(will become more important)

For max penetration: In this order....(depending on target market)

Sorry, had to kill these images as apps are in development and release in the next few months.

Was for Heavy Chef live presentation only.

The most vital element... Knowing (profiling) your user!

If you know what makes them tick...

You can personalise

and be RELEVANT

MSISDN + PROFILING

SMS

Hi SubusisoThe latest XXXnewsletter isOut! Click HEREor reply and you could win a R500 voucher

USSD

XXXXX MOBi:Hi SubusisoSelect Options1 – Register2 – News Alerts3 – Competitions4 – Refer Friend--------------------Reply

and perform beautifullyregardless of the device

Your mobi must be a great user and brand experience

Be relevant and give users a reason to come back

You must focus on ‘context’ before considering content

Mobile is THE channel for 24/7 engagement in SA

Dont cut back on usefulness(kulula ;) give people the choice

MOBILISE properly! Making things smaller is

just not enough!

So don’t F*%k it upfor the rest of us ;)

timprezence

Tim Bishoptim@prezence.co.za