UX, UI, React, Node, MedTech

Breas

Care at home.

Breas är ledande i branschen för andningshjälpmedel i vardagen. Breas teknik förbättrar livskvaliteten och egenvården för tusentals patienter runt om i hela världen.
När vi designade och utvecklade nya breas.com var det viktigt att spegla företagets positionering på marknaden i USA, Europa och Asien; Breas står för ett personligt engagemang, innovation och hög kvalitet.

Fokus på produkterna

Screenshot from Breas website, section titled "Small size, BIG help"

Screenshot from Breas website, section titled "Product range"

Screenshot from Breas website, sections titled "Take a deep breath" and "Second generation"

Screenshot from Breas website, product named "VIVO3"

Trygg design

Vi fokuserade på att ta fram en tillgänglig design som lyfter produkterna på ett tydligt sätt. Designen bygger på återanvändbara block där redaktören har frihet att fylla på med aktuellt produktinnehåll. Vi designade en guidande site som gör det lätt att jämföra olika produkter och lära sig mer om dess skillnader. På siten kan man jämföra olika produkter med varandra för att få förståelse olika funktionalitet i utbudet. Vi tog fram ett cirkulärt flöde som gör det enkelt att utforska Breas värld.

Ren design. Stärkt varumärke.

Designen är ren, avskalad, konkret och med en informativ produktpresentation. Tydliga kontraster ökar tillgängligheten där vi samtidigt lyfter fram Breas designmanér som stärker varumärket. Med en avskalad minimalistisk design läggs fokus på Breas produkter.

Typografi

Gotham Rounded Medium

ABCDEFGHIJKLMNOPQRSTUVXYZÅÄÖabcdefghijklmnopqrstuvxyzåäö1234567890 !”#€%&/()=

Gotham Rounded Book

ABCDEFGHIJKLMNOPQRSTUVXYZÅÄÖabcdefghijklmnopqrstuvxyzåäö1234567890 !”#€%&/()=

Färger

Ikoner

En guidande design

Screenshot from Breas website on a phone, page titled "Care at home"

Screenshot from Breas website on a phone, product named "VIVO3"

Screenshot from Breas website on a phone, page titled "Accessories"

Webbutveckling med fokus på tillgänglighet

Breas.com är utvecklad i dagens mest använda webbramverk React. För att få ner laddningstider och ge en ännu bättre användarupplevelse valde vi även Next.js.
Dessutom har vi lagt stort fokus på tillgänglighet. Att öka läsbarhet, jobba med bra kontraster och kunna ge stöd för textuppläsning ger även bieffekten att webbsidan presterar väldigt bra ur ett SEO perspektiv.
Breas.com är hostad på Vercel. Vercel erbjuder enkel uppsättning av Next.js projekt och har ett eget Content Delivery Network (CDN) som speglar webbsidan i olika regioner över hela världen. Detta gör laddningstider kortas ner avsevärt för Breas kunder, oavsett var de befinner sig i världen.

Utforska Breas värld

Screenshot from Breas website, products named "Vivo 2", "Vivo 55", "Vivo 65"

Screenshot from Breas website, page titled "About BREAS"

Screenshot from Breas website, page titled "Accessories"

Ett flexibelt CMS för en global marknad

Breas önskemål var att centralisera redaktörskapet för alla marknader. Istället för att ha ett CMS per marknad valde vi att sätta upp ett headless CMS där allt innehåll samlas på ett och samma ställe. Efter en teknisk granskning föll valet på Strapi CMS. Strapi är ett open-source CMS som enkelt hostas bland Breas befintliga molntjänster i Microsoft Azure. I Strapi ingår dessutom en väldigt flexibel rollbaserad behörighetshantering.
Breas använder SharePoint för att lagra manualer, specifikationer och annan information kring deras medicinska produkter. För att kunna återanvända dessa dokument på webbsidan har vi skapat en integration mot SharePoint.

Med hjälp av Strapis plugin-system kunde vi dessutom jacka in en översättningstjänst som erbjuder översättning till ett nytt språk. Marknadsansvariga i de nya länderna kan nu jobba vidare på översatt innehåll och får därmed ett väldigt bra utgångsläge för att korta ner sin time-to-market.