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
GRAFISK PRODUKTION & WORKFLOW // MEDIQ DANMARK // BEVILLINGS SYSTEM
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
GRAFISK PRODUKTION & WORKFLOW // MEDIQ DANMARK // BEVILLINGS SYSTEM
Redesign til Bevillingssystem og IE7 version
Du er logget ind som Henrik Henriksen
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
Bevilling
Inkontinens Start: 2012-10-07
Vis forbrug
Diabetes Start: 2012-10-07
Vis forbrug
Vis Vis
Vis Vis
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 Opret bevilling bevilling
Download til Excel
Stamdata
Klientliste 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:CPR: ( i )( i )
Adresse: ( i )
21218
Bevillingsvaregruppe: ( i )
2
21218
Postnummer: (i) Postnummer: ( i )
Navn: ( i )
Status: ( i )
Dette er en info boks. den aktivers ved
Dette er enmusen info boks. aktivers ved at flytte over ( iden ) at flytte musen over ( i ) Nulstil
Adresse
212183 3030 212183 3030
Jeppe Jeppesen Jeppe Jeppesen
Stednavn
Postnummer
3
Strandvej 17
Strandvej 17
3333
212183 3030 212183 3030
Jeppe Jeppesen Jeppe Jeppesen
Jeppe Jeppesen
Strandvej 212183 3030 17 Jeppe Jeppesen
Strandvej 17
3333
212183 3030
212183 3030
3333
Strandvej 17
Jeppe Jeppesen
3333
4
3333
3333 17 Strandvej
3333
Strandvej 17
JeppeStrandvej Jeppesen 212183 3030 3030 17 Jeppe Jeppesen 212183 Strandvej 17 Jeppe Jeppesen 212183 3030
212183 3030
Jeppe Jeppesen
Stednavn
3333 17 Strandvej
212183 3030 3030 Jeppe Jeppesen 17 212183 JeppeStrandvej Jeppesen
Strandvej 17
Bevillingsdato
08-02-2013
Adresse Postnummer
Stednavn
212183 3030 3030 Jeppe Jeppesen 17 212183 JeppeStrandvej Jeppesen
212183 3030
Sidste levering
Tilbage til klient
Stamdata
CPR:
2121233030
CPR:
(i)
2121233030
Navn:
Henning K Andersen
Navn:
(i)
Henning K Andersen
Titel:
Pensionist
Titel:
(i)
Pensionist
Adresse:
Gade gadesen 12
Adresse:
(i)
Gade gadesen 12
Postnummer:
2222
Postnummer:
(i)
2222
By:
Gåserød
By:
Gåserød
Kommune:
Andeby
Kommune:
Andeby
Telefon nummer:
47474747
Telefon nummer:
(i)
47474747
Mail adresse:
navn@mail.dk
Mail adresse:
(i)
navn@mail.dk
Flexlevering
Hjemme efter kl. 12.00
Flexlevering
(i)
Hjemme efter kl.12.00
1 2 3 4 5 6 7
Cpr-nummer Navn Navn Cpr-nummer Navn NavnAdresse
212183 3030
Søg Søg
Download som Excel fil
Tilbage til bevilling
5
3333
Strandvej 3333 17 3333
Strandvej 17
3333
10-04-2009
Spærring Postnummer
Sidste levering
Bevillingsdato
08-02-2013
08-02-2013
10-04-2009
10-04-2009
08-02-2013
10-04-2009
3333
08-02-2013
08-02-2013
10-04-2009
10-04-2009
08-02-2013
10-04-2009
3333
08-02-2013
10-04-2009
08-02-2013 08-02-2013
10-04-2009
08-02-2013
10-04-2009
08-02-2013
10-04-2009
3333 10-04-2009
Bestil vare til patient
08-02-2013
Rediger Rediger
Bruger-id
Jeppe Jeppesen
20RD2910
navn@mail.dk
Helle Bokmann
52RM1223
navn@mail.dk
Jeppe Jeppesen
20RD2910
navn@mail.dk
Helle Bokmann
52RM1223
navn@mail.dk
Ret
Jeppe Jeppesen
20RD2910
navn@mail.dk
Ret
Navn
08-02-2013 08-02-2013
10-04-2009 10-04-2009
Jeppe Jeppesen 212183 Strandvej 17 3030
Jeppe Jeppesen
3333 Strandvej 17
08-02-2013
10-04-2009 3333
Jeppe Jeppesen 212183 Strandvej 17 3030
Jeppe Jeppesen
3333 Strandvej 17
08-02-2013
10-04-2009 3333
212183 3030
Jeppe Jeppesen
Strandvej 17
3333
08-02-2013
10-04-2009
212183 3030
Jeppe Jeppesen
Strandvej 17
3333
08-02-2013
10-04-2009
1
1 2 3 4 5 6 7
1 2 3 4 5 6 7
Gem Gem
10-04-2009
08-02-2013
10-04-2009
Helle Bokmann
52RM1223
navn@mail.dk
Jeppe Jeppesen
20RD2910
navn@mail.dk
08-02-2013
10-04-2009
Administrator
Ja
Ret Ret
Ja
Ret
Ret Ja
Ret
34
GRAFISK PRODUKTION & WORKFLOW // MEDIQ DANMARK // BEVILLINGS SYSTEM
Begrænset kompatibilitet med IE7 browsere
(1 MODENIZR BROWSER DETECTION
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:
(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) Gradienter I IE7 bruger jeg filter (MS script) til browser genereret gradient.
35
(3) INTERNET EXPLORE , GRADIENT (SCRIPT) FILTER
GRAFISK PRODUKTION & WORKFLOW // MEDIQ DANMARK // BEVILLINGS SYSTEM
Workflow Mit workflow i sammarbejde med resten af Adapt teamet
Løbende test og kvalitetskontrol
Jeg tester løbende, og sammen med front-end afdelingen i Adapt kvalitets tester vi i firefox og safari samt IE 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.
Godkendelse af kunden
Workshop med kunden
Normalt udvikler jeg i Chrome som understøtter de nyeste teknologier og har en god udvikler addon.
IA implementeres i Wireframes
Research
Implementering af funktionaliteter
Opstartsmøde
Godkendelse af intern udvikler version
Analyse af design
Implementering af design
Redsign til IE7
Godkendelse af design
Intern test
Overlevering til kundens E-Commerce miljø
Upload til test miljø
Godkendelse af kunden
36
GRAFISK PRODUKTION & WORKFLOW // MEDIQ DANMARK // BEVILLINGS SYSTEM
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
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
Udviklings miljø (Fælles)
Test
– Nextweb CMS – GIT (version styring)
Bevillings system Live
GIT Version styring
– Caniuse.com – msdn.microsoft.com – w3schools.com
Lokalt udvikler miljø Front & Back-end
37
Lokalt udvikler miljø Front & Back-end
Lokalt udvikler miljø Front & Back-end
GRAFISK PRODUKTION & WORKFLOW // MEDIQ DANMARK // BEVILLINGS SYSTEM
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.
Exempel på et simpelt mixin
Exempel på en complex mediaquery (responsive) mixin
Compass Variabler
Variabler i SASS
Mixin i brug med @include
Mixin i brug med @include
38
GRAFISK PRODUKTION & WORKFLOW // MEDIQ DANMARK // BEVILLINGS SYSTEM
Eksempel på indlejret css
Normal CSS
SASS
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 { }
body { section { header { nav { ul { li { a {} } } } } } }
Med sass slipper man bl.a. for at gentage forlængelser
39
MERE INFORMATION: