WORKFLOW
WORKFLOW I dette workflow vil jeg vise en mobil applikations proces. Denne applikation er en rejse applikation vi har lavet for Storebrand, som er et norsk forsikringsselvskab. De skulle bruge en rejseapplikation til deres kunder, hvis et uheld på rejsen opstår. Målgruppen er for alle rejsende. Om man er en børnehave på hyttetur eller enkel person på forretningsrejse til Australien. Applikationen indeholder et raporteringssystem og et søgen efter hjælp. Applikationen har 7 muligheder man kan få hjælp fra. Det er apotek, ambassade, politi, tandlæge, nødnumre, brand, og lufthavne. Verdenskortet bliver brugt af Google Maps API. SOS International som er mellemledet i denne proces har godkendte behandlingssteder rundt om i verden som bruges i denne applikation til at få hjælp fra. Der er også ikke godkendte behandlingssteder på kortet, hvis det er akut hjælp. Gennem applikationens rapporteringssystem vil man få hjælp af SOS Inernational til, at blive guidet og transporteret det rette sted hen. Hvis man har brug for akut hjælp, er der også mulighed for at ringe til det tilrejsende lands lokale politi og ambulance direkte ved få tryk. Økonomi Økonomien for vores perspektiv er at hvert selvskab betaler et startup fee, og derefter et månedligt betaling. Det månedlige betaling indeholder bl. a. serverspace, vedligeholdelse, og opdateringer. Skal selvskabet have flere applikationer, halveres den månedlige betaling. Ide Selve ideen med denne/disse applikationer er sket i sammenarbejde med SOS International. Vi har haft mange opgaver fra deres side, men denne/disse applikationer er steppet videre i hvordan fremtidens applikationer kan bygges op. SOS International er dem der kender til kunderne, så derfra kommer vores opgaver. Opgaven I denne opgave handlede det også om at designe en applikation der kunne ændres hurtigt når nye kunder kommer til, så derfor er det meste af applikationen bygget op i blokke, som nemt kan genbruge eller fjernes, hvis det ønskes. Hvis kunden vil have ændret noget større ved applikationen som f. eks.. til et andet ikonsæt eller baggrundsfarve, kommer de til at betale for det. Farver Farverne ændre sig fra kunde til kunde. Denne applikation har brugt farver fra deres egen designguide. Font Som standart vil Open Sans blive brugt til applikationen. Det er en Sand Serif font som er en flot og stilren font, der passer til det digitale og ikke mindst til det flat design, jeg har designet ud fra. Med det sagt Alt hvad der kan gøres i vektor bliver gjort i vektor. Da der er så mange medier med forskellige skærmopløsninger. Vektor skal bruges, ellers vil skaleringer blive utydeligte og uklare. 34
1.5 5.0 6.0 7.0 Vilkår Mine rejser Ingen tilføjet Tilføj rejse 1-3 (Dropdown/vælg) b. c. 1.0 2.0 3.0 4.0 Login first time Login Normal Map/main (Slide) Menu 5.1 Mine rejser Oprettet rejser a. 6.1 7.1.1 7.2.1 (Forsinket ankomst) 3.1 3.2 Akut hjælp 6.2 Tilføj rejse 2-3 Tilføj rejse 3-3 (sygdom i udlandet) 1.1.1 1.2 g. 5.2 Tilføj 7.1.2 7.2.2 d. e. Ansvarsfraskrivlse Min profil 5.3 5.4 5.5 Bogmærker Specifik Detalieret Rejse deltagere Tilføj deltagere bogmærke bogmærke 1-2 Camera billeder 1-2 indput 1.1.2 1.1.3 Opret profil/ Rediger profil 1-2 1.6 6.3 lokalt Forsikringskort Min rejse 1.5 7.1.3 7.1.4 2-2 indput Opret profil/ Rediger profil 2-2 Mine indmelde skader 7.0.1 OK Tak for din anmeldelse b. Hospitaler vil være slået til fra start. c. Numpad popper op med det samme ved login. Efter indtastet 4-cifret kode låses der op for appen. Der er ingen ok/login knap. f. Information omkring hospitalets dækning af SOS 7.2.3 7.2.4 7.2.5 7.2.5.1 7.2.6 7.2.7 Hvis Ja Hvis Nej Hospital Hvis Nej Er du indlagt? Rigtige hospital? Vælg hospital Skriv hospital information manuelt f. WORKFLOW PROCESSEN 1 : Internt blev der lavet et par mockups af applikationen som skulle godkendes af Storebrand, så havde vi noget at gå ud fra. 2 : Whiteboard screenflow skitsering. 3 : UI-kit bliver opbygget. 4 : Ikonsæt opbygges. 12 a. - Hvis ingen adresse eller medrejsede er tilføjet vil ikonet ikke vises. Hospitaler vil være tjekket af fra start i step 2, sådet bogmærke vil altid vises. d. Forsikringskortet e. Anmeldelses historik. g. Profil billede. Native camera roll popup - om man vil vælge et billede et tage det med det samme. 5 : Screenflowet opbygges sammen med designet. På ca. 1 uge skulle de 30+ screens opbygges og laves. 6 : Med 2 dages mellemrum havde Storebrand 3 rette runder til det fulde design. Derefter er der Sign-off for applikationen. Udviklingen kan begynde. I sammenfatning med applikationen opbyggede jeg et digitalt screenflow, som var nemmere at finde rundt i for både udvikler og kunden. Jeg opbyggede design guidelines for applikationen. Den er god i baghånden for alle. 35
WORKFLOW ØVRIGE TILFØJELSER Mappestruktur og orden er en vigtig del af mit arbejde. Med Dropbox synkroniserer mapperne med udvikler og projektleder. Alle har adgang, så man den vej igennem kan dele filer. Mine Photoshop layer er sorteret sådan at hvert screen har et nummer. Med dette nummer refererer jeg til de screens jeg gemmer ud og fremviser til kunden. Der er over 40 screens, så det giver mange layers. Eksempel på 2.0 normal login layer som er gemt ud som et JPEG billede. Til opbygningen af applikationen bruger jeg programmet Skala Preview, som live opdaterer, og sender billedet til min mobil, så jeg kan se, hvordan den ser ud, mens jeg designer den. Skala Preview skal være installeret på begge enheder, før det virker. For fremvisning af applikationen bruger jeg Marvel, som synkroniserer med Dropbox. Med Marvel kan man sammesætte ens JPG/PNG, så det føles som en rigtig applikation, ved at lave markere områder på ens JPG/ PNG. Derefter sender man et link via SMS eller andet, og derfra har kunden en live prototype af applikationen. Man kan også vælge at have hvert screen som hver sin PSD fil, så når man gemmer sin fil, opdaterer den automatisk, men med over 40 screens syntes jeg, en PSD fil med alle screens holder det bedre sammen, hvis der skal være større ændringer. Med smart objects har jeg hurtigt kunne ændre elementer gennem hele designet på en gang. Det kunne f. eks.. være knapperne i applikationen. 36
I DET STORE BILLEDE Denne mobil applikation kommer til at være en del af et større CMS. Systemet får en backend for Storebrand, så de kan komme til at se en masse infografik. Det kommer også til at indeholde et system, så de kan opdatere og tilføje f. eks.. deres forsikringsvilkår. Fremtidige planer med dette CMS er også, at der skal kunne sendes PUSH notifikationer ud til brugerne af applikationen. Det kunne være via mail, SMS eller f. eks.. en popup på en bestemt side. Mobil applikationen er bygget op i Ionic, hvorimod CMS er bygget op i Twitter Bootstrap, så der er noget grid system jeg skal holde sig inden for. Dette CMS er stadigvæk under udvikling. Disse enkelte screens, er første version af systemet. 37
REFLEKTION OG LÆRING Opgaven fik en svær drejning, da storebrand kom med en ny design guide til slut i hele forløbet. Deres hjemmeside var pludselig under udvikling af nyt design. Alt design til applikationen var mere eller mindre godkendt, men nu ville de have samme stil til deres applikation, som deres hjemmeside skulle have. Deres baggrundsfarve skulle pludselig ændres til deres sand farve, hvilket betød at den blev enorm tung at se på. Der var flere af elementerne der fik farveændringer fordi sand farven ikke passede sammen med de nuværende elementer og farver. Ikonerne er også blevet ændret til deres eget ikonsæt. Deres ikoner virker som nogle gamle ikoner, som jeg ikke syntes passer ind i resten af designet. De er tunge at se på. Resultatet Resultatet for vores applikation syntes jeg er fantastisk inden Storebrands design ændringer. Jeg har fået opbygget en applikation i nutidens design som med få ændringer, kan få et nyt udeende til den næste kunde, uden det tager for lang tid. 38