Business2africa by camillaimmersen

Førsteårseksamen • Projekt 2.2 ERHVERSAKADEMI AARHUS • MULTIMEDIEDESIGN • 15H2 SUSANNE DEIN ESPERSEN • CAMILLA IMMERSEN • JESPER LYKKE LISBY

DEV.JEXPO.DK/PROJEKT22/ DEC 2015 • MÅ GERNE OFFENTLIGGØRES

PROJEKT 2.2 • FØRSTEÅRSEKSAMEN

BUSINESS 2 AFRICA ANTAL ANSLAG: 76.500 PROJEKTPERIODE: d. 23/11-15 - d. 16/12-15 AFLEVERINGSDATO: d. 16/12-15 URL http://dev.jexpo.dk/projekt22/ VEJLEDERE BIRGITTE KJÆR HOLM JARNE WILHELM BEUTNAGEL JEANNE NISSEN BØDKER JONNA ZEUTHEN BACH

CAMILLA IMMERSEN

JESPER LYKKE LISBY

SUSANNE DEIN ESPERSEN

Indhold INTRODUKTION . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 Indledning (CI). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 Problemformulering (Fælles) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 Afgrænsning (JL). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 Metodeafsnit (SE) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8 User testing & validering (SE) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9 Projektstyring (SE). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

VIRKSOMHED & KOMMUNIKATION. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11 Virksomhedsbeskrivelse

(CI) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

Business Model Canvas (JL) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13 SWOT (CI) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14 TOWS (CI) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14 Kommunikationsplan (Fælles) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16 Målgruppe og persona (JL). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18 Visuel identitet & content marketing via storytelling (SE) . . . . . . . . . . . . . . . . . . . . . . . . . 20 Storytelling (SE) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20 Den Gyldne Cirkel (SE). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21 Appelformer (SE). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22 Opsummering (JL) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23

VISUEL IDENTITET . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24 Design brief (SE). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24 Analyse af virksomhedens nuværende website (CI). . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27 Grundlæggende stilvalg (SE + CI). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29 Redesign af logo (CI). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32 Website (SE) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33 Moodboard (fælles) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33 Styletile(fælles) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34 Mockup(fælles) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35 Komposition (SE) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35 Gestaltlove(SE). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37 Sitemap & informationsarkitektur(JL). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38 Navigationsdesign (JL). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39 Gode principper i navigations- og usabilitydesign(JL) . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40 Brug af disse principper i vores webløsning (JL) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40 User tests (JL) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41 Opsummering (JL) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41

INTERAKTION. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42 Kravspecifikation (JL) Best practice (JL). .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43

Responsive Web Design (CI). .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43

Realisering af designet i HTML/CSS (JL) . Reset, Grid-system og Sass (JL) .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45

Styling (CSS) og preprocessor (Sass) Behaviour: JavaScript & jQuery Mobilnavigation (JL) . .

(JL) . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45

(JL) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48

Struktur og semantik (HTML) (SE). . Serverside (PHP) (SE) SEO

. . . . . . . . . . . . . . . . . . . . . . . . . . . 44

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53

(CI) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55

Validering & teknisk test (JL) . Usertest og usabilitytest (JL)

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57

Usability & brugervenlighed (JL). .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57

Opsummering af interaktionsafsnit (JL)

. . . . . . . . . . . . . . . . . . . . . . . . . . . . 59

KONKLUSION (Fælles). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60 LITTERATURLISTE (Fælles) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62 FAGLITTERATUR . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62 WEBKILDER & BLOGINDLÆG. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63

DESIGNMANUAL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67 BILAG (CI). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84 Bilag 1: Userstories . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84 Bilag 2: Trello Projektstyring . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85 Bilag 3: Trello Projektstyring . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86 Bilag 4: Sekundær persona . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87 Bilag 5: Usertest - Card sorting test . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88 Bilag 6: Skitser - Brainstorm / projekt . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89 Bilag 7: Skitser - Logo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90 Bilag 8: Skitser - Website . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96 Bilag 9: Skitser - Navigation & layout elementer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99 Bilag 10: Usertest - logo (tidlige skitser). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101 Bilag 11: Usertest - Valg af primærfarve . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104 Bilag 12 : Usertest - Logo (illustrator/photoshop). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106 Bilag 13 : Andre Moodboards . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108 Bilag 14 : Andre styletiles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109 Bilag 15 : Andre Mockups. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110 Bilag 16: Usertest & usabilitytest af website mobil/desktop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111 Bilag 17 : Indledende mail til Business 2 Africa. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119 Bilag 18 : Spørgsmål til inteview m. Elisabeth Bertelsen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120 Bilag 19 : Referat af inteview m. Elisabeth Bertelsen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122

INTRODUKTION Vi er tre multimediedesignstuderende, der har fået til opgave at udføre et tværfagligt projekt, som afslutning på det første studieår. Opgaven er at udvikle et koncept og en interaktiv digital prototype for en virksomhed. Vi har i vores projekt arbejdet sammen med rådgivningsvirksomheden Business 2 Africa, og vi vil i denne rapport argumentere for, hvordan vores nye koncept og prototype skaber værdi for virksomheden.

Indledning (CI) “Alt hvad du kan sælge i Europa, kan du også sælge i Vestafrika”

Afrika er gået fra at være udråbt til det håbløse kontinent, til i dag at være førende på økonomisk vækst. Sult og krig gjorde, at flere lande i Afrika havde svære fremtidsudsigter. I år 2000 begyndte det at vende for landene syd for Sahara. Nye ledere, færre borgerkrige, mere uddannelse, mere og bedre medicin og mindre sygdom har gjort, at kontinentet nu er tilbage på sporet. Samtidig med, at forretningsfolk i hele verden investerer, er der også stor efterspørgsel på afrikanske råvarer såsom chokolade og kaffe. Middelklassen bliver rigere og rigere, hvilket gør det muligt for danske virksomheder at sælge deres produkter.

Afrika er på vej til at blive det næste væksteventyr, og flere afrikanske lande har allerede passeret nogle af de østlige lande. Hvis man vil tjene penge fremadrettet, er det oplagt at få en position her, og udenlandske firmaer og virksomheder er begyndt at få øjnene op for Afrika.

Business 2 Africa tilbyder rådgivning til at opstarte business på dette nye marked. Firmaets fire partnere besidder tilsammen de evner og netværk, der er påkrævet for at få en virksomhed ind på det afrikanske marked. De har stor erfaring inden for handel og eksport med internationale virksomheder. Direktør Anders Weyhe Graabæk har desuden 15 års erfaring med præcis det afrikanske marked. Business 2 Africa fungerer som aktør, og forbinder virksomheder i Danmark med lokale afrikanske forretningsfolk.

Business 2 Africa har ikke gjort meget ud af deres website, idet de generelt ikke anvender megen markedsføring af deres virksomhed. De er til gengæld proaktive i forhold til at

netværke og henvende sig til virksomhederne i deres netværk og sælge sig og deres “produkt” face-to-face. Deres potentielle kunder besøger derimod oftere Business 2 Africas website efter et personligt møde med partnerne i Business 2 Africa. Derfor er det væsentlig at websitet afspejler den troværdighed, som de sælger sig selv på. Som sitet ser ud nu, oplever vi ikke, at det er tilfældet. Websitet virker derimod utroværdig og uinspirerende både ift til logo og designvalg. Vi vil hjælpe Business 2 Africa med at fremstå som den professionelle virksomhed, de er, og skabe en bedre online platform for dem i form af et nyt logo og et redesign af websitet med fokus på troværdighed. Hermed er vi kommet frem til følgende problemformulering. 13

Problemformulering (Fælles) • Hvordan kan vi redesigne Business 2 Africas website og visuelle identitet, så vi bedre understøtter virksomhedens troværdighed som erfaren rådgiver? • Hvordan kan vi samtidig tage hensyn til såvel B2A’s primære som sekundære kundesegment?

Afgrænsning (JL) Business 2 Africas nuværende website er tilgængelig på henholdsvis dansk, engelsk og fransk. Vi vil dog fokusere på kun at lave den danske udgave i dette projekt, da vi udarbejder en prototype og ikke et færdigt site. Det betyder, at vi ”kun” laver en forside samt to undersider, som vi har vurderet er vigtigst i forhold til den virksomhed vi arbejder med.

13 http://www.jyllands-posten.dk/protected/premium/international/ECE6898208/Afrika+–+det+nye+Asien%3F/

Metodeafsnit (SE) Vi vil her gennemgå, hvilke teorier vi vil anvende i vores projekt om Business 2 Africa og hvorfor vi anvender dem.

Virksomhed & kommunikation For at finde ud af, hvordan vi kan gøre deres website bedre og mere troværdigt, vil vi analysere Business 2 Africa og her igennem få mere viden og informationer om virksomheden. Til dette vil vi anvende Business Model Canvas, hvor vi især vil arbejde med højre side af canvaset, dvs. Value Proposition, Customer relationships, Channels og Customer segments. Herudover vil vi benytte en SWOT med en tilhørende TOWS, for at komme frem til, hvordan vi kan udnytte Business 2 Africas styrker og deres muligheder for at minimere samt forbedre virksomhedens svagheder og trusler/udfordringer. Som grundlag til dette arbejde vil vi ud fra research med både primære og sekundære kilder udarbejde en virksomhedsbeskrivelse samt foretage et kvalitativt interview med Elisabeth Bertelsen, der er Management assistant og partner i Business 2 Africa, for at få flest mulige informationer at arbejde videre med. Med denne viden vil vi finde frem til virksomhedens budskab, målgruppe/personas i en kommunikationsplan samt analysere på Business 2 Africas eksisterende logo og website for at blive fagligt bevidste om, hvad de signalerer og kommunikerer på deres nuværende website. Formålet med dette er, at vi hermed kan finde frem til, hvad det er Business 2 Africa skal fortælle/vise på deres website, hvem de henvender sig til, og hvilket indhold det skal have. Vi vil hertil analysere på, hvordan virksomheden kan anvende storytelling for at få budskabet frem på hjemmesiden. Dertil vil vi anvende Simon Sineks Gyldne Cirkel, for at tydeliggøre, hvilket indhold der skal være på sitet.

Design Ud fra Business 2 Africas designbrief (krav), vores personas usergoals samt en analyse af det eksisterende logo og website kan vi arbejde os frem til den visuelle identitet på sitet. Det gør vi gennem moodboards, skitseringsproces til både logo og website, styletiles, wireframes & mockup. Hermed bevæger vi os i design-processen fra at finde, hvilken stemning, der skal være på

sitet til at ende op med et konkret bud (mockup) på, hvordan vores hjemmeside skal/kan se ud for, at det signalerer troværdighed. Vi anvender til denne proces design-regler for komposition, farver, sitemap, informationsstruktur og navigationsdesign.

Interaktion Vi tager her udgangspunkt i en indledende kravspecifikation, som bygger på designafsnittets designbrief samt navigationsdesign / informationsarkitektur. Det er en opsummering af kravene, som yderligere også indeholder tekniske krav, såsom krav til opløsning, browser, SEO, responsiveness osv. Vi har også skitseret, hvorledes vi griber en fælles process omkring kodearbejdet an i afsnittet Best Practice. Herfra har vi via håndskitser og mockups haft et udgangspunkt for direkte at påbegynde prototypingen, som er selve kodningen af websitet. Hertil har vi haft et prædefineret CSS grid, således at layout af siderne har været logisk at gå til. Undervejs i afsnittet gennemgår vi de grundlæggende teknologier og beskriver i detaljer, hvordan vi har brugt dem i vores løsning via eksempler og illustrationer. Til slut har vi lavet såvel en teknisk validering (af bl.a. HTML/CSS) såvel som en usabilitytest på både mobil- og desktopudgaven af websitet.

User testing & validering (SE) Vi vil løbende udføre usertests for at validere vores produkt. Vi vil bl.a. lave card-sorting-test på vores navigation, logo-tests, think-out-loud-test, A/B-splittest ift farver. Da vores virksomhed er en B2B virksomhed, er det sværere for os at komme i kontakt med relevante test-personer, så nogle tests vil blive udført med de studerende på Erhvervsakademi Aarhus, hvilket selvfølgelig ikke er optimalt. Ift andre tests vil vi forsøge os med at udføre dem på for eksempel www.amino.dk, der er et debatforum for iværksættere og selvstændige erhvervsdrivende, for derved at komme nærmere målgruppen samt på facebook-gruppen “Netværk for illustratorer, tegnere og grafikere”.

Vi tester på som minimum 5 personer, jævnfør Jakob Nielsens anbefalinger for usability tests (se graf). Det skyldes at 85 % af fejlene findes af de første 5 users, og de næste 6 til 15 brugere finder kun yderligere 15% fejl/problemer.

Projektstyring (SE) Gennem hele projektet anvender vi den “agile” projektstyringsmetode Scrum. I praksis har vi anvendt værktøjet Trello. Fordelen ved Trello er, at det udover at give overblik også er med til at kontrollere vores sprints. Det er nemt at tilføje og flytte opgaver fra for eksempel sprint til done og prioritere opgaver i backlog’en. Samtidig har vi anvendt Trello til at indsætte links til for eksempel vores rapportdele i google drive eller andre websites samt sætte billeder ind af for eksempel moodboards. Med trello har det været muligt for os at være effektive og udnytte ventetiden inden interview til at udføre andre vigtige delopgaver til rapporten for eksempel. Jesper Lykke Lisby har fungeret som SCRUM-master, og vi har dagligt afholdt Scrum-møder i teamet.

Screenshot af vores trelloboard på http://www.trello.com

VIRKSOMHED & KOMMUNIKATION Virksomhedsbeskrivelse (CI) Business 2 Africa er en rådgivende virksomhed placeret i et stort kontorfællesskab i Lystrup. Hovedformålet er at rådgive danske firmaer til at eksportere til og importere fra samt investere i det afrikanske marked. Business 2 Africa vil gerne skabe udvikling og vækst i Afrika, da “Afrika er det nye Asien”. De ser mange muligheder i at investere penge i Afrika, hvilket de udtrykker med en win-win situation. Kunden tjener penge på at investere i Afrika, og Afrika bliver forbedret i vækst og udvikling. Dette er også grunden til, at Business 2 Africa rådgiver om markeder lige fra landbrug, industri og minedrift til fødevarer, logistik og tekstil.

A. W. Graabæk CEO, partner

H. O. Jensen Partner

T. .H. Egeriis Partner

E. Bertelsen Partner

Business 2 Africa blev grundlagt i februar 2010 af Anders Weyhe Graabæk, der også er direktør for virksomheden. A. W. Graabæk havde i mange år arbejdet med Spanien og Holland, hvor han solgte fødevarer til Afrika. Igennem dette arbejde, har han fået et rigtig stort netværk og har rejst meget i Afrika. Virksomheden består af et rådgivningsteam på fire. Direktør Anders Weyhe Graabæk har opbygget et bredt lokalt netværk, og er især stærk inden for handel, distribution, logistik, finansiering, jura og politik.

Derudover er der partner Thorkild Helbæk Egeriis, der har mere end 30 års erfaring i den danske og internationale textilindustri. Han er især stærk indenfor direkte handel og eksport til det meste af verden, produktudvikling, produktions- og kvalitetskontrol til produktionsudflytning med ansvar for indkøb, nedtagning og opstilling af produktionsanlæg. Henning O. Jensen er også partner og er forhenværende Adm. direktør, HA, HD/R, Cand. Jur. Hans styrke er økonomisk, juridisk og ledelsesmæssig ekspertise, og han har stor international erfaring. Tidligere har han været finans-/økonomidirektør og koncerndirektør i børsnoterede selskaber samt adm. direktør i mindre og mellemstore virksomheder. Desuden har Henning stor og bred branchemæssig erfaring med bestyrelsesarbejde samt med køb og salg af virksomheder. Den nyeste partner er Elisabeth Bertelsen. Hun fungerer som samtidig som Management assistant. Hun har en baggrund i kommunikation og sprog, med en bachelor i international erhvervskommunikation med engelsk og fransk, og en kandidat i international markedskommunikation & PR på fransk. Hun er især stærk inden for kulturmødet mellem Elfenbenskysten og Danmark. Med disse fire profiler har virksomheden personer, der afdækker alle de relevante områder. Det er dog primært Anders Weyhe Graabæk og Elisabeth Bertelsen, der er fuldtidsansatte, idet Henning O. Jensen og Thorkild Helbæk Egeriis ikke har daglige opgaver. De tre mandlige partnere driver selvstændige virksomheder ved siden af. Business 2 Africa har dog 1. prioritet. Virksomheden opererer på B2B-markedet. Kunderne er virksomheder, der henvender sig til Business 2 Africa for at få den rette rådgivning. Business 2 Africa vil gerne medvirke til at sikre danske virksomheder en stærk position på de afrikanske markeder.14

14 http:// www.b2a.dk/hvem-er-vi/

Business Model Canvas (JL)

Se et større eksempel af Business Model Canvas i bilag

Vi har benyttet Business Model Canvas (BMC) som et centralt værktøj til at give et komplet overblik over virksomhedens sammenhænge, fra de “hårde” parametre (ydelser, økonomi, drift m.m.) i venstre side til de mere “bløde” (salgskanaler, kundesegment, kundeforhold) i højre side. Vores fokus i BMC (markeret med grøn tekst) Vi har valgt at sætte ind på customer relationsships, hvor trustbuilding - eller troværdighedsmarkering - er det helt centrale for en rådgivningsvirksomhed som Busines 2 Africa, hvilket også er pointeret i firmaets value proposition. Dette indbefatter, at vi optimerer den salgskanal, som websitet udgør via ny visuel identitet, forbedret informationsarkitektur og en fremhævelse af firmaets samarbejdspartnere. Ovenstående optimering er ikke mulig uden en korrekt profilering af firmaets customer segments, som vi optegner gennem en primær og sekundær persona, der samlet set vil have en række konkrete user og business goals.

SWOT (CI) SWOT-modellen er brugt for at skitsere de interne og eksterne forhold hos kunden. Denne model kan give et stort, og forholdsvis dybdegående indblik i en kunde og dens omgivelser.

Se et større eksempel af SWOT-modellen i bilag

TOWS (CI) SWOT-modellen er komplementeret med TOWS-modellen, der giver et endnu dybere indblik i kunden, og tilmed foreslår muligheder forholdene imellem. Hvor SWOT-modellen er et glimrende redskab til at give et helhedsbillede, er TOWS-modellen en god model til at brainstorme på, hvordan vi kan bruge forholdene til vores fordel (og pointere/mindske ulemper).

Styrker + Muligheder Med den store erfaring de har inden for import og eksport på det afrikanske marked, vil det være muligt at tiltrække nye kunder. De skal have opbygget en troværdig identitet, der afspejler de professionelle “forretningsmænd”, de er. De 4 partnere har et kæmp netværk, der bandt andet tæller direktørerne i de største danske virksomheder. Business 2 Africa sidder desuden stærkt på en nicheposition på markedet.

Styrker + Trusler Virksomheden har en trussel i den lignende virksomhed Grow West Africa (www.gwa. dk). GWA’s direktør Charlotte Obidairo har modtaget 100.000 $ fra Bill & Melinda Gates Foundation, og har udmærket sig i mange erhvervsartikler. Vi skal forsøge at få Business 2 Africa ind i kampen, og markere dem på internettet. 15 Deres store erfaring inden for erhvervslivet, men især inden for det afrikanske marked, gør, at det ikke er noget problem, at de hver især driver selvstændige virksomheder ved siden af. Man må antage, at de med deres erfaring og år på markedet, har kontrol over de forskellige ting de arbejder med. Da det er svært at overtale danske investorere til at starte noget i Afrika, kan de med fordel markedsføre sig selv med den gratis markedsscreening. Det er et uforpligtigende tilbud, der viser om der er grobund, for netop deres virksomhed.

Svagheder + Muligheder Business 2 Africa har et svagt website, og i det hele taget en dårlig online presence. Vi vil udarbejde et bud på et stærkere og mere troværdigt website. Vi skal vise, at den høje gennemsnitsalder, der ligner en svaghed, faktisk også er en mulighed for at vise, at de her folk ved hvad de snakker om, da de har været i branchen i mange år.

Det at de kun operer i tre lande, kan også ses som en mulighed i at de er eksperter inden for disse områder. De ved lige præcis, hvilke kulturer der er i disse lande, og har mange

15 http://finans.dk/artikel/ECE5505614/Dansk-iværksætter-får-penge-af-Bill-Gates/?ctxref=ext

samarbejdspartnere, der kan drives forretning med. Virksomhedens nuværende website er gammelt og rodet, og dette er på trods af den store betydning internettet har fået for alle samfundslag i dag. Mulige kunder bliver måske skræmt væk af websitet, da det virker meget uprofessionelt, og man tvivler på sitets troværdighed. Derfor vil det hjælpe, hvis man skulle forsøge sig med det moderne segment, at modernisere websitet, da dette er virksomhedens offentlige front. Samtidig kan virksomhedsprofilen på LinkedIn opdateres, så den er mere indbydende med en virksomhedsbeskrivelse og billede. Nuværende LinkedIn-profil16

Kommunikationsplan (Fælles) FORMÅL At tiltrække og fastholde nye og eksisterende kunder på det danske marked, som ønsker at agere på det afrikanske marked.

AFSENDER Rådgivningsvirksomheden Business 2 Africa, placeret i Lystrup. Virksomheden tilbyder at hjælpe danske virksomheder med at etablere sig på det afrikanske marked.

16 https://www.linkedin.com/company/b2a-s.m.b.a.-business-to-africa?trk=ppro_cprof

MÅLGRUPPE Der er tale om business to business. Det betyder, at vores målgruppe primært er CEOs/ direktører, men kan også være indkøbs/eksportchefer i mellemstore og større virksomheder. Dem som tager beslutningerne. Fællestræk: Klient, der har et produkt eller en ydelse, de kan handle med på det afrikanske marked. Eller aktører på det vestafrikanske marked, der omvendt efterspørger danske handelspartnere/produkter til Afrika.

BUDSKAB “Vi er en troværdig og erfaren partner, som hjælper danske virksomheder med at agere på det vestafrikanske marked”.

MEDIA Lige nu har Business 2 Africa kun et website. Websitet har meget godt indhold, men en del af det er gemt væk, og tager for lang tid at få gravet frem. Derudover har de en LinkedIn-profil, der bare er oprettet, men ikke er blevet gjort mere ved. Vi vil lave et Website/prototype - visitkort & online presence, trustbuilding, portfolio samt optimere LinkedIn-profilen til en egentlig forretningsprofil.

KONKURRENCE & INSPIRATION De har en konkurrent i en lignende virksomhed på Aarhus-egnen, men da de kun er to her i Aarhus, betyder det, at de i dette område har gode muligheder for at skabe kunder. Der er tale om LN Consult17 - En virksomhed med samme koncept placeret i Aarhus. Deres ambition er at hjælpe danske virksomheder med at få øjnene op for det store og uudnyttede markedspotentiale på det afrikanske kontinent. Derudover er der flere danske virksomheder med samme koncept. www.business2africa.com har ikke helt samme fokus (og er heller ikke en konkurrent), men er en god inspiration med deres design og informationsarkitektur.

17 http://lnconsult.dk/projektforloeb

Målgruppe og persona (JL) Målgruppen for vores projekt er relativt bred, da virksomhedens ydelser dækker mange brancher. Ifølge Business 2 Africa selv, er deres primære kunder mellemstore og store virksomheder, hvor de typisk taler direkte med direktøren i virksomheden, eller som minimum ansatte med effektiv handlekompetence ift. at træffe beslutninger. Vi har at gøre med B2B virksomheder, hvilket adskiller sig væsentligt fra B2C kunder, som vi ellers tidligere har beskæftiget os med i studieprojekter. Det væsentlige er, at vores persona blot er en brik i et større foretagende, der som en større organisme (med mange hensyn og interesser) tager beslutninger. Men naturligvis er vores persona en af de helt centrale beslutningstagere i organisationen - en såkaldt “buyer”. Vi har benyttet Tony Zambitos Buyer Persona Canvas18 til at få inspiration til, og overblik over, hvad det vil sige at skulle skitsere en business-to-business persona.

18 Zambito, 2013

Vi har skitseret en primær (se herover) og sekundær persona, som kunne tænkes at være bruger af den endelige web-prototype. Den sekundære persona ligger i bilag.

Validering af personaer Valideringen af personaer er foregået i to faser - gennem kvalitativt interview med Business 2 Africas Management Assistant & partner Elisabeth Bertelsen (hvor vi har forelagt vore personaer). Vi er derigennem kommet frem til, at vores personaer rimeligvis stemmer overens med de typer kunder/virksomheder, som Business 2 Africa er bekendt med at betjene. Vi kunne godt have indhentet yderligere viden om vore personaer, såfremt vi havde udbredt undersøgelsen til at omfatte flere respondenter og samtidig ved at opsøge flere relevante netværk. Vi har dog vurderet, at vi har tilstrækkeligt med viden til at kunne gå videre med vores arbejdsproces.

Visuel identitet & content marketing via storytelling (SE) Dette afsnit vil omhandle, hvordan vi kan anvende storytelling og content marketing i vores arbejde med at skabe Business 2 Africas visuelle identitet.(Kilde interview, deres website, fagligt.)

Storytelling (SE) For at kunne visualisere Business 2 Africas identitet og skabe det rette indhold, skal vi finde frem til Business 2 Africas unikke fortælling om sig selv. Herigennem kan de differentiere sig fra de andre konkurrenter. Vores intention med websitet er, at kunden/den besøgende på websitet skal få en oplevelse af Business 2 Africa som værende troværdig. Fordelen ved storytelling er, at hjernen og vores følelser bedre opfatter og husker, hvad der bliver fortalt og læst, når der anvendes fortællinger. Det er væsentlig, at Business 2 Africas fortælling er godt forankret i virksomheden i alle deres handlinger internt såvel som eksternt for at have effekt og virke troværdig. Samtidig skal vi på websitet være opmærksomme på, at indholdet er modtager-orienteret, så Business 2 Africas kunder kan forstå deres værdier og budskab, samt det skal gøre en forskel for kunden.

Den Gyldne Cirkel (SE) Til udviklingen af deres fortælling anvender vi Simon Sinek’s model Den gyldne Cirkel, der kan hjælpe os til at finde ind til Business 2 Africas kernefortælling. Hermed kan vi komme frem til, hvorfor kunderne skal vælge Business 2 Africa fremfor konkurrenterne.

What: • Business 2 Africa er en rådgivende virksomhed, der fungerer som matchmaker mellem danske og afrikanske virksomheder. De har den nødvendige erfaring og knowhow til at skabe muligheder og udvikling i Afrika.

How: • How svarer til value proposition i Business Model Canvas, der er dét, der adskiller dem fra konkurrenterne. Business 2 Africa kan i denne sammenhæng promovere sig selv på troværdighed, tillid og erfaring. De er proaktive og opsøger selv de potentielle kunder i deres netværk. Det er væsentlig for Business 2 Africa at kende de folk, de handler med for at kunne opnå denne tillid, og her igennem kunne forklare kunderne om situationen i Vestafrika uden at virke belærende.

Why: • Det hele drejer sig om business og handel samt om at tjene penge både for kunderne og for Business 2 Africa. Derfor vil Business 2 Africa gerne have andre virksomheder til at få øjnene op for, hvilke store muligheder, der er i Afrika, der skal udnyttes og dermed fremme eksporten hertil. Årsagen til, at det er muligt for dem, er især direktøren Anders Weyhe Graabæks store netværk i Danmark og i Vestafrika, som gør matchmaking muligt og som samtidig også bliver Business 2 Africas eksistensberettigelse samt dét, der gør dem unikke. Business 2 Africa beskæftiger sig med mange brancher,

men koncentreret i de 3 lande - Ghana, Elfenbenskysten og Nigeria. Hvor Business 2 Africa skiller sig ud er, at de lægger alt deres arbejde i et projekt og følger det til døren, så kunderne oplever at blive taget seriøs. Det er denne fortælling, Business 2 Africa gerne vil vise deres potentielle kunder - en historie, der udstråler, at Business 2 Africa ved, hvad de laver, at de har kontakterne, at de gør det ordentligt, og at de gerne vil lave et samarbejde, der udmønter sig i en investering i Afrika.

Appelformer (SE) Med vores fokus på at skabe et troværdigt website til Business 2 Africa er det her oplagt at medtage Aristoteles’ appelformer, som selvom de er fra Antikken stadig gælder, når vi kommunikerer med hinanden.

De 3 appelformer: Logos Logos, der er appellen til det rationelle i den besøgende på Business 2 Africas hjemmeside. Det er det logiske argument og svarer til Sinek’s yderste cirkel - “What”. Der skal være kontaktoplysninger og konkrete informationer om deres produkt, dvs deres rådgivning og støtte til at opstarte handel i Afrika. Men det er også en oversigt over, hvem firmaet består af samt over, hvilke muligheder der er i Afrika. Dette kan være illustreret bl.a. vha. grafer og infografik.

Patos Patos er den anden appelform, der taler mere til følelserne i den potentielle kunde. Ved at skabe en stemning af Afrika samtidig med, at sitet stadig signalerer professionalitet, kan vi vække følelserne hos kunden og lysten/motivationen til at investere i Afrika. Med billeder fra det moderne Afrika - fx billeder fra de konkrete områder, hvor de har kontakter og fotos af cases og menneskene derfra, skaber vi et virkelighedsbillede af, at det godt kan lade sig gøre at opstarte en virksomhed i Afrika med Business 2 Africas hjælp og

rådgivning. Det vil umiddelbart være oplagt at medtage en Corporate Social Responsibility (CSR) vinkel på websitet, men som Elisabeth Bertelsen udtaler, så handler dette kun om business og handel og ikke om CSR. Business 2 Africa skal dog være opmærksom på alle interessenter i processen med at skabe/vedligeholde kontakter både i Danmark og Afrika. Dette og virksomhedernes investeringer i Afrika resulterer indirekte i CSR, men det er mere en sidegevinst, end det er formålet.

Etos Det fører videre til Etos - den tredje appelform, der handler om de besøgende på sitets tillid til Business 2 Africa. Vi skal i indholdet signalere, at Business 2 Africa vil kunderne og Afrikas befolkning det bedste og at Business 2 Africa har dømmekraft og er rimelige. Og væsentligt er, vi skal vise på websitet, at Business 2 Africa har kompetencerne til at give kunderne den bedste rådgivning og hjælp til at starte deres projekt op i Afrika, så det lykkes og bliver endnu en succeshistorie. Jo mere vi kan få etos frem på sitet jo større og bedre troværdighed. Da websitet ikke bruges til at fange brugerens interesse, men først bliver besøgt efter kundens og Business 2 Africas møde, er websitet først troværdig, hvis det understøtter og bekræfter kundens personlige oplevelse af partnerne i Business 2 Africa. Troværdigheden er dog også først stabil, når der er et sammenfald mellem partnerne i Business 2 Africas egne image-ønsker, deres faktiske identitet (internt i Business 2 Africa) og ethos, dvs. hvordan andre oplever dem. Udover de tidligere forslag til websitet, er det derfor vigtig for oplevelsen af troværdighed, at websitet er brugervenligt, enkelt og det skal være nemt at finde informationer. Vi skal have det væsentlige indhold gjort synligt.

Opsummering (JL) Vi har gennem dette afsnit fokuseret på at afdække virksomheden og dens behov i forhold til udfærdigelsen af den visuelle identitet og prototypen. Via deskresearch, kvantitativ undersøgelse, personaer, interview og analysearbejde er vi kommet frem til den kerne, som vi ønsker at arbejde videre med i designafsnittet. Kernen er defineret i et designbrief, som er udgangspunktet for næste afsnit.

VISUEL IDENTITET Design brief (SE) Vi vil i det følgende udfærdige et kort designbrief, hvor kun de væsentligste punkter er medtaget for at undgå gentagelser af allerede nævnte informationer. Det er udarbejdet ud fra vores interview med Elisabeth Bertelsen fra Business 2 Africa. De har dog ikke mange krav til websitet og logoet og har givet os frie tøjler i forhold til design.

De 3 designaspekter13 Funktion • Sitet må ikke blive for informationstungt, da det vil skræmme kunden væk. • Den skal kort fortalt vise, hvad de kan, hvad de vil og hvilke netværk, de har. • Den skal være strømlinet og enkel. • Flersproglig (dansk, engelsk og fransk) • Brugervenlig • Traditionel horisontal navigation • Behøver ikke være responsivt, da kunderne primært vil se sitet på deres computer, men det er et ekstra plus, hvis sitet er responsivt.

Æstetik • Farverne skal også fange afrikanerne, idet de er mere farverige. At lave et minimalistisk skandinavisk logo vil ikke fange vestafrikanernes interesse. Det er dermed vigtigt at imødekomme begge kulturer i vores design. • Det er vigtigt at have kontinentet repræsenteret i logoet, så det udstråler, hvor de opererer.

13 Pillon og Vodder, 2013

Signalværdi • Signalere troværdighed • Skal ramme store og mellemstore virksomheder, da det er mange forskellige personer, der er inde at se på det. • Brugeren skal få lysten til at tage kontakt

Herunder en sammenfatning af user goals for primær og sekundær persona:

• Identification by design: Brugeren ønsker, at Busines 2 Africa gennem deres visuelle identitet og informationer viser, at de kender såvel det afrikanske som det danske marked/samfund. • Lynhurtigt muligt at scanne/fornemme hvilken virksomhed det drejer sig om, uden støj • Se hvad virksomheden kan, hvad de laver og deres referencer • Se om virksomheden kan hjælpe netop min branche • Se hvem der står bag - tydelig adresse og kontakt • At virksomheden virker troværdig (og at de fremstår loyale overfor deres kunder) • Websitet er hurtigt, opdateret og aktuelt • Websitets design virker indbydende og professionelt • Websitet fungerer på iPad og Smartphone

Analyse af virksomhedens nuværende website (CI)

Screenshot af nuværende website www.b2a.dk

Første indtryk er, at menuen ikke hænger sammen, idet menuen “kontakt” forsvinder ned på en ny linie. Ydermere er der et pile-system, der ødelægger det visuelle indtryk. Desuden har pile-systemet ingen funktion - der sker intet, når man trykker på dem.

Business 2 Africas nuværende menu på deres website (www.b2a.dk)

Der er brugt stereotype stock images, hvilket også virker utroværdigt. Man ved ikke rigtig om Business 2 Africa rent faktisk har været dernede og lave noget, eller om det er en “tvivlsom” type virksomhed.

Stock image på forsiden

Baggrunden på sitet har en flad grå farve, menu og footer en kraftig mørkegrå farve, og hele sitet er hvidt. Det kommer til at virke kedeligt og neutralt, hvilket medvirker, at man ikke husker hvem Busines 2 Africa er. De skiller sig ikke ud fra mængden. Teksten er helt ude i venstre side, så der opstår et mærkeligt placeret white space i højre side. På en underside er hele teksten midterstillet, hvilket også kommer til at virke mærkeligt at læse. Der er umiddelbart ikke bevidst

Eksempel på midterstillet tekst på underside

anvendt kompositions-regler.

Derudover har de nogle rigtig fine referencer, men de er desværre stillet rigtig dårligt op, og det virker uoverskueligt. Når man klikker på dem, kommer man enten ind på den pågældende virksomhed, eller der kommer et billede frem af logoet. Der kunne der være tilkoblet nogle cases, hvor den potentielle kunde kan læse om andre virksomheders erfaringer med Business 2 Africa. Dette er dog ikke muligt, da Business 2 Africa hjælper kunden igang med at implementere sig, men at kunden selv skal tage det sidste skridt ud på det

Referencer på www.b2a.dk

afrikanske marked. Derfor er disse referencer ”kun” nogle de har hjulpet med at sondere det afrikanske terræn. På “Hvem er vi?”-siden, er der fine kontaktmuligheder, men man skal trykke “læs mere” ud for hver person, for at finde ud af hvad de har arbejdet med, og hvad deres styrker er. Samtidig kunne man lave en henvisning til deres LinkedIn-profil

Screenshot af ”Hvem er vi?” siden på www.b2a.dk

Et andet stort problem er, at man skal ind på “Hvem er vi?”-siden og derefter trykke “En kort beskrivelse” under “Partnerskab i Afrika for at finde ud af hvilke brancher, de opererer med. Disse informationer er nogle af de væsentligste ting for dette firma, og skal dermed være lettere tilgængeligt.

Analyse af B2A’s n værende logo (CI) Proportionerne i det nuværende logo er ikke optimale, hvilket ikke signalerer troværdighed, faglig kompetence og business. I logoet skaber det afrikanske kontinent Business 2 Africas nuværende logo (www.b2a.dk)

ubalance, idet der er alt for meget vægt i venstre side.

Logoet viser og beskriver godt, at der er at tale om en virksomhed, der opererer i Afrika. De har virksomhedens navn med, der giver kunden en idé om, hvad virksomheden går ud på. Farvesammensætningen virker uprofessionel, og de store gule bogstaver, har helt forkerte proportioner i forhold til resten af logoet. Det irriterer øjet. Man kan forestille sig, at de har forsøgt at illustrere en savanne i forhold til deres farvevalg. Logoet kommer til at virke meget tungt, med den mørkerøde farve og den mørke gradient i bunden af kassen. Efter en brugerundersøgelse fik vi bekræftet dette. Folk sagde f.eks. ”Det er helt forkert proportioneret det der, og farverne sejler.” og “Det fungerer slet ikke sammen, og farverne harmonerer ikke. Det er som om, det er ved at vælte”. Deres logo er en kombination af symbolske, beskrivende og typografiske virkemidler. Dette synes vi fungerer rigtig godt, og har derfor valgt at gå videre med dette i vores redesign af Business 2 Africa’s logo, som vi vil redegøre for længere nede i rapporten,

Grundlæggende stilvalg (SE + CI) Vi vil i det følgende argumentere for vores grundlæggende stilvalg i form af farver og typografi, hvilket ligger til grund for vores design-process.

Farver (SE) Ifølge Business 2 Africa er afrikanerne mere farverige end de skandinaviske lande. Derfor er det væsentligt at imødekomme begge kulturer og medbringe farver på sitet/logoet. Vi har dog valgt et logo i hvid og prioriterer i stedet, at websitet som helhed er i farver for at skabe stemning. Foruden hvid har vi på sitet også anvendt farverne blå og sort (til de sort/ hvide billeder). I det følgende vil vi redegøre for de valgte farver og begrunde herfor via farvernes betydning, symbolik og psykologi.14

14 www.farvernesbetydning.dk

Hvid Vi anvender hvid, som den ene halvdel af vores sektioner - skiftevis hvid og blå. Hvid står for en ny begyndelse. Det er et tomt lærred, der venter på at blive skrevet på og baner vejen for skabelsen af noget, som vi kan forestille os. I forhold til Business 2 Africa, så står deres kunder over for en slags ny begyndelse - i hvert fald en ny begyndelse på at skabe et nyt marked i Afrika, hvor de ved hjælp fra Business 2 Africa kan få det til at ske. Dertil er hvid reflekterende. Den stimulerer åbenhed, vækst og kreativitet samt skaber en følelse af orden og effektivitet, hvilket passer til den fortælling om en kompetent og engageret rådgivning, som Business 2 Africa gerne vil kommunikere ud til den potentielle kunde. Dog er der ulemper ved farven hvid, idet for meget hvid kan virke koldt, isoleret og tomt og give en følelse af distance og manglende interesse. Dette er ikke i Business 2 Africas interesse, så der skal være en god balance i forholdet mellem den hvide og de øvrige farver.

Blå De øvrige sektioner er blå. Vi har på trods af, at vores kunde Business 2 Africa ønskede den orangebrune farve, valgt at bruge den blå. Dette har vi gjort på baggrund af en test på erhvervsfolk - der er Business 2 Africas målgruppe - der viste at 75% af disse ville foretrække et blåt website, frem for orangebrun. Se bilag 11. i vores A/B farve splittest på www.amino.dk vægtede denne farve som bedre passende til vores rådgivningsfirma. Blå signalerer stabilitet, tillid, orden, loyalitet og maskulinitet. Det er en farve, der viser kreativitet og intelligens og er en populær farve blandt store virksomheder. I forhold til farvepsykologi passer blå godt til Business 2 Africa, fordi de gerne vil fremstå som pålidelige, ansvarlige, sikre og som forretningsfolk, der har kontrol og kan handle i vanskellige situationer. Blå åbner op for kommunikation, men er dog stærkest i en-vejs kommunikation, hvilket dog er denne farves ulempe. Samtidig har den ikke helt den varme i sig, som kan repræsentere Afrika, selvom blå i sig selv er farverig. Til gengæld kan blå fungere som hjælperen lig Business 2 Africa, der er rådgivere. Dens succes afhænger af kvaliteten og mængden af relationer, hvilket svarer godt overens med Business 2 Africa’s store netværk og intention. Desuden er blå en giver og forbindes med magt, integritet og seriøsitet.

Billeder i Sort/hvid/grå Billederne fra Afrika på websitet er i sort/hvid/grå skalaen, primært fordi det er med til at mindske støjen på sitet. Da det bliver større flader i de grå toner, skal vi samtidig være opmærksom på, hvad disse farver signalerer. Sort er en kraftfuld farve, der symboliserer klasse, men som også indebærer selvkontrol, disciplin, selvstændighed og en stærk vilje. Sort skal helst ikke stå alene, men bliver tilført positiv energi, når den bliver brugt sammen med andre farver. Samtidig er den også med til at fremhæve de andre farver. Grå er anderledes neutral og signalerer sikkerhed, pålidelighed, intelligens og funktionalitet. Samtidig er det en moden og ansvarlig farve, der forbindes med alderdom. Det stemmer dog fint overens med de to ældre partnere, men også alle partnerne som helhed, der med alderen også har erfaringen og kompetencerne.

Typografi (CI) Typografien Roboto har vi valgt at bruge i logoet, fordi det er en Sans Serif, der har et moderne udtryk. Til brødteksten, navigationen samt tabeller på selve websitet bruger vi typografien Open Sans, der også er en Sans Serif. Sidst har vi brugt Roboto igen, men denne gang i en Roboto slab

Eksempel fra det nye website med Roboto Slab

version med seriffer til overskrifter og leads på websitet. Der er valgt en font med serif, da denne signalerer troværdighed, der får virksomheden til at fremstå seriøs.

Eksempel på fonte på det redesignede website

Disse fonte gør at vi opnår et fint, æstetisk look, der spiller godt sammen med farveskemaet. Det er meget moderne fonte, som giver et flot udtryk. Samtidig er der lagt vægt på funktionen, da der, som vi ser i vores personaer, er meget forskellige mennesker og aldersgrupper, der besøger dette site. Det er derfor vigtigt, at det er let at afkode, hvilket vi opnår med disse fonte.

Opsummering af vores stilvalg Vores valg af farver og typografi er hermed grundlæggende elementer i vores visuelle identitet, som kommer til udtryk i logo og i websitets design.

Redesign af logo (CI) Det er vigtigt for vores virksomhed, at deres kunder ud fra logoet kan aflæse, hvad virksomheden drejer sig om. Det kommer til udtryk, hvis vi benytter det symbolske og beskrivende i Afrika, og det typografiske og beskrivende i virksomhedens navn. I bilag er hele logoprocessen dokumenteret, lige fra skitser, testning til det endelige logo. Vi har ud fra disse grundlag lavet et nyt logo, der er mere stilet og harmonisk, og som passer bedre til Business 2 Africa. Vi har derfor i høj grad lagt vægt på, at logoet skulle repræsentere en rådgivningsvirksomhed. Vi holder farverne på logoet i hvid på websitet, da det skal være enkelt, klassisk, stabilt og let at afkode. Den hvide farve gør, at logoet udskiller sig på sitet, da det står i kontrast med den farverige baggrund. Samtidig samarbejder den godt med resten af websitet, idet hvid går igen længere nede på sitet. Hvis logoet skal bruges på hvidt, bliver farverne lavet om til sort eller blå - se mere i designmanualen. Det er vigtigt, at logoet appellerer til både direktører i de største danske firmaer, men at det også fanger de afrikanske virksomheder, der evt. vil benytte sig af Business 2 Africa, som matchmaker til de danske virksomheder. Vi har valgt at opstille logoet så bogstaverne danner en kasse, da kassen signalerer stabilitet, som er vigtigt for en rådgivningsvirksomhed. Derudover er der skjulte linjer mellem de to rækker tekst, der igen er med til at stabilisere logoet. Dette giver et image field,

hvor selve kontinentet får noget shine, og det bliver ekstra tydeligt, at der opereres i Afrika. Samtidig virker logoet let, og virker ikke som noget, der er ved at kollapse med det store robuste AFRICA under sig. Selve Afrika er tegnet op med tynd streg, men er gjort tykkere dér, hvor Business 2 Africa opererer. Derudover er det ufuldendt, da det giver et spil i logoet, og det kommer til at virke lidt lettere. Ud fra brugerundersøgelser, kan vi konkludere, at det nye logo er behageligt at se på, og giver en mere virkelighedsnær opfattelse af, hvad man kan forvente sig. “Der er god balance og harmoni”, hvilket er to egenskaber der er essentielle i dette firma.

Website (SE) I det følgende illustrerer vi vores proces med at finde frem til websitets layout og udseende fra moodboards, skitser, styletiles til sitemap og mockup. Det har samtidig ført frem til vores stilvalg, som beskrevet tidligere i rapporten.

Moodboard (fælles) Med moodboardet skaber vi den stemning og de idéer, vi gerne vil have ind på det nye website. Der er brugt billeder, af den stil vi vil forsøge at ramme, og ting der skal være på websitet. Vi forsøger at skabe en stemning, der både appelerer til direktøren for Danfoss men også det mellemstore smedefirma.

Skitser (fælles) Her er skitserne på vores oprindelige idé til forsiderne, som vi har holdt nogenlunde fast i igennem forløbet. Øverst har vi headeren, hvori vi har vores redesignede logo. I headeren har vi navigationen, hvor vi har de forskellige menupunkter vandret. Derunder har vi body, hvori vi har nogle actionknapper, små tekster og billeder, der skal få brugeren til at interagere på siden. Nederst har vi footeren, med generelle kontaktinformationer. Med denne skitse opnår vi en helt klar fornemmelse af, hvordan tingene kommer til at stå i forhold til hinanden på websitet.

Styletile(fælles) Vi har lavet et Styletile i de farver, vi vil bruge på vores website. Det giver et overblik over hvilke stile, farver, teksttyper, elementer, knapper og stemning man kan forvente på website.

Mockup(fælles) Ud fra skitserne har vi lavet nogle Mockups for at få en ide om, hvordan hele websitet skal opbygges. Samtidig får vi en idé om, hvor hvilke ting skal være, hvilke farver de skal have, og hvor store de skal være i forhold til hinanden. Det gør arbejdet meget nemmere, når vi skal til at arbejde på det færdige website. Der er et eksempel mere i bilag 15.

Komposition (SE) I det følgende vil vi argumentere for vores valg af design i forhold til at kommunikere Business 2 Africas budskab samt information på en funktionel og æstetisk måde. Vi vil samtidig redegøre for, hvordan vi visuelt kan arrangere de grafiske elementer, så det får den største effekt for indholdet og budskabet, samt vi får kommunikeret Business 2 Africas kernefortælling.

Farver & linier Vi anvender farver til at opdele vores sektioner på sitet. Det er med til at fremhæve indholdet på hver enkelt sektion, samtidig med at skiftet og repetitionen af farverne, dvs. fra blå til hvid til blå igen, gør, at det også danner en helhed. Skiftet mellem farverne er med til at danne bokse og hjælper til med at organisere og gruppere indholdet. Ligeledes er farverne også medvirkende til at skabe de linier mellem sektionerne, der kommer til at fremstå i overgangene.

Symmetri & asymmetri Sektionerne er desuden med til at skabe balance, symmetri og stabilitet, der igen er med til at dirigere brugeren af sitet hen på det ønskede indhold. For at bryde monotonien og skabe interesse, er indholdet i de forskellige sektioner placeret asymmetrisk. Fx placerer vi på forsiden i første sektion et billede af Afrika af polygoner i højre side og teksten i venstre side. I næste sektion bliver den visuelle præsentation af det moderne Vestafrika i form af billeder placeret i venstre side og de enkelte billeder forskudt af hinanden. Denne komposition er med til at skabe variation samtidig med, at sektionerne/farverne er med til at skabe ro og orden, så troværdigheden sikres.

Hieraki Det fører videre til hierakiet i designet. Til at fange blikket anvender vi billeder, som er dét, der udover levende billeder og animationer, er mest effektiv og ligger øverst i hierakiet. På sitet har vi brugt billeder af Afrika samt billeder af mennesker (partnerne i Business 2 Africa). Da vi har valgt at udarbejde et farverigt webdesign (baggrundsfarven), vælger vi at anvende billeder i sort/hvid, så der stadig er harmoni på sitet, og så billederne ikke giver for meget støj. Dog bevarer vi billeder af medarbejderne i Business 2 Africa i farver for at fremhæve dem. De er med deres person deres eget vigtigste redskab i rådgivningen. Det er dermed væsentligt at fremhæve dem i farver og skabe tillid. Ved at anvende et tydeligt hieraki, kan vi vise kunden, hvad der vigtigt og mindre vigtigt. Udover at vi via hierakiet kan forsøge at styre kundens blik, hvor vi gerne vil have denne til at se, vil bevidst anvendelse af hieraki, gøre det lettere for brugeren at overskue siden og finde dét denne har brug for, dvs. jvf. kundens usergoals. Derfor anvender vi efter billeder overskrifter/underoverskrifter i stor skriftstørrelse, som gør det tydeligt, hvad det følgende handler om.

Kontrast En anden måde, hvormed vi kan skabe et tydeligt hieraki, er vha. bevidst brug af kontrast, der er med til at skabe overblik. Vi anvender for eksempel polygon billedet af Afrika med den ujævne stroke/kant, som står i kontrast til baggrunden. Desuden er der kontrast i farveskiftet ved hver sektion. Formerne er også med til at skabe kontrast, idet vores firkantede sektioner er i kontrast til for eksempel Afrikas kurvede/kantede form både i logo og Afrika illustrationen på forsiden. Ved at sætte billeder fra Vestafrika op som en slags

collage, bliver dette kontrastfyldt ift. resten af siden. Dermed er vores brug af kontrast også medvirkende til at skabe dynamik og liv på sitet.

Gestaltlove(SE) Til at organisere indholdet hjælper gestaltlovene os, da disse beskriver, hvordan mennesker sanser og opfatter sammenhænge. Ved at anvende gestaltlovene bevidst, kan vi strukturere sitet og gøre det mere overskueligt/brugervenligt.

Loven om Nærhed: • Vi placerer indhold, der hører sammen nær hinanden. For at disse elementer adskiller sig fra det andet indhold, er der godt med white space i afstanden til det øvrige og mindre imellem de elementer, der skal knyttes sammen. Vi anvender denne lov ved for eksempel vores billede-collage på forsiden og i navigationen.

Loven om Lighed: • Denne lov anvender vi for eksempel i vores navigation og til vores knapper “Læs om”. Menuen er placeret samme sted på hver side. Vores knapper har samme form og størrelse.

Loven om lukkethed: • Opdelingen i de enkelte sektioner/bokse (farverne) indeholder indhold, der ikke er lig hinanden. Det opfattes alligevel som sammenhængende, idet boksen indrammer indholdet og skaber en lukkethed omkring det.

Sitemap & informationsarkitektur(JL) Grundlæggende for udarbejdelsen af webløsningens navigation er en kortlæggelse af, hvilken type information, der skal optræde, hvor meget der skal med, og ikke mindst hvordan informationen mest praktisk kan udlægges på sitet.

Vi har tidligt i processen benyttet User Stories som værktøj til at finde frem til de vigtigste features på siden. Gennem interviewet med en af virksomhedens partnere har vi fået en god fornemmelse af, hvilke informationer, de ønsker medtaget. Hierarkiet kunne vi ud fra features og kundeønsker udtrykke gennem et sitemap, som giver et overblik over informationsarkitekturen. Vi usertestede desuden opstillingen (Se bilag 5: User test, Card sorting), og det viste sig, at vores opstilling stemte overens med brugernes ønsker. Der viste sig kun en lille variation i rækkefølgen af placeringen af punktet “Samarbejdspartnere”.

Den endelige informationsarkitektur ses udtrykt gennem dette diagram:

Navigationsdesign (JL) Navigationsdesign er designet og opsætningen af de elementer på websitet, som brugeren benytter til at navigere rundt med. Det indbefatter primær navigation, sekundær navigation (fx sidebars, produktkategorier osv) breadcrumbs og typer af links. I vores tilfælde havde vi kun behov for at indtænke en primær navigation og så forsidens informationsbidder. Vi valgte en helt traditionel horisontal navigationsbar på desktopudgaven af websitet, både fordi antallet af elementer i den primære navigation er lavt (5 elementer), og fordi kunden Busniess 2 Africa havde udtrykt ønske om en sådan type navigation (Se bilag: Interview). Derudover har den navigationstype den fordel, at den giver et godt overblik og nem adgang til punkterne. Til mobil/tablet udgaven af websitet valgte vi en traditionel burgermenu kombineret med en “slide-in” menu, som ligger som et overlay fra højre side. Den har et moderne præg og er samtidig tilstrækkelig funktionel til den mængde menupunkter, vi har behov for at fremvise. Punkterne skal udgøre mindst 40 pixels i højden, således at usability via touch-interface er nemt og bekvemt.

Gode principper i navigations- og usabilitydesign(JL) Usabilityeksperten Steve Krug har ét centralt princip: “Don’t make me think”. Brugeroplevelsen skal være så flydende, at brugeren ikke er nødt til at skulle tænke unødigt over for eksempel navigationen.15 Jakob Nielsen (Nielsen, J., 2013) beskriver brugerens generelle navigationsproces med disse tre spørgsmål:

“Where have I been” • Fx Links ændrer farve, når de er besøgt

”Where am I?” • Titler, kategorier, ikoner, breadcrumbs. Markering af aktivt menupunkt.

”Where can I go?” • Tydeligt informationshierarki - hvor er primær navigation og har navigationspunkterne logiske navne (hvis betydning man ikke skal gætte sig til)? • Overholdes konventionerne for usabilitydesign, er tingene, hvor man forventer at finde dem?

Brug af disse principper i vores webløsning (JL) På forsiden har vi en tagline (kort beskrivende introtekst på max 20 ord) ved siden af en Afrika-illustration, så brugeren lynhurtigt kan orientere sig om, at det er den rette webside, han har valgt at besøge.

Vi har tydeliggjort den primære navigation ved at placere den øverst til højre ved siden af logoet, og samtidig have god plads omkring den. Navigationselementerne har enkel navngivning, som sikrer at brugeren ikke skal tænke meget over, hvor de fører hen. Logoet er jævnfør konventionerne klikbart og fører brugeren hen til forsiden.

15 http://www.nngroup.com/articles/navigation-you-are-here/

Opsummering (JL) Vi har gennemgået en designproces, hvor målet var at skabe en ny visuel identitet for vores kunde Business 2 Africa. Vi har brugt designbriefet som afsæt, og har derfra gennem skitsering, analysearbejde og usertesting arbejdet os frem til et samlet stilvalg bestående af farver, former, komposition, typografi og symbolik. Dette har udmøntet sig i en visuel identitet bestående af et logo, visitkort samt et website. Hermed er næste skridt at påbegynde udviklingen af prototypen.

INTERAKTION Kravspecifikation (JL) Før vi prototyper, er vi nødt til at have samling på, hvad der skal realiseres. Vores side skal leve op til de krav, som vi er kommet frem til via research- og design-fasen (user+business goals). Disse kan i vores tilfælde sammenfattes til følgende stil- og indholdskrav: • Stil og udseende: Strømlinet, enkelt. Udstråle troværdighed • Call to actions (CTA): ”Læs om virksomheden”, ”Kontakt” • Brugervenlighed: • ”Don’t Make Me Think” og fravær af frustration (skal usabilitytestes) • Navigation @ desktop: Klassisk horisontal med plads til 5-6 indholdselementer og sprogvælger. • Navigation @ desktop: Slide-in-right navigation, som også indeholder social media links og sprogvælger. • SEO-optimeret (meta tags, h1-h6, alt, title osv) • Responsivt (top-down, altså desktop first)

Derudover er der en række tekniske krav, som vi skal leve op til, som tager udgangspunkt i statistik for browsere og platforme.

Ifølge statistikker13 bruger 93% af webbrugere (på desktop) opløsninger på 1366x768 eller højere. Dette betyder, at desktopdelen af vores site skal tegnes optimalt med en bredde på 1350px (1346px-40px) og en højde på 618px (768px-150px) og opefter. Vores teknologier (CSS3 og HTML5) kræver, at brugeren har mindst IE9, Chrome, Firefox, Safari, Opera eller en mobil browser. Vi har valgt ikke at lave support for IE8, da brugerandelen kun andrager 2.6%.

13 http://www.rapidtables.com/web/dev/screen-resolution-statistics.htm http://www.w3schools.com/browsers/browsers_display.asp

Best practice (JL) Når vi som et team samarbejder om et web-projekt, er det afgørende, at vi har standarder for arbejdsgangen, som alle følger. Det indebærer, at vi er enige om navngivning af mapper/filer. Al viden om koden skal eksternalisere via meningsfuld navngivning af variabler/funktionsnavne og solid kommentering af koden undervejs. DRY-princippet (Don’t Repeat Yourself) er også centralt for fælles udvikling (og vedligeholdelse) af kode. Filosofien er at skrive så lidt kode som muligt med så få gentagelser som muligt. Lad være med at skrive tre CSS-klasser, hvis du kan klare dig med én. Vi bruger også kun IDs i CSS når det er absolut nødvendigt - ellers kun classes, som er nemmere at genbruge og håndtere.

Responsive Web Design (CI) Sitet skal fungere på smartphones, hvilket kan løses ved hjælp af Responsive Web Design. Her kan brugeren tilgå sitet, hvad enten de benytter computer, tablet eller smartphone. Det er muligt fordi man med Responsive Web Design tilpasser og skalerer designet automatisk, alt efter hvilken størrelse devicet har. Det gør at brugeren ikke skal til at zoome ind, eller ændre noget for at se siden optimalt, så indholdet er læsbart på alle devices. Herved opnår brugeren den bedste oplevelse af hjemmesiden. En måde at få tingene responsive på, er ved at bruge Top-Down-princippet, der i sin enkelthed går ud på at man starter med at opbygge et website for desktop-versionen, for derefter at arbejde sig ned igennem de forskellige devicestørrelser. Det gør man ved at bruge Media-Queries. Ved Media-Queries sætter man nogle forskellige skærmstørrelser op, for at kunne tilpasse sitet til forskellige devices. Nedenfor er der et eksempel på dette. Her har man angivet nogle værdier, der kun skal gælde for desktopversionen. Vi har fire breakpoints for at få det til at se godt ud på alle devices. De ser ud som følgende: $breakpoint-mobile: 700px; //mobile + small tablet $breakpoint-mobile: 1120px; //tablet + small desktop $breakpoint-mobile: 1300px; //desktop $breakpoint-mobile: 1500px; //XL desktop

Vi er gået efter at få det til at se at se godt ud på alle skærmstørrelser. Det har vi gjort ved hjælp af et værktøj der er blevet udviklet af Brad Frost14, der viser sitet på alle mulige devices. På den måde har vi kunne tilpasse, så det ser godt ud på alle devices.

Realisering af designet i HTML/CSS (JL) Efter vi i designfasen har udarbejdet et levedygtigt grafisk mockup, der lever op til kravene for vores produktion, anvender vi det til et handlingsanvisende ”wireframe”. Det giver et overblik over placeringen af centrale elementer såsom header, main og footer, samt hvilke løse div-containere, der vil blive brug for. I samme ombæring indtegner vi, hvordan vi vil opdele layoutet via gridsystemer.

14 http://bradfrost.com/demo/ish/?url=http%3A%2F%2Fdev.jexpo.dk%2Fprojekt22% 2Findex.php#disco

Reset, Grid-system og Sass (JL) Vi bruger Eric Meyer’s “CSS Reset” for at sikre, at browserne ikke får lov til at tegne HTML/CSS forskelligt fra vores ønsker. Målet er en ens rendering i alle browsere. Frameworks/templates (Bootstrap, materialize osv) kan spare rigtig meget tid i workflow, men hvis du ikke forstår din HTML/CSS til fingerspidserne, vil det skabe problemer senere, når du får brug for at fejlsøge et problem eller ændre layoutet mere specifikt. Derfor har vi valgt at skrive vores kode fra bunden i dette projekt.

Gridsystemer gør det nemt at kunne realisere layoutet i webløsninger. Det er relativt nemt at lave sit eget grid-system bestående af rækker og kolonner (eks ½, ⅓, ¼, ⅛ af sidebredden), som dermed udgør en logisk måde at layoute elementerne på, så de står symmetrisk på siden med ens margener/mellemrum. Gridsystemer bliver dog mere komplicerede, når de også skal være responsive. Igen bruger vi har vores eget grid-system, et valg man godt kan problematisere, da det er tidskrævende at gøre grid-systemet responsivt.

Styling (CSS) og preprocessor (Sass)

(JL)

Som nævnt i ”Best Practice” bruger vi kun class-selectors til CSS-styling med mindre vi decideret har behov for id-selectors. Derudover navngiver vi logisk via fx prefixes, således at man ved at en klasse har med billeder at gøre, fordi den starter med prefixet ”img-”. Det gør koden nemmere at overskue.

Vi bruger Sass som CSS-preprocessor, da det giver adgang til bl.a. variabler og funktioner i CSS, og vi benytter det gratis værktøj Koala som Sass-compiler. Koala compiler i baggrunden, hver eneste gang vi gemmer vores .scss (Sass) filer.

Sass-koden (sass/*.scss) er ikke brugbar for browseren, før den er compileret til almindelig CSS ( css/base. css ). Sass-filer med underscore ( _ ) er includes, og bliver brugt inde i base.scss, hvor alle stumperne samles. I base.scss er alle vores indstillinger/variabler også defineret. Der er en kæmpe fordel i at dele tingene op, da det hermed er nemmere at overskue hvor sektionen med styling til navigationen eller grid-systemet gemmer sig. Mixins er funktioner, som kan genbruges overalt, og vi har brugt det til at generere CSS-gradienter ( @include gradient-linear() ), som vi bruger ganske meget på hele sitet.

Variabler og mixin ( gradient-linear() ) mødes i skøn forening. Vi gør også brug af darken() og lighten(), som er indbyggede Sass-funktioner, der gør farven mørkere/lysere. Smart!

Af særligt brugbare variabler kan nævnes farver, fontstacks, breakpoints og padding

Til slut i processen minifier vi vores CSS-kode, hvorved alle mellemrum, afsnit og kommentarer fjernes. Stylesheetet ligner herefter volapyk for mennesker, men er en lækkerbisken for browseren, der sparer tid ved hentningen. Her er der skåret 6 kb af den samlede mængde data pr. side.

Før minifying

Efter minifying

Indholdet af et ”minified” stylesheet. Ikke specielt læsevenligt, men noget hurtigere at hente ned.

Behaviour: JavaScript & jQuery

(JL)

jQuery er et funktionsbibliotek til JavaScript, som letter brugen betragteligt, ikke mindst når man har behov for at traversere og finde HTML/CSS elementer samt til animation. Vi har gjort brug af jQuery til “Top-knappen” og til mobilnavigationen. Alle steder bruger vi event listeners (i filen script.js) til at udløse funktioner, og ikke inline javascript.

I mobilnavigationen kaldes funktionen initMenu() af en click event-listener, hvorefter InitMenu() selv finder ud af om menuen er lukket eller åben, og derefter udfører den “modsatte” handling. Det gør den ved at undersøge om elementets margin-right (CSS property) er lig med -330px. Såfremt den er det, er menuen skjult ude bag højre side af browserens viewport, og bliver herefter vist ved at sætte margin-right til 0. For at give brugeren en glidende og naturlig oplevelse, animeres både denne overgang samt opacity via jQuerys indbyggede animate() funktion.

“Top-knappen” aktiveres når man er ca. 12 % nede af sidens samlede længde, således at man nemt kan komme til toppen igen. Som det ses af koden, bruges funktionen scrollTop() til at beregne den nuværende position på siden, og jeg har ud fra en beregning (sidens samlede længde divideret med 8 = 12.5 %) fortalt scriptet, hvornår dets ønskes at Top-knappen toner frem. jQuerys fadeIn() og fadeOut() funktioner benyttes til at vise/ skjule Top-knappen. HTML + styling sker via et “fixed” element kaldet .button-top, som er placeret i footeren.

Struktur og semantik (HTML) (SE) For at redegøre for strukturen og den semantiske HTML på vores prototype, vil vi i det følgende tage udgangspunkt i, hvordan browser og server arbejder sammen.

HTML’en er afvikles i browseren (client-side) sammen med JavaScript. Når en potentiel kunde indtaster Business 2 Africa’s URL, sender browseren en HTTP request (Hyper-Text Transfer Protocol) til serveren. Serveren ser, at vi også har anvendt PHP og sender derfor en request til PHP-modulet, som giver et response tilbage til serveren. Serveren sender websitet (inklusive afviklet PHP) i form af tekst videre til browseren, der læser det hele ind, efter endnu engang at have sendt en request til serveren efter CSS. Dermed kan kunden se Business 2 Africas website på sit device. Ifølge B2A’s krav til websitet skal det være brugervenligt og troværdigt. Vores persona vægter i sine Usergoals ligeledes, at sitet er hurtigt og responsivt, dvs fra kunden har indtastet url’en til siden dukker op på dennes skærm, må der kun gå få sekunder. Det leder bl.a frem til, hvorfor en ordentlig struktur og semantisk markup er nødvendig i HTML’en. Det er med til at sikre usability og helt væsentligt: Højne søgemaskineoptimeringem (SEO).

Struktur Et websites struktur består grundlæggende af tre lag. Der er det strukturelle lag i HTML’en, præsentationslaget CSS samt javascript, der udgør behaviour-laget. Det strukturelle lag indeholder <head> og <body>. I <head> har vi placeret “Doctype html”, der indikerer at det er et HTML5 dokument. Desuden er der meta information om siderne ift fx titel, description, viewport mv, samt sidens CSS. Det er kun browseren, der kan læse indholdet i <head> og det kan derfor ikke ses af den besøgende på websitet. I <body> derimod ligger al indholdet på websitet, som kunden får at se. Det er her, vi anvender de semantiske tags til brug til css, programmering og browseren.15

15 http://webstyleguide.com/wsg3/5-site-structure/2-semantic-markup.html

Semantisk markup Semantisk markup fortæller, modsat <div> og <span>, browseren, hvilket indhold, der er i dokumentet og beskriver herigennem strukturen på sitet, hvilket gør det nemmere for browseren at læse indholdet og dermed effektivisere søgningen og i sidste ende højne brugeroplevelsen. Der findes ca 120 semantiske tags. Vi har minimeret antallet af <div> og anvender dem kun, hvor nødvendigt. I det følgende er eksempler på, hvilke og i hvilken forbindelse, vi har anvendt semantiske tags.

Eksempler på semantisk markup i vores prototype:

Eksempel: <header> taget må godt bruges flere gange (hvilket vi også gør på forsiden), og definerer en sektion der indeholder fx banner, primær information eller navigation. Vi bruger i vores primære header ligeledes <section> til layout/placering af logo/navigation, og <nav> tagget (med <ul> / unordered list) til at fortælle browseren hvor sidens navigation optræder.

Eksempel: <main> må kun bruges én gang, og definerer det primære indhold på en given underside. <section> bruger vi bl.a. på forsiden til at definere rækkerne med indhold.

Eksempel: <footer> tagget benyttes til footeren

Eksempel: Vi bruger <article> til selvstændigt indhold, der kan stå alene, som her en medarbejders profil på websitet.

Serverside (PHP) (SE) PHP (Hypertext Preprocessor) er et objekt-orienteret server-side programmeringssprog, der bruges til at udvikle dynamiske websites. For at fortælle browseren/serveren, at der er tale om et PHP-dokument, skriver vi <?php og

?>.

Vi anvender i vores webløsning PHP includes, variabler og et associative array, som vi vil gøre rede for herunder.

Includes Header og footer er oftest ens på websites undersider. Ved at anvende include filer, spares en del arbejde både ift kodningen af prototypen og vedligeholdelse/opdatering af sitet - især på websites med mange sider. Med PHP har vi lavet en standard fil til headeren og en fil til footeren. Hermed skal ændringer kun foretages ét sted, dvs. i include-filerne. For at hente include filen og kopiere indholdet ind i vores html dokument, skriver vi et include statement “include + stien til php-filen” imellem php-koden øverst i html-filen.16.

Include funktion og simple variabler benyttes på hver underside til at opdatere metadata og inkludere genbrugselementer som header og footer.

16 http://www.w3schools.com/php/php_includes.asp

Variabler Vi anvender php-variabler for at gøre vores meta title og meta description dynamiske og unikke til hver enkelt side. Af SEO hensyn er det godt at beskrivelserne/titlerne er forskellige for hver side. Ved at skrive <?php echo $pageDescription?> i meta name er det muligt at få variablen til at give hver side hver sin unikke beskrivelse og titel. Vi har, som det kan ses i eksemplet, anvendt shorthand kode til at udskrive variablen i stedet for at bruge echo eller print, som også er en mulighed. Vi har skrevet den unikke beskrivelse/titel øverst på hver side før include-statementet, da variablen med informationen (som bliver brugt i header.php), selvfølgelig først må angives.

Associative arrays Vores navigation forekommer tre steder på sitet afhængig af, om det er desktop-udgaven (header og footer) eller mobil-udgaven som burger-menu. Vi anvender derfor en associative array for at spare gentagelsen. Det gør vi med det formål at det som include, er nemmere og hurtigere at foretage ændringer. I stedet for at skulle ændre alle tre steder, kan vi nøjes med at ændre i array’et. En array er en variabel, der kan indeholde flere værdier på samme tid. Vores menu-punkter er strings, der har tilknyttet en key værdi, som er menuens links. Dette bliver defineret i config.navigation. php og er anvendt i header.php, hvor arrayen enten skal vise det nuværende menupunkt eller et nyt.

config.navigation.php

Foreach-loop kører gennem hver key/værdi sæt i arrayet indtil det sidste array element er nået.17

header.php: Der loopes igennem array’et for at udskrive indholdet af variablerne samt deres tilhørende keys (links). Derudover undersøger scriptet her også hvilken side der er aktiv, og tildeler den en CSS-class, så den bliver stylet anderledes.

SEO

(CI)

Search Engine Optimization18 betyder, at man gør sin side så forståelig som mulig for såvel mennesker som robotter. SEO tænker man ind som en grundlæggende tanke, når man udvikler sit website. De vigtigste tags for SEO-optimering er : <title>, <description> og <h1>-<h3> (overskrifter). Af tag-attributter har vi alt (billed-beskrivelser) og role (væsentlig for ARIA/ screenreaders/handicappede). I forhold til søgemaskineoptimering på vores site har vi lavet titlen om

17 http://www.tutorialspoint.com/php/php_arrays.htm 18 https://static.googleusercontent.com/media/www.google.dk/da/dk/intl/da/webmasters/docs/search-engine-optimization-starter-guide-da.pdf

fra ”Business to Africa >> Business 2 Africa” til ”Business to Africa - Rådgivning til vækst i Afrika”. Det hjælper virksomheden til lettere at blive fundet på Google, idet både firmanavn og deres arbejdsområde, rådgivning, er repræsenteret. Det gør, at hvad enten man søger på virksomhedsnavnet eller “rådgivning afrika, kommer virksomheden frem ved en søgning. I description-metatags har vi skrevet: ”Vi leverer professionel rådgivning til virksomheder som søger markeder i Vestafrika” da det dækker over hvad det er, og hvor de opererer. Dette gør, at Google kan vise brugeren, at det de har søgt på, rent faktisk også er på siden. Dette bliver markeret i søgeresultatet, hvor søgeordene bliver highlightet med fed tekst. Vi har H1-H6 overskrifter med indhold som f.eks.: “Rådgivning og sparring, Et Afrika i vækst, Rådgivere og partnere, Analyse, markedsscreening og feasibility study, brancher, netværk i Afrika, Partnerships, Finansiering, Implementering” Overskrifterne (H1-H6) hjælper Google med at finde mening i sidens indhold, og samtdig med hvilke ord virksomhedens potentielle kunder kan søge virksomheden frem på. Google gennemgår også sidens almene tekst/indhold, og er efterhånden dygtig til at forstå hvilke ord/termer/sætninger der er sammenhæng mellem. Søgealgoritmen lærer med andre ord om emner, og den er i stand til at vurdere, hvorvidt en website (med dens helhed af struktur/tags og tekst/billeder/indhold) er relevant for et givent emne eller søgeterm.

Validering & teknisk test (JL) Vi har brugt W3Cs HTML-valideringsservice19. Opsummerende for de rapporter som W3 returnerer, er at vi altid skal kunne forklare og retfærdiggøre hvorfor der eventuelt måtte opstå fejl. I vores tilfælde får vi en række fejl på det, at vi har valgt at lægge elementer (som ikke er LI-elementer) inden i et UL-element. Det er selvfølgelig ikke helt korrekt brug, men det giver ingen reelle renderingsfejl i nogen browsere. Vi får også fejl pga at vi et enkelt sted angiver bredde af billeder/IMG i procent – men igen renderer det fint i alle større browsere og er dermed ikke et problem.

19 https://validator.w3.org

Vi har også lavet en teknisk test af websitets rendering over forskellige platforme via værktøjet CrossBrowserTool . Vores website renderes på følgende måde på en række populære smartphone, tablet og desktop-platforme: Som det ses tegnes websitet perfekt i alle browsere på nær Internet Explorer 9.0. Det lader til at CSS gradients ikke er velunderstøttet i denne browser, og derfor kunne vi med fordel sætte ind og fejlrette her, såfremt vi skulle forbedre yderligere på prototypen.

Usertest og usabilitytest (JL) (Se Bilag 16) Vi testede den endelige prototype på i alt otte respondenter. Fire brugte i testen desktop-udgaven af websitet og fire brugte mobiludgaven. De fik alle samme udgangspunkt: De blev placeret på forsiden af websitet og fik af os en kort introduktion til virksomheden. Herefter testede vi usability med en kombineret Trunk Test og Think Out Loud test. Herunder har vi opdelt de to hovedkategorier af vores test, og fremfundet en række af de centrale observationer.

Usability & brugervenlighed (JL) Vores test af brugervenlighed og navigationslogik viste generelt at brugeren var tilfreds med siden og navigationen på den. De fandt dog også nogle usabilityproblemer og op-

mærksomhedspunkter, som giver os et udgangspunkt at arbejde videre fra. En række eksempler fra testen: • Overskuelig og enkel navigation, selvforklarende, smooth • Vidste ikke der var noget længere nedenunder[på siden, under reference-sektionen] • Navigations overskrifter gode • Top-knap god, men må gerne dukke op tidligere når man scroller • Sitet ”scroller” bag ved når burgermenu er åben (forvirrende) • Burgermenu må gerne lukke sig når man trykker uden for den (så man ikke behøver ramme ”krydset” nødvendigvis) • Action-knapper rolige, men man ser dem stadigvæk • Burgermenu: Mangler scrollindikator i siden på mindre enheder, da man så ikke ved at der er mere i bunden.

Oplevelse og & indtryk Derudover scorede vi højt på troværdighedsfaktoren, som vi også adspugte vores respondenter om, alle respondenter angav en vurdering på minimum 4 (5 = maksimum), hvilket antyder at vi i brugerens øjne har formået at gøre siden troværdighed og tillidsvækkende.

Øvrig feedback opsummeret: • Stil/udtryk: Fonten virker ”ærlig”, professionelt, troværdigt, advokat/bank agtig, virker ikke som en hippie-red-Afrika aktion – mere for firmaer der skal investere, god brug af plads/whitespace, en fin virksomhed, • Farver: Businesslike, dejlige, godt farvetema, blå–hvid–sort kolde farver • Logo: Flot, enkelt, beskriver tydeligt hvad det handler om • Afrika-grafik: Diamantpræg/afrika minehistorie, flot, god, fangede øjet, stroke er god, giver spil, • Fotos (medarbejdere): Må godt være større, • Foto (vækst på forside): Industrialisering, vækst, fremtidsstilart…. Ærgerligt det ikke er i farver.

Afsluttende kan det nævnes, at vi godt kunne have udført yderligere brugertests, og nok

Opsummering af interaktionsafsnit (JL) Vi har fået realiseret vores prototype gennem brug af en række teknologier og værktøjer. Vi nåede frem til en fuldt responsiv prototype med tre fungerende undersider. Vi har testet den endelige prototype på brugere, for at finde usabilityproblemer og for at få deres vurdering af det endelige visuelle udtryk.

KONKLUSION

(Fælles)

Vi satte os for at besvare følgende problemformulering i vores projekt

Hvordan kan vi redesigne Business 2 Africas website og visuelle identitet, så vi bedre understøtter virksomhedens troværdighed som erfaren rådgiver?

Hvordan kan vi samtidig tage hensyn til såvel Business 2 Africas primære som sekundære kundesegment? Gennem deskresearch, analyser og interview etablerede vi først en grundlæggende viden og indsigt om Business 2 Africa, således at vi ville have et afsæt til at udforme en visuel identitet. Af overraskelser i denne fase var navnligt, at websitet udgjorde den sekundære informationskanal i en virksomhedsmarkedsføring, som primært foregår via mund-tilmund og via personlige netværk. Derfor fandt vi frem til, at websitet skulle være en understøttende kanal for en potentiel ny kunde. Scenariet var, at kunden først efter en samtale med Business 2 Africas partnere læste om virksomhedens profil og eventuelle referencer online. Dér skulle vi sætte ind. Vores hovedfokus var underbyggelse af troværdighed og en tillidsvækkende kommunikation til brugeren. Med andre ord er websitet det sidste lag i kundeoplevelsen, der skal medvirke til, at samarbejdet bliver etableret. Viden om appelformer ift. prioritering af sidens indhold, var et godt værktøj, der sikrede at vi fik udvalgt de rette informationer til websitet: Kontaktinfo, samarbejdspartnere, referencer, korrekte overskrifter, nøje udvalgte fotos. Indhold som kunne være med til at sikre høj troværdighed for virksomheden. Med udgangspunkt i vores viden om virksomheden og målgruppen samt et designbrief, kunne vi begynde udformningen af den visuelle identitet. Det var centralt for os, at fremstillingen virkede moderne og tillidsvækkende, men også at den gav indtryk af en virksomhed, der har kendskab til det vestafrikanske marked. Dermed er det en balancegang mellem at lave et stilrigt europæisk design, og at ramme et design, som også appellerer til vores sekundære persona, nemlig forretningsfolk i den vestafrikanske region.

Her opstod et interessant dilemma i vores farvevalg: Brugerne (75% af de adspurgte) ønskede blå primærfarve, mens partneren Elisabeth ønskede den orange-brune farve. Hvem skulle vægtes højest? Her valgte vi at prioritere brugerfeedback’en. Risikoen ved dette valg er, at man ikke tager det nødvendige hensyn til det afrikanske segment (vores sekundære persona).

Den tidligere Business 2 Africa webløsning havde præg af lav troværdighed og man var som bruger tvivlende over for seriøsiteten af projektet. Gennem bevidste stilvalg som underbygger troværdighed, bedre informationsarkitektur (indholdet og distributionen af det), tydelig fremvisning af virksomhedens referencer underbygger vi i højere grad firmaets troværdighed. Prototypen tog afsæt i både analyse og design, og blev fremstillet via relevante teknologier som HTML, CSS, Sass, JavaScript/jQuery og PHP. Her var fokus at skabe en webløsning, som hviler på en solid kodebase, der også i fremtiden kan vise sig nem at vedligeholde for virksomheden. Ligeledes var det væsentligt, at vi fik gjort løsningen responsiv og hurtigloadende, hvilket vi også formåede. Krøllen på halen ville være, at vi havde tilknyttet en backend som fx WordPress, så virksomheden selv havde redigeringsmuligheder på sitet. I de afsluttende tests på prototypen fik vi positive brugertilbagemeldinger, særligt omkring visuel identitet og troværdighedsopfattelse, som var nøgleelementerne i vores projekt. Dermed har vi opnået en endelig prototype, der er forbedret på en række parametre i forhold til det originale Business 2 Africa website.

LITTERATURLISTE

(Fælles)

FAGLITTERATUR Ditlev, J. og Jepsen S. D., 2014. Content Marketing bogen s. 13-40, Scandinavian Book. Fog K., Yakaboylu B., 2002. Storytelling – branding i praksis Frederiksberg C: Samfundslitteratur. Hoff-Clausen, E., 2002. Set gennem nettet - organisationens troværdighed på hjemmesider, Kapitel 3, Frederiksberg C: Samfundslitteratur. Krug, S., 2013. Don’t Make Me Think!, 3rd edition, New Riders. Landa, R., 2014. Graphic Design Solutions, 5th edition. WADSWORTH CENGAGE Learning. Osterwalder, A. & Pigneur, Y., 2010: Business Model Generation. John Wiley & Sons, Inc. Pillon, E. & Vodder, M., 2013. Introdution til digital marketing og tværmedial kommunikation 1. udg., Hans Reitzels forlag. Sutherland, J. Scrum in five minutes Malmö, Sverige: Softhouse Consulting (brochure) .

WEBKILDER & BLOGINDLÆG Bjerge, P., 2015. Danske virksomheder har store muligheder i Afrika. 24.01.2015. Fundet på: http://www.jv.dk/artikel/1920512:Business--Danske-virksomheder-har-store-muligheder-i-Afrika (Set d. 23.11.2015) Business 2 Africa, 2010. [online] Fundet på: http://www.b2a.dk/ [Set d. 23.11.2015] Gamborg, N., 2008. Brugervenligt layout. 4 principper for brugervenligt design 23.06.2008. Fundet på: http://www.nielsgamborg.dk/wordpress/brugervenlighed/brugervenligt_layout.htm (Set d. 3.12.2015) Gamborg, N., 2015. Kontraster i design 28.03.2015. Fundet på: http://www.nielsgamborg.dk/?p=kontrast (Set d. 3.12.2015) Loncar, T. 19.2.2013. PHP SEO: Page-Level Titles, Meta Descriptions, & More Fundet på: http://www.lunametrics.com/blog/2013/02/19/php-seo/ (Set d. 10.12.2015) Lynch, P. J., Horton S. Semantic Content Markup (Online bog) Web style Guide 3. Udgave. Fundet på: http://webstyleguide.com/wsg3/5-site-structure/2-semantic-markup.html Nielsen, J., 2013. The Ten Most Violated Homepage Design Guidelines (Nielsen Norman Group). 10.11.2003. Fundet på: http://www.nngroup.com/articles/most-violated-homepage-guidelines/ (Set d. 3.12.2015) Olesen, J. 2015. Farvernes betydning. Fundet på: http://www.farvernesbetydning.dk (set d. 6.12.2015) Ravn-Pedersen, T. & Rahbek, K. 2014. Det nye Asien ligger syd for Sahara. 22.10.2014. Fundet på: http://jyllands-posten.dk/debat/international/ECE7129510/Det+nye+Asien+ligger+syd+for+Sahara+/ (Set d. 25.11.2015) Russkov, J. & Ussing, J., 2011. Danske virksomheder har fået øjnene op for Afrika. 01.02.2011 (Opdateret 03.06.2012.) Fundet på: http://www.business.dk/investor/danske-virksomheder-har-faaet-oejnene-op-for-afrika (Set d. 23.11.2015)

Simonsen, P., 2013. Dansk iværksætter får penge af Bill Gates. 22.05.2013. Fundet på: http://finans.dk/artikel/ECE5505614/Dansk-iværksætter-får-penge-af-Bill-Gates/?ctxref=ext (Set d. 27.11.2015) Zambito, T, 2013. Strategic Modeling Tool: The Buyer Persona Canvas. Tony Zambito blog, 29.05.2013. Fundet på: http://tonyzambito.com/10-ways-b2b-buyers-deeply-buyer-persona-canvas/ (Set d. 25.11.2015) Sections and Outlines of an HTML5 Document. Flere forfattere. Fundet på: https:// developer.mozilla.org/en-US/docs/Web/Guide/HTML/Sections_and_Outlines_of_an_ HTML5_document (Set d. 9.12.2015) PHP - Arrays. Ukendt forfatter. 2015. Fundet på: http://ww.tutorialspoint.com/php/ php_arrays.htm (set d. 10.12.2015) PHP for loops. Ukendt forfatter. 2015. Fundet på: http://www.w3schools.com/php/ php_looping_for.asp (set d. 10.12.2015) PHP 5 Arrays. Ukendt forfatter. 2015. Fundet på: http://www.w3schools.com/php/php_ arrays.asp (set d. 10.12.2015)

DESIGNMANUAL DESIGNMANUAL

INDHOLD LOGO FARVER TYPOGRAFI APPLIKATION

LOGO Log-

LOGO Det er logoet for Business 2 Africa, der skal imĂ¸dekomme virksomhedens kunder bĂĽde i Danmark og Vestafrika. Derfor er logoet et vigtigt element for B2A. Dette logo er beskrivende, symbolsk og typografisk.

LOGOBRUG Dette er guidelines for, hvordan logoet skal anvendes. Forsøg så vidt det er muligt at følge det. Tilladt for logoet: • Må skaleres op og ned • Må ikke vendes og drejes • Må ikke beskæres • Må ikke blive forvrænget eller omtegnet Logoet skal altid stå klart. Derfor må der heller ikke bruges opacity.

ALM. LOGO

NEGATIV BAGGRUN D

FARVEÆNDRING

SLØRET

FARVET BAGGRUND

PROPORTIONER

FARVEÆNDRING

NAVNETRÆK ALENE

BESKÆRING

ANVENDELSE AF LOGO

x = Minimum afstand til objekt eller tekst ved siden af logoet. X = Anbefalet afstand til objekt eller tekst ved siden af logoet.

FARVER

FARVER Websitet skal være farverig for at imødekomme den afrikanske kultur. Desuden skal sitet signalere business for at imødekomme de danske B2B virksomheder. Sitet skal dermed rumme begge kulturer. Farverne skal kommunikere tilid, engagement, pålidelighed og ansvarlighed. Farverne bør altid anvendes, så det giver en samhørighed.

SORT #000000

C75, M68, Y67, K90

HVID #FFFFFF

C0, M0, Y0, K0

BLÅ #006AB8

C89 M58, Y0, K0

TYPOGRAFI

TYPOGRAFI I Business 2 Africa’s visuelle identitet bruges der til overskrifter fonttypen Roboto Slab. Denne font er en serif font, der fungerer som et troværdighedssymbol. Til logoet er der anvendt Roboto Sans. Fonttypen i brødteksten er Open Sans, der er en Sans Serif font. Roboto har mange muligheder, der gør, at typografien kan varieres.

Roboto sans, Roboto slab & Open sans

Roboto Slab

ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ abcdefghijklmnopqrstuvwxyzæøå 1234567890@?!#“”&(*+-,./<:;=)

Roboto Sans

ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ abcdefghijklmnopqrstuvwxyzæøå 1234567890@?!#“”&(*+-,./<:;=)

Open Sans

ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ abcdefghijklmnopqrstuvwxyzæøå 1234567890@?!#“”&(*+-,./<:;=)

APPLIKATION

TØJ Hvis logoet skal trykkes på fronten skal det være på venstre bryst. På en sort t-shirt kan logoet være den blå farve eller hvid. På en hvid t-shirt skal logoet være sort.

VISITKORT Vi har designet et visitkort med udgangspunkt i logoet og de blĂĽ farver.

Brevhoved Til brevhoved pĂĽ hvidt papir anvendes logo med sort skrift og uden baggrund.

MERCHANDISE Til merchandise på fx sorte notesbøger anvendes logo med sort skrift og uden baggrund. På blyanter anvendes hvid eller den blå farve.

WEBSITE Hvis logoet skal på et website, skal det placeres øverst til venstre, så det er nemt at få øje på.

BILAG (CI) Bilag 1: Userstories

Bilag 2: Trello Projektstyring

sĂŚrligt a

Tidligt i processen

kunne ha

udva

resp

dent

mere

varie

fx ve

at ha

user stet

folk i Arla

ande

stĂ¸rr

virks

hed.

geve

teste

vet o

konk

klarh

over

tighe

af en dan

og vi

har f

en h

gribe

feed

som kun

med

at gĂ¸

vore

Bilag 3: Trello Projektstyring Sent i processen

Bilag 4: SekundĂŚr persona

Bilag 5: Usertest - Card sorting test

Bilag 6: Skitser - Brainstorm / projekt

Bilag 7: Skitser - Logo

Bilag 8: Skitser - Website

Bilag 9: Skitser - Navigation & layout elementer

Bilag 10: Usertest - logo (tidlige skitser) Introduktionstekst til usertest af logo: ”Vi er i gang med at designe et logo, som del af et studieprojekt, hvor vi blandt andet arbejder med visuel identitet. Kunden er en lille rådgivningsvirksomhed, der hjælper danske virksomheder med at lave forretning i Vestafrika. Det vil være en rigtig stor hjælp, hvis du vil stemme på et eller flere logoer, og evt. give en kommentar med.”

Svar på usertest af logo:

Eventuelle kommentarer til logoernes design?( 69 svar)

• 2. (Men hvor teksten bliver delt op) • (8 - det kunne være fedt hvis det område hvor de to træer overlapper hinanden det dannede at kort over Afrika) • Hvis papiret stod på højkant kunne teksten næsten være i Afrika • 9 minus teksten nedenunder.. eller evt gjort betydeligt mindre, så blikfanget er ”B A” • 1 is my favorite. 2 reminds me too much of rastafari/reaggea culture... But then again, I dont know what kind of business they facilitate • Fyr nummer 1 ind i illustrator og det er perfekt. men synes de alle er meget fine • Idéen med prikkerne i logo 9 er god, sådan at titlen er tænkt ind i selve logoet. Kassen rundt om virker dog overflødig og titlen bør kun være én linje.

• They’re all good. I Actually really like number 2, because it gives you a feeling of a more ”pro” Africa. If it was for an aid organization, I would choose the one with the continent Or maybe if it is counselling, maybe it would be nice to show that you know something about the culture. So I actually also like 1 and 3. sorry for being confusing. • Logo 1 er klart det bedste imo, kan godt li designet, men evt tilføj noget farve ala de streger man ser på billede 3. Det kan også forblive simpelt, hvor man evt kan lave farven på teksten istedet f.ks. eller på selve afrika omrids. Der er ingen af de andre logoer der er værd at arbejde videre på efter min mening :P • I’m not sure if it’s because that nr. 2 has a more finished concept that I find it the most appealing. However I find that nr. 1 has a very good potential for a great logo as well, I do think you should play around with the font a bit. Maybe making the font a bit similar to suggestion nr. 2.

100

Bilag 11: Usertest - Valg af primĂŚrfarve

101

Introduktionstekst til usertest af farve: ”Vi er i gang med at designe et website, som del af et studieprojekt, hvor vi blandt andet arbejder med visuel identitet. Kunden er en lille rådgivningsvirksomhed, der hjælper danske virksomheder med at lave forretning i Afrika. Vi er kommet frem til to farver, der kunne være den primære farve-”skabelon” for websitet, men vi har behov for at høre fra folk i erhvervslivet omkring deres opfattelser og ønsker. Her kommer du ind i billedet - vælg hvilken farve du hælder mest til, og kom eventuelt med en kommentar. OBS: Websitet i sig selv er en tilfældig side vi har lånt, blot for nemmere at kunne se farven anvendt. Vi laver vores eget design efter testen er udført.”

Svar på usertest af farve:

102

Bilag 12 : Usertest - Logo (illustrator/photoshop)

103

Stemmer: Logo 1: ll Logo 2: l Logo 3: lllll l Logo 4: ll Kommentarer: Logo 1: • Ser ud som om det ikke kører for dem

Logo 2: • Flyt 2-tallet ned til Africa • Logoet bliver for stort

Logo 3: • God harmoni og balance • Sjov farve, business-agtig • Kan bedre skilles af, så man har tekst og billede hver for sig • Virker som noget vækst-agtig

Logo 4: • Associationer til Visit-Denmark • Vil gerne have afrika i logo 1 ned i 4 • Slå 2 og A (i Africa) sammen

104

Bilag 13 : Andre Moodboards

105

Bilag 14 : Andre styletiles

106

Bilag 15 : Andre Mockups

107

Bilag 16: Usertest & usabilitytest af website mobil/desktop USER/USABILITY TEST PERSON #1 Udgangspunkt: • Starter på forsiden, Får en kort intro til B2A, Èn af os noterer, den anden spørger/vejleder Grundlæggende: • Alder: 23 • Køn: K • Platform: Desktop Usertest Hvad tror du de grå ikoner i det brede hvide felt på forsiden henviser til - altså betyder? • Sponsorer, noget der må være vigtigt siden det står der, meget tydeligt Du ejer et mindre skovbrug, og vil gerne vide om B2A har viden og netværk omkring dette. Find dette på siden. • Samarbejdspartnere -> Rådgivere, partner Du vil gerne vide hvem direktøren er. Find personen på siden • Medarbejdere Hvor bor B2A henne? Find virksomhedens adresse. • Kontakt -> Footeren Vælg et andet sprog på siden. • Går direkte op til top af side Oplevelse / indtryk På en skala fra 1-5 (5 bedst), hvor troværdig synes du virksomheden er? • 4 – troværdigt, professionelt. Lidt for meget tekst trækker ned. Beskriv din oplevelse af at navigere på siden? • Vidste ikke der var noget længere nedenunder (under reference-sektionen) Beskriv din oplevelse af websitet og det visuelle? • Struktur, flot sat op • Virkelig fin virksomhed • Medarbejdere + ydelser: Lidt for meget tekst • Farvevalg godt, farven passer godt til virksomheden • Afrikagrafik: Giver lidt spil på siden, det er godt • Sektion Afrika i vækst collage: Fedt, anderledes layout. Lidt for meget tekst. • Onepage agtig forside, giver hurtigt overblik • Logo: Enkelt, beskriver tydeligt hvad det handler om

108

USER/USABILITY TEST PERSON #2 Udgangspunkt: • Starter på forsiden, Får en kort intro til B2A, Èn af os noterer, den anden spørger/vejleder Grundlæggende: • Alder: 22 • Køn: M • Platform: Desktop Usertest Hvad tror du de grå ikoner i det brede hvide felt på forsiden henviser til - altså betyder? • Sponsorater, de største af dem vi har Du ejer et mindre skovbrug, og vil gerne vide om B2A har viden og netværk omkring dette. Find dette på siden. • Afrika i vækst -> Samarbejdspartnere • Fandt ikke det konkrete Du vil gerne vide hvem direktøren er. Find personen på siden • Medarbejdere Hvor bor B2A henne? Find virksomhedens adresse. • Kontakt -> Footeren Vælg et andet sprog på siden. • Fandt med det samme i toppen Oplevelse / indtryk På en skala fra 1-5 (5 bedst), hvor troværdig synes du virksomheden er? • 4. Farven blå indikerer handel og troværdighed. Skriften er også god. Beskriv din oplevelse af at navigere på siden? • Overskueligt. Kan lide det enkle. Beskriv din oplevelse af websitet og det visuelle? • Vidste ikke at man kunne scrolle længere ned end referencerne på forsiden • Billedet (AricaGraphic) fangede øjet. Stroken derpå er god. • Troværdighed • Footer er bred = Godt masser af ”whitespace” giver rum

109

USER/USABILITY TEST PERSON #3 Udgangspunkt: • Starter på forsiden, Får en kort intro til B2A, Èn af os noterer, den anden spørger/vejleder Grundlæggende: • Alder: 25 • Køn: M • Platform: Desktop Usertest Hvad tror du de grå ikoner i det brede hvide felt på forsiden henviser til - altså betyder? • Firmaer de har samarbejdet med onkring Afrika. Referencer Du ejer et mindre skovbrug, og vil gerne vide om B2A har viden og netværk omkring dette. Find dette på siden. • Afrika i vækst -> Vi tilbyder Du vil gerne vide hvem direktøren er. Find personen på siden • Medarbejdere Hvor bor B2A henne? Find virksomhedens adresse. • Kontakt -> Footeren Vælg et andet sprog på siden. • Vælger vælgeren i toppen med det samme Oplevelse / indtryk På en skala fra 1-5 (5 bedst), hvor troværdig synes du virksomheden er? • 4. I betragtning af at jeg ikke har hørt om den før. Blå forbinder jeg med stabilitet. Banker bruger den f.eks. En virksomhed man kan stole på, som ved hvad de laver. Beskriv din oplevelse af at navigere på siden? • Fungerer fint. Overskrifter på primær nav er fine. Selvforklarende. Beskriv din oplevelse af websitet og det visuelle? • Meget lækkert • AfricaGraphic er god • Godt fotovalg • Godt sat op • Hvad er forskellen på referencer og samarbejdspartnere?

110

USER/USABILITY TEST PERSON #4 Udgangspunkt: • Starter på forsiden, Får en kort intro til B2A, Èn af os noterer, den anden spørger/vejleder Grundlæggende: • Alder: 22 • Køn: M • Platform: Mobil (Samsung Galaxy S4) Usertest Hvad tror du de grå ikoner i det brede hvide felt på forsiden henviser til - altså betyder? • Firmaer de har investeret i Afrika Du ejer et mindre skovbrug, og vil gerne vide om B2A har viden og netværk omkring dette. Find dette på siden. • Menu -> Vi tilbyder -> skimmer i ca. 10 sek. -> Fundet Du vil gerne vide hvem direktøren er. Find personen på siden • Topknap -> Medarbejdere Hvor bor B2A henne? Find virksomhedens adresse. • Menu -> Kontakt -> Footeren Vælg et andet sprog på siden. • Menu -> Fandt knap med det samme Oplevelse / indtryk På en skala fra 1-5 (5 bedst), hvor troværdig synes du virksomheden er? • 5! Beskriv din oplevelse af at navigere på siden? • Top-knap, må gerne optræde tidligere oppe på siden • Ellers dejlig • Burger menu: Sitet scroller omme bagved = Forvirrende Beskriv din oplevelse af websitet og det visuelle? • Meget professionelt. Lidt advokatagtigt • Blå - Hvis - Sort. Lidt kolde farver • Virker ikke som en hippie-red-afrika aktion - mere for firmaer der skal investere.

111

USER/USABILITY TEST PERSON #5 Udgangspunkt: • Starter på forsiden, Får en kort intro til B2A, Èn af os noterer, den anden spørger/vejleder Grundlæggende: • Alder: 21 • Køn: M • Platform: Desktop Usertest Hvad tror du de grå ikoner i det brede hvide felt på forsiden henviser til - altså betyder? • Danske virksomheder, som har fået rådgivning af Business 2 Africa Du ejer et mindre skovbrug, og vil gerne vide om B2A har viden og netværk omkring dette. Find dette på siden. • Vi tilbyder -> Brancher -> Fundet Du vil gerne vide hvem direktøren er. Find personen på siden • Medarbejdere Hvor bor B2A henne? Find virksomhedens adresse. • Kontakt -> Footeren Vælg et andet sprog på siden. • Toppen, fandt hurtigt Oplevelse / indtryk På en skala fra 1-5 (5 bedst), hvor troværdig synes du virksomheden er? • 4. For at få 5, skal i vise en case/materiale omkring hvad en konkret virksomhed har fået ud af at være i Afrika. Beskriv din oplevelse af at navigere på siden? • Super smooth • Onepage på forsiden er fint • Lækkert sat op. Beskriv din oplevelse af websitet og det visuelle? • Professionelt • Blå farve = Professionalitet • Farvetemaet er godt • Samarbejdpartnerne + referencerne virker troværdige • Flot logo, superflot forside

112

USER/USABILITY TEST PERSON #6 Udgangspunkt: • Starter på forsiden, Får en kort intro til B2A, Èn af os noterer, den anden spørger/vejleder Grundlæggende: • Alder: 21 • Køn: M • Platform: Mobil (Samsung Galaxy S4) Usertest Hvad tror du de grå ikoner i det brede hvide felt på forsiden henviser til - altså betyder? • Sponsorer Du ejer et mindre skovbrug, og vil gerne vide om B2A har viden og netværk omkring dette. Find dette på siden. • Menu -> Vi tilbyder -> skimmer i ca. 5 sek. -> Fandt ikke det han søgte • Til toppen knap -> Afrika i vækst Du vil gerne vide hvem direktøren er. Find personen på siden • Topknap -> Medarbejdere Hvor bor B2A henne? Find virksomhedens adresse. • Menu -> Kontakt -> Footeren Vælg et andet sprog på siden. • Menu -> Fundet Oplevelse / indtryk På en skala fra 1-5 (5 bedst), hvor troværdig synes du virksomheden er? • 4. Bedre fotos ville være fint Beskriv din oplevelse af at navigere på siden? • Ville gerne lukke burgermenuen ved at trykke uden for menuområdet • Fint og overskueligt at finde rundt • I footer = Sort farve, så man ved at man har nået bund, og ikke kan komme længere • Actionknapper rolige, men man ser dem Beskriv din oplevelse af websitet og det visuelle? • Fotos må godt være større • Dejlige farver. • Rådgvning og Sparring = God tekst, virker troværdig • Fonten = Ærlig

113

USER/USABILITY TEST PERSON #7 Udgangspunkt: • Starter på forsiden, Får en kort intro til B2A, Èn af os noterer, den anden spørger/vejleder Grundlæggende: • Alder: 21 • Køn: K • Platform: Mobil (Samsung Galaxy S4) Usertest Hvad tror du de grå ikoner i det brede hvide felt på forsiden henviser til - altså betyder? • Samarbejdspartnere eller folk der støtter dem. Nogle der måske kunne have interesse….de her er med Du ejer et mindre skovbrug, og vil gerne vide om B2A har viden og netværk omkring dette. Find dette på siden. • Menu -> Vi tilbyder -> skimmer i ca. 10 sek. -> Fandt ikke -> kontakt • Samarbejdspartnere?! Betyder det mon dem de samarbejder med i Afrika • Fandet det til sidst under ”Vi tilbyder” Du vil gerne vide hvem direktøren er. Find personen på siden • Topknap -> Medarbejdere Hvor bor B2A henne? Find virksomhedens adresse. • Menu -> Kontakt -> Footeren Vælg et andet sprog på siden. • Menu -> Done Oplevelse / indtryk På en skala fra 1-5 (5 bedst), hvor troværdig synes du virksomheden er? • 4. Kan evt. bruge trustpilot eller andet til at verificere dem Beskriv din oplevelse af at navigere på siden? • Godt med Top-knap • Lidt kluntet, men megalækker • Burger menu: skal lukke når man trykker uden for den Beskriv din oplevelse af websitet og det visuelle? • Flot Afrika med polygoner • Simpel, flot udsmykket, lidt sjovt med sort/hvod billeder (Under Afrika i Vækst) • Flot logo

114

USER/USABILITY TEST PERSON #8 Udgangspunkt: • Starter på forsiden, Får en kort intro til B2A, Èn af os noterer, den anden spørger/vejleder Grundlæggende: • Alder: 45 • Køn: M • Platform: Mobil (Iphone 5. m. lille skærm) Usertest Hvad tror du de grå ikoner i det brede hvide felt på forsiden henviser til - altså betyder? • Klassisk, firmaer som man kender, produktorienteret, lidt småt. eksisterende, velfungerende, samarbejdspartnere. Inspiration/Teaser - kom med i samarbejdet. Du ejer et mindre skovbrug, og vil gerne vide om B2A har viden og netværk omkring dette. Find dette på siden. • Menu -> Vi tilbyder -> Dejlig hurtig -> Læser -> Brancher -> Fundet Du vil gerne vide hvem direktøren er. Find personen på siden • Topknap -> Medarbejdere Hvor bor B2A henne? Find virksomhedens adresse. • Menu -> Kontakt -> Footeren. Men det er ikke logisk på så lang en mobilside -> fundet Vælg et andet sprog på siden. • Menu -> Done. Men man ser den først når man scroller (Iphone 5 er lidt lille) Oplevelse / indtryk På en skala fra 1-5 (5 bedst), hvor troværdig synes du virksomheden er? • 4. Meget troværdigt. Designmæssigt set troværdig og tillidsvækkende. Beskriv din oplevelse af at navigere på siden? • Burger menu: Mangler scrollindikatior på små mobilskærme, man kan ikke se man er nået bunden af menuen. Sprog kan ikke ses som standart på iphonen. Beskriv din oplevelse af websitet og det visuelle? • Menubaren slider ind som den gør er godt, closeknap er godt • Blå farve meget business like • Noget diamantpræg over det AfricaGraphic. Historie med minedrift osv. • Vækst-fotoet: Industrialisering, vækst, fremtidsstilart... Ærgerligt at det ikke er i farver.

115

Bilag 17 : Indledende mail til Business 2 Africa

B2A som case i 1. års studieprojekt Nov 19 Hej Elisabeth, Tak for fin snak i røret nu her. Herunder en hurtig opsummering af vores projekt. Vi er tre multimediedesign-studerende fra Aarhus Erhvervsakademi. På mandag (23. nov) starter vi på vores 1. års eksamensprojekt, hvor vi skal udarbejde en prototype på et website for en virksomhed. Vi har researchet på jer, og mener det vil være spændende at arbejde med B2A som case for projektet. Projektet vil bl.a. vedrøre analyse, kommunikationsplan, brand identity, logo design og ikke mindst webdesign- og udvikling. Susanne Dein fra gruppen kommer selv fra Lystrup og har været med i netværket Vensi. Susanne har også haft kontakt med Susanne Flintholm i forbindelse med dette projekt. Vi vil derfor høre, om I kunne være interesseret i, at vi kommer på besøg og stiller nogle spørgsmål vedr. B2A og jeres arbejde med at fremme dansk eksport og investeringer til de afrikanske markeder. Vi vil meget gerne lave en aftale (personlig eller telefonisk) et sted i næste uge, dvs i uge 48. Vi forventer ikke at I deltager eller mødes med os hele vejen undervejs i projektet, det er primært i starten (viden om firmaet) og slutningen (kort feedback fra jer) af projektet vi vil trække på jer. Med venlig hilsen Jesper Lykke Lisby, Camilla Immersen & Susanne Dein Espersen

116

Bilag 18 : Spørgsmål til inteview m. Elisabeth Bertelsen

Spørgsmål til B2A Fakta om Business 2 Africa Kort virksomheds baggrund Hvorfor Afrika? Markedsføring/kommunikation/personas Hvem henvender I jer til? Hvilken slags kunder har I haft (brancher, størrelse, geografi) • Er det kun danske kunder? • Hvordan har I hjulpet dem Hvordan markedsfører I jer selv? • Hvilke kanaler anvender I? • Hvordan får virksomheder kendskab til B2A? B2A har Linkedin profil, men kun få følgere - bruger I den? • hvorfor/hvorfor ikke? Hvilket budskab vil I gerne kommunikere ud? Hvad er jeres styrker? Hvilke fremtidige muligheder har I? Virksomhedens identitet (brand) Hvilken historie kunne I godt tænke jer at jeres kunder/kontakter/netværk fortæller om jer? Hvordan vil I beskrive jer selv (som virksomhed og som repræsentant for B2A)? Hvordan tror I andre virksomheder beskriver jer? Hvilke specifikke områder/niche beskæftiger de sig med? • Hvor skiller de sig ud fra andre? • Hvorfor gør B2A dét de gør? • Hvad er deres eksistens berettigelse? Kontakter/netværk Hvilke stillinger tager har I kontakt med I de danske virksomheder/de afrikanske virksomheder? (direktører, afdelingschefer, medarbejdere) Hvordan skaber I kontakter i Afrika? Er der afrikanske virksomheder, der henvender sig til jer og fx efterspørger danske virksomheder som investorer? Hvilke lande har I primært fokus på? Samarbejdspartnere Hvordan foregår jeres samarbejde med jeres samarbejdspartnere? • For eksempel Danida Websitet

117

Hvordan kunne I tænke jer, at jeres website ser ud? • har I nogle krav til den? (farver, indhold, form, Hvad er jeres tanker bag jeres logo? Har I billeder fra Afrika, fra jeres kontakter, cases? • Evt video Mere information om de enkelte referencer/cases - til brug for websitet Hvordan skaber I troværdighed over for kunden? Rådgivningen (deres produkt) Hvilken slags rådgivning giver I til kunderne? Hvordan forløber rådgivningsprocessen? Hjælper I til ift forandringsledelse i kundernes virksomheder? Har I en succeshistorie?

B2A’s udfordringer/svagheder Hvem er jeres konkurrenter? Hvad er B2A’s svagheder/ulemper/udfordringer? Hvordan påvirker det B2A at I hver især har virksomheder ved siden af? Hvor ligger jeres fokus? Hvilke trusler ser I for B2A nu og i fremtiden? • Er det noget I selv kan påvirke/forebygge?

Revideret udgave til B2A • Fakta om Business 2 Africa - baggrund/hvorfor Afrika/vision/mission, netværk, samarbejdspartnere • Hvordan markedsfører I jer selv? • Hvem er jeres målgruppe og hvordan har I hjulpet dem? (brancher, størrelse, geografi, danske, afrikanske/lande, stillinger i kundens virksomhed) • Hvilket budskab vil I gerne kommunikere ud? Herunder hvilken historie kunne I godt tænke jer at jeres kunder/kontakter/netværk fortæller om jer? • Hvordan vil I beskrive jer selv (som virksomhed og som repræsentant for B2A)? Og hvordan tror I andre virksomheder beskriver jer? • Hvordan kunne I tænke jer, at jeres website ser ud? (Krav til farver, indhold, form mv) • Hvad er jeres tanker bag jeres logo? • Har I billeder fra Afrika, fra jeres kontakter, cases? Evt video • Mere information om de enkelte referencer/cases - til brug for websitet - evt en succeshistorie, der må ligges på sitet

118

Bilag 19 : Referat af inteview m. Elisabeth Bertelsen De holder et månedligt partnermøde. Katrinelund: Direktør Anders, havde en fast kontorplads tidligere, men så fik han fast samarbejde med en anden virksomhed, hvor han så har kontorplads nu. De er derude engang om ugen, og når de har brug for mødelokaler Vi må få deres Power point om virksomheden Arbejdsområder: Ecowas-regionen (Economic Community of West African States). Arbejder primært Elfenbenskysten, Ghana og Nigeria. Opstart: Virksomheden blev startet af forskellige partnere. Anders som er direktør, kom hjem fra Spanien, hvor han har arbejdet nede. Her arbejde han med Spanien og Holland, hvor han solgte fødevarer til Afrika. Igennem dette arbejde, har han fået et rigtig stort netværk og har rejst meget i Afrika. Da Anders kom tilbage til Danmark, skulle han finde på noget nyt at lave. Har var han til noget partner-meeting arrangement, hvor han bl.a. møder sine nuværende partnere Thorkild og Henning. De er mellem 55 år og 70 år, med rigtig meget erfaring i toppen af danske virksomheder. De har altså adgang til nogle direktører rundt omkring, der er rigtig godt at kende. De begyndte et samarbejde, der primært gik ud på at matche danske virksomheder med Afrika. Match Making De har også en bestyrelse. De har inden Elisabeth haft forskellige praktikanter inde. Elisabeth er nu efter endt uddannelse, blevet partner. Hvorfor Afrika?: De kunne se rigtig meget i potentiale i Vestafrika, fordi det er i rygende vækst.

119

Middelklassen er voksende, og der er flere, der får flere penge. Desuden får dem med rigtig mange penge, også ekstra mange penge. Anders har et motto: “Alt hvad du kan sælge i Europa, kan du også sælge i Vestafrika” De europæiske mærker, er kendt for kvalitet og noget der holder i forhold til de kinesiske f.eks. Der er et kæmpe stort potentiale i Vestafrika, der bare skal udnyttes. Business 2 Africa kan kun overleve, hvis de kender direktøren i det firma de gerne vil rådgive. I Afrika?: De har tre lokale partnere i Afrika, en i hvert land (Elfenbenskysten, Nigeria og Ghana) Man kommer simpelthen ikke nogen steder hvis man ikke har en lokal partner. Det handler rigtig meget om netværk, hvilket de bare er heldig at have. De kender direktørerne i Jysk, Danfoss, BoConcept, Pandora, og det er også den eneste grund til at de har lavet business med disse. . Problemer med Afrika?: Der er rigtig mange fordomme om Afrika. F.eks. med sult, lav velstand, sygdomme osv. Derfor er det også så vigtigt at kende folk, man handler med, så man kan få forklaret den egentlige situation. Kontakten: De kender toppen af poppen inden for virksomheden. De henvender sig primært det det øverste led. Altså salgsdirektør eller formanden for bestyrelsen. Det starter med lidt løst snak, hvor man lige får snakket om hvad det går ud på, hvorefter man får et egentlig møde på benene. Enten kender Anders nogle inden for branchen, og ellers kontakter han sine partnere i Afrika, og så finder de ud af at finde en afrikansk virksomhed, der matcher den danske virksomhed.

120

Meget proaktive opsøgende i deres arbejde. Folk opsøger dem altså ikke selv. Så websitet er umiddelbart ikke et førstehåndsindtryk, men i højere grad et “reaffirmation spot” - folk går derind for at få underbygget en positiv opfattelse af firmaet, som de har fået via samtaler. Begge veje: De arbejder både med danske virksomheder, der vil til afrika, men også med afrikanere der har hørt om dem, og vil gerne arbejde sammen med en dansk virksomhed. Det kan for eksempel være en afrikansk virksomhed der borer efter olie, men har brug for nogle olietanke, som de gerne vil have leveret af en dansk virksomhed. Kontakten med kunderne: De sælger helt klart sig selv bedst face to face. Hvilket også har resulteret i, at de slet ikke har brugt markedsføring indtil videre. De har rigtig travlt i forvejen, så de ser det slet ikke som en nødvendighed at markedsføre sig. Med to fuldtidsansatte, har de nok at se til, og der er nok at lave for dem. De to ældre partnere er ikke tænkt, som at skulle gå ind i det daglige arbejde. De skal gå ind når det er nødvendig, og f.eks. at se på det juridiske, skabe kontakten eller være projektansvarlige. Kunderne: Det er ikke de små virksomheder de opererer med, men i stedet de store og mellemstore. De helt små virksomheder, er ikke visionære nok til at starte noget i Afrika. Man skal have en finansiel baggrund, der gør, at man tør, at kaste sig ud i det. Det er også vigtigt, at de kan se bort for Ebola og AIDS. Fremstilling på websitet: Man kan uddybe de fakta der er om Afrika, men det vil være for farligt at lave en fordom vs. virkelighed. Man kan f.eks. udnytte at Helle Thorning-Schmidt har været ude og sige at der er kæmpe stort potentiale. Det giver troværdighed til Business 2 Africa. http://www.information.dk/telegram/493240

121

Man kunne godt vise udviklingerne i byerne i Afrika – Med f.eks. malls og motorveje At skrive til kunderne: De overvejede på et tidspunkt at skrive til deres kunder, at de nu sagde i medierne, at Ebola var på vej tilbage, og at de havde styr på situationen. Men de tog det op til genovervejelse, og blev enige om, at det ikke var deres job at gøre det. Det er rent business, og det ville være at presse citronen, over for deres kunder. Hvordan de agerer: De er meget opmærksomme på ikke at komme til at virke belærende, da de er så lille en virksomhed, som de er. Budskab: De vil gerne fremme eksport til Vestafrika. Derudover vil de får virksomhedernes øjne op for hvilke kæmpe muligheder der er. Bruger meget ordet Match Making. Det handler om Business og handler. Ikke noget velgørende på nogen måde. Det er både godt for den danske og den afrikanske virksomhed. Det er vigtigt for dem, at de udstråler business, eksport og handel. Forretningsgang: Laver et samarbejde med Jysk --> Jysk åbner butikker i Nigeria --> Arbejdspladser til Nigerianerne. CSR?: De har ikke brug for at fokusere på CSR. CSR er ikke så vigtigt i Busines2Business, men mere ved Business2Costumer. Det er rent business det her. Det er det både for B2A og deres kunder. Billedet udadtil: De potentielle kunder skal tænke at virksomheden er troværdig. De vil gerne have det omdømme blandt deres kunder, at de er en virksomhed, der følger tingene til døren, og at de gør deres arbejde ordentlig. Selvfølgelig skal de skabe resultater, men det er ikke der deres hovedfokus ligger. De gør

122

arbejdet 120%, selvom de måske kun får løn for 80% af det, Det skal være tydeligt at de lægger alt deres arbejde i et projekt, så kunderne virkelig føler at de bliver taget seriøs. De vil gerne udstråle at de ved hvad de laver, de har kontakterne, de er troværdige og at de gerne vil lave et samarbejde der udmønter sig i en investering i Afrika. Processen: De tilbyder at lave en markedsscreening gratis, for at se om der er potentiale. Hvis der ikke er potentiale er det en No-Go, og det kan slet ikke betale sig for kunden, at begynde med noget. Hvis de vurderer, at der er potentiale, bliver der holdt et møde hvilket fører til en forretningsrejse, enten hvor kunden rejser til Afrika, eller Afrika rejser til kunden. Implementeringen er en vigtig del, hvor B2A stadig er på sidelinjen. Der er nogle helt andre spilleregler i Afrika som kunden skal forholde sig til, og som B2A med glæde vil hjælpe med. Arbejdet afsluttes ikke når B2A’s arbejde slutter, det er først der det skal til at starte. Der er mange der går igennem hele møllen, men ikke helt tør at tage springet. Cases: At få implementeret et produkt på det afrikanske marked tager tid, hvilket også er en af grundene til at B2A ikke har nogle konkrete cases. De har arbejdet sammen med dem de henviser til på hjemmesiden, men de har ikke fået deres produkt ud i Afrika endnu. Det er nemlig ikke alle virksomheder der får et konkret produkt ud af det. BoConcept tager f.eks. lang tid at implementere. Derfor var det svært at vise en egentlig case. Logo: Det er vigtigt at have kontinentet i logoet, da det udstråler hvor de opererer. Farver - det skal også fange afrikanerne, da de er mere farverige i det. Det kan ikke hjælpe noget at lave et minimalistisk skandinavisk logo, da det ikke vil fange afrikanerne. Man bliver nødt til at imødekomme begge kulturer. Sprog: Engelsk, fransk og dansk - gamle kolonier i Afrika Hvis man taler det lokale sprog, kommer man bare lidt længere.

123

LinkedIn: Kunderne kigger både på selve virksomheden, men også på partnerne. Det er stadig vigtig at have en ordentlig virksomhedsprofil, men partnerne er også vigtige Websitet: Må ikke bliver informationstungt, da det vil skræmme kunden væk. Den skal kort fortalt vise, hvad de kan, hvad de vil og hvilke netværk de har. Den skal være strømlinet og enkel. Man skal få lysten til at tage kontakten Skal ramme på store og mellemstore virksomheder, så det er mange forskellige personer, der er inde at se på det. Man har bygget mens man sejlede. Designbrief: Frie tøjler fra B2A’ s side. Samarbejdspartnere: Der er nogle danske virksomheder, der har haft mulighed for at få støtte af Danida. Danida har givet penge så virksomhederne har kunne implementere sig i Afrika. Væksthus Midtjylland går f.eks. Ind og betaler B2A’s løn, for at fremme eksporten til Afrika B2A har haft to praktikanter fra UCN. Rent skole samarbejde. Derfor er de med som samarbejdspartner. Hvorfor er B2A unikke: Udelukkende pga. deres netværk - ikke kun i Danmark, men generelt i hele Vestafrika. Svagheder: Eksternt: Det billede som Afrika har i Europa, og det billede der bliver dannet i medierne. Projekter blev sat helt i hold da Ebola kom på banen, og de kunne ikke lave noget i flere måneder.

124

Valg i Afrika får også det hele til at gå i stå, for det tager tid at opbygge en helt ny regering, og så står landet uden en egentlig leder, og så er der ikke nogen der tør at gøre noget. Det kræver mere overtalelse at få virksomheder ind i Afrika end i f.eks. Spanien. Intern: Skal kunne betale regninger og lønninger. Det skal bare kunne løbe rundt, og de har ikke ønsker om et egentlig overskud lige nu. De har haft problemer med, hvordan arbejdsprocesserne skulle være. Står tit i den situation, at de ikke ved, hvad det næste skridt skal være. Hjemmesiden har ikke været en hemsko indtil videre, men det er lidt pinligt når de henviser folk dertil. De ser ikke trusler, men udfordringer.

125