Procreate Portfolio

*

10 casestudier for applikationer og webprojekter.

Koncept, design, programmering, frontend, backend og projektledelse fra start til slut.

Fuld service for bureauer og direkte service til kunder.

*

Procreate ledes af projektleder Tine Hyllested, kreativ direktør David Earle og teknisk udvikler Per Dalgaard.

Vi har sammen udviklet en række projekter, både fra bunden og som serviceleverandører til andre. Vi har valgt ti af vores nyeste projekter,som vi mener viser bredden af vores ekspertise.

FOOTPRINT DIARY SMARTPHONE APP

4

Københavns Energi

6

HOMERUN GROUP

8

SUNDDIALOG 10

PRSS FOR CHANGE

12

E-MISSIONEN 14

POST & TELE MUSEUM

16

AGENT FOOTPRINT

18

PACKSHOT FACTORY

20

FOOTPRINT DIARY WEBSITE

22

FOOTPRINT DIARY BACKEND SYSTEM

24

HOMERUN GROUP CMS SYSTEM

26

03

Casestudie 1 : FOOTPRINT DIARY SMARTPHONE APP Footprint Diary er en gratis applikation til smartphone og web, der ved hjælp af en beregner giver brugerne et indblik i deres personlige vandforbrug og CO2 udledning.

Samtidig informerer applikationen om klimaforandringernes konsekvenser i udviklingslande, gennem historier om mennesker der allerede er påvirket af klimaforandringerne.

Applikationen hjælper brugeren til, skridt for skridt, at reducere deres personlige forbrug, ved at motivere og opmuntre til at sætte individuelle mål.

Hovedmenu. Footprint Diary fokuserer på fire områder af den personlige forbrug: varme, elektricitet, vand og transport. Hovedmenuen har også links til grafer, personlige mål og klimahistorier fra forskellige NGO’er.

04

© Copyright David Earle 2008-2011

Profilsektion. Profilsektionen indeholder spørgsmål om hvor i landet brugeren bor, hvilken type bolig brugeren bor i, hvor mange der er i husstanden, hvor stor og hvor gammel boligen er, hvilken type vinduer boligen har og hvilken type varmekilde der er i boligen.

De svar brugerne giver, påvirker automatisk hvilke spørgsmål der stilles i applikationens andre sektioner.

Status. For hvert resultat brugeren opnår vises der en status, ved hjælp af farvekoder. Rød betyder, at “du kan opnå en stor effekt ved at foretage en enkelt reduktion her”, orange betyder, at “du kan opnå en betydelig effekt ved at reducere her”, mens grøn betyder, at “du skal fokusere på de røde og orange områder først, hvis du vil have den største effekt”.

Footprint Diary smartphone app

Projektbeskrivelse: Applikation til smartphone, der giver brugerne mulighed for at mĂĽle, sĂŚtte mĂĽl og kontrollere deres CO2-udledning og vandforbrug dag for dag.

Bestilling: Koncept, grafisk design, programmering, backend-design, projektledelse, levering.

Kunde- og projektledelse: Footprint Diary / IBIS

05

Casestudie 2 : Københavns Energi – interaktive touchscreens Københavns Energi havde brug for en serie interaktive touchscreens, som kunne blive den centrale del af deres moderne, nye hovedkontor i København. Med et ønske om et mix af, at styrke KE brandet, kommunikation og yde kundeservice, skulle vi fortolke det eksisterende brand således, at det kunne integreres som en del af touchscreen applikationerne.

Navigationshjulene (eksemplet til højre) er udviklet således at de afspejler KE’s logo, og på samme tid er intuitive nok til at

06

© Copyright David Earle 2008-2011

en førstegangs besøgende vil være i stand til at benytte og forstå de forskellige skærme i atriumet. Projektet blev udviklet før touch enheder som iPhone var lanceret, og derfor skulle der tages særligt hensyn til, at lave et brugervenlig interface så også dem der ikke var fortrolige med teknologien, uden problemer kunne benytte det.

Københavns Energi

Projektbeskrivelse: Interaktive touchscreen-displays til receptionen og atriet i KE’s hovedkontor, København.

Bestilling: Grafiske interface, Flashprogrammering til endelig levering.

Kunde- og projektledelse: Homerun Group.

07

Casestudie 3 : HOMERUN Group – Flash WEBSITE Efter afslutningen af et fuldstændig re-design af Homeruns identitet (af David Earle), fik vi til opgave at bygge et skræddersyet system, som ville gøre det nemt for Homerun Group at opdatere deres online portefølje.

Frontend-designet er baseret på et modulært format, som gør det simpelt i fremtiden at tilføje elementer nemt og hurtigt, samtidig med at brandets nye udseende bevares. Backendsystemet kan benyttes uden forudgående træning, hvilket

08

© Copyright David Earle 2008-2011

betyder at alle kan redigere den flashbaseret frontend. Navigationen bruger traditionelle dropdown menuer, hvis brugeren ønsker at se på specifikke emner eller services. Dem, der foretrækker at browse i diverse nyere projekter, kan bruge rullepanelet i bunden, som giver brugerne mulighed for at se det visuelle indhold hurtigt. Eftersom Homerun præsenterer deres touchscreen løsninger på mange udstillinger, er hele sitet lavet så det er velfungerende i en touchscreen sammenhæng, f.eks. udstyret med store knapper til at navigere rundt på sitet.

HOMERUN FLASH WEBSITE

Projektbeskrivelse: PrÌsentation, portefølje og informationswebsite for film og interaktiv mediefirma Homerun Group.

Bestilling: Design af virksomhedsidentitet, grafisk design, Flashprogrammering, backend-design til endelig levering.

Kunde- og projektledelse: Homerun Group.

09

Casestudie 4 : SUNDDIALOG FLASH WEBSITE Sunddialog har udviklet komplekse softwaresystemer og arbejdsmetoder til at hjælpe patienter og sundhedsmedarbejdere med at engagere sig i en dialog, som vil fører til en højere helbredelsesprocent og forbedre den generelle velvære.

Temaet dialog er brugt som et centralt koncept i designet af websitet. For at tage hensyn til, at sitet skal kommunikere komplekse systemer med både patienter og fagfolk på

10

© Copyright David Earle 2008-2011

sundhedsområdet, introduceres de generelle koncepter først i en “mild” form ved at bruge korte flash-introer og derefter følger mere detaljeret information. Det var yderst vigtigt for designet, at Sunddialog fremstår både seriøs og videnskabelig, men også menneskelig og omsorgsfuld. Hver side er derfor et forsøg på at balancere mellem de to temaer.

SUNDDIALOG FLASH WEBSITE

Projektbeskrivelse: Informationssite med indgangspunkter for b책de patienter og fagfolk p책 sundhedsomr책det.

Bestilling: Design og arkitektur, grafiske interface, Flashprogrammering til endelig levering.

Kunde- og projektledelse: Sunddialog A/S.

11

Casestudie 5 : prss for change Smartphone app pRSS for Change er et værktøj der giver NGO’er, organisationer, nyhedsbureauer mm. en mulighed for bedre og billigere at kommunikere med både deres kernekunder samt et nyt publikum, lige når de ønsker det. pRSS for Change består af to applikationer – en RSS ‘news feed’ applikation, der er tilpasset og designet til den specifikke organisation, samt en mere generel applikation hvor alle organisationerne er repræsenteret. Brugeren har mulighed for at abonnere på en organisation og/eller for at se historier, events, job opslag,

Ovenover: Eksempel på hvordan hovedapplikation “pRSS for Change” viser nyheder fra en lang række organisationer. Brugerne kan filtrere og gemme foretrukne typer historier, som applikationer leverer. Brugerne kan også vælge en push-teknologi, hvis der ønskes informationer om specifikke emner.

12

© Copyright David Earle 2008-2011

fra alle de deltagende NGO’er, organisationer, nyhedbureauer mm. For at en applikation som pRSS for Change kan bliver en succes, er det altafgørende at organisationerne med et minimum af ressourcer kan opdatere og uploade de relevante data.

Applikationen er derfor lavet med et stærkt kerne design, som gør det nemt at tilpasse den til de enkelte organisationer og opgradere den over tid.

Ovenover: Eksempel på pRSS for Change der er tilpasset en specifik organisationen (her udviklingsorganisationen IBIS) og eksempler på de typer historier og information, som applikationer leverer. Efter organisationens ønske, kan tredje parts organisationer også levere materialer gennem applikationen.

PRSS FOR CHANGE smartphone app

Projektbeskrivelse: Applikation til smartphone for diverse NGO’er og mediebureauer.

Bestilling: Koncept, grafisk design, programmering, backend-design, projektledelse, levering.

Kunde- og projektledelse: Footprint Diary / IBIS.

13

Casestudie 6 : E-MISSIONEN ONLINE SPIL Post & Tele Museum har opnået positive resultater på undervisningsområdet, især med skoler. Med henblik på at hjælpe studerende med at forstå deres rolle i det moderne samfund og deres ansvar som forbrugere, har de udviklet ‘E-missionen’ – et online spil, hvor forskellige klasser rundt i Danmark kan konkurrere mod hinanden og lære i processen.

Spillet foregår i det designede industrielle bymiljø, som ‘rengøres’ i løbet af spillet, hvis spilleren træffer de rigtige

Each variable can be simply edited if there is new data forthcoming.

14

© Copyright David Earle 2008-2011

valg. Det var vigtigt at det grafiske design ville tiltrække både drenge og piger, og det var nødvendigt at finde balance mellem at være tiltrækkende og oplysende for at sikre at spillet bliver benyttet.

E-MISSIONEN online SPIL

1

KOM

TY

0

- C

Projektbeskrivelse: En serie af ni touchscreen stationer til en permanent udstilling, Post og Tele Museum, København Bestilling: Grafiske interface, Flashprogrammering til endelig levering.

Kunde- og projektledelse: Homerun Group.

15

I

Casestudie 7 : POST & TELE MUSEUM – 9 interactive touchscreens Som led i fornyelsen af museets permanente udstilling i det centrale København, blev der bestilt 9 forskellige stationer med touchscreen. Stationerne skulle både være oplysende og underholdende og udformet således, at personer med forskellige grader af tekniske færdigheder og i forskellige aldre skulle kunne bruge dem på en meningsfuld måde.

Den centrale del var et kompashjul, som kunne aktivere links blot ved at dreje hjulet og derved pege. Samtidig blev også

16

© Copyright David Earle 2008-2011

mere konventionelle navigationsmetoder anvendt, så brugerne selv kunne bestemme hvilke de ville benytte.

Designet skulle kunne rumme over 200 skærmbilleder, der anvender kildemateriale af varieret kvalitet og samtidigt kunne holde den generelle stil intakt.

Post & Tele Museum

Projektbeskrivelse: En serie af 9 stationer med touchscreens til en permanent udstilling, Post & Tele Museum, København.

Bestilling: Grafiske interface, Flashprogrammering til endelig levering.

Kunde- og projektledelse: Homerun Group.

17

Casestudie 8 : AGENT FOOTPRINT – Web-baseret undervisningsmateriale Agent Footprint – et nyt og spændende undervisningsmateriale om klima og bæredygtig udvikling. Materialet er webbaseret, og målgruppen er mellemtrinnet 4 – 6 klasse. Vi ved, at mange børn på disse klassetrin er meget optaget af de store klimaspørgsmål. Materialet er bygget op, så eleverne får mulighed for at være deres egen ‘agent for forandring’.

Indholdet er udvalgt og tilpasset de ting, som børn gør i deres hverdag. Agent Footprint henvender sig til eleverne individuelt (de kan beregne deres private CO2 udslip og vandforbrug og

18

© Copyright David Earle 2008-2011

sætte sig egne mål) og kollektivt, idet materialet lægger op til, at en klasse i fællesskab sætter sig mål. Det er også i klassen, de vigtige diskussioner og refleksioner finder sted.

agent footprint lĂŚremateriele

Projektbeskrivelse: Web-baseret undervisningsmateriale Bestilling: Koncept, grafisk design, backend-design, projektledelse, spil design, Flashprogrammering til endelig levering.

Kunde- og projektledelse: Footprint Diary / IBIS / Undervisningsministeriet

19

Casestudie 9 : PACKSHOT FACTORY website Ligesom Homerun Group, havde Packshot Factory brug for en løsning, der ville gøre det både let at opdatere deres billeder og bevare et stærkt, tiltalende visuelt format. Det skulle være nemt både at søge i billederne og ”tagge” dem, så brugerne kunne filtrere gennem de tusinder af tilgængelige billeder.

Resultatet er et billede-drevet site, der i høj grad også kan kontekstualiseres efter brugerens behov. Navigationsdesignet

20

© Copyright David Earle 2008-2011

bruger firmaets prikker og farver til at lave en serie ikoner, som er både synlige og enkle, men som ikke distraherer brugerne fra selve produktet, dvs. billederne Eftersom mange af kunderne selv var billedeksperter, skulle sitet finde balance mellem at være en attraktiv portefølje og et seriøst værktøj.

Packshot factory website

Projekt beskrivelse: Flash-baseret portefølje-site for en af Storbritanniens største udbyder af produkt fotografering.

Bestilling: Grafiske interface, Flashprogrammering, backend-design, programmering til endelig levering.

Kunde- og projektledelse: Packshot Factory

21

Case Study 10 : CMS-baseret flere-sproget website Det historiebaserede backend-system til web-sitet Footprint Diary, der bygger på Drupal CMS system, kan håndtere flere sprog, således at hvert lands lokale site kan filtrere de rigtige historier og sprog.

Systemet kan også justere historierne, så de tilpasses forskellige typer enheder, herunder forskellige former for smartphones og selve Footprint Diary applikationen. CMS systemet er robust nok til at man kan uploade billeder og

22

© Copyright David Earle 2008-2011

videoer og simpel nok til at en gennemsnitlig bruger kan uploade sine egne historier uden at de skal igennem en omfattende tilpasning.

footprint diary website

Projektbeskrivelse: CMS-baseret flere-sproget website.

Bestilling: Koncept, grafisk design, programmering, backend-design, projektledelse, levering.

Kunde- og projektledelse: Footprint Diary / IBIS

23

BACKEND Casestudie A : FOOTPRINT DIARY APP – BACKEND SYSTEM En uafhængig backend løsning, hvorfra brugerne kan udvikle smartphone applikationssider der indeholder komplekse algoritmer, interaktiv grafik, regneark og resultater i ‘real-time’ og på hvilket som helst sprog.

operativsystemet udskiftes. Data, grafik, og algoritmer bliver input via backend’en. Brugeren kan let lave nye sider, der kan lave komplekse udregninger og samtidig skaber et dynamisk resultat.

Denne løsning er designet til at være ‘fremtidssikret’ til når nye smartphones og operativsystemer bliver introduceret, så vil backend’en kører en dedikeret app på telefonen i stedet for at lave komplekse løsninger hver gang udstyret eller

1

3

2

1 Hver variabel kan let blive ændret hvis der kommer ny data.

2 Alle beskrivelser af variabler er på engelsk i backend’en for at sikre overensstemmelse.

24

© Copyright David Earle 2008-2011

3

Sidebeskrivelserne indeholder sidens interaktioner og er delt op i typer af sider.

Footprint Diary backend system

6 4

7 5

6

Administrator kan let skrive (I hvilket som helst sprog) den tekst der skal komme frem på en site.

7

Grafiske elementer kan vælges fra online biblioteket der forsynes med ikoner og billeder af Footprint Diary designteamet.

4 En dropdown menu gør det muligt for administra-

toren at vælge hvilken type side og derved den type information der behøves og sidestilen.

5 Når ændringer er gemt, bliver

siden applikeret på alle enheder.

25

BACKEND Casestudie B : HOMERUN GROUP WEBSITE – Flash backend En special bygget backend. Backend til Homerun sitet er som frontenden lavet i flash. Det er modulært opbygget med vinduer der kan åbnes og lukkes hvilket gør det muligt at have lige præcis de dele åbent som man arbejder med. Det er muligt at genere nyt indhold samt editere det eksisterende.

Alt fra menu strukturen til de enkelte siders tekst, farver, baggrunde og slideshows kan ændres på en intuitiv og visuel måde. Det er muligt at ‘preview’ de enkelte dele inden man gemmer ændringerne.

2

1

3

4

5

1 Som en lille gimmick er det

muligtat have en baggrund (billede eller video) i backenden.

2 Her vælger man hvilke områder af sitet man vil bearbejde.

3 De enkelte vinduer kan stables og

vil komme forrest når de er i fokus, præcis som brugeren er vant til fra styresystemerne.

26

© Copyright David Earle 2008-2011

4 Det er muligt at ‘preview’ billeder der skal uploades før man gemmer ændringerne.

5 Sidebeskrivelsen indeholder sidens

interaktioner og er delt op i typer af sider.

HOMERUN group Flash backend

6

7

6

Det er muligt at indsætte nyheder på sitet, der vil blive vist på forsiden.

7

De enkelte områder på sitet har en farvekode, denne kan vælges ud fra en af designets foruddefineret palette, eller defineres hel manuelt med en Hex værdi.

27

Contakt: Tine Hyllested, projektleder. Tlf. 26 34 60 34, David Earle, kreativ direktør, tlf. 23618232.

Procreate 38 Sølvgade 38 G, 1 Sal. 1307 Københaven K. info@procreate.dk