Identidade de produto · UX/UI · Desenvolvimento web

Dermaexel Anti-Estrias

Exelderma · Dermocosmética

Um MVP de extensão de produto que traduziu o posicionamento científico da Dermaexel numa identidade de packaging distintiva, numa plataforma informativa responsiva e num sistema coerente de comunicação de lançamento.

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

O Dermaexel Anti-Estrias foi desenvolvido como um novo produto dermocosmético no portefólio da Exelderma. O desafio consistiu em estender a identidade já estabelecida da Dermaexel a uma proposta específica anti-estrias, sem perder a credibilidade, disciplina visual e sensação de segurança associadas à marca principal. A fórmula reúne o Complexo de Fatores de Crescimento, ácido hialurónico e vitamina C numa narrativa de produto em três partes, que precisava de se manter clara e consistente no packaging e nos pontos de contacto digitais.

O trabalho começou com um mockup do produto e evoluiu para um sistema preparado para lançamento, posteriormente colocado no mercado pela Exelderma. A arquitetura da informação, os wireframes de média fidelidade e os componentes de UI responsivos foram utilizados para organizar informação do produto, causas e prevenção, estudos científicos, resultados documentados, vias de contacto e percursos de compra numa jornada de utilizador clara.

A experiência digital foi ligada aos canais sociais existentes e à loja online criada no primeiro projeto Dermaexel. A implementação incluiu um ambiente web baseado em PHP, com HTML5, CSS3, JavaScript, MySQL e phpMyAdmin, bem como preparação do alojamento, configuração de cPanel, registos DNS, publicação por FTP, HTTPS/SSL e preparação do ambiente de produção.

Processo UX/UI

Estruturar o conteúdo científico antes do refinamento visual.

Os wireframes de média fidelidade definiram hierarquia, navegação, relações entre conteúdos e principais fluxos de utilizador antes da introdução de cor, imagem e componentes de marca na interface final.

Dermaexel Anti-Estrias mid-fidelity website wireframes
Experiência responsiva

Uma plataforma de produto responsiva construída em torno da clareza e confiança.

O website final organiza os três componentes principais do produto, informação sobre estrias, estudos científicos, resultados visuais e percursos de contacto e compra numa experiência coerente em desktop, tablet e mobile.

Dermaexel Anti-Estrias responsive website interface
Implementação técnica

Infraestrutura e implementação preparadas para uma operação fiável.

O âmbito incluiu implementação front-end, configuração de servidor, administração da base de dados e deployment, permitindo que o design funcione como uma plataforma real de produto e não apenas como um protótipo visual isolado.

HTML5 + CSS3 + JavaScriptInterface responsiva, estrutura semântica e comportamento interativo
PHP + MySQLProcessamento server-side e dados de conteúdo estruturados
phpMyAdminAdministração da base de dados e controlo do ambiente
cPanel + DNS + FTP + SSLAlojamento, deployment, registos de domínio e configuração HTTPS
Comunicação de lançamento

A comunicação de lançamento estendeu o sistema do produto aos diferentes canais.

Campanhas, materiais para webinars, anúncios oficiais de entrada no mercado e conteúdos promocionais foram criados com a mesma hierarquia visual do website e do packaging, reforçando o reconhecimento consistente nos pontos de contacto sociais e comerciais.

Dermaexel Anti-Estrias social media and launch campaign materials