Produktidentitet · UX/UI · Webudvikling

Dermaexel Anti-Estrias

Exelderma · Dermokosmetik

En produktudvidelses-MVP, der omsatte Dermaexels videnskabelige positionering til en selvstændig emballageidentitet, en responsiv informationsplatform og et sammenhængende kommunikationssystem til lancering.

Dermaexel Anti-Estrias product tube and packaging in a bathroom setting
Projektet

Dermaexel Anti-Estrias blev udviklet som et nyt dermokosmetisk produkt i Exeldermas portefølje. Opgaven var at udvide den etablerede Dermaexel-identitet med et tydeligt produktfokus uden at miste den visuelle troværdighed og seriøsitet, som allerede var forbundet med hovedbrandet. Formlen samler Growth Factors Complex med hyaluronsyre og C-vitamin i en tredelt produktfortælling, der skulle være let at forstå og konsistent på tværs af emballage og digitale kontaktpunkter.

Projektet begyndte med en produktmockup og udviklede sig til et lanceringsklart system for et produkt, som Exelderma efterfølgende introducerede på markedet. Informationsarkitektur, mid-fidelity-wireframes og responsive UI-komponenter blev anvendt til at strukturere produktinformation, årsager og forebyggelse, faglige studier, resultater og kontakt- og købsmuligheder i en klar brugerrejse.

Den digitale løsning blev koblet til de eksisterende sociale kanaler og den onlinebutik, der var etableret i det første Dermaexel-projekt. Implementeringen omfattede et PHP-baseret webmiljø med HTML5, CSS3, JavaScript, MySQL og phpMyAdmin samt opsætning af hosting, cPanel, DNS, FTP, HTTPS/SSL og produktionsmiljøet.

UX/UI-proces

Fagligt indhold struktureret før det visuelle design.

Mid-fidelity-wireframes definerede hierarki, navigation, indholdsrelationer og de vigtigste brugerflows, før farver, billeder og brandkomponenter blev introduceret i den endelige grænseflade.

Dermaexel Anti-Estrias mid-fidelity website wireframes
Responsiv oplevelse

En responsiv produktplatform bygget omkring klarhed og tillid.

Det færdige website organiserer produktets tre hovedkomponenter, information om strækmærker, faglige studier, visuelle resultater, kontakt og køb i en sammenhængende oplevelse på desktop, tablet og mobil.

Dermaexel Anti-Estrias responsive website interface
Teknisk implementering

Infrastruktur og implementering forberedt til stabil drift.

Projektet omfattede både front-end, servermiljø, databaseadministration og deployment, så designet kunne fungere som en reel produktplatform frem for en isoleret visuel prototype.

HTML5 + CSS3 + JavaScriptResponsiv grænseflade, semantisk struktur og interaktion
PHP + MySQLServerbehandling og strukturerede indholdsdata
phpMyAdminDatabaseadministration og miljøkontrol
cPanel + DNS + FTP + SSLHosting, deployment, domæneregistre og HTTPS-opsætning
Lanceringskommunikation

Lanceringskommunikation udvidede produktsystemet på tværs af kanaler.

Kampagner, webinarindhold, officielle markedsannonceringer og salgsfremmende opslag blev udviklet med samme visuelle hierarki som website og emballage, så produktet kunne genkendes konsekvent i sociale og kommercielle kontaktpunkter.

Dermaexel Anti-Estrias social media and launch campaign materials