Design da interface de um webapp para construção de landing pages e gerenciamento de campanhas

Meu papel
Prototipação e design de interface.
header image

Ozonion era uma plataforma de criação de campanhas de marketing digital, publicação de anúncios e landing pages. Nela, além da publicação e divulgação, os usuários poderiam realizar testes A/B ou Multivariados.

A plataforma tinha diversos desafios, que variavam desde a explicação das funcionalidades até a criação de um editor de landing pages funcional. Por se tratar de um produto complexo e específico para empresas era um tanto complicado explicar o seu funcionamento para pequenos anunciantes.

Home page do webapp

Obs: Apesar do esforço do time, a plataforma foi descontinuada por decisão dos sócios antes do projeto ser finalizado.

Neste antigo projeto meu papel passou por criação de personas, fluxos das tarefas e desenho de algumas funcionalidades completas

Personas

Quando entrei no projeto, a plataforma estava passando por uma reestruturação. No início, encontramos uma grande dificuldade em definir o público-alvo e decidir quais features seriam construídas. Então, com base nos clientes existentes, criamos 3 personas com os objetivos de:

3 personas representando os perfis de usop

Performance

Uma das dificuldades dos usuários era a compreensão de que a plataforma permitia a criação de múltiplas landing pages para uma mesma campanha. Sem a criação de variações, não era possível a realização de testes para melhorar a performance e muitos usuários deixavam de utilizar o produto por conta disso.

Por isso, a nossa proposta de reformulação tirava o foco da plataforma na criação de campanhas e anúncios e criava novos fluxos para o desenvolvimento de landing pages.

Gerenciamento de landing pages
Performance ao longo do tempo
Filtros de campanhas

Editor de Landing Pages

Também propomos a reformulação do editor de landing pages existentes. Ele possuía controles complexos e a maior parte das funções nunca era usada. Com a nova proposta, reduzimos o número de funcionalidades ao mínimo para facilitar a utilização.

Mesmo perdendo a capacidade de criar landing pages mais elaboradas, a idéia era que o editor pudesse ser usado pela maior parte dos usuários.

Diferentes estados do editor de landing pages

Algumas Telas

Wireframes

Curiosidade: Todo os rascunhos desse projeto foram documentados num molesquine, o que ajudou muito quando precisávamos comparar versões ou utilizar uma ideia rejeitada meses atrás.

Rascunhos da página de campanhas