Meu papel

Designer de produto responsável pela ideação, wireframes, protótipos e delivery.

Cliente

Grt8 Inovação e Negócios

Ferramentas

Figma

Sobre o design

O fluxo é um fluxo comum de cadastramento e foi criado para a aplicação Mobby Candidato. Para além das informações previamente esperadas em um fluxo de Sign Up, há o adendo da inserção do candidato e do código da liderança, essa etapa é opcional ao usuário. Esses dados dizem respeito a escolha do candidato no momento do Sign Up. O software em questão é SaaS e se o serviço for contratado por um partido/coligação com um candidato majoritário (candidatura para prefeito/a ou governador/a), há também a possibilidade de os demais candidatos da legenda partidária (vereadores, deputados ou senadores) também possuírem espaço dentro da aplicação, caso o usuário queira ter acesso a área do candidato minoritário é necessário que faça essa escolha durante a inscrição. Se a aplicação for apenas do candidato majoritário essa opção não deverá ser habilitada. Já o código da liderança é o número atribuído ao integrante da campanha que convidou o usuário em questão a realizar o cadastro na aplicação.

Página de Login

Por se tratar de um software enquanto serviço (Saas) vendido para diferentes partidos, coligações e/ou candidatos distintos, a construção da página de login é estruturada em blocos personalizáveis. Imagem, texto e cores podem ser alterados pela gestão para melhor adequação a identidade visual da campanha em questão. (Exemplos: imagem 01 e 02)

O tamanho da imagem de cabeçalho foi patronizada para 375 x 124px para que não houvesse comprometimento ao layout.

Imagem 01

Imagem 02

Step 01 - Informações básicas

O fluxo de sign up foi elaborado em quatro steps e o usuário fica ciente disso primeiramente através do breadcrumb presente no cabeçalho da página e também no botão de avançar que informa onde ele se encontra.

Step 02 - Residência

O usuário deverá escolher inicialmente o estado onde reside, e a partir do input selecionar a cidade e bairro que já estarão disponíveis em lista a partir da base de dados.

Step 03 - Candidato e Liderança

Esse step é opcional e caso o usuário opte por preenche-lo poderá selecionar o código da liderança que por ventura tenha o convidado para se cadastrar na aplicação e também escolher seu candidato minoritário.

Step 04 - Criar senha

Para prevenir erros como senhas digitadas incorretamente ou campos incompletos antes deles ocorrerem, um checklist sobre o que a senha deve conter já está disposto no layout, e a medida que o usuário insere os caracteres é fornecido um feedback em tempo real sobre a qualidade da senha.

Handoff

Juntamente com os fluxos e protótipos também adicionei componentes e seus respectivos comportamentos, hover states e tokens para facilitar futuras implementações.