UX-DESIGN / WEBBUTVECKLING FÖR ATTENTION

Beställare: Riksförbundet Attention, som arbetar med frågor som rör personer med neuropsykiatriska funktionsnedsättningar (npf) och är en del av funktionsrättsrörelsen.

Utmaning: Förbundet behövde förnya sin mycket välbesökta webbplats på flera sätt. Behoven var flera. Huvudsajten hade inte SSL installerat. Menyerna var ostrukturerade. Redaktionellt ansvariga ville rensa bort och uppdatera gammalt material och sortera upp innehållet mer logiskt. Marknadsansvariga ville förbättra onboarding av nya medlemmar och uppdatera den webbshop som låg inbäddad i sajten. Det fanns också ett tydligt behov av att förnya webbplatsens backend där det låg ett gammalt arv av kod, som uppdaterats i omgångar, av olika utvecklare, sedan 2011. Dessutom behövde andra digitala plattformar som förbundet hanterar ses över, samt i vissa fall få säkrad funktionalitet.

Min roll: Jag fick i uppdrag att modernisera huvudsajtens innehåll och struktur, samt att se över förbundets samtliga digitala plattformar, bilder och texter. Initierade en omgörning av webbplatsen attention.se och övriga webbplatser (de flesta är projektsajter). Ledde arbetet med att separera webbshopen till en egen underdomän, i samarbete med en extern utvecklare. Ledde arbetet med att uppdatera backend för huvudsajten, förenkla menyerna, förbättra tillgängligheten med ”Talande webb”, förbättra onboarding av nya medlemmar.

Designarbete: Jag designade och genomförde research kring användarna och deras behov samt kartlade deras användarresor. Använde researchen för att genomföra förbättringar, lite i taget, samt mätte resultatet via Google Analytics. Resultatet var att vi minskade avvisningsfrekvens och churn, ökade den tid besökarna stannar på sajten, ökade antalet återvändande besökare, antalet totala besökare och antalet följare på FB, mm.
Jag designade också wireframes för en sms-kampanj där målet var win-back av tidigare medlemmar. Tog fram personaliserade sms med länk till en färdig landningssida för enkel återregistrering med färdigifyllt namn, samt möjlighet till omgående betalning av medlemsavgiften via Swish eller bankkort, i samarbete med utvecklare. Designade också en hashtag för kampanjer i sociala medier, #kämpainteensam, mm.

Workshops: Jag designade samt höll i flera workshops.
• Kommunikationsteamet fick pröva nya metoder för att arbeta systematiskt med sociala medier, med målet att få större publik och mer engagemang. Bland använde vi programvara för att lägga text i bilder, samt för att skapa rörliga bilder i Adobe Premiere, Adobe Rush och Adobe Spark. Resultatet blev att teamet fick nya verktyg att arbeta med och ny pepp.
• Ett projektteam behövde hjälp med att strukturera upp och bestämma vad som skulle bli deras digitala slutprodukt. Jag designade en timeline för deras process, höll i en hel dags workshop där vi tog fram målgruppernas personas, tog fram idéer, utvecklade, samt valde ut de bästa idéerna för slutprodukten. Teamet kom fram till att slutresultatet skulle vara en engagerande och lite annorlunda hemsida med mycket visuell information samt många både ”hårda” och ”mjuka” argument för varför alla unga måste få vara med och idrotta. Målet med sidan var att kunna använda den som tankeväckande och återbesökbar presentation under föreläsningar för olika kategorier av beslutsfattare, istället för en pdf eller powerpoint. Vi följde också upp med en kortare workshop några veckor senare för att kolla att alla var på samma spår och att arbetet mot leverans flöt på som planerat.
Jag satte upp en underdomän för sidan, som en framtidssäkring, dvs för att ingen skulle råka glömma bort att betala för domänen. Återstående utvecklingsarbete gjordes sedan i samarbete med Funka. Resultatet finns här: fritid.attention.se

Rekommendationer för framtiden: Ett av de arbeten jag inte hann genomföra, men starkt rekommenderade Attention att genomföra, var att samla alla förbundets lokala sajter under toppdomänen attention.se, dvs att antingen ge dem adresser på underdomäner med egen inlogg eller samla dem i en WordPress multisajt, istället för att varje lokalförening (det finns cirka 60) ska ha sin helt egna domänadress, vilket dels kostar förbundet väldigt mycket, dels är väldigt opraktiskt och administrativt betungande.
Ett annat problem som behövde adresseras inför framtiden var utdaterade länkar till sajten från många andra platser. Förbundet hade när jag kom in relativt nyligen genomfört en ändring av huvudsajtens webbadress. Det låg kvar mycket trafik till den gamla domänen, eftersom många myndigheter, institutioner, vård och omsorg som ville kunna hänvisa till förbundets informations- och kunskapssidor hade kvar sina gamla länkar. Informationen om domänbytet hade helt enkelt inte slagit igenom. Jag arbetade med re-direct och information till webbansvariga hos andra organisationer men hann inte genomföra alla de åtgärder som behövdes för att informationen skulle gå fram till alla.
Jag rekommenderade också att onboarding av nya medlemmar skulle ligga på förbundets egen domän för att vara mätbar. Då jag avslutade mitt uppdrag skötte den entreprenör som hade hand om medlemsregistret all onboarding via en egen domän (och ett gränssnitt som inte var särskilt väl designat) där förbundet måste betala extra för information om tex hur många som går in på sidorna utan att fullfölja. Det projekt för win-back av tidigare medlemmar som jag designade använde sig av den egna domänen och vi kunde då ta fram tydliga siffror över hur många som besökt formuläret, hur många som faktiskt genomfört en återregistrering och hur många som inte agerade alls på länkten i det sms de fick.

Resultat: När mitt uppdrag för Attention avslutades hade sajten haft över en miljon besök på sajtens sidor under det närmast föregående året. Huvudsajten var någorlunda framtidssäkrad genom uppdateringen och jag hade beställt en funktion av utvecklaren som gör att gamla adresser ligger kvar med en re-direct till nya sidor när de ersätts. Det fanns alltså fortfarande massor kvar att göra digitalt, men förbundet tvingades av ekonomiska skäl fatta beslutet att minska kostnaderna under 2019-2020. En av de åtgärder som beslutades var att inte arbeta mer med digital utveckling. Men vem vet, kanske jag får möjlighet att återvända och fortsätta arbetet, eftersom uppdraget avslutades i god stämning och uppdragsgivaren var väldigt nöjd med min insats.

När: Arbetet pågick från juli 2018 till mars 2019.

Länk: https://attention.se

Referens: Kanslichef Arne Kanth.

**Användarundersökning.** Research där besökarna fick svara på ett antal frågor kring vilka de är, varför de besökte sajten, om de hittat vad de sökte, om de tyckte att det var lätt att hitta det, osv. Med utgångspunkt från svaren samt analys av användarresor genomförde vi en rad små förbättringar på sajten. Bland annat la vi till funktioner som i mobil visar länkar till mer material i botten på skärmen efter varje artikel, för att ge besökaren impuls/möjlighet att stanna kvar på sajten och fortsätta läsningen på andra sidor.
.
.

talande webb — **Accessibility.** En av de saker vi arbetade med under omgörningen var att förbättra tillgängligheten på webbplatsen. Här berättar vi om funktionen ”Talande webb” som sajten anslöts till, under rubriken ”Våra digitala plattformar”, där det också ligger särskilda sidor för information om cookie-poliy och GDPR, samt om förbundets strategi framåt för webbplatsen. *De sidor jag skapade ligger fortfarande kvar.*
.
.

**Tydlighet.** Uppdragsgivaren hade ett mycket starkt önskemål om att behålla sajtens tidigare design. Men det var ändå möjligt att genomföra några mindre förändringar. CTA-knapparna på förstasidan ger nu i mobilen, där de syns i fyrkantigt format, bättre möjlighet till översikt av innehållet på sajten samtidigt som de fortfarande är tillräckligt stora för god tillgänglighet. Innan omgörningen låg knapparna som hela block tvärs över skärmen och data visade att en väldigt liten andel av besökarna orkade scrolla ner för att ta del av artikelrubriker och videor.
*För att sajten skulle locka till att scrolla nedåt (förändringen syns särskilt i mobil) minskade jag storleken på symbolerna i call-to-actionknapparna* under huvudbilden på förstasidan, i första hand med syftet att innehållet under ska skymta när sidan laddas in. Vi minskade alltså höjden och skapade en mer avrundad design.
Den del av headern som innehåller login-funktioner fick en ny cta-knapp med texten ”Bli medlem” och en ikon som ser ut som ett hjärta. Denna cta länkade först till det externa medlemsregistret. Men när vi förbättrade datainformationen inför en win-backkampanj fick länken en egen undersida på sajten för att vi skulle kunna samla information om hur många som loggade vidare dit och hur många som faktiskt gick vidare och blev medlemmar. Menyerna strukturerades om för att bli mer logiska och framför allt fick mittsektionens artikelflöde en omgörning (se nästa bild).
.
.

**Mittsektionen av förstasidan.** *Artikelströmmen till vänster gjordes om och fick tumnagelbilder för att kunna konkurrera med videoposterna till höger* (syns även tydligt i mobilen). Jag såg också till att när användaren har scrollat ner till slutet av en text, så finns det alltid något att klicka sig vidare på, en liten åtgärd som tydligt bidrog till att öka tiden användarna stannade på sajten.
.
.

menyer — **Menystruktur.** Här hade jag velat hinna göra mer. Menyn hade hängt med länge och kändes väldigt tung, särskilt i mobilen. Men organisationen ville att det skulle se ut som tidigare så att alla skulle kunna känna igen sig och var inte positiv till förändringar. Istället för en stor förändring i samband med uppgraderingen av backend gjorde vi därför bara en mindre, där vi flyttade om innehåll, samt skapade nya avdelningar och sidor för att samla innehåll, så strukturen skulle kännas mer logisk.
.
.

Menyn i mobilen och sidfoten där vi moderniserade med små åtgärder – länkarna ”Gåvor via Swish”, ”Minnesgåvor”, ”Boka SJ-resor” och ”Bli medlem”.
.
.

**Banner** Förutom SSL (för https och säker webbplats) var en banner (nederst) och en sida för för cookiepolicy och GDPR bland det första jag åtgärdade på webbplatsen. Bannern försvinner när man scrollar, men återkommer vid varje besök så länge man inte klickar i ”OK”.
.
.

webbutik i ram — **Webbutik.** Bland det sista jag hann göra tillsammans med den externa utvecklare som verkligen kände sajten väl sedan tidigare, var att förbereda migration av butiken till en egen underdomän. Butiken lyftes ut och byggdes om med Storefront och Woocommerce i ett mycket säkrare format, medan huvudsajten moderniserades självständigt med ett WordPressramverk i Xampp och en överbyggnad i Sass. Slutligen satte vi också upp mätning med Google Analytics för butikens sidor. Tyvärr kunde jag inte vara med ända fram till avslut.
.
.

win back kampanj — **Win-back kampanj.** Jag ledde designarbetet i en kampanj för win-back av tidigare medlemmar genom utskick av personaliserade sms. Formuleringen som skulle stå i sms:et togs fram i en workshop med ett tvärfunktionellt team. Jag skissade upp wireframes för formulären och en utvecklare från en extern firma programmerade den kod som jag lade på vår domän (för mätbarhet via Google Analytics). Sedan tog vi fram en möjlighet att personalisera utskicket, genom att generera unika länkar för varje sms så att det skulle gå att ”känna igen” den som kom till formuläret och veta vilka som reagerat på sms:et. Via Analytics kunde vi se om de besökare som kom till formuläret genomförde köp av medlemskap, eller hoppade av innan, osv. På det här sättet återvanns ett stort antal medlemmar, som hade avregistrerats i samband med den pågående moderniseringen av förbundets medlemsregister. Insatsen bar sina egna kostnader och gav värdefulla insikter.
.
.

bli medlem sida — **Sidan för att teckna medlemsskap** moderniserades med feta rubriker i rött och ny mer lättläst text, samt kopplades som ytterligare ett steg i win-back kampanjen *till knappen ”bli medlem”* i headern.

facilitering — **Facilitering av designprocess.** Jag ledde processen kring designen av en digital slutprodukt för ett projekt om idrott, som skulle presenteras efter att jag hade slutat. Jag inledde med en hel dags workshop för projektteamet – där vi hade kul och itererade på idéer för slutprodukten. Vi tog fram personas för målgrupper, värdeord, *idéer till innehåll,* vad slutprodukten skulle förmedla och vad den INTE skulle förmedla, hur den skulle användas, mm. Den bärande idén var att den skulle kunna användas som ett underlag för inspiration för olika sorters beslutsfattare. När teamet konstaterade att de ville göra en sajt, satte jag upp en *subdomän under förbundets huvuddomän*. Jag lämnade senare över resultatet till de som tog över arbetet när jag slutade och som jag var med och upphandlade – byrån **Funka**. Sajten ligger här: https://fritid.attention .se/
.
.

Den färdiga idrottssajten lanserades av projektet Idrott för alla, ligger fortfarande kvar på nätet och kan användas för information om vinsten i att satsa på åtgärder för meningsfull fritid för alla barn.

**Strategiskt arbete i sociala medier.** Genom medvetet arbete med regelbundna publiceringar på förbundets Facebooksida, inte bara texter om Attention utan också nyheter om NPF i andra sammanhang, har publiken börjat se sidan som en nyhetskälla. Många följare delar inläggen vidare och många kommenterar. Med hänsyn tagen till FB:s algoritmer och de tider då följarna enligt statistiken besöker sidan flitigast har publiceringstakten landat i omkring två intressanta inlägg om dagen. Ett vid 6-7 tiden på morgonen och ett vid 15-tiden på eftermiddagen. Eller, vilket har hänt relativt sällan, inget alls, om det inte funnits något nytt att berätta.
**Den ökade trafiken** på Facebook medförde också ökad trafik från FB till Attentions webbplats och därmed större möjligheter att få veta mer om användarna, samt att mäta och analysera deras beteenden på sajten. De verktyg jag arbetade med här var Google Analytics och FB analytics. *Antalet följare ökade med över två tusen under vintern* 2018-2019 och tiden användarna stannade på sajten ökade från runt en minut till nära tre minuter.
.
.

**I rollen som kommunikatör producerade** jag en rad korta videofilmer för både webb och sociala medier, gjorda i Adobe Premiere, Premiere Rush och Adobe Spark. Målgrupp var de som besöker Attentions sociala medier och filmerna kombinerades med länkar till nyhetsflödet på organisationens webbplats. **Julkrönikan** var en av de mest delade under året på Facebook (se bilden i föregående exempel). Filmen som hörde till delades även på Instagram (förrförra bilden). Ett annat exempel på den typ av texter som väckt mycket engagemang är min artikel **Kämpa inte ensam med NPF i skolan.** Artikeln sammanställer fakta om rättigheter och möjligheter i situationer då skolgången har blivit komplicerad och vardagen svår att hantera för familjer med barn som har NPF, neuropsykiatriska funktionsnedsättningar.
.
.

jag framför anslagstavla — **Överlämning och slutrapport.** När jag slutade på Attention fanns det mycket att lämna över, men ingen webbansvarig att lämna över till. Förbundet hade bestämt sig för att inte ha någon webmaster anställd. Därför sammanställde jag en gedigen dokumentation över de digitala plattformarna, hur de var byggda, var de ligger och hur man kommer åt dem, på ett så enkelt språk som möjligt för att även icke-tekniker skulle kunna förstå innehållet. Inkluderat var en historik över antalet besökare och besökarprofilerna, hur de förändrades under den tid jag var där och på de olika plattformarna, kombinerat med en del rekommendationer inför framtiden.