Index
Ruffles + NBA 2024
Landingpage & Backoffice
Contexto
A WA, uma consultoria de tecnologia na qual eu presto serviço, pegou um desafio de uma semana para criar um produto para um evento promovido pela Ruffles e NBA. O objetivo do produto era criar um coletor de leads e um backoffice pra seguinte jornada
Customer Journey
O usuário entra na fila do stand
Scaneia o QR Code que vai ficar em um totem
Faz sua inscrição na Landingpage
Faz uma série de jogadas para acertar pontos
Sai do stand com brindes
Design Goal
O meu objetivo como designer era desenhar uma interface de cadastro para o usuário, e uma interface de backoffice para o controlador do stand verificar se a inscrição estava ok para o usuário poder jogar.
interface de cadastro
interface de backoffice
Deadline
A landingpage e o backoffice precisava estar no ar em 8 dias. eu tinha 3 dias para fazer o design, e o desenvolvedor tinha mais 5 dias.
Arquitetura de informação com OOUX
Eu resolvi utilizar parte do processo de experiência de usuário orientada a objetos (OOUX), especificamente os exercícios de matriz de relação de objetos para criar um design que conectasse a landingpage ao backoffice.
OOUX
Experiência de usuário orientada a objetos
Main Object
Object relationship
Metadata
Content
O mapeamento de objetos era a parte mais fácil, a jornada era curta, simples, e o cliente já sabia quais tipos de metadados e conteúdos eram necessários para passar os dados do cadastro na landingpage para o backoffice
Uma vez estabelecida a estrutura e o relacionamento dos objetos, pudemos ter uma visão da arquitetura informacional do produto;
Usuário Lead
Has 1
Registro no backoffice
CPF
Telefone
Data de nascimento
UF
Backoffice
Has 1
Usuário operador
Senha
Nome
Has 1 - Many
Usuário Lead
CPF
Telefone
Data de nascimento
UF
Editar
Excluir
Wireframes
tela de login - backoffice
painel - backoffice
Ideia de interação "on scroll"
Desafio Ruffles
Teste suas habilidades no nosso desafio e acerte o maior número de cestas que puder!
Nome
Digite seu nome
Digite seu email
CPF
000.000.000-00
Formato: 000.000.000-00
Telefone
(00) 00000-0000
Formato: (00) 00000-0000
Data de Nascimento
DD/MM/AAAA
Formato: DD/MM/AAAA
De onde você é
Acre
Alagoas
Amapá
Amazonas
Bahia
Ceará
Distrito Federal
Espírito Santo
Goiás
Maranhão
Mato Grosso
Mato Grosso do Sul
Minas Gerais
Pará
Paraíba
Paraná
Pernambuco
Piauí
Rio de Janeiro
Rio Grande do Norte
Rio Grande do Sul
Rondônia
Roraima
Santa Catarina
São Paulo
Sergipe
Tocantins
Escolha seu estado
Ao clicar em continuar, você concorda com nossos Termos de adesão, Política de Privacidade e Termos de Campanha e Participação
Hero-cover section
transforms into a small section
form section slide-up
Desafio Ruffles
Teste suas habilidades no nosso desafio e acerte o maior número de cestas que puder!
100 VH
user scroll the section
cover
Desafio Ruffles
Teste suas habilidades no nosso desafio e acerte o maior número de cestas que puder!
Nome
Digite seu nome
Digite seu email
CPF
000.000.000-00
Formato: 000.000.000-00
Telefone
(00) 00000-0000
Formato: (00) 00000-0000
Data de Nascimento
DD/MM/AAAA
Formato: DD/MM/AAAA
De onde você é
Acre
Alagoas
Amapá
Amazonas
Bahia
Ceará
Distrito Federal
Espírito Santo
Goiás
Maranhão
Mato Grosso
Mato Grosso do Sul
Minas Gerais
Pará
Paraíba
Paraná
Pernambuco
Piauí
Rio de Janeiro
Rio Grande do Norte
Rio Grande do Sul
Rondônia
Roraima
Santa Catarina
Sergipe
Tocantins
Escolha seu estado
Ao clicar em continuar, você concorda com nossos Termos de adesão, Política de Privacidade e Termos de Campanha e Participação
CADASTRAR
teste de scroll do wireframe
Prototypes
