Kort sammendrag

MessageMail er en fiktiv sosial medie-plattform som samler alle innboksene dine på ett sted — Twitter-DM-er, LinkedIn-meldinger, Instagram-chatter og mer.

Utfordringen var å designe en leken og letttilgjengelig landingsside og registreringsflyt som tydelig forklarer produktet, fungerer på alle store skjermstørrelser og oppfordrer brukere til å opprette en konto.

Klienten ønsket:

• En vennlig, morsom tone (unngå altfor seriøst eller corporate uttrykk)

• Bruk av skrifttypen Nunito

• Fleksibel fargeretning (åpen for enhver palett)

• En fungerende prototype for begge sidene på tvers av desktop, nettbrett og mobil

  
  

Prosess

1. Kartlegging og målgruppeanalyse

Jeg startet med å analysere lignende produkter og lekne SaaS-merkevarer (f.eks. Slack, Notion, Hey). Sterke farger, rund typografi og illustrasjonsdrevet historiefortelling var vanlig — perfekt for et produkt som MessageMail som ønsker å føles sosialt og vennlig.

2. Trådskisser og oppsettplanlegging

Jeg utarbeidet trådskisser (wireframes) for både landingssiden og registreringssiden med klare mål:

• Kommunisere produktets kjerneidé raskt

• Lede brukerne gjennom funksjonene med visuell interesse

• Bygge tillit gjennom sosiale bevis (omtaler)

• Oppmuntre til handling med klare, tilgjengelige CTA-er

3. Designsystem og fargeutforskning

Jeg testet en rekke paletter før jeg lande på et lyst, mykt fargeskjema som passet til produktets tone. Deretter bygde jeg et enkelt designsystem med:

• Primær- og sekundærfarger

• Regler for overskrifter og brødtekst med Nunito

• Kort- og knappestiler

• CTA-hierarki
  
  

Designvalg

Hero-seksjon

• To-kolonners oppsett med:

• Skreddersydd illustrasjon for å etablere tonen

• Klar overskrift med et sterkt verdibudskap

• Støttende undertekst og primær CTA

Funksjonsseksjon

Brukt et 3-kolonners rutenett med lekne illustrasjoner for å vise frem kjernefunksjonene (integrasjon av flere innbokser, smarte autosvar og masse-DM-er) på en måte som er lett å skanne og visuelt innbydende.

Kundeomtaler

I stedet for merkevarelogoer eller sitater fra bedrifter, brukte jeg fiktive brukeranmeldelser stylet som kommentarer i sosiale medier, noe som forsterker ideen om at dette er bygget for mennesker, ikke selskaper.

Siste CTA

Til slutt ønsket jeg å legge til enda en CTA på slutten av landingssiden, i et forsøk på å konvertere brukere som er interessert, men som trengte å lære mer først:

Registreringsside

Holdt den ren og minimalistisk. Én kolonne med lyse illustrasjoner, korte skjemafelt og et vennlig språk for å redusere friksjon ved registrering. Inkluderte også valideringsstatus og mikrotekst for økt klarhet.

Mobil og nettbrett

Tilpasset begge sidene for visning på nettbrett og mobil:

• Slo sammen navigasjonsmenyen til en hamburgermeny, men beholdt den viktigste CTA-knappen

• Gjorde om funksjonsseksjonen til en vertikal liste

• Justerte typografi og avstand for bedre lesbarhet

• Forenklet omtaleseksjonen for mindre skjermer

• Opprettet et stablet bunntekst-design

Endelig design

De endelige leveransene inkluderte

• Landingsside (Desktop, nettbrett, mobil)

• Registreringsside

• Interaktiv prototype i Figma

• Gjenbrukbare komponenter og designsystem

  
  

Refleksjon

Jeg lærte mye, inkludert:

• Hvordan man skreddersyr innhold og visuelle elementer for å matche målgruppens tone og forventninger

• Viktigheten av en klar UX-struktur når man tilpasser mellom ulike skjermstørrelser

• Hvordan mikrointeraksjoner, tonefall og oppsett samspiller for å lede brukere mot konvertering

• Hvordan bruke illustrasjon og luftrom (whitespace) til å balansere personlighet og brukervennlighet

• Fortsatte å spisse designferdighetene mine når det gjelder design av landingssider, og hvordan man effektivt kommuniserer produktets idé til sluttbrukeren på en måte som maksimerer konverteringer.