”Lagom” har aldrig varit svårare än vid en (re)design
Hur vi har kämpat för att behålla fokus på användarna när 21 sajter och lika många appar ska ha ny form
Uppdraget var enkelt: Se över formen i våra digitala produkter. Men alla som någon gång har gjort en redesign vet att de lätt växer till monsterprojekt som äter allt i sin väg.
Det är kanske förväntningarna, det faktum att existerande form måste hanteras varsamt och att bärande element tar tid att sprätta bort eller bara mängden önskemål,.
I Mittmedias fall handlar det dessutom om att hitta ett uttryck som passar en uppsjö av sajter och appar. Och vi hade bestämt oss för att sätta läsarna, slutanvändarna, i första rummet.
Med det satte vi igång. Och alla medel har varit tillåtna — från mobdesign till snabba användartester med enkla skisser.
TLDR — eller den korta versionen av vad vi gjort:
- Syftet med en formöversyn var att hitta de ställen som skaver för användarna och att löpande under arbetets gång fila till skavanker.
- Det första vi gjorde var att summera den användarfeedback vi kände till sedan tidigare. Sedan gjorde vi vissa nya undersökningar bland interna användare och befintliga kunder.
- Det gav fyra stora teman för förbättringar:
1. Layouten
2. Informationsarkitekturen (alltså element som hjälper läsaren att hitta)
3. Sajtens meny
4. Den röriga annonsupplevelsen - Vi satte designprinciper som fungerar som en sorts vision för formen och som kan summeras i meningen: Sträva efter en rik upplevelse som bygger på ett stabilt hantverk och där designen alltid lyfter innehållet,
- I steg ett vill vi lätta upp, förstärka första skärm, byta rubrikfont och rama in annonser tydligare
- Nu övergår vi till att, tillsammans med vår referensgrupp och affärsansvariga, spika formen på moment efter moment och sedan lansera löpande under våren.
För dig som är intresserad av en detaljerad genom av arbetsmetoden för vår formöversyn kan med fördel fortsätta att läsa och kommer med det även få se en del skisser. Att vi inte redan här och nu länkar till hela raddan med skisser och tar in bred feedback är så enkelt som att det riskerar att sabba just arbetsmetoden. Vi vill sätta en ny form som funkar för slutanvändarna och då behöver vi prova ut den ihop längs vägen. Vi måste också sätta en ny form som funkar för vår annonsaffär, och då behöver vi utforma formaten tillsammans med affärsansvariga.
Så trots att jag och teamet förstås är nyfikna på alla de tankar du som läsare har om våra skisser och trots att Mittmedia har för vana att dela med sig och öppna upp, så finns här en begränsad mängd skisser. De skulle helt enkelt riskera att leda dem som jobbar med formen just nu fel. Att ge en känsla av att saker redan är spikade.
Istället fokuserar jag här på hur vi har jobbat de senaste två månaderna.
Det finns inga skäl att hymla med det faktum att design och form är något som har kommit i andra hand i Mittmedias digitala produkter. Vi har förstås månat om den, användartestat nya element och jobbat med att hålla ihop helheten. Men under ett par år av intensivt arbete med läsaraffärens kärna (jag tänker på betalväggar, kundresor, anti-churn-insatser, nyhetsbrev och allt däremellan) har insatser för just formen alltid fått stå tillbaka. Det är också så att formförändringar är svåra att mäta isolerat i en innehållsprodukt där nyhetsflödet varierar, kampanjer och (sport)säsonger påverkar inflödet av läsare.
Under början av förra året, 2019, tog vi ändå ett litet kliv för att gifta ihop formen och användarupplevelsen i våra sajter och appar när vi slog ihop utvecklingsteamen och sedan skapade nya mindre team där varje gäng hade kunskap om båda produkterna. Syftet var att dra åt samma håll genom att produktutveckla för båda produkterna parallellt.
I slutet av 2019 fick vi så chansen att stanna upp och göra en formöversyn. Målet var att hitta de ställen som skaver för användarna och att löpande under arbetets gång fila till skavanker. Vi gick in i arbetet med helt öppet mindset och sa att det kan handla om allt från att ändra bildformat, fonter, mängden luft, färger eller funktioner som mest-lästa-listan. I bakhuvudet hade vi även prestanda eftersom det är en parameter som påverkar hela upplevelsen i en digital produkt. Men vi såg även att det skulle kunna landa i att förändra eller förtydliga personaliseringen av produkterna, det vill säga vilket innehåll som visas ut hur och varför.
Upplägget för arbetet var inte klart på förhand. Tvärtom la vi mycket krut på att hitta en tågordning som gjorde att vi kunde jobba förutsättningslöst utan att formöversynen blev ett monster, något som aldrig blev klart eller åt upp mer tid och kraft än vi själva valde.
Så vi satte upp enkla ramar genom att enas om målet med hela uppdraget (‘att fånga upp formelement som skaver, givet det vi vet och kan ta reda på om den existerande användarupplevelsen’).
Och så satte vi prioritetsordning på dem:
A) Göra en i tid samlad översyn av form i sajt och app
B) Återbesöka användarproblem som vi har bevittnat under flera år i olika sammanhang
C) Bredda perspektivet genom att ta in nya användarproblem (från användare, redaktionell referensgrupp samt andra interna stakeholders som ex konsulten Rickard Frank, KC eller marknad)
D) Implementera förändringar
Sedan körde vi igång. Och då blev tågordningen den här
1Vi summerade nuläget på följande sätt:
a) Genom att gå tillbaka till de webbenkäter, Net Promotor Score, som vi gör fyra gånger om året. Där finns en uppsjö av kommentarer som vår användarresearcher summerade till teman.
b) Genom att återbesöka ett par färska användarundersökningar gjorda för specifika features.
c) Vi skapade en redaktionell referensgrupp för att tillsammans med organisationens superusers fånga in insikter från läsarkontakter och redaktionsgolv.
d) Vi skickade ut en enkät med mail till befintliga kunder på utvalda sajter. Frågorna riktade in sig på hur form och design fungerar för den som vill läsa vårt innehåll. I slutet av enkäten frågade vi om personen i fråga ville fortsätta prata form med oss och bad i sådant fall om kontaktuppgifter.
e) Ett antal kunder intervjuades sedan enligt en och samma mall om sina tankar kring formen. Vi var nyfikna på att höra hur de oftast kommer in i produkten, hur de hittar det de vill läsa etc. Som alltid är det en sorts detektivarbete att hitta olika ledtrådar till vad det är som formar läsarnas upplevelse av våra produkter. Det är inte alltid de själva kan sätta ord på det, men med bra och genomtänkta intervjumallar kommer man långt.
2 Utifrån första insatsen fick vi ut ett antal spår som vi, i en workshop med referensgruppen, benade ut till några huvuddelar:
Layouten
- Avsaknad av visuell viktning: “jämntjock och utan puls”.
- Svårt att förstå hur nyheter hänger ihop och känslan av återupprepning.
Informationsarkitekturen
- Placering/benämningen av ingångar till innehåll är inkonsekvent och ibland svår att förstå. Olika i sajt och app.
- Svårt att hitta specifik artikel eller specifikt innehåll.
Sajtens meny
- Tar mycket plats på skärm och bidrar till den av användarna beskrivna ”hoppiga känslan”.
Den röriga annonsupplevelsen
- Annonser är inte vad läsaren som kommer in för att uppdatera sig på läget vill ha i first screen.
- Annonsstorlekar som inte passar in i layouten i övrigt.
- Innehållet laddas snabbare än annonserna vilket skapar en hoppig upplevelse där man lätt tappar bort sig.
3 Nu var den enkla delen gjord: att summera förbättringsområden. Nästa steg blev att, för första gången någonsin, sätta designprinciper för både sajt och app. Här fick vi ordentligt med hjälp av någon som jobbar med formöversyner på heltid, konsulten Rickard Frank.
Genom att plocka upp Mittmedias grundläggande värden, som vision och strategi, och gifta ihop med med de lokala varumärkenas läsarlöften landade vi i ett arbetsutkast till designprinciper som ser ut så här:
Sträva efter en rik upplevelse som bygger på ett stabilt hantverk och där designen alltid lyfter innehållet
4 Förbättringspunkterna är insamlade, huvudspåren utkristalliserade, designprinciperna på plats — nu då? Nästa steg blev att i mobdesign, alltså motsvarigheten till kodarnas mobprogrammering, sitta tillsammans och sätta grunden för en ny start- och artikelsida.
Att det blev just dessa två var så enkelt som att de är de två mest frekvent besökta platserna i våra produkter.
I ett par veckor grottade vi ned oss i detaljer, skapade moodboards, pratade trender och användarvänlighet och tycke och smak.
Men det var ingen slump att vi tog inspirationsvarvet efter att vi noga hade ringat in de förbättringar som våra användare satt fingret på. Mittmedias utvecklingsenhet är tunga på UX och användarperspektivet kommer alltid före branschtrender och ‘praxis’. Det är till och med något som har fått kollegor på redaktionen att fråga om vi inte konsumerar konkurrenternas produkter. Det gör vi förstås, men det är inte vår främsta inspirationskälla utan det är formplågorna som jag listade under punkt två.
Så efter mobdesignen enades vi om att gå vidare med följande sätt att stärka formen:
- Lätta upp sidhuvudet
- Jobba bort onödiga element (jobba bort färgplattor, kort, skuggor, förenklat vinjett).
- Jobba annorlunda med färger och tonplattor
- Förstärk första skärm
- Vässa det vi kallar informationsarkitektur, det vill säga gör större skillnad på innehållstyper och tydligare färgsättning på viktig navigation.
- Bättre inramning av annonser, ta bort skalning av annonser och lås storleken på annonsytorna för att slippa den hoppiga känslan.
- Byta rubrikfont till något med bättre läsbarhet och som inkluderar varianter för olika artikeltyper/nyhetslägen.
- Sätta en generellt en bättre och mer genomarbetad typografi. Men förbättrad läsupplevelse på artikelnivå, bilder i fullbredd, justerad ingress och brödtext, tydligare mellanrubriker, bättre avstånd mellan element.
Vi användartestade även ett nytt typsnitt och ett par formelement och fick tydligt gensvar på att vi var något på spåren.
“Känns som att det är större text, smalare och skönare bokstäver. Lättare att läsa! Behövde inga läsglasögon nu. Känns renare med vitt däruppe, (i headern) jag gillar det! Mkt snyggare med mindre färg. Då sticker bilderna ut mer i artikeln.”
Kvinna, 29“Mer luft på sidorna — det gillar jag. Känns mer proffsigt. ”
Man, 42
“Lite lättare att läsa, storlek och luftigare”
Man, 69
5Under mobdesignen blev det klart att vi behövde se över det tekniska fundamentet för Mittmedias sajter (eftersom vi rent krasst alltid har lättare att skapa en visuellt aptitlig design för våra appar än för just sajterna som ska klara om att skala på ett antal olika skärmstorlekar).
Som jag skrev i starten i detta inlägg: skön form bygger man bland annat med god prestanda. Och inte alla delar av en formöversyn är synliga.
Vi fortsatte att arbeta med Rickard Frank och utvecklarna i teamet hittade en fungerande modell för att uppdatera vårt gridsystem. Det är en relativt osexig insats, även om en av kollegorna jämförde det med att byta flygplansmotor i luften. Men för besökaren är det nästan omöjligt att se skiftet. Den tydligaste vinsten är klart förbättrad prestanda. Med nytt grid, anpassat efter standardformaten för annonser smälter de också in bättre i layouten.
6 Nästa utmaning blev att inte tappa tålamodet. Efter många veckors djupdykning i god form är det lätt hänt att man blir sugen på att bygga nya funktioner eller ta ut svängarna och att den gamla formen plötsligt känns väldigt snäv och ful. Men när man, som vi, har en form som ska funka på ett stort antal sajter med delvis olika typer av innehåll och med en bred målgrupp och ett antal olika typer av skärmar finns det en poäng att hitta något som är lagom.
Och som produktägare ville jag absolut stanna upp och använda designprinciperna för att sätta en ny grund för artikelsida och startsida hellre än att börja med att addera häftiga sidofunktioner. Men det har inte varit självklart att veta hur vi bäst lägger upp arbetet. Börjar man med sajt och tar sedan app? Kan man byta font på artikelsidan i app och sajt men inte på startsidorna? Vad finns det för estimat på olika sorters utvecklingsinsatser?
Och här är vi nu. Vi har en tanke om var vi sätter ned spaden i marken och har precis delat med oss av de första skisserna till referensgruppen och övriga 1 200 kollegor i bolaget. Nu går teamet på Mittmedias interna utvecklingsavdelning DMU tillbaka till delmoment som byline, rubrikfont, vinjetter och prefix och tanken är att löpande skeppa ut små förändringar som under våren ger en ny helhet.
Vad som är en lagom stor förändring beror på vem man frågar. Fräna features och en stor röd matta kommer lysa med sin frånvaro, men jag lovar att återkomma när vi har satt den nya grundformen och fått den första vändan med användarfeedback.
Så stay tuned.
Tack till alla ni som hjälpt till att bygga detta blogginlägg och göra det begripligt! Mats, Rickard, Sanjin, Maria, Katarina, Olle, Danne, Johan, Robin och ett gäng till.
Katarina Ellemark är produktägare för sajt/app på Mittmedia.
