UX-DESIGN FÖR BONNIER BROADCASTING

Beställare: UX-teamet på utvecklingsavdelningen hos Bonnier Broadcasting AB, med streamingtjänsterna TV4 Play och C More, numera ägda av Telia. Arbetsställe TV4-huset på Gärdet.

Utmaning: Att skapa och designa UX-design med fokus på UX-Writing och microcopy, på svenska, engelska, danska och norska, för UI på webb och i appar för Android, iOS och Samsung TV. Aktiv roll i design av UX för onboardingflöden, dialoger, informationstexter mm för user interface i alla tjänster. Dokumentation av användbarhetstester.

Min roll: Mitt uppdrag påbörjades i oktober 2017, officiellt hade jag titeln UX-writer och jobbade i UX-teamet på utvecklingsavdelningen. Men jag deltog också i att ta fram design, exempelvis för onboardingflöden, CTA-knappar, dialoger mm. Se texten under de följande bilderna för beskrivning av exempel på det jag gjort. Se även separat sida om arbete med BBR:s ”GDPR-sajt”, för användardata. Jag ledde under mitt uppdrag också ett projektarbete för att harmoniera tonaliteten över alla digitala plattformar, där vi samlade in dokument som tagits fram för streamingtjänsternas redaktionella språk, för marknad, samt för utvecklingsavdelningen. Allt samlades på ett ställe, tillsammans med uppdaterade praktiska exempel samlade i ett excel-dokument, med tanken att det skulle kunna utgöra en början till ett systematiserat Designsystem för UX-writing på företaget. Jag tog också fram en praktika för utvecklarna, med länkar till olika språkliga resurser, samt en rad olika exempel på hur man kan skriva sina releasenotes i Appstor/Playstore (istället för att copypasta en och samma formulering, om och om igen, efter varje uppdatering).

När: Arbetet pågick från oktober 2017 till början av juni 2018.

Länkhttps://www.tv4play.se/https://www.cmore.se/

Referenser: Calle Bonnier, då chef för utvecklingsavdelningen, nu Bonnier M&A.

.

Att skapa formulär är inte det enklaste. Vad ska stå och var ska det stå. Hur får man med juridisk information? Ska man avslöja om en mailadress finns i medlemsregistret eller inte när någon klickar på ”glömt lösenordet”? Hur ska formspråket se ut? Det här formuläret skulle ersättas av den modernare design som fortfarande används.
.
Underbart är kort. UX- och UI-texter behöver inte vara långa, de ska bara hjälpa dig att komma vidare utan att behöva tänka. Då är det bra med raka budskap som är lätta att förstå. Mjukare och vänligare formspråk. Samma funktioner.
.
Designa med empati för användaren. Den här texten låg tidigare i apparna, men behövde ändras. Vill vi verkligen sätta upp en stoppskylt som hejdar publikens nyfikenhet och kanske till och med gör dem förbannade genom en formulering som talar om för dem att de har kommit till en ”gated community”? Vem vill klicka på knappen för att se vad man missar i det här läget? Jag fick i uppdrag att förändra.
.
Itererad microcopy. Det här upplägget kändes definitivt mycket mer empatiskt, med utgångspunkt från publikens perspektiv. Vi behöll knappen för nyfikna utforskare, men förmedlar istället en känsla av att vara varmt välkommen, kunna kika på vad som är på gång och kanske gå vidare och abonnera på sportinnehållet. Dialogen, som fortfarande används i mobilapparna, itererade vi fram i flera omgångar där UX-teamets lead designer slutligen godkände denna version.
.
Onboardingflöde. Här ligger mina första skisser på ett onboardingflöde för att digitalisera abonnenter med kabeltv-abonnemang. Antalet vyer krympte efterhand.
Projektledaren bad om hjälp, jag skissade och skrev, teamets seniora UX-designer gjorde wireframes i Sketch och sedan prototyper i Indesign som jag granskade i Zeplin. Sammanlagt hade vi tre möten om just det här flödet innan vi var nöjda. Vi designade också en attraktiv ingång till flödet på huvudsidan.
Antalet slides minskades från fem till tre i slutversionen tack vare drop-down-listor, utom när användaren gör fel och då hamnar i ett alternativt flöde för att kunna göra klart sitt ärende, då blir der fler.
Onboardingen används på C More för att locka användare att skaffa sig en inloggning även via webben, för att enkelt kunna använda C More och TV4 Play i mobilen, på surfplattan eller på datorn.
Den inledande UX-writing jag tog fram är fortfarande densamma idag, men gränssnittet har ändrats, designen är mörkare och dialogrutor eller pop-over går bort.
Drop-down-lista över operatörer, lätt och snabbt, samma vy på webb som i mobil. Skriv i eller klicka på pilen. Kort, lättfattlig text till hjälp, du ska inte behöva tänka.
Den tredje och sista vyn innan login. Knappen längst ner blir röd när uppgifterna är ifyllda. Snabbt, intuitivt och enkla instruktioner.
.
.
Vad ska det stå i reklamfillern? Beställning: kort copytext, möjlig att läsa på några sekunder.
Funktion: branding och information om att det går att titta reklamfritt med betaltjänsten C More. Förklaring: när du tittar digitalt på tv får du först en vinjett innan reklamen, sedan kommer själva reklamfilmerna, följda av en så kallad reklamfiller – en vinjett som säger något i stil med ”nu börjar vi strax igen”, eftersom reklamavbrottet alltid är lite kortare på webben än på linjär, eller analog, TV.
Just denna reklamfiller skulle nu få ny text, vilket var svårare än väntat. Texten blev mer och mer minimalistisk allteftersom vi insåg att budskapet måste gå att ta till sig inte bara som ord utan också som ordbild. Loggan och så en kort fras som berättar nästan allt på en sekund.
De korta texterna är de svåraste. Ofta ligger det mycket jobb och tid bakom. Vi fick hålla på länge och ta fram många förslag innan alla var nöjda. En av teamets UX-designers skapade slutligen också en animerad pausknapp som roterade in över texten.
.
Användbarhetstester arrangerades regelbundet och vid några tillfällen gjorde jag dokumentationen.
Här har jag dokumenterat ett användbarhetstest för swipefunktioner. Jag har tittat på den video som dokumenterar hur användaren, och den UX:are som ger instruktioner, gjorde testet, skrivit ner deras dialog och lyft fram de viktigaste delarna som går att använda för att dra slutsatser. Testarnas uppdrag var att pröva en del av C Mores uppdaterade streamingapp. Testpersonen får ingen hjälp utan måste själv lista ut hur funktionerna ska användas. Testaren får instruktion om att ”tänka högt”, det vill säga hela tiden berätta vad hen gör och varför, kommentera funktionerna och hur det ser ut i appen, säga vad som är bra respektive dåligt och ge ett sammanfattande omdöme. I det här fallet försöker användaren komma på hur man byter mellan de olika kanalerna. Det visade sig vara så svårt att flera detaljer ändrades efter testet.
.
.
Call to action. Här var uppdraget att sätta text på den röda CTA-knappen som startar uppspelning av en trailer för filmen. Att arbeta med text för olika typer av CTA-knappar hör till UX-teamets arbetsuppgifter och här har jag itererat fram och satt texten. Frågan var vad det bör stå på en knapp som startar en trailer. Vi kom fram till, enligt principen ”make it simple”, att det helt enkelt ska stå ”Se trailer”.
.
Call to action i A/B-test. Här har jag designat en CTA-knapp (call-to-action, längst upp i högre hörnet) som ska locka användare att prova tjänsten C More gratis i två veckor. Vi testade flera olika versioner, den med siffra i var den som ledde till flest slutförda beställningar efter klick. Den används fortfarande, i kombination med andra uppmaningar som ”Prova gratis i två veckor”, ”Prova utan reklam på C More” osv.
.

Ibland är det bråttom. En stor del av arbetet hos BBr utgjordes av att bearbeta översättningar till danska, norska och engelska för C Mores webb, i tätt samarbete med C Mores danska och norska copywriters. Det kunde bli bråttom med att hinna göra korrektur. Ambitionen var förstås att danskar och norrmän ska slippa reta upp sig på onödiga stavfel och felaktig meningsbyggnad. Tack vare mina kunskaper i kod kunde jag snabbt skriva in den danska texten direkt i utvecklarnas js-dokument, och vi kunde hålla vår deadline för deploy. Här har jag jobbat direkt i ett js-dokument för att snabbt kunna lägga in ändringar som redan var publicerade i testmiljö. Bra arbetsmetod när utvecklarna är extremt pressade och har ont om tid.
.
Vad innebär användarvänlighet i framtiden? UX handlar redan till viss del om röstdesign och symboler, men hur bra är UX:arna, marknadsavdelningen och utvecklarna på att använda språket?
Jag faciliterade en workshop om språk och ordbilder med deltagare från UX-teamet, marknad och teknik på Bonnier Broadcasting under vintern 2017 där vi pratade om hur språket utvecklas och förändras i digitala miljöer och hur det används på helt olika sätt på olika plattformar.
Numera når vi människor i de mest intima situationer. De har oss en knapptryckning bort, i telefonen, i sina fickor. Ska språket i våra interface också vara mer intimt och personligt då, eller är det bättre att hålla distans? Vad är bäst ur perspektivet användbarhet? Och ur perspektivet konvertering?
Vi gjorde flera praktiska övningar, bland annat att ta bort alla adjektiv och fundera över vad det gör med en text. Är det bättre med ett avskalat språk än ett som är laddat med värderingar? Sedan diskuterade vi han/hon och hen, samt försvenskade nyord som swajpa (och om vi ska använda mej och dej på sajten). Vi talade också om framtidsperspektiv på hur användare navigerar i våra tjänster (med röst tex). Vi avslutade med att gemensamt iterera fram nya värdegrundsord för TV4 Play och C More, som fortfarande används.