mobiilisovellukset ja -sivustot

Tervetuloa!

Ohjelma

9.00 Tilaisuuden avaus Janne Kalliola, Exove

9.10 Miten mobiiliin? Löydä oikea ratkaisu?

Aki-Ville Pöykiö, Exove Design

9.25 Esimerkkejä maailmalta: Design-trendit mobiilissa

Juha Jauhiainen, Exove Design

9.40 Mobiilipalvelut Suomessa Marko Luhtala, NearMe Services

10.00 Tauko

10.10 Mobiilisovellusalustat ja taustajärjestelmät

Kalle Varisvirta, Exove

10.30 Case: Eazybreak Kai Friman, Eazybreak

10.50 Keskustelua

Kuinka (ja miksi) tehdä mobiilisovelluksia ja

-sivustoja?

Tiedä mitä sinä / bisneksesi / asiakkaasi haluavat.

Varmista, että mobiilisovellus tai -sivusto on oikea tapa

palvella noita tarpeita.

Tunne käyttämiesi mobiilialustojen

käyttökokemusparadigma.

Palvele käyttäjiä.

Suunnittele. Toteuta. Analysoi. Korjaa.Suunnittele. Toteuta. Analysoi. Korjaa.Suunnittele. Toteuta. Analysoi. Korjaa.Suunnittele. Toteuta. Analysoi. Korjaa.Suunnittele. Toteuta. Analysoi. Korjaa.Suunnittele. Toteuta. Analysoi. Korjaa.

Turvaudu tarvittaessa asiantuntijan apuun.

Lyhyesti meistä

Exove on eräs Pohjoismaiden ja Baltian johtavista avoimeen lähdekoodiin

perustuvien verkkopalveluiden suunnittelijoista ja toteuttajista.

Lähtökohtamme on asiakkaamme strategia ja tarpeet.

Synnytämme lisäarvoa ymmärtämällä verkon luonteen ja käyttäjien halut.

Tuotamme kauniita, toimivia ja liiketoimintalähtöisiä palveluja.

50 henkeä, yli 115 asiakasta,yli 3 MEUR liikevaihtoa 2011, voitollinen

Ohjelma







10.00 Tauko




10.50 Keskustelua

Miten mobiiliin?

Aki-Ville PöykiöSuunnittelujohtajaExove Design

Missä mennään 2011?

Internetin mobiilikäyttäjien määrä ylittää PC-käyttäjien määrän vuonna 2013.

Siihen on aikaa reilu vuosi.

“There are more than 350 million active users (44%) currently accessing Facebook through their mobile devices.”

“People that use Facebook on their mobile devices are twice as active on Facebook as non-mobile users.”

– Facebookin viralliset tilastot, marraskuu 2011

Suurelle osalle maailman väestöstä mobiili internet on ensimmäinen ja ainoakokemus internetistä.

Mitä tehdä?

Teen mobiilisovelluksen?

Teen mobiilisivuston?

Teen jotain muuta?

Mobiilisovellus

+ Sulava käyttökokemus

+ Täysi kontrolli ilmeesen ja toimintoihin

+ Pystyy moneen, vaikka kameran tai GPS:n käyttöön

- Haastava suunnitella ja toteuttaa- Usein hintava ja aikaavievä projekti- Tavoittaa vain tiettyjen älypuhelimien käyttäjät

Mobiilisivusto

+ Aika helppo toteuttaa, tuttua HTML-teknologiaa

+ Tavoittaa laajan joukon käyttäjiä

+ Voi syntyä helposti verkkosivujen pohjalta

- Ominaisuuksiltaan ja laajuudeltaan usein suppea

- Vähän mahdollisuuksia hyödyntää puhelimien erityisominaisuuksia

- Käyttö- ja brändikokemus vaihtelee puhelimesta toiseen

Jotain muuta?

Mobiilisovelluksen voi toteuttaa myös webbiteknologioita hyödyntäen.

Exove toteutti Eazybreakin mobiilisovelluksen Phonegap-alustalle hyödyntäen webbiteknologioita.

Näin säästyi sekä aikaa että vaivaa.

Nykyisestä verkkosivustostasi voi tehdä mobiili-yhteensopivan.

Responsive Web Design

Sivusto suunnitellaan siten, että se mukautuu automaattisesti eri laitteiden ruudulle parhaalla mahdollisella tavalla.

Konstit ovat monet.

On aika toimia!

Ohjelma







10.00 Tauko




10.50 Keskustelua

Juha Jauhiainen, SuunnittelujohtajaExove Design

Design trendit mobiilissa

Responsive design

1. Tehdään palvelu alusta alkaen

2. Halutaan pienentää kuluja

3. Laiteriippumaton

Perusperiaate

Suunnittelu aloitetaan mobiilista ja käyttökokemus laajennetaan muihin laitteisiin.

Tarkoittaa, että tulevaisuudessa mennään yhä kauemmaksi

perinteisestä “painettuun mediaan” perustuvasta suunnittelusta.

MetroDesign language

Metro

Metrotypografia (segoe)liike (animoinnit)sisältö

Metro

Tile -oikotiePanorama –fiilistelyäPivot –suorita tehtävä

1. Live tile: informaatio ja linkittäminen

2. Yhdistetyt yhteystiedot

3. Viivakoodihaku

4. Yhteisöt

5. Office

-Ekosysteemi on vasta aluillaan ja vihdoin joku haastaa Applen.

-Metro aloittaa design-trendin. Se on aidosti hurmaava

Kiitos.

[email protected]

Ohjelma







10.00 Tauko




10.50 Keskustelua

Mobiilipalvelut Suomessa

14.12.2011

www.nearme.fi

54 26.3.2010 Author Marko Luhtala, Nils Lagerström

Miksi mobiilikanava on tärkeä?

Kännykästä on tullut puhelimen lisäksi sanomalehti, viihdekeskus

sekä henkilökohtainen kauppapaikka ja palvelupiste

Mobiilin erityispiirteet houkuttelevat sekä asiakkaita että yrityksiä:• henkilökohtaisuus

• välitön kaksisuuntainen kommunikaatio• paikkatieto ja konteksti

Perinteinen markkinointi kallistuu ja muuttuu tehottomammaksi,

nykyiset kanavat jättävät aukkoja asiointiprosessiin

Muutos asiakaskäyttäytymisessä Muutos nykyisissä kanavissa

Mobiilikanavan erityispiirteet


Mobiilimarkkinoinnin taival Suomessa

2000Kännykkä korvaa lompakon, passin

ja TVn

2006Mobiilimarkkinointi

on tekstarimainontaa

2011Mobiilikanava

täydentää markkinointia ja

asiointia

Teknologia ja asiakastarve tasapainossa

• Internet-keskeinen markkinointimalli• Mobiili osa monikanavaisuutta• Kuluttajakäyttäytyminen ohjaa palvelu- kehitystä: asiakkaan konteksti• Palveluinnovaatiot, testatut teknologiat


Mobiili Internet palvelut yleistyvät Suomessakin

HakuSosiaalinenmedia

Kauppa

NavigointiJoukkoliikenneMatkailu

Musiikki

Uutiset, urheilu, sää

Internet palvelun-tarjoajat

Valmistajat


Mobiilihakujen kehitys Suomessa

Lähde: Googlen sisäinen data.Historiallinen kehitys ei ole tae tulevasta.


DiViA 2011: Mitä mobiilipalveluja yrityksenne tarjoaa asiakkaille?

0

5

10

15

20

25

30

35

Vuoden päästä

Tällä hettkellä

N = 57


Kolme yritystä neljästä investoi mobiiliin 2012

N = 57


Monta kanavaa – katkeamaton asiointikokemusESIMERKKI


Kontekstia ymmärtämällä ja yhdistelemällä syntyy ainutlaatuisia kohdennettuja mobiilipalveluja.

Vakioasiakkuus

Asiakkaan sijainti

Asiakkaan mielenkiinnon

kohteet

Asiakas-prosessin vaihe

Tuotteen elinkaari

ASIAKKAANKONTEKSTI

Ympäristö ja tapahtumat esim. sää,

urheilutulokset


Aloita tästä

Tee mobiilisuunnitelma NYT osana markkinointistrategiaa ja asioimisprosesseja: tee tämän perusteella päätökset prioriteeteista ja investoinneista.

Keskity asiakkaan mobiilikäyttäytymisen ymmärtämiseen. Parhaat ja tehokkaimmat mobiilitoteutukset perustuvat palveluinnovaatioon eivätkä teknologiainnovaatioon.

Hyödynnä olemassa olevaa teknologiaa ja rakenna palvelut mobiili-Internetin ympärille. Täydennä palveluja ja aktivoi asiakkaita myös tekstiviestien ja 2D-koodien avulla. Näin varmistat, että asiakaskunta osaa ja pystyy käyttämään palveluja.

Ensimmäinen askel mobiilikanavaan on ajatella kännykkää uutena ikkunana jo olemassaoleviin Internet-palveluihin. Käytännössä tämä tarkoittaa nykyisten nettisivustojen mobiiliversion rakentamista.

Marko [email protected]

050-3879903www.nearme.fi

Ohjelma







10.00 Tauko




10.50 Keskustelua

MOBIILISOVELLUS-ALUSTAT JA TAUSTA-JÄRJESTELMÄT

Kalle VarisvirtaTechnology Director

Miksi mobiilisovellus Enemmän kuin mobiilisaitti Tällä hetkellä kova hitti, “kaikilla kilpailijoillakin on oma

sovellus” Mobiilisovellus tarjoaa mahdollisuuden käyttää

puhelimen palveluita, esim. kameraa Sovellus koukuttaa käyttäjän ja usein konvertoi

anonyymejä käyttäjiä rekisteröitymään

Toteutustavat

Natiivisovellus Puhelinalustan omilla työkaluilla ja omalla

ohjelmointikielellä toteutettu sovellus Ei rajoituksia

PhoneGap (HTML5-sovellus) PhoneGap alustalle toteutettu sovellus HTML5, CSS

ja Javascript –teknologioilla Joitain rajoituksia toiminnallisuuteen

Mitä molemmilla saavutetaan

1. Olemassaolo kaupassa

2. Paikka käyttäjän puhelimessa muiden brändien rinnalla

Mitä molemmilla saavutetaan

3. Toiminnallisuutta, jota ei voi toteuttaa pelkällä mobiilisaitilla (PhoneGap –sovelluksessa on rajoituksia tämän suhteen)

Mikä on natiivisovellus

Sovellus toteutetaan jokaiselle alustalle erikseen Lähes jokainen suosittu alusta käyttää omaa

ohjelmointikieltään Objective-C/IOS Java/Android C#/WP7

Moninkertaistaa työmäärän jos tehdään monelle alustalle

Ei aseta mitään rajoituksia palvelun toiminnalle

Mikä on PhoneGap PhoneGap on nykyään Adoben omistama cross-

platform –alusta puhelinsovellusten tekemiseen HTML5:llä ja Javascriptillä

Käytännössä PhoneGap ajaa sovellusta full screen web-ruudussa, mutta käyttäjä ei huomaa eroa

Ero natiivisovelluksiin on grafiikkanopeudessa ja alustan tarjoamien ominaisuuksien hyödyntämisessä

PhoneGap tarjoaa Javascript –rajapinnan tärkeimpiin alustan palveluihin (kamera, lokaatio etc.)

Natiivi vs. PhoneGap

Puhelimen käyttö-järjestelmä

Natiivisovellus

PhoneGap- sovellus

PhoneGap- alusta

Puhelimen käyttö-järjestelmä

•Natiivisovellus joutuu toteuttamaan paljon alustakohtaista toiminnallisuutta kuin PhoneGap –sovellus•PhoneGap –sovellus voi toteuttaa saman asian huomattavasti vähemmällä työllä kuin natiivisovellus ja sama kehittäjä voi toteuttaa sovelluksen kaikille alustoille•PhoneGap –sovelluksissa käytetään usein yleensä UI-kirjastoja

Valintaperuste

Oikea toteutustapa perustuu puhtaasti toiminnallisuuteen, joka halutaan toteuttaa

Esim. Angry Birds, Skype ja Spotify ovat natiivisovelluksia syystä

Toisaalta suurin osa sovelluksista on erilaisten verkkosivustojen sovelluksia (TripAdvisor, Flickr, FourSquare, Facebook, Twitter), jotka periaatteessa olisi mahdollista toteuttaa myös PhoneGapilla

Valintaperuste

Ehkä tärkein ero on kuitenkin kustannus Yksi natiivisovellus maksaa huomattavasti

enemmän toteuttaa, kuin PhoneGap-sovellus kaikille alustoille

Hinta on siis moninkertainen Jossain tilanteissa nativiisovelluksen teko on silti

perusteltua, jossain tilanteissa välttämätöntä

Taustajärjestelmät

Käytännössä aina kun mobiilisovellus ei ole peli (ja useimmiten silloinkin) on tarve taustajärjestelmälle

Taustajärjestelmä on mobiilisovelluksen selkäranka, joka useimmiten tarjoaa sisällön ja ison osan toiminnallisuudesta

Useimmiten mobiilisovellus voidaan nähdä vain client-ohjelmistoksi jollekin taustajärjestelmälle

Taustajärjestelmät

Taustajärjestelmäksi sopii sekä julkaisujärjestelmä sekä ohjelmointialusta (framework)

Valintaperusteena on taustajärjestelmän sisältämä data, sekä muut sen toteuttamat toiminnallisuudet

Drupal taustajärjestelmänä

Drupal sopii taustajärjestelmäksi kun Taustajärjestelmä pyörittää myös normaalia web-

sivustoa, joka keskittyy sisällön näyttämiseen Mobiilisovelluksessa näytettävä sisältö soveltuu hyvin

tallennettavaksi ja hallinnoitavaksi Drupalissa

Drupal saadaan toimimaan hyvin mobiilisovelluksen kanssa esimerkiksi Services –moduulilla

CodeIgniter taustajärjestelmänä

CodeIgniter sopii taustajärjestelmäksi, kun Taustajärjestelmään tallennettava data ei sovellu

tallennettavaksi Drupaliin Taustajärjestelmä ei tarjoa tyypillisiä palveluita

(sisäänkirjautuminen, kommentointi, jne), vaan tarjottavat palvelut ovat hyvin spesifejä

CodeIgniter toimii hyvin taustajärjestelmänä ilman muutoksia, johtuen hyvin avoimesta rakenteestaan

Ohjelma







10.00 Tauko




10.50 Keskustelua

Eazybreak Älypuhelinsovellus

Eazybreak Oy

Perustettu 2009 suomalainen yritysOmistajina voucher- ja mobiilialan

asiantuntijoitaKaupallinen toiminta alkoi 1.1.2011

Aktiivinen myynti yrityksille, ravintoloille ja liikunta- sekä kulttuuripaikoille käynnissä

Keskeisiä yhteistyökumppaneita: Exove – Tekniikka Tekes – Nuoret, Innovatiiviset Yritykset Nordea – maksuliikenne WWF – Green Office –ohjelma INNOSUOMI – valtakunnallinen palkinto

2011

Järjestelmä joka palvelee…

Normaali lounasseteli myyntiä, jossa työntekijöillä vapaasti valittavissa oleva ruokailupaikka

Sopimusruokailua, jossa työnantaja ostaa setelit niiden nimellisarvolla ja veloittaa työntekijän omavastuuosuuden suoraan palkasta

Sopimusruokailua, jossa työntekijä ostaa lounaslippuja omavastuuosuuden suuruisella hinnalla ja jossa työnantajan osuus laskutetaan jälkikäteen käytettyjen setelien mukaisesti

Liikunta ja kulttuuriseteleiden hallinnointia

Mahdollistaa käyttämättömien setelien palauttamisen sekä tarkan hinnan maksamisen

Ei edellytä äly- tai työsuhdepuhelinta

Eazybreakin Win Win Win arvoketju:

Company

Reduced HR/AdMin Staff Costs

More cost efficient way of delivering

vouchers

Less Capital in Vouchers

Buyer

Lighter wallet

No risk of lost Vouchers

Ability to create multifunctional

personal account

One service to manage all vouchers

Merchant

Lower Admin costs

Faster Reimbursment

Process

No need for EMV -investments

Marketing channel

Lower Costs Easier way to pay Improved cash flow

Eri suuruisten yritysten vuosisäästöt

Säästöissä huomioitu käyttämättömät setelit (5% kokonaisarvosta) sekä työaikasäästö eri kokoluokan yrityksille (0.2 – 1 FTE)

10 20 40 60 80 100 200 300 400 500 600 700 - €

10,000.00 €

20,000.00 €

30,000.00 €

40,000.00 €

50,000.00 €

60,000.00 €

70,000.00 €

Yrityksen kustannussäästöt

Kustannuss...

Työntekijämäärä

Kusta

nnussäästö

Miten Eazybreak toimii?

Suljettu B-to-B-to-C palvelu luontaisetujen hallinnointiin Kokonaisvaltainen Eco-systeemi

Liittyminen palveluun tapahtuu webin välityksellä

Itse maksu tuodaan kuittina kännykkään

Palvelu toimii reaaliajassa

Mahdollisuus myös erilaisiin myynnin ja markkinoinnin toimenpiteisiin

Setelin tilaaminen on helppoa (viestit ovat ilmaisia)

Työntekijä voi tilata henkilökohtaisen setelin kuhunkin toimipaikkaan suoraan internetin välityksellä www.eazybreak.com

Vastaanotettu viesti toimii maksuvälineenä

1.

2.

Setelin voi myös tilata matkapuhelimella lähettämällä toimipaikan numeron sms viestinä palvelunumeroon

Setelin voi tilata myös älypuhelinsovelluksella

http://www.eazybreak.com/

Hinnasto:

Yritykset: Rekisteröinti: maksuton Latausmaksu: 10 €/kk Raportointimaksu: 1 €/aktiivinen työntekijä/kk

Palveluntarjoajat: Rekisteröinti: maksuton Maksuvälineprovisio riippuu tilitysfrekvenssistä

Kerran kuukaudessa 1 %

Kerran viikossa 1,5 %

Kerran päivässä 2,2 %

Ei muita kuluja tai maksuja

Mobile Phone Apps

Tavoitteet: Loppukäyttäjät: helppokäyttöisyys Palveluntarjoajat: Nopea & turvallinen maksaminen Eazybreak: nykyaikaisuus, innovaatiot, sms –kustannusten

pienentäminen

Tehty yhdessä Exoven kanssa

Lanseerattu alkusyksystä 2011 Toimii nyt:

iOS, Android ja Symbian (kosketusnäytölliset)

Setelin tilaus älypuhelimella

Voit tilata mobiilisetelin myös kosketusnäytöllisellä älypuhelin-sovelluksella.

1. Paikat valikossa on seuraavat valinnat:Suosikit: Palvelu muistaa paikat, joissa käyt eniten. Lähimmät: Sijaintisi perusteella lähimmät Eazybreak -ravintolat. Sopimukset: Sijaintisi perusteella lähimmät sopimuslounasravintolat (jos työnantajasi on valinnut sopimusruokailumallin käyttöösi).Tilauskoodi: Tilaa seteli toimipaikkakoodilla (esim. ravintolakoodi). Tilaa seteli ”klikkaamalla toimipaikan (esim. ravintola) nimeä.

2. Anna setelin arvo, määrä (jos yrityksesi sallii usean setelin käytön/päivä) ja ”Tilaa”. Tilaa seteli tuotteen tai palvelun hinnan mukaisesti – säästät selvää rahaa.

3. Saat paluuviestinä setelin puhelimeesi. Näytä seteli kassalla maksuna tuotteesta tai palvelusta. Kassa kuittaa setelin puhelimesi näytöltä ”Käytetty” painikkeella…

4. …ja vahvistaa ”Kyllä”

11 2

43

Setelin tilaus älypuhelimella

1. Voit tilata setelin myös toimipaikkakoodilla (esim. ravintolakoodi) , kuten tekstiviestitilauksessa.Anna koodi, setelin arvo ja liukumäärä

2. Saat mobiilisetelin matkapuhelimeesi

3. ”Setelit” näyttää sinulle käytössäsi olevien seteleiden lukumäärän.

4. Päivän setelitilauksesi löydät ”Tilaukset” sivulta klikkaamalla toimipaikan nimeä. Käytetty seteli on yliviivattu.

11 2

3 4

Lessons learned…..

Positiivista: Parantaa asiakastyytyväisyyttä, lisää kilpailuetua ja

imagoetu EB:n tapauksessa tuo kustannussäästöä (Pay off

laskettavissa) Voidaan tuoda lisää uusia palveluja ja toiminnallisuuksia

jatkossa

Negatiivista: Melko kallista touhua & paljon työtä

1. vaihe + jatkokehitys (uudet palvelun ominaisuudet näyttävä myös appsissa?)

Usean puhelinalustan tukeminen Uutena Windows ja Meego (?)

Puhelinalustat kehittyvät => vaikuttaa myös appseihin

Eri kieliversiot eri maihin eri palvelukokonaisuuksilla

Mutta kun tälle tielle on lähdetty….

KiitosKai Friman

COO

[email protected]

+358 40 502 5174

mailto:[email protected]

Ohjelma







10.00 Tauko




10.50 Keskustelua

Lataa kalvothttp://www.exove.fi/seminaarimateriaali

mobiilisovellukset ja -sivustot

Technology

lyd oikea

eazybreak

exove design

exove design

exove taustajrjestelmt10

10 miten mobiiliin

ville pyki

trendit mobiilissa9