Så byggde vi Contingo: fem tjänster, fem egna uttryck

Vi behövde ett arbete vi kunde visa

Vi har arbetat på uppdrag av större byråer, och leveranserna gick ut under deras namn. Erfarenheten fanns, men vi kunde inte visa projekten som våra egna.

Vår egen webbplats blev därför uppdraget. Den skulle visa hur vi arbetar med innehåll, form och teknik, med exempel som går att prova på sidorna om SEO och AI. Ett första samtal med oss kan då börja i något besökaren redan har sett.

Vi har gjort arbetet själva, från research och form till kod. Koden är skriven i Cursor. Bilderna har bearbetats i Photoshop och Illustrator, och med Codex gav vi dem vår egen stil. Flytten av webbplatsen till Astro gjorde vi med hjälp av Claude.

Malin har haft stor del i texternas riktning. Hon har svenska som modersmål och ett stort intresse för språk. Vårt första förslag till slogan var ”En webbplats som inte hittas är inte bättre än ingen webbplats alls”. Malin styrde oss klokt nog åt ett annat håll.

Mycket av arbetet bestod av beslut som bara kunde fattas med sidan framför oss: vilken fråga en sektion ska besvara, vad som ska synas först och när en idé behöver göras om.

Portfolioinlägget om Contingo visar resultatet. Den här texten handlar om besluten.

Startsidan: nästan tio versioner

Startsidans öppning tog längre tid än något annat på webbplatsen. Vi gjorde nästan tio versioner innan vi bestämde oss.

De tidiga versionerna byggde på en animerad sektion som visade hur en webbplats klättrar i sökresultaten. Den knöt startsidan för hårt till SEO.

Samtidigt lade vi mycket tid på research för att hitta bilder med tydliga användningsrättigheter. När vi hittade Patrik Stoltz fotografi av Malmö och Turning Torso förstod vi att det kunde ändra hela riktningen.

Den version vi valde är den enklaste: fotografiet, rubriken ”Rätt riktning. Hela vägen.” och en blå linje genom bilden. Lärdomen var att en stark bild kan säga mer än avancerade animationer, särskilt när man vill visa kompetens och självförtroende.

Arbetet har fortsatt efter lanseringen. Fotografiet har blivit ljusare, och på breda skärmar visas nu ett panorama så att bilden når ända ut till skärmens kanter.

Fem sidor som känns olika

Webb, SEO, marknadsföring, AI och rådgivning börjar i olika frågor. En besökare vill kanske ha en tydligare webbplats eller nå kunder på fler orter. En annan vill få bort ett arbetsmoment som tar för lång tid. Det styrde både ordningen på innehållet och hur varje sida skulle kännas att kliva in på.

Navigationen, typografin och kontaktvägarna är desamma överallt. Inom den ramen fick varje tjänst en egen färg och egna bildmiljöer. Öppningarna var svårast. Där lade vi mest research och gjorde flest omtag innan riktningen satt.

Marknadsföring fick arkitektoniskt djup och violetta accenter. AI utgår från en arbetsplats med magenta glas. Rådgivning har ett ljusare arbetsbord och vinrött glas, och där kommer frågorna om mål och nuläge före valet av lösning. På tjänsteöversikten står alla fem bredvid varandra, så att besökaren kan jämföra.

Research som slutar i ett beslut

Vi studerade hur andra webbplatser arbetar med skala och komposition och läste publicerad vägledning om läsning och interaktion. Det avgörande testet gjorde vi ändå i vår egen sida: passar lösningen vårt innehåll?

Bilderna till SEO-sidan visar hur det gick till. Vi ville ha en bild med svensk platskänsla, plats åt rubriken och ett motiv som klarar mobilens utsnitt. Vi jämförde ett tjugotal fotografier och valde en gatuvy. Platsen var inte avgörande för valet, men fotografiet är taget i Lund, och eftersom Lund är vår grannstad valde vi att nämna det på sidan. Det visar samtidigt att SEO kan nå längre än den egna orten.

En bild av ritningar och mätverktyg fanns med i planen för avsnittet om samarbete. Vi strök den, eftersom texten och prioriteringsplanen redan förklarade samma sak.

Omtagen som gjorde skillnad

På tjänstesidorna visade det sig först i själva sidan, med riktig text, bilder och rörelse, om en riktning höll. Tre ändringar var särskilt viktiga.

I varje fall gick vi tillbaka till vad avsnittet skulle åstadkomma. På SEO behövdes mer bild, på AI färre exempel och på marknadsföringssidan mindre rörelse.

Bilden måste fungera i sidan

Ett fint motiv räckte inte. Rubriken måste få plats och det viktiga i bilden måste överleva mobilens utsnitt. På stora skärmar satte vi en gräns för hur stor bilden får bli, så att en detalj inte växer över hela kompositionen.

Glaset går igen på alla tjänstesidor, i en egen färg för varje tjänst. Det måste se ut som ett material i rummet, med reflexer och en skugga där det vilar. I trappbilden låg kulan först för nära kanten. När den flyttades en bit in såg den ut att vila på steget.

Vi har blandat fotografier och AI-bearbetade bilder. Originalen sparas och varje ny version får ett eget filnamn, så att vi kan gå tillbaka när en bearbetning gör bilden sämre.

Låt besökaren prova själv

På Webb och SEO kan besökaren ändra en sak och se vad det betyder.

På Webb följer samma exempel med genom tre lägen: Struktur, Kod och Upplevelse. Man ser vad som tillkommer när en skiss blir ett gränssnitt. Kodläget gjorde vi om så att det behåller strukturens form, med koden på rätt plats.

På SEO ändrar man marknaden. Kartan går från Malmö till resten av Sverige, Europa och världen, och visar vad en större marknad kräver av innehållet.

AI-sidans exempel på ett arbetsflöde skiljer på vad som kommer från underlaget, vad AI föreslår och vad en människa måste granska. Ingen AI körs på sidan, och inga beställningar skickas.

De stora animationerna går att pausa eller styra för hand. W3C:s vägledning om animation från interaktion förklarar varför det behövs, och det gäller också en webbplats där rörelsen är en stor del av uttrycket.

Insikter blev en kunskapsbank

I det första utkastet till Insikter ledde alla sex artikelkort till kontaktsidan. Den som klickade på en rubrik fick alltså inte läsa det som kortet lovade. Därför fick varje artikel en egen adress och samma grundstruktur: ett kort svar, avsnitt, källor och vägar vidare.

Insikter är en gemensam kunskapsbank för både potentiella kunder och praktiker, med tre samlingar: Artiklar, Research och Case studies. Samlingen talar om vilken sorts text man öppnar, och ämnet, till exempel Webb eller SEO, hjälper läsaren att hitta rätt fråga. Utvalda texter kan lyftas fram oavsett samling.

Frågan var hur både den som beställer och den som bygger ska hitta rätt i samma text. Nielsen Norman Groups studie av hur läsare skannar mellan rubriker talar för beskrivande rubriker och tydligt grupperat innehåll. Googles vägledning om hjälpsamt innehåll lyfter eget värde, tydliga källor och erfarenhet. För oss blev det en redaktionell fråga inför varje text: vad kan läsaren få veta här som vi faktiskt kan bidra med?

Den här artikeln är den första. Texter om webb, AI, sökbeteenden och användbarhet är planerade och publiceras efter hand. Om strukturen fungerar för våra läsare vet vi inte än.

Samma sida på alla skärmar

Mobilen ändrade mer än textstorleken. På tjänsteöversikten fick valen en annan ordning, och på stora skärmar satte vi gränser för hur mycket bilder och innehåll får växa.

Under variationen finns gemensamma delar: navigation, sidfot och byggstenar för artiklar. En ny artikel kan få en form som passar innehållet utan att läsaren behöver lära sig ett nytt gränssnitt.

Efter lanseringen

Vi siktade på lansering den 15 september, och en vecka innan bedömde vi att webbplatsen var klar. Vid den sista genomgången behövde vi ändå ta bort en del. Två av de kundprojekt vi arbetar med väntade på kundernas slutgodkännande, och vi hade därför ett kundcase i stället för de tre vi hade planerat.

Vi valde att vänta några dagar, ifall projekten skulle hinna bli klara, och använde tiden till att förfina webbplatsen och arbeta vidare med SEO. De blev inte klara i tid. Webbplatsen lanserades den 19 september med kundprojektet BoredSEO och vår egen webbplats i portfolion. De två andra kundwebbplatserna och ett internt verktyg visas som suddiga förhandsvyer och publiceras när de är klara.

Före lanseringen gick vi igenom länkar, bilder, läsordning, tangentbordsstyrning och pausfunktioner på mobil, surfplatta, dator och stor skärm.

Sådana kontroller hittar fel i det vi har byggt. Om en ny besökare förstår erbjudandet, eller om webbplatsen leder till fler bra samtal, vet vi inte än. Vänner och kollegor som har sett förhandsversioner har varit positiva, men det är hur besökare utanför den kretsen använder webbplatsen som visar om den fungerar.

Det vi tar med oss är att besluten blev bättre när vi kunde pröva dem: läsa rubriken i sitt utsnitt, följa arbetsflödet steg för steg, öppna sidan på mobilen. Då kunde vi diskutera det vi faktiskt såg.

Om ungefär en månad återkommer vi med vad de första besökarna har visat oss.