|[Home](home)|[Escopo](escopo)|[Arquitetura](arquitetura)|[Configuração](configuracao)|[**Mockups**](mockups)|[BD](banco_dados)|[Instalação](instalacao)|[Gerência](gp)|[Qualidade](qualidade)|[Processo](processo)|
|---|---|---|---|---|---|---|---|---|---|

# Organização dos Mockups

_Acesso rápido:_

- [Figma (alta fidelidade)](#figma-alta-fidelidade)
  - [Protótipo de uso do app](#protótipo-de-uso-do-app)
  - [Arquivos dos mockups](#arquivos-dos-mockups)
- [Fluxo-base inicial (baixa fidelidade) e divisão do time](#fluxo-base-inicial-baixa-fidelidade-e-divisão-do-time)
- [Ajustes sugeridos e realizados](#ajustes-sugeridos-e-realizados)

## Figma (alta fidelidade)

Os mockups de alta fidelidade foram construídos usando o [Figma](https://www.figma.com/), uma ferramenta gratuita com suporte a colaboração em tempo real e criação de protótipos navegáveis.

A versão mais atualizada dos mockups [pode ser encontrada no Figma do projeto](https://www.figma.com/file/gWGKWcjBwXebMtta6XBnd4/Appoio).

### Protótipo de uso do app

Fluxos de usuário comum e administrador:

<p align="center">
    <img src="resources/mockups-fluxo-usuário.gif" height="400">
    <img src="resources/mockups-fluxo-admin.gif" height="400">
</p>

### Arquivos dos mockups

- [📑 Arquivo do Figma](resources/mockups-figma.fig).
- [📑 PDF com telas do fluxo de usuário comum](resources/mockups-usuário.pdf).
- [📑 PDF com telas do fluxo de administrador](resources/mockups-admin.pdf).

## Fluxo-base inicial (baixa fidelidade) e divisão do time

Após a reunião de levantamento de requisitos, foi desenvolvida uma proposta de fluxo-base do app considerando as features levantadas.

![Proposta de fluxo-base para o app.](resources/mockups-fluxo-app.png)

As telas do fluxo acima estão marcadas com cores, representando a squad responsável por cada tela. Abaixo, encontra-se a divisão de squads de acordo com cada tela do fluxo-base.

![Squads para sprint 0.](resources/s0-squads.png)

## Ajustes sugeridos e realizados

**Legenda:**
- :hourglass_flowing_sand: : em análise;
- :ballot_box_with_check: : aprovado, aguardando atualização nos mockups;
- :white_check_mark: : aprovado e mockups atualizados;
- :x: : negado/rejeitado, mockups não serão modificados.

### Pela stakeholder, durante a review

| Tela/Fluxo | Descrição | Status |
|------------|-----------|:------:|
| Visualização de tutorial | Tags dão a impressão de que são clicáveis | :white_check_mark: |
| Novo tutorial | Tags dão a impressão de que são clicáveis | :white_check_mark: |
| Login/Cadastro | Deixar mais clara a ação do botão "olho" no campo de senha | :white_check_mark: |
| Home | Remover botão "Sair" | :white_check_mark: |
| Home | Deixar mais claro que as abas são clicáveis | :white_check_mark: |
| Home | Reduzir tamanho do logo no header | :white_check_mark: |

### Pela stakeholder, após a review

| Tela/Fluxo | Descrição | Status |
|------------|-----------|:------:|
| Cadastro | Opção "Outro" na seleção de gênero | :white_check_mark: |
| Cadastro | Selecionar apenas ano de nascimento | :white_check_mark: |
| Cadastro | Atualizar legendas dos campos "Estado" e "Cidade" para "Seu estado de residência" e "Sua cidade de residência", respectivamente | :white_check_mark: |
| ADM: Aprovados | Filtrar tutoriais por categoria (apps, celular ou conceitos) | :white_check_mark: |
| - | Favoritar appoios | :x: |

### Por terceiros

| Tela/Fluxo | Descrição | Status |
|------------|-----------|:------:|
| Login/Cadastro | Legendas/Placeholder mais amigáveis: "Qual seu nome?", "Digite seu e-mail", "Digite uma senha/Vamos criar uma senha?", "Quando você nasceu?" | :white_check_mark: |
| Login/Cadastro | Feedback de campos vazios e/ou em formato inválido | :white_check_mark: |
| Novo tutorial | Adicionar placeholder no campo de texto do passo | :white_check_mark: |
| Novo tutorial | Botão "Adicionar novo passo" pode ser confundido com botão "Enviar Appoio" | :white_check_mark: |
| Novo tutorial | Trocar "X" por uma lixeira ou texto "Excluir passo" | :white_check_mark: |
| Novo tutorial | Não permitir excluir o primeiro passo | :white_check_mark: |