Jenny Dafgård, Fredrik Johansson, Nils Järgenstedt, Yael Katzellenbogen och Klara Mälarberg. IT-Universitetet i Göteborg, HT03

Transkript

1 SAMMANFATTNING Denna rapport beskriver hur Grupp 8 gick till väga för att skapa en webbplats för företaget Polyplast+. Processen påbörjades med en förstudie om Polyplast+, och fortsatte sedan med användaranalys, skapande av Personas, designskiss på papper samt grafisk utformning av webbplatsen. Den slutliga designen på webbplatsen inger ett proffsigt intryck, med personliga bilder, lätta textstycken samt ett lila/grönt navigationsystem som förstärker loggans identitet, och uppfyller på så vis Polyplast+ önskemål. FÖRSTUDIE AV POLYPLAST+ PolyPlast+ är ett företag som tillverkar unika, kundanpassade produkter inom Plast och Polymer. Företaget vill nu locka fler okonventionella köpare, mindre företagare samt privatpersoner med udda önskemål. Genom att skapa en webbplats och finnas tillgänglig på nätet hoppas Polyplast+ på att nå ut till flera kunder med sin kompetens och bli en mer kraftfull konkurrent på marknaden. 1

2 PolyPlast+ mål Med webbplatsen vill PolyPlast+ framförallt: Locka fler okonventionella köpare, exempelvis designers och inköpare. Locka mindre företag med udda önskemål om materialkombinationer. Ge ett kompetent men ändå vänligt och personligt intryck. Utöver dessa önskemål, hoppas PolyPlast+ dessutom öka antal kunder, höja omsättningen, profilera sig som morgondagens företag och tänja gränser. Analys av användare För att webbplatsen skall vara användbar är det nödvändigt att den riktar sig uteslutande till dess tänkta användare. Genom marknadsanalys framkom en tydlig användarprofil bland PolyPlast+ kunder: Ålder: Kön: Kvinnor 40 %, män 60 % Sysselsättning: Egenföretagare, produktchef, inköpare, hobbydesigner Användning av Internet: Som en källa för information, vill att informationen ska vara lättillgänglig. Användningsfrekvens: Surfar inte så mycket, använder Internet drygt en gång i veckan. Personas Baserat på användaranalysen (ovan) skapades Personas för att kunna integrera användarna som fiktiva personer redan från början av projektet. På detta sätt kan man förstärka medverkandet av användarna i designprocessen. Dessa Personas är förvisso fiktiva men är dock baserade på användarprofilen för att forma en bild över vilka det är och hur de kommer att använda webbplatsen. Tre Personas ansågs räcka för att representera användarprofilen och vara till stöd för designval under processen. 2

3 De tre Personas är: 1. Janne, 35 år, gift med Anneli, 2 barn, bor på landet i Småland, driver eget företag, tillverkar komponenter till traktorer, letar efter ett mjukare material till att tillverka skopor till grönsaker. Har en gammal och trög stationär dator hemma, uppkoppling via modem, liten om någon datorvana. Tycker att hela webben är något stort elakt måste. Vill ha enkel information. Är befintlig kund hos Polyplast och brukar ofta motvilligt ringa. Tycker inte om att kommunicera med människor, han stör sig i synnerlighet på tjejen i växeln. Därför ser han webbplatsen som ett enkelt redskap för att kontakta företaget och hitta den information han behöver. Är intresserad av teknologi och vill hänga med i den senaste. 2. Kate, 45 år, Chefdesigner för produktutformningen för det multinationella ToysForKids som tillverkar leksaker för barn. Hon är ensamstående och bor i centrala London, bryr sig mycket om sin karriär och är medveten om att varje beslut hon fattar är viktigt för hennes karriär. Kate har mycket stor datorvana och äger en bärbar state-of-the-art dator. Hon är alltid uppkopplad, surfar mycket och har lite tålamod, vill att det ska gå fort. Ska någon webbplats fånga hennes intresse, så måste den ha något speciellt. 3. Alvar, 31 år, ska gifta sig med Linda 22 år, Alvars Pappa har sagt att Alvar kan få vad han vill till bröllopet och Alvar vill göra något riktigt speciellt och annorlunda. Alvar startade upp ett IT-företag, där han idag verkar som vd med 30 anställda. Det går väldigt bra för företaget efter 7 års hårt arbete under dygnets alla timmar. Nu har den stora dagen kommit då han har valt att stadga sig med Linda. Han träffade Linda på IT-företaget han äger och deras gemensamma intressen är fotografering, inredning, kläder och design. Alvar är material och modemedveten och köper bara det bästa och märkesvaror. Till bröllopet har Alvar och Linda tänkt sig att inbjudan ska vara väldigt okonventionell och nytänkande med sin personliga touch. De vill inte vända sig till konventionella företag och finna sig i en mall, utan söker sig till något företag som kan se deras behov och sätta dem i centrum. 3

4 Exempel på hur dessa tre Personas påverkade designvalen: Janne: enkel navigering, få klick, lättlästa texter, lite grafik. Kate: stark identitet, stilrent utseende, snabb information (tagline). Alvar: personlig förmedling, hjälp med unika idéer, flexibilitet. DESIGNSKISS Utgångspunkten för det grafiska arbetet började med en Low-Fidelity-skiss av webbplatsens startsida. Denna del av processen sätter indirekt standarden för resterande delar av webbplatsen och ansågs därför vara värd att lägga ned mycket tid på då startsidan även står för förstaintrycket av företaget. Första intrycket Logotyp: Kundens önskan var att behålla den ursprungliga logotypen, då den är en stark grafisk identitet och används även som varumärke. Storlek på och placering av logotypen, centrerad och överst på sidan, baserades därför på detta argument. Navigationssystem: För att förstärka logotypens runda former, milda färger och 70-tals känsla, utvecklades ett navigationssystem där dess grafiska komponent löper som ett tvåfärgat band genom sidan. Bandet börjar en bit ned på den vänstra marginalen och tar slut efter tre böjar långt till höger på den övre marginalen. På så sätt delar navigationssystemet även in sidan i olika fält och skapar diskreta marginaler kring huvudytan. Motto: Direkt under navigationssystemet har det kort sammanfattats vad Polyplast+ är för typ av företag. Detta för att enklare attrahera nya kunder i större utsträckning som inte nödvändigtvis känner till Polyplast+. Bilder: För att förstärka företagets dels personliga och dels unika image valdes att på startsidan visa en bild på två människor i diskussion respektive en bild på en isbjörn. Den första bilden är tänkt att ge intrycket om att Polyplast+ är kundinriktade och tycker om att samarbeta. Medan 4

5 den andra bilden illustrerar ett exempel på en unik produkt som Polyplast+ framtagit. Text: Under bilderna beskrivs i korthet innehållet på respektive del av webbplatsen med relaterade länkar för att på så sätt underlätta för den mindre vane besökaren att hitta relevant information. Här kan dessutom Polyplast+ välja att framhäva viss information på hemsidan som man vill att besökaren ska fokusera på. Huvudlänk 1: All information som berör företaget har grupperats ihop under kategorin Om Polyplast+ och syftar till att ge tidigare kunder eller besökare mer detaljerad information om företagets vision, kunder och kompetens. Huvudlänk 2: All information som berör den enskilde besökaren och förklarar vad företaget kan göra för den enskilde kunden har grupperats ihop under kategorin Kundlösningar. Detta syftar till att förmedla till den nya besökaren att Polyplast+ är nytänkande, inriktad på kundens krav och letar efter nya och unika uppdrag. Image: Genom att hålla startsidan ren och enkel förmedlar den inte ett alltför hippt budskap som skulle kunna skrämma bort mindre kunder men ger samtidigt ett seriöst intryck. 5

6 GRAFISK UTFORMNING När webbplatsens startsida och dess design hade framtagits, utvecklades en mall för hur resterande webbsidor skulle se ut. Layout Logotypen och navigationssystemets grafiska komponent, det tvåfärgade bandet, återkommer på varje sida för att skapa konsistens och övertyga användaren om att denne befinner sig på samma webbplats. I det vänstra området på navigationssystemet visas de två huvudlänkarna: Om Polyplast+ och Kundlösningar i var sin färgdel av bandet. När man klickar på en utav dessa, dyker respektive underlänkar i respektive färg på bandet upp längs med dess mittersta del. Exempelvis visas underlänkarna på den gröna delen av bandet om besökaren klickar på huvudlänken Om Polyplast+. Sidytan till höger används för att presentera bilder på, dels för att ge balans på sidan och dels för att hålla bildernas position konsekvent från sida till sida. Huvudytan används för den aktuella webbsidans innehåll som vanligtvis är text men kan även innehålla foton och diagram. Texten är genomtänkt 6

7 omskriven för att genom att vara kort och koncis ge ett lätt och luftigt intryck som ska locka besökaren att läsa. Navigation Navigationsstrukturen har en bred struktur som kräver få klickningar vilket innebär att webbplatsen uppfattas som enkel och överskådlig för användaren. När ett val har gjorts får användaren en direkt feedback på att någonting har skett. En titelrubrik dyker upp på sidan som motsvarar valet användaren gjorde. Denna rubrik hjälper dessutom användaren identifiera var denne befinner sig för tillfället. Den valda länken indikerar också att valet har gjorts genom att den ändrar färg och är inte lika interaktiv som övriga länkar på sidan. Med andra ord ändras inte färgen på länken när man för muspekaren över den. BILDER Bilderna är skapade i två olika storlekar för att ge ett enhetligt intryck. Bildernas format skall ge känslan av en ren och snygg yta och skapa en balans på sidan. Ett genomgående tema är att webbplatsen visar bilder på personal och kunder för att ge ett personligt intryck om PolyPlast+ och dessa är dessutom ett komplement till texten. TEXT OCH SPRÅK Texterna är skrivna så korta som möjligt då läsaren har mindre tålamod för längre texter och har svårare att läsa på skärm. Fokusering på att ge besökaren läsvänlig och högkvalitativ text utan att för den skull vara tillkrånglad. 7

8 Denna första version av webbplatsen riktar sig till den svenska marknaden. Om Polyplast+ i framtiden bestämmer sig att utöka sin marknad på internationell nivå, finns det utrymme för att spegla detta på webbplatsen i form av språkalternativ. Huvudlänkarna har rubriker med kapitäler och underlänkarna som första ordet i en mening för att lättare kunna skilja dessa från varandra. Texten på webbplatsen är skriven med sanseriffer då detta är lättast att läsa på skärm. TILLÄGG Efter diskussioner med Polyplast har det framtagits en tävling som har blivit kallad: PolyPlastPlusPriset (PPPP) för att uppnå deras mål om att, med webbplatsen, locka till sig fler okonventionella köpare och mindre företag med unika idéer. Under länken Vårt samarbete, ges en beskrivning på hur PolyPlast+ jobbar med sina kunder för att besökaren på webbplatsen ska få en uppfattning om hur arbetsprocessen går till. Detta har vi kallat PolyPlast+ Utvecklings Metod (PUM). ÖVRIGT Webbplatsens information har anpassats enligt W3C, för att bland annat göra sidan mer tillgänglig för handikappade. Under projektets utvecklande har det gjorts flera designval. Vissa val har inte motiverats i denna rapport då de är bedömda som triviala. Ett exempel på detta finns under rubriken Kunder. Till varje beskrivet projekt finns tillhörande tre bilder och en fjärde ruta med nummer. Detta nummer avspeglar projektets nummer och byter plats medsols. Denna förflyttning av numret skulle lika gärna kunnat röra sig från vänster till höger. 8

9 VEM HAR GJORT VAD I PROJEKTET? Om våra roller De roller vi valde vid uppdelningen av grupper har vi inte strikt tagit fasta på. Vi har istället varit varandras komplement vid utvecklandet av projektet eftersom vi har kunskap och uppfattningar om tillvägagångssätt inom de olika områden som vi gått igenom. När vi bestämt oss för en viss lösning har vi delat upp arbetet för en mer effektiv lösning. Under utvecklandet av webbplatsen har flera steg utförts, dessa är: Kick-off med brainstorming: Alla Förstudie om Polyplast+: Fredrik, Nils Analys av användare, skapande av Personas: Jenny, Klara, Yael Första sidan på webbplatsen: Alla Motivering till design val: Alla Textskrivning: Alla Om PolyPlast+ : Fredrik, Nils. Kundlösningar : Jenny, Klara, Yael. Kodning html: Fredrik Fotografering: Alla Bildredigering: Fredrik, Jenny, Yael. Testning: Alla Presentationsförberedelse: Alla Presentation: Klara, Yael. 9