GRAFISK PRODUKTION & WORKFLOW // MEDIQ DANMARK // BEVILLINGS SYSTEM
GRAFISK PRODUKTION & WORKFLOW // MEDIQ DANMARK // BEVILLINGS SYSTEM Om kunden Mediq Danmark A/S er Danmarks førende handelsvirksomhed indenfor sundhedssektoren. I 2009 gik virksomhederne Hermedico og Kirudan sammen under Mediq, der I 2012 igangsatte projekter med henblik på en øget elektronisk håndtering af ordre og bevillinger. Målgrupper Kundens ene målgruppe er de nye og eksisterende kommunale kunder der til dagligt administrere og har overblikket over bevillinger, aftalevarer, borgere og forbrug. Anden målgruppe er den eksisterende kundeservice, der til dagligt servicerer kommunale kunder, og fremadrettet skal servicerer de kommunale portalkunder. Problemstilling Alle bevillinger godkendes af Mediqdanmark før forsendelse af hjælpemidler. Mediq ønsker at omdanne deres analog bevillingssystem til en ny digital webportal i deres allerede implementerede e-commerce miljø. Kommuner har dog ikke de nyeste it løsninger, og majoriteten gør derfor ikke brug af moderne browsere. 31 (MEDIQ Danmark Bevillingssystem En webportal til Mediq s kommunale kunder
GRAFISK PRODUKTION & WORKFLOW // MEDIQ DANMARK // BEVILLINGS SYSTEM IA og Wireframes Under og efter workshop fasen, er det mit job at notere og skitsere wireframes udfra Adapt og Mediq s kommunikation. 32
Design Mediq ønsker at nedarve den visuelle identitet fra webshoppen, og så vidt muligt genanvende UXD (user experience design) webshop designet bruges derfor som design guide, og analyseres for genbrugelig CSS og IE7 problemstillinger 33
Redesign til Bevillingssystem og IE7 version Fordi systemet implementeres i den eksisterende E-handels løsning, genbruger jeg så vidt muligt samme HTML tags og klasser i koden, som i webshoppen. Det er smart fordi man så ikke behøver at definere dobbelt css til samme element typer, og gør at hele løsningen er nemmere at vedligeholde. De gennemgående elementer layoutes, og godkendes af kunden. 1. input felter og tekst styles 2. Tooltip ved mouse over 3. De lange klientlister kan sorteres alfabetisk 4. Mouse over effekt på lister for bedre visuel navigering 5. Pagers tilføjes i top og bund i forhold til usability og performance Opret bevillingshoved Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas faucibus mollis interdum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Hr. Peter Petersen CPR: 020202- XXXX Kunde ID: 123456-6 Bevilling Inkontinens Start: 2012-10-07 Diabetes Start: 2012-10-07 Vis forbrug Vis forbrug Vis Vis Du er logget ind som Henrik Henriksen Bevilling Varenr. Varenavn Startdato Slutdato Forbrug 0123110 Unomedical 2014-02-18 2014-05-17 30 0123110 Unomedical 2014-02-18 2014-05-17 30 0123110 Unomedical 2014-02-18 2014-05-17 30 0123110 Unomedical 2014-02-18 2014-05-17 30 Du er logget ind som Henrik Henriksen Opret bevilling Download til Excel Tilbage til bevilling Tilbage til klient Klientliste Stamdata CPR: 2121233030 Stamdata CPR: ( i ) 2121233030 CPR: ( i ) Her kan du søge på de klienter der har bevilling i kommunen. Du kan f.eks søge på navn eller Cpr nummer. 1 CPR: ( i ) Adresse: ( i ) 21218 21218 Postnummer: ( i ) Navn: ( i ) Postnummer: ( i ) 2 Bevillingsvaregruppe: ( i ) Status: ( i ) Navn: Titel: Adresse: Postnummer: By: Henning K Andersen Pensionist Gade gadesen 12 2222 Gåserød Navn: ( i ) Henning K Andersen Titel: ( i ) Pensionist Adresse: ( i ) Gade gadesen 12 Postnummer: ( i ) 2222 By: Gåserød Dette er en info boks. den aktivers ved Dette at flytte er en musen info boks. over ( i den ) aktivers ved at flytte musen over ( i ) Kommune: Telefon nummer: Andeby 47474747 Kommune: Andeby Telefon nummer: ( i ) 47474747 Nulstil Download som Excel fil Adresse Stednavn Postnummer Sidste levering Bevillingsdato 3 1 2 3 4 5 6 7 Adresse Stednavn Postnummer Sidste levering Bevillingsdato Spærring Cpr-nummer Navn Navn Adresse Stednavn Postnummer 212183 3030 Jeppe Jeppesen Strandvej 17 3333 10-04-2009 212183 3030 Jeppe Jeppesen Strandvej 17 3333 4 08-02-2013 10-04-2009 Bestil vare til patient Rediger 212183 3030 Jeppe Jeppesen Strandvej Jeppesen 17 Strandvej 333317 08-02-2013 10-04-2009 3333 08-02-2013 10-04-2009 212183 3030 Jeppe Jeppesen Strandvej 17 3333 08-02-2013 10-04-2009 Søg Navn Bruger-id E-mail Administrator 212183 3030 Jeppe Jeppesen Strandvej Jeppesen 17 Strandvej 333317 08-02-2013 10-04-2009 3333 08-02-2013 10-04-2009 Jeppe Jeppesen 20RD2910 navn@mail.dk Ja Helle Bokmann 52RM1223 navn@mail.dk 212183 3030 Jeppe Jeppesen Strandvej Jeppesen 17 5 Strandvej 333317 08-02-2013 10-04-2009 3333 08-02-2013 10-04-2009 Jeppe Jeppesen 20RD2910 navn@mail.dk Ja 212183 3030 Jeppe Jeppesen Strandvej 17 3333 08-02-2013 10-04-2009 212183 3030 Jeppe Jeppesen 212183 Strandvej 3030 17 Jeppe Jeppesen 3333 Strandvej 17 08-02-2013 10-04-2009 3333 08-02-2013 10-04-2009 1 1 2 3 4 5 6 7 Helle Bokmann 52RM1223 navn@mail.dk Jeppe Jeppesen 20RD2910 navn@mail.dk 212183 3030 Jeppe Jeppesen 212183 Strandvej 3030 17 Jeppe Jeppesen 3333 Strandvej 17 08-02-2013 10-04-2009 3333 08-02-2013 10-04-2009 Mail adresse: Flexlevering navn@mail.dk Hjemme efter kl. 12.00 Helle Bokmann 52RM1223 navn@mail.dk Mail adresse: ( i ) Flexlevering ( i ) navn@mail.dk Jeppe Jeppesen 20RD2910 navn@mail.dk Ja Hjemme efter kl.12.00 Gem 1 2 3 4 5 6 7 34
Begrænset kompatibilitet med IE7 browsere Kundens kritiske krav er IE7, så jeg må ind og udvikle løsningsmodeller(fallbacks). Jeg bruger javascript (Jquery) til at løse css udfordringer i forskellige situationer, som f.eks: (1 MODENIZR BROWSER DETECTION (2) JQUERY EVEN OG ODD (1) Modenizr Jeg bruger biblioteket Modernisr, der analysere brugerens browser oplysninger, og i vores tilfælde tildeler HTML IE7 og IE8 klasser. Det betyder at vi kan definere en fallback css der kun rammer hvis brugeren er en IE7 browser. (2) Even og Odd Der findes meget lange kundelister, og for at kunne manipulere rækkerne med css skriver jeg en global jquery kode som er målrettet hele systemets tables. (3) INTERNET EXPLORE, GRADIENT (SCRIPT) FILTER (3) Gradienter I IE7 bruger jeg filter (MS script) til browser genereret gradient. 35
Workflow Mit workflow i sammarbejde med resten af Adapt teamet Løbende test og kvalitetskontrol Normalt udvikler jeg i Chrome som understøtter de nyeste teknologier og har en god udvikler addon. Workshop med kunden Godkendelse af kunden Jeg tester løbende, og sammen med front-end afdelingen i Adapt kvalitets tester vi i firefox og safari samt IE Research IA implementeres i Wireframes Analyse af design Test i Internet Explore fra en Mac foregår via Virtual machine. Det er et software som virtuelt køre en version af windows, hvor vi derigennem kan teste i forskellige IE browsere. Opstartsmøde Implementering af funktionaliteter Implementering af design Redsign til IE7 Godkendelse af intern udvikler version Intern test Godkendelse af design Upload til test miljø Overlevering til kundens E-Commerce miljø Godkendelse af kunden 36
Setup Data og udviklingsflow i forhold til Mediq Bevillingssystem Mediq Danmark Via et script modtager vi klientlister fra Mediq danmark (i realtime), så godkendelser kan ske inden for få sek. System/netværk Nextweb CMS GIT (version styring) Mediqdanmark.dk E-commers løsning Anvendte værktøjer igennem Mediq projektet Balsamiq Mockup Illustrator Photoshop 960 grid Coda2 Jquery compass, SASS (CSS Authoring Framework.) Information kilder Caniuse.com msdn.microsoft.com w3schools.com Udviklings miljø (Fælles) GIT Version styring Test Bevillings system Live Lokalt udvikler miljø Front & Back-end Lokalt udvikler miljø Front & Back-end Lokalt udvikler miljø Front & Back-end 37
Compass og SASS/CSS Compass hjælper med at gøre workflowet hurtigere og en del sjovere. Man arbejder f.eks med indlejret css fremfor det traditionelle css workflow. Der er mulighed for at arbejde med variabler, og mixins som betyder global kontrol og er med til at skabe en effektiv arbejdsgang. Compass Variabler Variabler i SASS Exempel på et simpelt mixin Mixin i brug med @include Exempel på en complex mediaquery (responsive) mixin Mixin i brug med @include 38
Eksempel på indlejret css Normal CSS body { body section { body section header { body section header nav { body section header nav ul { body section header nav ul li { body section header nav ul li a { SASS body { section { header { nav { ul { li { a { Med sass slipper man bl.a. for at gentage forlængelser MERE INFORMATION: 39