Mobile Portfolio2kmkz.dk/wp-content/uploads/2013/08/mobile_portfolio_310713.pdf · 2. Flowchart2 To...

Mobile Portfolio2& Design Principles. Summer 2013.

1. Sketches1After hearing an inital briefing – or getting an idea – I move pretty quickly to sketching screens and functionalities in my notebook.

These sketches are pure wireframes with no consideration for design, colors – and may even be so loose as to not includeexact placing and sizing of elements.

A visual shorthand of sorts.

Usually this is not shared except internally.

2. Flowchart2To get a firmer idea aboutflows and organization offeatures, a flowchart is drawn.

It too usually starts as a sketch,but I prefer to move quickly intoeg. Visio to complete it.

Ideally this is discussed withthe client – time and clientpermitting.

The flowchart ends up beingquite detailed taking allscenarios into account.

Project: TOYOTA

OPERATØR

Screen #: Title:

Notes:

16 MIN BIL - VÆLG BRÆNDSTOF

BRÆNDSTOF

92

13

95

98

DIESEL

MODEL FARVE FUEL14 15

HVILKEN TYPE BRÆNDSTOF BRUGER DIN TOYOTA?

3. High Fidelity Wireframes4After the sketches and wireframes are at a reasonable level of completion, high fidelity wireframes are created.

These serve as functional layouts, and if they are created at actual size, they can be used for some pretty accurate user testing and client approval.

Hi-Fi Wireframes can be used in focusgroups and will always be shared with the client together with the flowchart.

There can be several iterations at this level of completion depending on project complexity, timeline and budget.

Project: TOYOTA

OPERATØR

Screen #: Title:

Notes:

11 VEJHJÆLP - RING

VEJHJÆLP

BETINGELSER FORTOYOTA VEJHJÆLP

3

TOYOTAVEJHJÆLP

VÆRKSTEDERI DANMARK

VÆRKSTEDERI UDLANDET

WEBLINK

<BREAD><BREAD><BREAD><BREAD>

12

ILLUSTRATION

Overskrift samt brødtekst hentes fra server.

FIND VÆRKSTED I UDLANDET

RING TIL VEJHJÆLP I DANMARK

5i

4. Fully designed views4In this step the various views and states of the app are designed completely.

Everything is done at 1:1 pixel precision if possible (for Android and Windows Phone projects this is quite a challenge and often a referemce resolution has to be chosen).

The ambition is to end up with a completed flowchart and set of designs before moving into actual production. The finished de-signs are used to generate the actual art-work used in the app itself.

I have never experienced this step being completed without numerous iterations both internally and with the client.

I prefer to use Adobe Illustrator for this phase,but Adobe Fireworks and Photoshop are good alternatives as well.

ROSKILDE 2010 MOBILE FESTIVAL GUIDE SUMMARYKey Figures iPhone Android Flash Lite Total

Pageviews791,068 (77.1%)

126,257 (12.3%)

108,751 (10.6%)

1,026,076

Pageviews – during RF

411,221 (77.2%)

68,412 (12.8%)

52,817 (10.0%)

532,450

App. launches92,435 (73.1%)

21,670 (17.1%)

12,460 (9.8%)

126,565

App. launches – during RF

56,149 (75.3%)

11,672 (15.7%)

6,733 (9.0%)

74,554

App. downloads10,745 (58.2%)

1,842 (10%)

5,873 (31.8%)

18,460

App. launches pr. download 8.6 11.8 2.2 6.9

Pageviews/app.launch 8.6 5.8

8.7 (2009: 7)

8.1

Pageviews/app. launch – during RF 7.3 5.9

7.8 (2009: 7.3)

7.1

Mobile Recharges sold N/A N/A N/A

6,255 (2009: 2,969)

Most recharges in 1 hour * N/A N/A N/A

108 (2009: 69)

Texts to bigscreen N/A N/A N/A1,405

(2009: 446)Festival Friends profiles N/A N/A N/A

4,371 (2009: 453)

Festival Friends statusmessages N/A N/A N/A

848 (2009: 210)

Tweets sent ** N/A N/A N/A 1,884Schedules created N/A N/A N/A 3,136

– Unless noted otherwise, all figures are for the period April 14th - July 5th 2010.– “During RF” means 26th June – July 5th*) July 2nd 10am-11am**) Excluding FF status sent as tweets

Year-to-year 2008 2009 2010App. Launches 12,472 21,405 126565A

Pageviews – during RF 35,161 109,317 532,450

Pageviews pr. launch – during RF 4,3 7,3 7,2

App. downloads 9,567 18,460

Top 5 screens Views % of total views

Schedule dayview 127,324 12.4%Band Info 106,993 10.4%Schedule 59,458 5.8%Edit schedule 45,359 4.4%Login 32,638 3.2%

5. Learning1

Whenever possible conduct tests, interviews, gather usage stats etc.

The results can be quite surprising and the improvements that become possible can be equally impressive.

In my experience this step is overlooked far too often, as many clients end the development project upon delivery.

ROSKILDE 2010MOBILE FESTIVAL GUIDE

SUMMARYBased on 2402 encounters between our Mobile Festival Guides and the audience at RF10 we have gathered these stats.The data was collected using a mobile application and was submitted directly after each encounter.This was not a survey – festival guests were unaware of this activity. Thus, the submissions are the results of the Mobile Festival Guides’ estimates

THE 2402ENCOUNTERS FROM THE REAL WORLD

GENDER?

Male 55.3% (-1.8%)Female 44.7% (+1.8%)

NUMBERS IN () ARE CHANGES COMPARED TO 2009

HOW WAS THE ENCOUNTER?

Super-duper: 34.5% (+0.4%)Good: 35.4% (-0.8%)

OK: 17.4% (-2.0%)Hmmm...: 12.7% (+2.4%)

DID THE ENCOUNTER LEAD TO A DOWNLOAD?

Yes: 35.5% (+1.6%)No: 64.5% (-1.6%)

AGE?

>20: 27.2% (-10.4%)20-25: 53.4% (+7.7%)26-30: 14.9% (+2.0%)30<: 4.5% (+0.7%)

MOBILE PHONE BRAND?

Nokia: 30.8% (-7.2%)Sony Ericsson: 20.9% (-3.7%)Unknown/other: 16.4% (-4.8%)

Apple: 16.3% (+11.1%)Samsung: 10.9% (+2.5%)

LG: 4.7% (+2.1%)

Excerpt from the 2010 report based on 2,402 user interviews at Roskilde Festival.

Portfolio

ShowMeGolfers Client: ShowMe Year: 2011-13 Platform(s): iOS Available today: Yes (search “showmeg”)

ShowMe Tournament Client: ShowMe Year: 2012-13 Platform(s): iOS Available today: Yes (search “showmeg”)

SAP Spectator App Client: ShowMe/SAP Year: 2013 Platform(s): iPad Available today: Private Dist.

DLVS

Notes:

splash screen

Screen #: 00 Title: startup

taskSrv

1

DLVS

my check list

about DLVS mobile

check list

Tjekliste / Forside

Notes:

Screen #: Title:

Tjek/Forside Rejseråd AlarmBestil tid

Rejseråd AlarmBestil tidTjek/Forside

Notes:

Screen #: Title:


check list item 1

check list item 2

check list item 3

check list item 4

check list item n

...

set alert

add note

Cancel Save

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam

change check list alert

Cancel Save

Oct 27Oct 27MonMon 77 0101

Oct 28Oct 28TueTue 88 0202

Oct 26Oct 26SunSun 66 0000 PMPM

Oct 25Oct 25SatSat 55 5959 AMAM

Oct 24Oct 24FriFri 44 5858or choose continent

select your check list bookmark

Cuba check list bookmark

China check list bookmark

Tjek/Forside Rejseråd AlarmBestil tid Tjek/Forside Rejseråd AlarmBestil tid

Notes:

Screen #: Title:

About Back

Lorem consectetur adipiscing elit. Pellentesque dapibus dapibus ullamcorper. Integer vitae

Screen #: 13 Title: About

Notes:

add. item content Back

Lorem consectetur adipiscing elit. Pellentesque dapibus dapibus ullamcorper. Integer vitae viverra diam. Aliquam nulla dui,

Screen #: Title: add. item

Notes:

consectetur adipiscing elit. Pellentesque dapibus dapibus consectetur adipiscing elit. Pellentesque dapibus dapibus

Argentina

Bolivia

...

...

Venezuela

Belize

Check listBack Check list countriesBack

+25989898789+25989898789

html content on this page

add own contact

You can also change the language of the app.Your chose will be valid immidietly at the next request.It work di�ernetly on the o�-line mode of the app

You can also change the language of the app.Your chose will be valid immidietly at the next

300

Vacciner as btn?


Allergi

Transportsyge

...

Vacciner - this menu item - last in table? or

Behandling i udlandet

Rejse og vaccinerBack

Notes:

Screen #: Title:

RejseapoteketUnder hvert emne er der fakta om sygdomme og en række praktiske råd du bør følge inden og under din rejse.


Vaccination Pris Antal Beskyttelse

...

VaccinerBack

Notes:

Screen #: Title:

VaccinerAlle priser er pr. injektion/dosisGrundhonorar kr. 130,- pr. konsultation - børn 50% rabat.

Difteri kr. 160,- 1(-3) 10 år

Stivkrampe (tetanus) kr. 160,- 3 3-5 år

Tyfus (injektion) kr. 270,- 1 3 år

directly to ‘bestil tid’

Hvor skal I hen?+ bestil tid

Notes:

Screen #: Title:


Tidsbestilling

Du kan her bestille tid til vaccination. Når du har udfyldt alle felterne og klikket på "bestil" modtager du automatisk en e-mail med en

eller vælg kontinent på kortet

søg efter land


Notes:

Screen #: Title:

Bestil tid initial Back

Bestil tidBack

search error

OK

We didn’t �nd a country. Check and try again or use a map.


Argentina

Bolivia

...

...

Venezuela

Belize

Bestil tid countriesBack

Notes:

Screen #: Title:


Rejseklinik Ålborg, Nytorv

Rejseklinik Hillerød. Helsin..

...

...

Rejseklinik Slagelse, Langes

Rejseklinik Herning, Bredgad

Bestil tid > KlinikBack

Notes:

Screen #: Title:


lørdag d. 14. Maj 2011

onsdag d. 18. Maj 2011

...

...

lørdag d. 18. Juni 2011

mandag d. 16 Maj 2011

Bestil tid > DatoBack

Notes:

Screen #: Title:


kl. 15:08

kl. 15:16

kl. 15:24

kl. 17:40

...

...

Bestil tid > TidspunktBack

Notes:

Screen #: Title:


Bestil tid > personal dataBack

Next

Notes:

Screen #: Title:


RejselængdeBack

Notes:

Screen #: Title:

Forretnings eller kongresrejse af nogle dages varighed

Arrangeret turistrejse af op til fire ugers varighed

Individuel rejse af nogle måneders varighed

Langvarig individuel rejse i halve år.


VaccinationerBack

Notes:

Screen #: Title:

html template inside app for headers and def. contentDifteri-Stivkrampe (tetanus)Di-Te Booster er en injektion der Hepatitis AVaccination består af to injek-

Bestil tid

Antal voksen: * Antal børn *

Navn: *

Email: *

Bekræft email: *

Mobil: *


Bestil tid > notesBack

Notes:

Screen #: Title:

Referencenummer:(ikke obligatorisk)

Ønsker du at oplyse om rejsemål,særlige forhold eller har duspørgsmål som ønskes besvareti forbindelse med vaccinationenså skriv det her:

Bestil

can we put some suggestion here accvacc. type without the products names?

Difteri-Stivkrampe(tetanus)Hepatitis A

lørdag d. 14. Maj 2011

kl. 15:08

John Smith

In the content of additional info text �eld we will use the results items from‘Hvor skal I hen?’ form

DLVS mobile 2011 project

App name: Lægens Rejserådapplicationwith o�-line mode func. and local storage (core data / sql) solutioninternal and system noti�cation alertsapp icon:

deadline for app stores submission: 20.06.2011http://www.sikkerrejse.dk / http://www.dlvs.dk

User Interface flow ver 0.2 (23.05.2011)

di�erent modes of noti�cation alerts

Initial page

310 311 312 313

320 321 322 323 324 325

on-line mode

OK

The app is going to ...please fill this with correct text

Cancel

‘on-line’ alert + internal data base syncronisation stack of tasks (in the background)

or choose continent

my contact bookmarks

my important contact

my chosen hospital



Notes:

Screen #: Title:

Argentina

Bolivia

...

...

Venezuela

Belize

Alarm ContactsBack

countries alarm listBack


...

...

Important addressesBack

Notes:

Screen #: Title:

alarm phone112

national hospital+25989878989

my country embassy+25923498789

embassy lawyers+25989878789

add contact

Cancel Save

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam

+25989898789

Notes:

Screen #: Title:

+25989898789

+259898342235Tjek/Forside Rejseråd AlarmBestil tid




Bestil tid > confirmationBack

Notes:

Screen #: Title:

Confirmation ticketThis is a confirmation that you ordered ...

klinik:

dato:

time:

name:

etc:I suppose confirmation email will be sendautomaticaly (by the DLVS server)and we don’t need any add. button here right?

Rejseklinik Ålborg, Nytorv


AllergiBack

Notes:

Screen #: Title:

LBI will prepare first html templatesDifteri-Stivkrampe (http://)maybe with links



4 design default prepared beforehtml this content tempaltes

These templates are comming from DLVS server or are in the locale storage

http://safari.web.browser

Notes:

wwwbrowseroutside the app

Open in Safari browser?

OKCancel


DifteriBack

Notes:

Screen #: Title:



4 design default prepared beforehtml this content tempaltes

These templates are comming from DLVS server or are in the locale storage

Bestil tid


check list contentBack

Notes:

Screen #: Title:

html template inside app for headers and def. contentDifteri-Stivkrampe (tetanus)Di-Te Booster er en injektion der Hepatitis AVaccination består af to injek-tioner. En injektion beskytter i 1 år. Med en revaccination efter 6-24 mdr. opnås beskyttelse i 25

13


DLVS

my check list

about DLVS

Notes:

Screen #: Title:


check list reminder alert

OK

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed

Notes:

Screen #: Title:

DLVS system noti�cation

OK

DLVS app noti�cation diam nonummy nibh euismod tincidunt

Notes:

Screen #: Title:

0

10 11 12

40

41

42 43

20

21 22

23

taskSrv

1017

taskSrv

1018

taskSrv

1019

taskSrv

1020

taskSrv

syncDB

Travel Vaccination Booking Client: European LifeCare Group Year: 2011 Platform(s): iOS/Android Available today: Yes (search: “dlvs”)

Elite Daters Client: Elite Daters Year: 2010 Platform(s): iOS Available today: Yes (search: “elite daters”)

Toyotapp Client: Toyota Denmark Year: 2011 Platform(s): iOS/Android Available today: Yes

Audi Connect Client: Audi Denmark Year: 2010 Platform(s): iOS + Android Available today: No

BMX World Championships Client: Wonderful Copenhagen Year: 2011 Platform(s): iOS + Android Available today: No

Copenhagen Fashion Week Client: Copenhagen Fashion Week Year: 2010-12 Platform(s): iOS + Android Available today: No

startup logo (1)

main menu

(2)

cfw searchresult- map

view (4)

woco cityguide (7)

shows -details

(10)

shows -about

(11)

shows -runway

(12)

shows -runwayreview

(14)

shows -show on map (15)

lg. view(13)

web link

all screens on this level can reach

eachother

events - about

(19)

events - runway

(20)

events - runwayreview

(22)

events - show on map (23)

events - collectio

n (24)

lg. view(21)

lg. view(25)

web link


eachother

fairs -info (26)

fairs -about

(27)

fairs -runway

(28)

showrooms -

about(34)

showrooms -

details(33)

lg. view(29)

web link

trend shows -

about(30)

trend shows -runway

(31)

lg. view(32)


eachother

showrooms -

runway(35)

showrooms -

runwayreview

(37)

showrooms -

show on map (38)

showrooms -

collection (39)

lg. view(36)

lg. view(40)

web link


eachother

designer- about

(41)

designer- runway

(42)

lg. view(43)


eachother

CFF event -about

(46)

CFF event -

show on map (47)

web link

cfw video (6)

cfw about (5)

events - details

(18)

web link

web link

design. -runwayreview

(66)

interstitial displayedhere (8)

cfwabout -

detail view (48)

cfwvideo -player

(49)

item -about (58)

main menu items:- Copenhagen Fashion Week Shows. Copenhagen Fashion Week Events

. Copenhagen Fashion Week Trade Fairs

. Copenhagen Fashion Week Showrooms. Copenhagen Fashion Festival Events. Copenhagen Fashion Week Designers

. Copenhagen Fashionweek.TV- Wonderful Copenhagen Cityguide

UNLESS OTHER WISE NOTED, A MENUSELECTION IS CONSIDERED A SEARCH

WHICH LEADS DIRECTLY TO THESEARCH RESULT PAGE

cfw searchresult- map

view (55)

cfw searchresult- list view (56)

woco city guide items:- What's on - events in the city

- What to do - comprehensive city guide- Top 10's - our recommendations

- Eat & Drink- See & Experience

- Neighbourhoods in Copenhagen- Copenhagen Card - a premium discount card

- Copenhagen on Facebook- Copenhagen on YouTube

- Nice to know

UNLESS OTHERWISE NOTED, A MENUSELECTION IS CONSIDERED A SEARCH

WHICH LEADS DIRECTLY TO THE SEARCHRESULT PAGE

top 10'ssubmenu

(50)

cph card submenu

(52) item -show on map (61)

web link dial number


eachother

nice to know (53)

nice to know -detail

view (54)

opens youtube in browser

opens facebook in browser

neighbourhoods

submenu (51)

interstitial displayedhere (9)

cfw change search

criteria (62)

cfw searchresult- list

view (3)

cfw change search

criteria (57)

WoCo/CFWiPhone appFlowchart

120510 - v. 1.3

different types ofresults shownwith different

colors

display of timeand distancedependent on

data availability

options available variesaccording to existingdata - shown is the

complete set of options(this comment covers

screens 10-47)

fairs -show on map (63)


eachother

trend shows-

show on map (65)

trend shows-about

(64)

cff interstitialdisplayed here

when cff isclicked on 2

(70)

see http://woco.lbi.dk/cfw/ for demo of the criteria

tree (based on the CFW tree)

item - rate(60)

item -ratings (59)

transportmaps (67)

transportmaps -

largeview (68)

fairs and shows (69)

item -rating

details (71)

COP15 Copenhagen Client: United Nations Year: 2009 Platform(s): Symbian 60 Available today: No

DanChurchAid Client: Virtus Year: 2011 Platform(s): iOS/Android Available today: No

golf.dk Client: Golf.dk Year: 2011 Platform(s): iOS Available today: No

Sudoku Client: Nokia Year: 2006 Platform(s): Flash Lite 1.1/2.0/Java Available today: No(!)

Roskilde Festival Mobile Guide Client: Roskilde Festival Year: 2008-2011 Platform(s): iOS/Android/Flash Lite Available today: No

Mobile Portfolio2kmkz.dk/wp-content/uploads/2013/08/mobile_portfolio_310713.pdf · 2. Flowchart2 To...

Documents

Transcript of Mobile Portfolio2kmkz.dk/wp-content/uploads/2013/08/mobile_portfolio_310713.pdf · 2. Flowchart2 To...