Johanna GranströmPortfolio 2014
Exempel på webb, responsive design, iOS-appar, interna system
2013-14UtbildningsradionWebb, responsive design
Mellan augusti 2013 och juni 2014 jobbade jag som interaktionsdesigner på Utbildningsradion. Mitt huvudsakliga uppdrag var att ta fram en ny design för ur.se. Ur.se riktar sig till lärare och innehåller program och utbildningsmaterial. Utbildningsradion ville med projektet förbättra användarupplevelsen på ur.se med speciellt fokus på bättre sökbarhet och mobilanpassning. I projektet har jag jobbat nära en projektledare från Utbildningsradion och ett utvecklingsteam bestående av fyra utvecklare. Projektet har jobbat iterativt med koncept, interaktionsdesign, användartester och utveckling.
Aktiviteter:Intervjuer med lärare och verksamhetInläsningMålgruppsanalysKonceptInteraktionsdesignAnvändartesterRedaktörsmanual
I intervjuer med lärare och verksamhetsamt inläsning av rapporter skaffade jag kunskap om användarnas situation.
Kundresa
Konkreta behov grupperade beteendemålgrupper
Beteendemålgrupper
I konceptet låg fokus på att förbättra söket. Olika sätt att hitta anpassade efter användarnas situation togs fram.
Tjänsten fick tydligare användarfokus, där de funktioner som troligen kommer användas mer lyfts upp. Innehåll med liten användning plockades bort eller fick mindre framhävd placering.
Konceptskiss
Sökresultat via ämnesmeny. DesktopSökresultat via sökruta. Mobil.
Detaljerade wireframes
Startsida
Detaljerade wireframes
Produktsida
Detaljerade wireframes
2013BokförlagApplikationer för iPhone, iPad, MAC och Windows
Som ett led i en långsiktig plan att digitalisera alla sina läromedel ville bokförlaget lansera en ny lösning för interaktiva böcker. Lösningen riktar sig främst till skolor och är tänkt att användas som läromedel av elever och lärare. Förlaget hade letat efter en ultimat lösning under ett par års tid, som var modernare och smartare än dagens alternativ. Det fanns många olika lösningar ute i världen men förlaget ville ta fram den perfekta lösningen för sina kunder.
Aktiviteter:Intervjuer med lärare och verksamhetInläsningMålgruppsanalysKonceptInteraktionsdesign
I konceptfasen tog jag fram värdeord och gjorde en mindre experience map
Värdeorden var• Läsvänlig och ren design –
boken i fokus• Smart, nära tillhands,
lustfyllt• Lärstimulerande
Experience map light
Ramverk
Detaljerade wireframes för iPad och iPhone
Exempel på några av menyerna och verktyg
Jag gjorde även förteckning över animationer och dokumenterade gestures för blanda annat bläddring och ljuduppläsning.
Detaljerade wireframes för iPad och iPhone
Interaktionsdesign för MAC och Windows som tog hänsyn till de speciella förutsättningar som finns för desktop appar. Där jag bland annat utformade menygenvägar.
I så hög utsträckning som möjligt ville jag hålla ihop designen mellan desktop och de mobila apparna.
Detaljerade wireframes för MAC
2013ArenatjänstWebb och iOS-app
Hur kan en webb och app bäst förenkla och förstärka besöket för en arenabesökare? Jag utförde ett par workshops med beställare för att analysera frågan. I arbetet definierade jag målgrupper och viktiga beteende som webb och app skulle stödja. Effektkartläggningen tillsammans med befintliga konceptidéer låg till grund för det vidare arbetet med den detaljerade interaktionsdesignen. Fokus för webben var att förenkla inför besöket och attrahera besökare. På appen var fokus att förstärka arenaupplevelsen och jag tog bland annat fram interaktionsdesignlösningar för interaktiva tävlingar, live statistik och feeds.
Aktiviteter:EffektkartläggningInteraktionsdesign
I arbetet definierade jag målgrupper och viktiga användningsmål som webb och app skulle stödja. Till det kopplade jag åtgärder och funktioner
Fokus för webben var att förenkla inför besöket och attrahera besökare. På appen var fokus att förstärka arenaupplevelsen
Effektkarta
Struktur av webbens olika sidor och innehålll
Informationsarkitektur
Startsida med fokus på kommande evenemang
Redaktionella puffar för nyheter och plats för realitidswidget med interaktiv infographics
Detaljerade wireframes för webb
Evenemangssida.
På evenemangssidan var fokus på att få en försmak av evenemanget och kunna köpa biljetter.
En checklista utformades för att inte glömma praktisk information.
Detaljerade wireframes för webb
I appen var fokus att förstärka arenaupplevelsen och jag tog bland annat fram interaktionsdesignlösningar för interaktiva tävlingar, live statistik och feeds.
Detaljerade wireframes för iPhone app
Evenemangssida
Detaljerade wireframes för iPhone app
2012BankCRM-, dokument- och ärendehanteringssystem
Uppdraget bestod i att stötta utvecklingsteamet i deras arbete med att ta fram två olika system för CRM-, dokument- och ärendehantering. Det ena systemet riktar sig till kundtjänstmedarbetare i call center för privata kunder. Det andra systemet riktar sig till kundansvariga och analytiker som jobbar med företagskunder.
Projektgruppen som jobbade med systemen tog parallellt med interaktionsdesign fram krav. De hade stött på problem kring centrala delar i interaktionsdesignen och ville ha hjälp.
Steg 1Förslag på arbetssättObservationer Gemensamma utgångspunkter för privata kundtjänstsystemet
Steg 2 KonceptDetaljerade wireframesInteraktionsmanual med designprinciperRiktlinjer för ikoner och tangentbordsnavigering
Konceptet tog fasta påA att skapa en bra miljö för kundtjänst medarbetaren som stöttade dem med deras parallella uppgifter. Med ett scenario beskrev vi hur systemet ska:Stötta säljaren i stunden att sällja produkter och tjänster som utgår från kundenKlara uppgifter enkelt och smidigtGe ett bra bemötande
Scenario
Konceptuella skisser på hur information, funktion och navigering skullle te sig för viktiga byggstenar i designen.Kundanalys stödPersonllig kommunikation med status på ärende och taggar för vad senaste samtalet handlat omStötta de tio vanligaste frågorna. Genvägar tilll produktinformation
Konceptskiss
SidelementPrincipdesign
Huvudsaklig navigering
Steg 3 Principdesign i form av interaktionsmanual InformationsarkitekturWorkshops med medarbetare för analysavdelningenDeltog i kravarbetet för analysavdelningen visualiserade kraven
Principdesign
Några detaljerade sidor för privat kundtjänst, analys & företagskunder, gemensam dokumenthantering.
CRM, dokument, ärendehantering för bank
Steg 3 Principdesign i form av interaktionsmanual InformationsarkitekturWorkshops med medarbetare för analysavdelningenDeltog i kravarbetet för analysavdelningen visualiserade kraven.
Några detaljerade sidor för privat kundtjänst, analys & företagskunder, gemensam dokumenthantering.
CRM, dokument, ärendehantering för bank
Steg 3 Principdesign i form av interaktionsmanual InformationsarkitekturWorkshops med medarbetare för analysavdelningenDeltog i kravarbetet för analysavdelningen visualiserade kraven.
Några detaljerade sidor för privat kundtjänst, analys & företagskunder, gemensam dokumenthantering.
CRM, dokument, ärendehantering för bank
Informationsarkitektur