GRAFISK DESIGN GRAFISK PRODUKTION & WORKFLOW

Transkript

1 GRAFISK PRODUKTION & WORKFLOW 2

2 RE-DESIGN AF BOARDASSURE.DK Jeg har et enkeltmandsfirma, hvor jeg laver opgaver uden for mit arbejde i Presidents Institute. En af de opgaver jeg har løst, var en opdatering af Board Assure's hjemmeside. Ledelsen syntes selv den manglede lidt opdatering. Jeg gennemgik de forskellige sider og kom efterfølgende med et oplæg til hvordan siden kunne blivere nemmere at navigere rundt på. I fællesskab fandt vi frem til den rigtige løsning. MÅLGRUPPE Målgruppen er direktører og bestyrelsesmedlemmer, som typisk starter i en alder omkring 30 år. KRAV Jeg skulle holde mig til dimensionerne som siden havde i forvejen 840 px i bredden. UDVIKLING Boardassure.dk bruger Umbraco CMS til opdatering af indhold på siden. Umbraco er bygget i.net kode. Når der skal rettes i koden, skal det ske gennem et system der hedder Bitbucket, som er en versionsstyring, der gør, at alle programmører der udvikler på siden, skal kommenterere enhver ændring. Man har også mulighed for at gå tilbage FORLØB & RESULTAT Grunddesignet var lagt, da jeg startede på projektet, så jeg vidste hvilken retning jeg skulle fortsætte i. Resultatet har været en side der er nemmere at navigere i. Dette blev opnået ved at lave en bedre opdeling mellem produkter ved at bruge farver, luft og forskellige skriftstørrelser. til tidligere versioner, hvis noget går galt. Siden skulle beholde elementerne som fungererede, så genkendingsværdien blev bibeholdt. Jeg brugte en samarbejdspartner til at skrive koden for at OM BOARD ASSURE implementere mit design. Board Assure sælger bestyrelses- og direktionsforsikringer, Der skulle bygges videre på den nuværende side i Umbraco som man kan få brug for, hvis man bliver stillet personligt CMS, da der ligger en masse speciallavet programmering ansvarlig i sin rolle som direktør eller bestyrelsesmedlem. bagom. Herudover sælger Board Assure bestyrelsesuddannelser, som klæder dig på som bestyrelsesmedlem. 3

3 SKITSER / UDKAST 4

4 FØR RE-DESIGN BOARD ASSURE FORSIDE 5

5 FORSIDE FØR FORSIDE EFTER Hovedprodukter: Her har man valgt at vise produkterne to steder på forsiden. Jeg vil gerne samle de to navigeringsmuligheder til én i toppen, for at gøre brugeren i stand til at sammenligne forskellige produkter, imens navigerer rundt på hjemmesiden. Blikfang: Man har valgt at lave Personlig/Kollektiv som den tydelige overskrift. Det er et skidt blikfang, da det ikke er dét, der differencerer produkterne. Det er i virkeligheden underrubrikken f. eks "Bestyrelse" der skal bruges som sammenligningsgrundlag. Kollektiv forsikring: Dette punkt fjernes fra hovednavigation. Det er ikke et produkt, der bliver solgt særlig tit, så det skal bare være på hjemmesiden, hvis en kunde efterspørger det. Hovedprodukterne: Her er produkterne og navigationen samlet til én enhed, som giver et hurtigt overblik, inden man klikker videre ind på siden. Call2Action: Her er man ikke i tvivl om man kan komme videre til mere information. Jeg skaber også et lead, da man skal indtaste sine kontaktoplysninger for at downloade guiden. Board Assure ved at kunden er potientielt interesseret i en forsikring, da brugeren har hentet information omkring bestyrelses- og direktionsansvar. Board Assure kan nu kontakte kunden og rådgive dem. Hvad sælger vi? : Her nævner jeg kort at det er forsikringer man kan købe via siden. Call2Action: Prisen er ikke væsentlig på nuværende tidspunkt, da man hurtigt kan afskrække kunder ved at servere prisen, inden brugeren har den fundementale viden omkring produktet. Ved dette step i købsprocessen, ønsker de fleste at få mere information. Herudover fremgår det ikke tydeligt, at man kan klikke på noget for at komme videre til en side med mere information. Testimonials: Her har jeg fremhævet testimonials med et stort billede af afsenderen, som skifter mellem to forskellige. Generelt: Jeg har sørget for at der er luft omkring alle elementer, så øjet nemt at skille elementerne fra hinanden og skabe et godt overblik. Testimonials: Kunden har nogle testimonials fra relevante kunder, som er kendt i branchen. Jeg vælger at at fremhæve dem yderligere. Dette gør jeg for at skabe en hurtig tryghedsfornemmelse hos nye kunder. Hvad prøver vi at sælge? : Ja der står faktisk slet ikke beskrevet hvad det er for et produkt, der sælges via hjemmesiden. Det er forsikringer det skal selvfølgelig fremgå på forsiden. Generelle problemer: Der mangler kontrast i designet, for at kunne fremhæve det mest væsentlige. Jeg vælger at bruge en rød farve som kontrast til Board Assure turkis. Den røde farve finder jeg i noget trykt materiale, som Board Assure tidligere har brugt. Nu bruger jeg konsekvent kun den røde farve når jeg vil have kunden til at trykke på noget. 6

6 EFTER RE-DESIGN BOARD ASSURE FORSIDE 7

7 FØR RE-DESIGN BOARD ASSURE UNDERSIDE 8

8 UNDERSIDE FØR UNDERSIDE EFTER Hvor er jeg? : Når brugeren trykker ind på en forsikring, bliver forsikringen ikke markeret. Her vælger jeg at lave en tydelig markering af forsikringstypen, så jeg ikke er i tvivl om hvilken forsikring man læser om på nuværende tidspunkt. Hvordan jeg kommer jeg videre? : Denne menu lod jeg slet ikke mærke til første gang jeg besøgte siden. Det tog alt for lang tid før mine øjne fangede menuen her. Her mangler også en markering af hvilken menu jeg er på. Købsstadie: Her har man valgt at centrere al fokus på dette banner, som igen henviser til at købe en forsikring. På nuværende tidspunkt har jeg ikke fået mere information, end jeg fik på forsiden. I nuværende købsstadie søger jeg information om forsikringen. Derfor starter jeg med en tekst om produktet og flytter konverteringen ned i bunden af siden. Markering af produkt: Her har jeg lavet en tydelig markering af hvilket produkt man er inde og læse om. Der er en grå baggrundsfarve, og den turkise er blevet mørkere. Markering i menu: Menuen man er inde på, er nu markeret med den samme mørke-turkise farve, som bliver brugt ovenover. Nu har jeg læst, men mangler info: Her kan man nemt blive ringet op af en medarbejder eller downloade en guide, der giver dig yderligere information omkring den givne forsikring. For få informationer: Her kommer der flere informationer ind, så jeg hurtigt bliver bedre informeret om forsikringerne. 9

9 EFTER RE-DESIGN BOARD ASSURE UNDERSIDE 10