Mobile Portfolio2. & Design Principles. Summer 2013.

Transkript

1 Mobile Portfolio2 & Design Principles. Summer 2013.

2

3 1. Sketches1 After 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 include exact placing and sizing of elements. A visual shorthand of sorts. Usually this is not shared except internally.

4 2. Flowchart2 To get a firmer idea about flows and organization of features, a flowchart is drawn. It too usually starts as a sketch, but I prefer to move quickly into eg. Visio to complete it. Ideally this is discussed with the client time and client permitting. The flowchart ends up being quite detailed taking all scenarios into account.

5 BRÆNDSTOF 3. High Fidelity Wireframes4 HVILKEN TYPE BRÆNDSTOF BRUGER DIN Project: TOYOTA? Screen #: 11 Title: VEJHJÆLP - RING OPERATØR 3 VEJHJÆLP i 5 92 After the sketches and wireframes are at a reasonable level of completion, high fidelity wireframes are created. ILLUSTRATION 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. 95 Hi-Fi Wireframes can be used in focusgroups and will always be shared with the client together with the flowchart. 98 There can be several iterations at this level of completion depending on project complexity, timeline and budget. TOYOTA VEJHJÆLP BETINGELSER FOR TOYOTA VEJHJÆLP <BREAD> <BREAD> <BREAD> <BREAD> RING TIL VEJHJÆLP I DANMARK FIND VÆRKSTED I UDLANDET VÆRKSTEDER I DANMARK VÆRKSTEDER I UDLANDET 12 WEBLINK DIESEL Notes: Overskrift samt brødtekst hentes fra server.

6 4. Fully designed views4 In 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 designs are used to generate the actual artwork 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.

7 5. Learning1 ROSKILDE 2010 MOBILE FESTIVAL GUIDE SUMMARY THE 2402 ENCOUNTERS FROM THE REAL WORLD Key Figures iphone Android Flash Lite Total 791, , ,751 Pageviews 1,026,076 (77.1%) (12.3%) (10.6%) Pageviews 411,221 68,412 52,817 GENDER? 532,450 during RF (77.2%) (12.8%) (10.0%) 92,435 21,670 12,460 Male 55.3% (-1.8%) App. launches 126,565 (73.1%) (17.1%) (9.8%) Female 44.7% (+1.8%) App. launches 56,149 11,672 6,733 74,554 during RF (75.3%) (15.7%) (9.0%) AGE? 10,745 1,842 5,873 App. downloads 18,460 (58.2%) (10%) (31.8%) Year-to-year App. launches pr. download Pageviews/app launch (2009: 7) 8.1 Pageviews/app launch during RF (2009: 7.3) 7.1 Mobile Recharges 6,255 N/A N/A N/A sold (2009: 2,969) Most recharges 108 N/A N/A N/A in 1 hour * (2009: 69) Texts to bigscreen N/A N/A N/A 1,405 (2009: 446) Festival Friends 4,371 N/A N/A N/A profiles (2009: 453) Festival Friends 848 N/A N/A N/A statusmessages (2009: 210) Tweets sent ** N/A N/A N/A 1,884 Schedules created N/A N/A N/A 3,136 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. Unless noted otherwise, all figures are for the period April 14th - July 5th During RF means 26th June July 5th *) July 2nd 10am-11am **) Excluding FF status sent as tweets Excerpt from the 2010 report based on 2,402 user interviews at Roskilde Festival. Based 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 >20: 27.2% (-10.4%) 20-25: 53.4% (+7.7%) 26-30: 14.9% (+2.0%) 30<: 4.5% (+0.7%) NUMBERS IN () ARE CHANGES COMPARED TO 2009 App. Launches Pageviews during RF Pageviews pr. launch during RF App. downloads 12,472 21, A 35, , ,450 4,3 7,3 7,2 9,567 18,460 Top 5 screens Views % of total views Schedule dayview 127, % Band Info 106, % Schedule 59, % Edit schedule 45, % Login 32, % 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? 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%) Yes: 35.5% (+1.6%) No: 64.5% (-1.6%)

8 Portfolio

9 ShowMeGolfers Client: ShowMe Year: Platform(s): ios Available today: Yes (search showmeg )

10 ShowMe Tournament Client: ShowMe Year: Platform(s): ios Available today: Yes (search showmeg )

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

12 Travel Vaccination Booking en #: 300 Title: ck Bestil tid sbestilling Screen #: 310 Title: Screen #: 311 Title: Screen #: 312 Title: Screen #: 313 Title: Back Back Bestil tid initial Bestil tid countries Back Rejselængde Back Vaccinationer Argentina Forretnings eller kongresrejse af search error nogle dages varighed We didn t find a country. Check and søg efter land try again or use a map. Belize OK Arrangeret turistrejse af op til fire Bolivia ugers varighed html content on this page eller vælg kontinent på kortet... Individuel rejse af nogle måneders html template inside app varighed for headers and def. content... Difteri-Stivkrampe (tetanus) Langvarig individuel rejse i halve Di-Te Booster er en injektion der år. Hepatitis A Vaccination består af to injek- Venezuela Bestil tid Client: European LifeCare Group Year: 2011 Platform(s): ios/android Available today: Yes (search: dlvs ) Initial page Tjek/Forside Rejseråd Bestil tid Alarm Notes: Tjek/Forside Rejseråd Bestil tid Alarm Notes: Tjek/Forside Rejseråd Bestil tid Alarm Notes: Tjek/Forside Rejseråd Bestil tid Alarm Notes: an her bestille tid til vaccination. Når du dfyldt alle felterne og klikket på "bestil" tager du automatisk en med en Hvor skal I hen? + bestil tid directly to bestil tid In the content of additional info text field we will use the results items from Hvor skal I hen? form rside Rejseråd Bestil tid Alarm s: Screen #: 320 Title: Screen #: 321 Title: Screen #: 322 Title: Screen #: 323 Title: Screen #: 324 Title: Screen #: 325 T Back Bestil tid > Klinik Back Bestil tid > Dato Back Bestil tid > Tidspunkt Back Bestil tid > personal data Back Bestil tid > notes Back Bestil tid on-line alert + internal data base syncronisation stack of tasks (in the background) on-line mode The app is going to... please fill this with correct text Cancel OK Srv task 1017 Srv task DB sync Rejseklinik Ålborg, Nytorv Rejseklinik Herning, Bredgad Rejseklinik Hillerød. Helsin Rejseklinik Slagelse, Langes Srv task 1018 lørdag d. 14. Maj 2011 mandag d. 16 Maj 2011 onsdag d. 18. Maj lørdag d. 18. Juni 2011 Srv task 1019 kl. 15:08 kl. 15:16 kl. 15: kl. 17:40 Antal voksen: * Antal børn * Navn: * * Bekræft * Mobil: * Next Referencenummer: (ikke obligatorisk) Ønsker du at oplyse om rejsemål, særlige forhold eller har du spørgsmål som ønskes besvaret i forbindelse med vaccinationen så skriv det her: can we put some suggestion here acc vacc. type without the products names? Difteri-Stivkrampe (tetanus) Hepatitis A Bestil Srv task 1020 Confirmati This is a confirmation klinik: Rejseklinik dato: lørdag d. 14 time: kl. 15:08 name: John Smith etc: I suppose confirmatio automaticaly (by the D and we don t need an Tjek/Forside Rejseråd Bestil tid Alarm Notes: Tjek/Forside Rejseråd Bestil tid Alarm Notes: Tjek/Forside Rejseråd Bestil tid Alarm Notes: Tjek/Forside Rejseråd Bestil tid Alarm Notes: Tjek/Forside Rejseråd Bestil tid Alarm Notes: Tjek/Forside Notes: Rejseråd Screen #: 21 Title: Screen #: 22 Title: Back Vacciner Vacciner Alle priser er pr. injektion/dosis Grundhonorar kr. 130,- pr. konsultation - børn 50% rabat. Vaccination Pris Antal Beskyttelse Back html content on this page Difteri 4 design default prepared before html this content tempaltes Difteri kr. 160,- 1(-3) 10 år These templates are comming

13 Elite Daters Client: Elite Daters Year: 2010 Platform(s): ios Available today: Yes (search: elite daters )

14 Toyotapp Client: Toyota Denmark Year: 2011 Platform(s): ios/android Available today: Yes

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

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

17 Copenhagen Fashion Week Client: Copenhagen Fashion Week Year: WoCo/CFW iphone app options available varies Flowchart according to existing v. 1.3 data - shown is the complete set of options (this comment covers screens 10-47) main menu items: - Copenhagen Fashion Week Shows. Copenhagen Fashion Week Events shows - details (10) events - details (18) shows - about (11) web link events - about (19) shows - runway (12) lg. view (13) events - runway (20) shows - runway review (14) events - runway review (22) shows - show on map (15) events - show on map (23) all screens on this level can reach eachother events - collectio n (24) all screens on this level can reach eachother Platform(s): ios + Android Available today: No. Copenhagen Fashion Week Trade Fairs. Copenhagen Fashion Week Showrooms. Copenhagen Fashion Festival Events. Copenhagen Fashion Week Designers web link lg. view (21) lg. view (25). Copenhagen Fashionweek.TV - Wonderful Copenhagen Cityguide UNLESS OTHER WISE NOTED, A MENU SELECTION IS CONSIDERED A SEARCH WHICH LEADS DIRECTLY TO THE SEARCH RESULT PAGE fairs - info (26) fairs - about (27) fairs - runway (28) fairs - show on map (63) all screens on this level can reach eachother web link lg. view (29) trend shows - about (30) trend shows - runway (31) trend showsabout (64) trend showsshow on map (65) all screens on this level can reach eachother interstitial displayed web link lg. view (32) here (8) showroo ms - details (33) showroo ms - about (34) showroo ms - runway (35) showroo ms - runway review (37) showroo ms - show on map (38) showroo ms - collectio n (39) all screens on this level can reach eachother cfw change search criteria (62) web link lg. view (36) lg. view (40) cfw search designer - about (41) designer - runway (42) design. - runway review (66) all screens on this level can reach eachother result- list view (3) web link lg. view (43) cfw search result- map view (4) web link CFF event - about (46) CFF event - show on map (47) display of time and distance dependent on data availability see for demo of the criteria tree (based on the CFW tree) main menu (2) cff interstitial displayed here when cff is clicked on 2 (70) fairs and shows (69) different types of results shown with different colors cfw search result- map view (55) cfw change search criteria (57) top 10's startup logo (1) cfw about (5) cfw about - detail submenu (50) view (48) cfw video (6) cfw video - player (49) neighbour hoods submenu (51) cfw search result- list view (56) all screens on this level can reach eachother woco city guide (7) interstitial displayed here (9) cph card submenu (52) item - item - item - item - rate show on about (58) ratings (59) (60) map (61) opens facebook in browser 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 opens youtube in browser nice to know (53) nice to know - detail view (54) web link item - rating details (71) dial number - Copenhagen Card - a premium discount card - Copenhagen on Facebook - Copenhagen on YouTube - Nice to know UNLESS OTHERWISE NOTED, A MENU SELECTION IS CONSIDERED A SEARCH WHICH LEADS DIRECTLY TO THE SEARCH transport maps (67) transport maps - large view (68) RESULT PAGE

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

19 DanChurchAid Client: Virtus Year: 2011 Platform(s): ios/android Available today: No

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

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

22 Roskilde Festival Mobile Guide Client: Roskilde Festival Year: Platform(s): ios/android/flash Lite Available today: No