Johanna portfolio 2014

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