NFC-säkerhetsarmband

BuddyTag

Live

BuddyTag tillverkar NFC-trygghetsarmband för barn och äldre – ett snabbt blipp med valfri mobil når rätt person på några sekunder. Jag fick deras gamla sajt i handen och byggde om den från grunden till en komplett flersidig webbplats som känns både lekfull och trygg. Nu är den live på buddytag.se, på svenska och engelska.

HTML5 & CSS3 Ren JavaScript Flersidig webbplats Tvåspråkig (SV/EN) SVG-baserat varumärke SEO & strukturerad data Säkerhetshärdad Tillgänglig Netlify UX/UI-design
Besök sajten live

Utmaningen

En trygghetsprodukt måste klara en balansgång: kännas varm och vänlig, men samtidigt inge verkligt förtroende – och göra en teknisk lösning begriplig på direkten. Sajten behövde visa hur armbandet fungerar med en blick, göra nyttan självklar och varsamt lotsa besökaren mot köp, utan att någonsin kännas klinisk.

Det jag gjorde

Jag byggde om hela sajten och formade varumärket kring den: rena, skalbara SVG-logotyper byggda på BuddyTags signaturröda, ett enhetligt visuellt språk och ett "så fungerar det"-flöde som får tekniken att falla på plats på sekunder. Deras gamla sajt var en handfull sidor; jag utökade den till en riktig flersidig webbplats – en berättande startsida, egna spår för varje målgrupp, en segmenterad prisstruktur, en fördjupad FAQ och mer därtill. Kunden skrev det mesta av texten; designen, strukturen, informationsarkitekturen och hur berättelsen vecklar ut sig är mina – lugnare, tryggare och konsekvent från startsidan ner till minsta detalj. Byggd på svenska och engelska, och nu live.

Inuti sajten

Det är en bred sajt, och varje del fyller sin funktion:

  • En startsida som öppnar med ett verkligt scenario – ett barn kommer bort på en skolutflykt – och tar dig steg för steg genom exakt vad som händer sedan, med en kort introfilm i en tillgänglig spelare direkt på sidan.
  • Fyra målgruppsspår – förskola, skola, äldreomsorg och privatpersoner – där var och en tilltalas med sina egna ord på en särskild Varför BuddyTag-sida.
  • Segmenterad prissättning: en prissida som förgrenar sig till skräddarsydda sidor för varje målgrupp, så att skolor, förskolor, äldreomsorg och privatköpare bara ser det som är relevant för dem.
  • En fördjupad FAQ, indelad i tydliga teman: hur det fungerar, tekniken bakom, integritet & GDPR, material, vem det passar, beställning och hur det står sig mot en GPS-klocka.
  • En om-oss-/historiksida som presenterar människorna bakom produkten, en kundsida med tidig feedback från pilotskolor och en kontaktsida med ett fungerande, spamskyddat formulär – plus integritetspolicy, en trevlig tack-sida och en egen 404.

Varje sida finns på både svenska och engelska – både text och bild.

Bakom kulisserna

Det du inte ser gör minst lika mycket nytta som det du ser:

  • Lättare att hitta på Google. Sajten är byggd så som sökmotorer gillar att läsa den – tydliga signaler på varje sida, en komplett sitemap och rena webbadresser – så att BuddyTag har en verklig chans att ranka bra och synas när människor söker på trygghet för barn och äldre. Länkar visar dessutom rätt rubrik och bild när de delas på sociala medier eller i ett meddelande.
  • Snabb i varje mobil. Optimerade bilder, typsnitt som serveras direkt från sajten och inget onödigt som laddas i bakgrunden gör att sidorna dyker upp snabbt, även på en svag uppkoppling. Besökarna ger inte upp och lämnar – och Google ger snabba sajter ett rankinglyft också.
  • Säker och privat från grunden. Strikta säkerhetsinställningar skyddar sajten och alla som besöker den, helt utan spårning – precis vad man vill ha av ett varumärke byggt kring barns trygghet och integritet. Säkra sajter inger också mer förtroende, både hos besökare och hos Google.
  • Svenska och engelska, direkt. Hela sajten – både ord och bilder – byter språk med ett knapptryck, så att internationella skolor och engelsktalande familjer får samma genomarbetade upplevelse som alla andra.
  • Fungerar för alla. Den går att använda fullt ut med tangentbord och med skärmläsare, så att ingen besökare stängs ute – och samma rena, välstrukturerade kod hjälper dessutom sökmotorerna att förstå sajten.
  • Förfrågningar hanteras tryggt. Kontaktformuläret har inbyggt spamskydd och en tydlig integritetsnotis, och meddelanden går direkt till BuddyTag utan att passera någon utomstående tjänst.
  • Redo att växa. Den kan till och med sparas på mobilens hemskärm som en app, och den är byggd så pass städat att nya sidor och funktioner kan läggas till senare utan att börja om.

Mest stolt över

Att ta en allvarlig trygghetsprodukt och ge den en sajt som känns genuint vänlig och mänsklig – samtidigt som tekniken faller på plats på bara några sekunder.

Utvalda vyer — desktop och mobil

buddytag.se
BuddyTags startsida i en desktop-webbläsare, som rullar genom hela sidan
Startsida · Desktop
BuddyTags startsida på en telefon, som rullar genom hela sidan
Startsida · Mobil
buddytag.se/why
Sidan «Varför BuddyTag» i en desktop-webbläsare, som rullar genom hela sidan
Varför BuddyTag · Desktop
Sidan «Varför BuddyTag» på en telefon, som rullar genom hela sidan
Varför BuddyTag · Mobil

Den ursprungliga sajten — före min omdesign

Den nya designen är nu live. Skärmbilderna ovan är sajten så som den ser ut idag; nedan syns den ursprungliga designen jag togs in för att ersätta.

buddytag.se · original design
BuddyTags ursprungliga webbdesign, före omdesignen
Den ursprungliga sajten (före)
← Tillbaka till portfolion