's Picture

Design- & layoutförändringar: Evolution, inte revolution

Postad av Veronica Wallström

Del 3 – Så byggde vi nya Expressen.se snabbare än någonsin

Nu har du kanske läst en eller flera texter om hur vi tekniskt har byggt om nya Expresssen.se. Här kommer nu en del som handlar om design och layout. Med en helt ny kodbas, hur mycket design behövde ändras egentligen?

Innan vi började med själva utvecklingen av nya sajten jobbade vi med en POC (Proof of concept) i en månad. Den tiden använde vi till att inventera Expressen.se. Det jag gjorde då var att titta på hela sajten, alla sektioner och alla artikeltyper. Jag undersökte hur det såg ut på mobil, surfplatta och på desktop. Jag bekantade mig med GT, KvällsPosten och Dina pengar. Jag pratade med kollegor på redaktionen och på utvecklingsavdelningen, och speciellt med de personer som var i mitt team. Ett perfekt sätt för mig (som då var ny i teamet som jobbar med Expressen sajt & TV) att lära mig om Expressen, tidningen och varumärket. Medan jag gjorde denna inventering ställde jag mig dessa frågor:

  • Hur ser huvudsajten ut idag?
  • Vilka designkomponenter finns?
  • Skiljer layouten sig på olika bredder/skärmar?
  • Vad behöver/måste vi ändra på?
  • Vad vill/önskar vi ändra på?

Inventering av nuläge

Vi insåg snabbt att Expressen.se hade tre olika (mobil, surfplatta, desktop) utseenden på hemsidan när jag tittade på webben. Även apparna, iOS och Android, skilde sig på vissa sätt. Vi fann alltså upp till fem olika format och utseenden på vissa element och komponenter. Det här är inte alls konstigt på något sätt eftersom vi här på Expressen jobbar snabbt och testar nya saker. Re-design har skett vid olika tidpunkter, på olika kodbaser och av olika personer. Sajterna har utvecklats organiskt över tid, och det var en av anledningarna till att vi ville bygga den nya sajten.

Här ser ni hur faktarutan har sett ut på sajten
Här ser ni hur faktarutan har sett ut på sajten
En nyhetsflash syns på sajten när läget är akut, men det finns ingen anledning att den har fyra olika utseenden.
En nyhetsflash syns på sajten när läget är akut, men det finns ingen anledning att den har fyra olika utseenden.

Olikheterna samlades och dokumenterades för att vi alla skulle få en överblick och förståelse till vad som behövde/måste ändras på. Ändringarna var inget beslut som togs av en enskild person utan en grupp skapades för att diskuterade detta. I denna grupp fanns redaktionschefer, layoutchef, produktägare, utvecklingsredaktörer, samt designlead och techlead från Sajt-teamet. Gruppen träffades varannan vecka för att prata igenom tänkta designförändringar som tagits fram. På så sätt kom vi snabbt framåt i processen, och alla kunde känna ett gemensamt ansvar vid lansering.

Fyra områden för förändring

POC:en avslutades och för design & layout var det fyra områden som behövdes ses över, förändras och även göra nytt. Nedan kan du läsa om vilka dessa områden var.

SNABB, ständigt uppdaterad nyhetskänsla

Den största förändringen visuellt är på desktop, där en kolumn försvunnit. Vänsterkolumnen fanns varken på surfplatta eller mobil, och för att tänka “mobile first” och responsivt så beslutade vi att ta bort den. Innehållet i vänsterkolumnen (Senaste nytt och LIVE-TV) fanns av en anledning, nämligen att ge sajten känslan av att vara snabbt och ständigt uppdaterad. Detta stämde med vad våra användare tyckte, men samma känsla infann sig om Senaste nytt och LIVE-TV var placerade i högerkolumnen. Detta tog vi reda på via användartester där vi visade olika layouter och där användarna bl.a. fick tycka till och tänka högt.

Utmaningen i att ta bort vänsterkolumnen var att de andra två kolumnerna fick mer bredd att dela på. Risken var att ena kolumnen skulle kännas för bred och på så sätt ta bort känslan av att kunna få en snabb överblick över dagens nyhetsläge. Och det var väldigt viktigt för oss att inte låta det ske.

Desktop - 980px bred med två kolumner
Desktop - 980px bred med två kolumner

Navigering och meny var något som skilde på alla ställen. För en användare som lärt sig navigera på mobilsajten, kunde inte ta sig fram på liknande sätt på desktopsajten. På mobil fanns det ett antal genvägar till de mest besökta sektionerna samt en hamburgermeny. Desktop hade en megameny; en meny som via hover fälldes ut med allt dess innehåll. Denna megameny skulle inte fungera i mobilen och därför behövde vi se över en ny lösning som kunde fungera likadant på mobil, surfplatta och desktop. Ett tidigare arbete hade påbörjats för att ta fram en kontextuell navigering, där kunde vi ta vid. Viktigt att tänka på var att vi inte bara jobbar med Expressen som varumärke, utan det vi tog fram skulle även fungera för GT, KvällsPosten, Dina pengar m.fl.

Sektioner och sidor

Samtidigt som vi tittade på hur navigeringen skulle fungera och hur vi kunde göra så att den var likadan överallt, så tittade vi på vilka sektioner som fanns och hur många det fanns. Vi såg även om/var det fanns undersektioner. Under Sport-sektionen fanns, och finns fortfarande, t.ex. Fotboll, och under denna sektion hittas Allsvenskan. Här fanns det alltså tre nivåer, och likaså var det under Nöje. Detta är inte ändrat, däremot kommer man lättare åt undersektionerna idag i.o.m. vår kontextuella navigering. Det vi har ändrat är att Nöje-sektionen har blivit blå. Alltså inga ändringar i strukturen, men när vi såg över våra olika varumärken, och dess färger, fanns det inget som talade för att Nöje skulle fortsätta vara gult/rött.

NÖJE Före & efter
NÖJE Före & efter

Visual Guidelines

Det fanns en guide för oss designers att följa när det kommer till olika element och komponenter. Bildtexter, balkar, vinjetter, "JUST NU", faktarutor m.m. - det är några av dem du sett längre upp i texten. Denna guide har utökats med fler versioner, i samband med re-design som nämns i början. Precis så som det lätt blir!

Vår vision var att samtidigt som vi såg över och skapade nya komponenter så skulle vi också påbörja och bygga ett designsystem. Ett system där komponenter och kompositioner fanns samlade för alla designers och utvecklare. Ett gemensamt bibliotek, redo att använda. Det blev dock för stort och saktade ner processen att samtidigt som vi såg över vårt behov bygga även detta. Istället gjordes komponenter ut allt eftersom vi hittade dem, och om/när vi insåg att det var nödvändigt med ändringar så gjorde vi dessa direkt på sajten. Efteråt har jag uppdaterat de designdokument jag arbetat i så även det är uppdaterat.

Evolution, inte revolution

"Digital design is like painting, except the paint never dries" -Neville Brody

Det är ett av mina favoritcitat när det kommer till mitt jobb. Inom UX och design finns det alltid något att göra - någons behov förändras, ett varumärke växer, eller som i vårt fall nu på Expressen - vi har design, vi har komponenter, vi har en ansvarsfullt responsiv sajt, och det finns (ändå) massa mer att göra. Jag älskar det! För att nämna några saker som det jobbas på: bloggar, tv-portalen och en betalmodell.

PS. Missa inte vår nästa bloggpost, följ oss på Twitter!

Till startsidan