SOMMAR DESIGN KONTORET DESIGN SOM UTVECKLAR KUKKOLAFORSEN
Innehåll 01 Om Sommardesignkontoret 1 02 Uppdraget 2 03 Arbetsprocessen 3 04 Analys 4 Förebildsundersökning 4 Analys av befintlig hemsida 5 Moodboard 5 Målgruppsingångar 6 Card sorting 7 Strukturering av sidelement 7 Prototyp av menysystem 7 Menyutkast 8 Interaktiva element 9 Funktionsprototyp 10 Användarscenarion 11 Sammanfattning 12 05 Konceptförslag 13 Menyplacering 13 Grafisk formgivning 14 06 Slutgiltigt koncept 15 Menystruktur 15 Grafisk design 16 Layout 17 Startsida 18 Aktiviteter 19 Sikhåvning 20 06 Rekommendationer 21 07 English summary 22 08 Projektteam 24
01 Om Sommardesignkontoret När företag, kommuner och organisationer kommer i kontakt med designstudenter blir resultaten slående. I Sommardesignkontoret får företag möta de ungas värderingar, kunskaper och ohämmade kreativitet och studenterna kommer i kontakt med verkliga uppdrag hos riktiga kunder. SVID, Stiftelsen Svensk Industridesign, har sedan 2001 varit huvudman för Sommar-designkontor runt om i Sverige. Målet är att skapa kreativa miljöer när olika kompetenser möts. Ett Sommardesignkontor består av studenter från högskolor och universitet med olika inriktning. Studenterna samarbetar i flera projekt och får arbeta med problembaserade uppdrag under sju intensiva sommarveckor. Designarena Nord är ett projekt i Norrbotten som drivs av Centek vid Luleå tekniska universitet på uppdrag av SVID, Stiftelsen Svensk Industridesign. Syftet är att öka intresset för industriell design som verktyg för att höja företagens konkurrenskraft och möjligheter att nå nya marknader. Och på så sätt öka tillväxten i Norrbotten. Haparanda/Arvidsjaur/ Arjeplog består av en grupp på sex studenter från hela Sverige med anknytning till design i sin utbildning. Kompetensen består av två industridesigners, två designingenjörer, en landskapsarkitekt och en interaktionsdesigner. Dokumentet i din hand beskriver kortfattat utgångspunkt och resultat av sommarens arbete. www.svid.se 1
02 Uppdraget Turist & Konferens AB är ett konferens-, upplevelse- och kunskapscentrum i Tornedalen. Boendet tillsammans med den levande bastu- och matkulturen och det anrika fisket utgör deras själ. är en plats för inre frid och kreativ inspiration. Företaget drivs av familjen Spolander, det pågår ett generationsskifte inom företaget och nu ska en ny generation ta över och fortsätta utveckla och driva Turist & Konferens. Detta generationsbyte medför även utveckling av företagets hemsida och grafiska profilering. Uppgiften var att ta fram konceptförslag på hemsidans struktur samt ett grafiskt layoutförslag. Förutom en ren och välkomnande design ska tyngdpunkten ligga på interaktivitet, interaktion med sociala medier och att fånga nya, potentiella kunders uppmärksamhet. Det är även viktigt att knyta samman hemsidan med de aktiviteter och värden som gör speciellt, såsom bastubadning och sikhåvning. Layouten ska bära släktskap med företagets samarbetspartners Heart of Lapland, Swedish Lapland och Visit Sweden. Ingen hänsyn har tagits till tekniska detaljer, utvecklingsspråk samt uppdateringsmöjligheter och liknande. 2
03 Arbetsprocessen Arbetsprocessen har i stort sett följt två spår. Dels ett arbete med den underliggande strukturen och dels ett arbete med grafik och profilering. Strukturen är till för att få en bra grund som själva utseendet vilar på. Här ingår hur sidan ska navigeras, hur de olika menyerna ser ut och hur de olika elementen är placerade. Utvecklingen av grafiken på hemsidan går hand i hand med profileringen, hur vill uppfattas och vilket intryck de vill kommunicera till sina besökare på hemsidan. Efter ett besök på gjordes en förebildsanalys där den befintliga hemsidan analyserades. Även andra förebilder som hemsidan idag samarbetar med undersöktes. Eftersom beställaren uttryckt en önskan om interaktivitet på hemsidan studerades även sidor med specifik och speciell interaktion för hitta inspiration. Olika ingångar för olika användargrupper identifierades och togs hänsyn till. Samtidigt som den underliggande strukturen och menysystemet växte fram skapades en enkel prototyp för testning. Parallellt med detta arbetades ett grafisk förslag på hemsidan fram där ledorden för stod i centrum. 3
04 Analys Förebildsundersökning Arbetet började med en analys av ett antal befintliga hemsidor. Dels studerades hemsidor som har samarbete med och länkar till såsom Heart of Lapland, Visit Sweden samt Colours of Lapland. Även hemsidor till liknande företag som erbjuder konferens och boende granskades för att se hur de presenterade information och sist studerades interktiva hemsidor eftersom interaktivitet var ett önskat inslag från beställaren. Förebilder som analyserades 4
Analys av befintlig hemsida En problemformulering skapades där nackdelar med den befintliga hemsidan listades. Förutom själva formgivningen studerades även menysystemet samt sidstrukturen. Den hemsida som finns idag har väldigt många rubriker med dubletter samt att den har en grå grafisk profil som varken ser modern eller inbjudande ut. Moodboard För att få en bättre insikt i samt företagets kärnvärden skapades en moodboard där utgångspunkten var ledord som arbetats fram i samarbete med företaget. Detta är något som främst anses höra samman med vad den grafiska profilen ska kommunicera till hemsidans besökare. De ledord som definierades var: Bastu Forsen Fiske Natur Matkultur Sikhåvning Kultur/historia Inre frid Gränsöverskridande 5
Målgruppsingångar Utifrån företagets profil gjordes en uppskattning av olika tänkta användare för sidan, vilket resulterade i tre övergripande grupper. Gruppernas behov togs sedan i beaktelse i strukturingen av menyn där det utgicks från vilken slags information som är viktig för respektive grupp. Konferens Dessa besökare är främst företag eller föreningar som är intresserade av att hitta information om. De vill framför allt utnyttja konferensanläggningen och erbjudanden tillhörande detta. Turism Dessa är privatpersoner som besöker som ett turistmål. De är oftast intresserade av att stanna minst en natt. Dagsturism Dessa är personer som bor i närheten av och som känner till platsen sen tidigare. 6
Card sorting Strukturering av sidelement En card sorting genomfördes, där de menyer som idag finns på hemsidan skrevs ner på var sin lapp. Dessa lappar sorterades in under rubrikerna där de passade bäst, dubletter togs bort och därefter skapades nya rubriker där det behövdes. Detta låg sedan som grund till ett nytt menysystem. Efter att ha analyserat förebilderna användes papperslappar för att strukturera menysystemet. Element som menyer, sidhuvud, sidfot, bilder och textrutor studerades och deras placering och storlek analyserades. Detta resulterade i en mängd koncept på olika elementstrukturer som både berörde strukturen på hemsidan och hur den grafiska profilen skulle läggas upp. Prototyp av menysystem För att ytterligare utvärdera hur strukturen för menyn kunde se ut skapades två funktionsprototyper för användartester. Här testades skillnaden mellan en rullgardinsmeny och att ha två menyer med en huvudmeny som vid interaktion skapade en undermeny. Vid testning ansågs systemet med två menyer vara mest lättnavigerat. 7
Menyutkast Förarbetet ledde till att ett första utkast på menysystem skapades. Som bilden nedan visar är texten med fet stil tänkt att vara delar i huvudmenyn och de övriga undermenyer. Efter vidare undersökningar valdes menysystemet med två olika menyer, huvudmeny och undermeny, för fortsatt detaljutveckling. Första utkast till menysruktur 8
Interaktiva element Ett antal hemsidor med specifik och uttalad interaktivitet studerades för att få inspiration om vad som skulle kunna passa. Det ansågs på ett tidigt stadium inte lämpligt att göra stora delar av hemsidan interaktiv då detta kan medföra kompromisser mellan användbarheten och hur lätt hemsidan är att navigera. Det ställer även högre krav på användaren samt att denne i sin tur har en webbläsare som är uppdaterad. Då vänder sig till en väldigt bred målgrupp är det svårt att veta deras förkunskaper samt uppdateringar av javascript och webbläsare och därför rekommenderas istället att vissa mindre inslag på hemsidan kan vara interaktiva. Dessa ska inte störa helheten utan bara fungera som en extra krydda som ger ett modernt intryck. Skisser över interaktiva förslag 9
Funktionsprototyp Ytterligare en funktionsprototyp skapades för att utvärdera strukturen med ett antal användare. Här låg fokus enbart på att testa funktioner och de grafiska förslagen representerades av gråa rutor. Informationstext var tagen från den existerande hemsidan men även kompletterad med egna texter där det fattades. Eftersom själva formuleringen i texten inte heller i det här stadiet ansågs vara i fokus var dessa ofta väldigt förenklade. Sidan testades genom att sex användare fick lösa ett antal uppgifter som beskrevs i två scenarier. Under tiden användaren utförde uppgifterna ombads de tänka högt för att på så sätt beskriva hur de tänker när de navigerar på sidan. 10
Användarscenarier Konferens Henrik arbetar som sekreterare på Ericsson. Vecka 42 ska Team Mobile Platsforms på vidareutbildning som de tänkte kombinera med en teambuilding. Henrik letar nu efter en konferensanläggning som skulle kunna passa. Han har blivit tipsad om och går in på deras hemsida. Totalt är de 25 personer som ska åka och han undrar om de kan ta emot så många. - Hitta information om hur stora grupper kan ta emot. Gruppen från Ericsson ska under dagarna ha utbildning men det finns även inplanerad tid för aktiviteter som inte är jobbrelaterade. - Vad finns det för aktiviteter på plats som kan ordnas i samband med konferens. Henrik har även hört talas om Bastuakademin och skulle vilja veta mer om detta. - Hitta information om Bastuakademin. börjar mer och mer kännas som den konferensanläggning som han letar efter. Dock vet Henrik väldigt lite om vart det ligger eftersom han själv sitter på kontoret i Lund. - Hitta information om hur man tar sig till Kukkola. - Hitta hur man tar kontakt med för att diskutera bokningar. Dagsturism Anna och hennes man Herman 37 känner för en dagsutflykt till och äta lunch. Hon har varit där tidigare så hon vet hur man ska ta sig dit. Dock känner hon sig osäker över vilka öppettider som är aktuella. De skulle gärna vilja åka på lördag, Anna går därför in på hemsidan för att hitta informationen. Eftersom Herman inte tycker om fisk vore det även bra om det fanns information om vad som serveras. - Hitta information om menyn och vad som serveras på lördag. - Hitta information om vilka öppettider som gäller för helgen. Om en vecka kommer Annas kära syster på besök med sin man och sina två barn. Eftersom Anna och Herman håller på att renovera huset har hennes syster bestämt att de tar husvagnen med sig. Anna tänker att skulle vara ett trevligt ställe för dem att ställa husvagnen. Hon vet att det även finns stugor där och funderar om det skulle vara bättre om hennes syster hyrde en stuga. - Kolla vad som ingår när man campar. - Hitta information om vad det kostar att hyra en stuga. Hermans mor har varit på Anna den senaste tiden för de ska boka plats till julborden vid eftersom de alltid äter julbord där. Visserligen är det mitt i sommaren men hennes svärmor insisterar på att det måste bokas tidigt. - Hitta information om hur man bokar julbord. 11
Sammanfattning av användartester - För att få en överblick över hemsidan och om beskrev de flesta att de först tittade på förstasidan, läser menyerna och sedan snabbt klickar sig igenom menyerna för att få en uppfattning om hela sidan. Saker som användarna fastnade mycket för var menyerna Aktiviteter samt Bastu eftersom den sistnämnda ansågs väldigt specifik och den andra skapade nyfikenhet. - Högerspalten på hemsidan var det element där användarna letade efter information först eftersom den är ett stort blickfång. Om informationen inte hittas här undersöktes den övre menyn, sedan klickar man sig in på undermenynerna. Högerspalten är alltså bra för att göra reklam för specifika aktiviteter eller evenemang. - Genom att Bastu ligger som en egen meny uppfattades detta av de flesta som något väldigt viktigt och specifikt för. - Den svåraste uppgiften som användarna fick göra var att hitta mer information om sikfesten. Informationen som fanns på första sidan uppfattades inte av någon på första försöket. Det ska dock anmärkas att prototypens layout mycket väl kan ha påverkat sökandet men i vilket fall så valde samtliga att letade under aktiviteter först, eftersom de resonerade att sikfesten var något som de skulle vara med på. - Om oss, hitta hit och kontakt var i prototypen placerade i sidfoten. Eftersom det inte gick att scrolla i prototypen var sidfoten alltid synliga vilket förenklade uppgiften. Många kommenterade dock att de antagligen hade haft svårt att hitta dessa om de hade behövt scrolla på sidan. När det gäller att hitta hit efterfrågades kartor på olika nivåer: Sverigekarta, lokalkarta och även körhänvisningar. - Gällande priser tyckte de flesta att det var bra med priser på flera olika ställen. Både där det stod om den specifika aktiviteten eller stugan men även sammanfattade i en prisöversikt. Denna prisöversikt skulle dock enbart innehålla priser specifika för just den menyn, det vill säga under boende önskades en översikt på priser som bara berör boende och inte till exempel aktiviteter. - Från användarestudien framkom att den övergripande menyn bör ha något som heter Om oss där kontaktinformation och hur man hittar dit finns. Oavsett är det bra att detta visas mer tydligt på hemsidan. - Det bör även finnas mer ingångar till evenemang än enbart information på första sidan. Ett lämpligt ställe att lägga detta skulle vara under aktiviteter med respektive namn, det vill säga att det står sikfesten och inte evenemang. Risken finns annars att användaren inte kommer att förstå att sikfesten är ett evenemang. 12
05 Konceptförslag Menyplacering För att kunna utvärdera menyplaceringen i förhållande till sidhuvudet skapades ett antal koncept. Målet med dessa koncept var att på ett enkelt sätt kunna utvärdera och slutligen välja huvudmenyns placering. Valet föll slutligen på konceptet längst ner till höger där huvudmenyn är placerad under sidhuvudet, menyn är lika bred som sidbredden och den är förhållandevis hög för att synas bra. 13
Grafisk formgivning För att kunna utvärdera den grafiska formgivningen och enklare kunna visualisera sidstrukturen genererades fem koncept med olika utformningar. Målet var att testa ett spann med olika gestaltningar, från traditionellt till modernt och från rent till färgglatt. Trots att koncepten har så pass stora variationer var det viktigt att samtliga skulle förmedla de kärnvärden som tidigare fastställts. Det koncept som gick vidare till detaljutveckling är konceptet längst till höger. Detta berodde framför allt på att det är enkelt att förstå, lätt att hitta, passar väl in med s kärnvärden samt inger en känsla av både livfullhet och modernitet. 14
06 Slutgiltigt koncept Menystruktur Nedan visas det slutgiltiga konceptförslaget på menystrukturen. Menyerna har arbetats igenom och uppdaterats ännu en gång. Menyer som tidigare hette Turism har blivit mer specifik med Historia & Kultur samt att menyn Bastu tillkom efter önskemål från beställaren. De sista ändringarna innebar att en ruta kallad Om lagts till. Denna fungerar som en snabblänk till information om företaget såsom kontakt och lokaliseringsinformation. Dessutom har en undermeny lagts till under aktiviteter som innehåller information om evenemang. 15
Grafisk design Genom att placera en stor bild (1) i sidhuvudet (9) kommuniceras en känsla av till användaren istället för att fokus ligger på logotypen som lätt kan ske då logotypen tar upp större delen av sidhuvudet. En logotyp beskriver vilken sida besökaren kommit till men säger i sig inte särskilt mycket om platsen och därför bör den ha en mindre framträdande plats. I sidhuvudet är även språkvalet samt en sökfunktion placerad (8). Under sidhuvudet befinner sig huvudmenyn (10) som är belägen enligt tidigare utvalt koncept. Både knapparna och texten är förhållandevis stora för att besökaren lätt ska hitta och snabbt komma till insikt om att det är där huvudingångarna ligger. Här visas även en interaktiv karta (11) där besökaren på ett enkelt sätt kan få en överblicksbild av. På denna plats kan besökaren läsa kort information samt länkas vidare till den utvalda plats. Ovanför sidfoten är en ruta placerad innehållande snabbinformation som boka online och prisöversikt (6). Detta ger besökaren ytterligare en möjlighet att på ett snabbt sätt komma till exempelvis bokningssidan. Nederst på hemsidan placerad i sidfoten finns två typer av sociala medier; Twitter och Flickr. Twitterelementet (7) är en typ av feed som alltid uppdateras då inlägg görs på Twitter. Flickrelementet (14) visar de senaste bilderna som är uppladdade på s flickrkonto. Till höger på sidfoten ligger snabblänkar till hitta hit, bildbank och kontakt (15). Nederst är ett visuellt element inlagt som gör sidfoten mer spännande i vilket samarbetspartners ligger (16). Den vänstra rutan (2) innehåller, på startsidan, väder, vattenstånd och dagens bild, alla element som uppdateras dagligen. Under denna är en facebookknapp (3), hitta hit -ruta (4) och kontaktinformation (5) placerad. Facebook valdes att få en mer framstående plats än övrig social media. Detta eftersom facebook är något mer känt än Twitter. Huvudrutan (12) innehåller aktuell information såsom öppettider och evenemang. Det är mycket viktigt att denna sida uppdateras med jämna mellanrum så den känns aktuell då den är det första besökaren ser. Under denna finns en reklamruta (13) som fylls med exempelvis aktiviteter, detta element är ett sätt för att styra kunder vidare till de sidor de vill marknadsföra extra mycket. 16
Layout 1 8 9 10 2 11 3 4 5 12 13 6 7 14 15 16 17
Startsida 18
Aktiviteter Då man går in på en av huvudingångarna, i detta fall aktiviteter, ändrar knappen och texten i huvudmenyn färg för att på ett tydligt sätt visa var man befinner sig. Vänsterrutan blir till en undermeny. Genom denna kan besökaren ytterligare specificera vilken typ av aktivitet de är intresserade av. Även här markeras det tydligt vilken av undermenyerna som besöks. Huvudrutan ändras till att innehålla aktuell, aktivitetsspecifik information och bilder. Reklamrutan längre ner på sidan ändras även den till annonsering för olika aktiviteter. 19
Sikhåvning Om man går vidare in på en undermeny, i detta fall sikhåvning, markeras detta i undermenyn. Huvudfönstret visar information och bilder om sikhåvning och eventuellt närliggande information. 20
06 Rekommendationer Som första steg i en vidareutveckling av Turist & Konferens AB hemsida rekommenderas att noga studera förslaget på menystrukturen. I projektet har inte tid getts till att med kunden utarbeta den till fullo så som önskats. Huvudrubriker är genomarbetade men det finns utrymme för vidareutveckling gällade undermenyerna. Rubrikerna i undermenyn som finns till vänster är mer okänsliga för förändring och här kan även mycket fler underrubriker finnas. Om det är någon rubrik som i ett senare skede saknas rekommenderas det att först fundera på om denna information kan skrivas på en befintlig sida, om detta inte anses möjligt är det undermenyn som kan förändras. Den övre menyn ska i yttersta nödfall förändras då detta kommer att leda till att sidan kan se stökig ut. Ju fler mer rubriker desto svårare är det för användaren att skapa sig en uppfattning om vad sidan egentligen förmedlar och vart man ska börja söka efter information. Det rekommenderas att interaktiviteten på sidan bör hållas till inslag som inte stör den övriga navigeringen. Eftersom sidan har som huvudmål att informera kan interaktiva inslag lätt vara distraherande eller störa navigeringen. Då sidan även har en väldigt bred målgrupp bör det tas i beaktande att vissa av dessa inte har en uppdaterad webbläsare och därmed inte kan se alla interaktiva inslag. För att få en tydlig struktur och en lättnavigerad hemsida rekommenderas ett menysystem där det både finns en övre meny och en undermeny som visas när en knapp på den övre har klickats på. Detta har efter analyser som gjorts i projektet visat sig vara passande för denna typ av hemsida och är lättnavigerat för användare. Rubrikerna på det övre menysystemet bör hållas få och ge en övergripande känsla av företagets tjänster. Dessa används av användare för att få en överblick av hemsidan och med tydliga rubriker så som Boende, Konferens, Aktiviteter, Bastu och Kultur & Historia är s tjänster nedkokade till sina beståndsdelar och väldigt lättöverskådligt. Färre alternativ i den övre menyn gör det även lättare för användaren att välja i vilken av menyerna han eller hon ska leta efter vidare information. För att förstärka s profil rekommenderas att använda många bilder för att förmedla känslor. 21
07 English summary Turist & Konferens AB is a conference, experience and knowledge center located in Tornedalen, Sweden. The housing together with the living sauna and food culture and the traditional fishing constitutes its soul. Here you can find inner peace and creative inspiration. Turist & Konferens AB is run by the Spolander family. A new generation is currently taking over and continuing to develop the business. This change also leads to the development of the company s website and graphic profiling. The task is to create a concept of the graphic and structural design of the homepage. Apart from a clean and welcoming design, the work should be concentrated around interactivity, interaction with the visitors and social media with the goal to capture interest from new, potential customers. The project began with a visit at where the company, location and activities was shown and described. The most important part of the visit was to get a clear picture of what makes special and stand out from its competitors. The company s aspirations and goals were described and the project s goals were set. An extensive preliminary investigation was conducted where s competitors, its partners and various event companies were studied and their pros and cons were determined. The project group also analyzed the current homepage and its problems were determined. s identity and values were described in the form of a moodboard, which also was confirmed by the client to make sure it corresponded with their view of the company. The custumer segment was defined into three groups: day visitors, overnight visitors and conference. With these groups in mind, concepts of the homepages structure were designed. The three groups later led to user studies of the segments mentioned above where the participants played the role of a defined group and tried the design structure of the homepage. Creative work began with an investigation of the main-menu location. This was broken down into various concepts with different layouts. After a winning concept was chosen, the graphic design work started. Design concepts with different styles were created and through qualitative assessment a winning layout was chosen. The final design consists of a well thought out menustructure with an esthetically pleasing graphical design, well suited for Turist & Konferens AB. 22
08 Projektteam Gruppen har bestått av Ingrid Mårtensson och Tomas Wennberg Projektledare Karoline Pettersson karoline.pettersson@centek.se Handledare Jon Håkansson info@f-use.se Handledare David Larsson david@davidlarsson.com 24
Hampus Edström Utbildad industridesigner på Designhögskolan vid Umeå universitet. hampus.edstrom@gmail.com Jennie Månsson Utbildad landskapsarkitekt vid Sveriges lantbruksuniversitet. l06jema1@stud.slu.se Jens Kallin Utbildad civilingenjör inom teknisk design vid Luleå tekniska universitet. jenskallin@gmail.com Ingrid Mårtensson Utbildad interaktionsdesigner vid Linköpings universitet. ingrid.martensson@gmail.com Tomas Wennberg Utbildad civilingenjör inom teknisk design vid Luleå tekniska universitet. t.wennberg@gmail.com Lisa Lindberg Utbildad industridesigner på Designhögskolan vid Umeå universitet. lisaalindberg@hotmail.com 25
Designarena Nord är ett projekt i Norrbotten som drivs av Centek vid Luleå tekniska universitet på uppdrag av Stiftelsen Svensk Industridesign, SVID. Syftet är att öka intresset för industriell design som verktyg för att höja företagens konkurrenskraft och möjligheter att nå nya marknader. Och på så sätt öka tillväxten i Norrbotten. Sommardesignkontoret är en unik satsning från SVID, Stiftelsen Svensk Industridesign, med syftet att sammanföra studenter och näringsliv att öka kunskapen om design bland företag och kommuner. Turist & Konferens AB är ett konferens-, upplevelseoch kunskapscentrum i den Tornedalska världen. Boendet tillsammans med den levande bastu- och matkulturen och det anrika fisket utgör tillsammans deras själ. Uppgiften var att ta fram konceptförslag på hemsidans struktur samt ett grafiskt layoutförslag. Förutom en ren och välkomnande design ska tyngdpunkten ligga på interaktivitet, interaktion med sociala medier och att fånga nya, potentiella kunders uppmärksamhet. Det är även viktigt att knyta samman med de aktiviteter och värden som gör speciellt, såsom bastubadning och sikhåvning. SVID:s regionalkontor i Norrbotten och Västerbotten Centek 977 75 Luleå 0920-49 18 70 www.designarenanord.se www.svid.se