design_mockups.md

-|   [Início](home)   | [Cronograma](escopo) | [Procedimentos](processo) | Design_de_Telas | [Configuração](configuracao) | [Arquitetura](arquitetura) | [Banco_de_Dados](banco_dados) | [Qualidade](qualidade) | [Instruções_de_Uso](utilizacao) |
-| -- | -- | -- | -- | -- | -- | -- | -- | -- | 
+| [**Home**](home) | [Escopo e Cronograma](escopo e cronograma) | [Processo](processo) | [Design/Mockups](design_mockups) | [Configuração](configuracao) | [Arquitetura](arquitetura) | [Código](codigo) | [BD](banco_dados) | [Qualidade](qualidade) | [Utilização](utilizacao) |
+| :--------------: | :---------------------------: | :------------------: | :--------------: | :--------------------------: | :------------------------: | :--------------: | :---------------: | :--------------------: | :----------------------: |
 
 # Design de Telas
 
@@ -8,3 +8,51 @@
 Esta seção apresentará todos os estilos e telas pertinentes ao Design do Sistema, sejam eles escolhas do time ou solicitações dos Stakeholders.
 
 Tudo pode ser acessado através deste link: [**Link para o Figma**](https://www.figma.com/file/QvBOyiYxaZmlfgs4Fh9B6n/GID---ages?type=design&node-id=0-1&mode=design&t=qsladYXj2tmhyFOR-0).
+
+## Mockups base do projeto
+Os stakeholders vieram do Torneio Empreendedor realizado pelo IDEAR PUCRS, onde eles desenvolveram os mockups da sua aplicação. Esses mockups foram usados como base para os mockups desenvolvidos com mais detalhes pelo nosso time.\
+Link do FIGMA do stakeholders: [Link](https://www.figma.com/proto/qQ6POVDClzCHkw38E8EF0M/GID?node-id=9-8&starting-point-node-id=9%3A8)
+
+## Protótipo de baixa fidelidade
+Inicialmente o time desenvolveu o protótipo de baixa fidelidade, para facilitar a visualização do fluxo de telas da aplicação. Abaixo está uma imagem com o protótipo de baixa fidelidade desenvolvido:\
+![image](uploads/610c66824b77419f3750b51ee58a2233/image.png)
+
+## Protótipo de alta fidelidade
+Com base no protótipo de baixa fidelidade o time partiu para o Figma para desenvolver o protótipo de alta fidelidade, este com mais riqueza de detalhes. Como visto no protótipo de baixa fidelidade temos 3 fluxos de usuários: O fluxo de usuário comum, o de prestador de serviço e o administrador.
+
+### Fluxo de usuário
+#### Login 
+Abaixo o fluxo de login do usuário:
+![image](uploads/6733cbc3be86030580aae0de0dfaccfa/image.png)
+
+#### Primeiro acesso
+Quando o usuário realiza o primeiro acesso, ele deve escolher o estado e a cidade em que ele está, para que os serviços que ele busca sejam da região que ele reside. Abaixo o fluxo de escolha de estado e cidade:\
+![image](uploads/5f49e44501d280189effb125385d4324/image.png)
+
+#### Navegando por Documentação
+Após escolher sua cidade, o usuário pode buscar por orientações em sua jornada de documentação e transição. Abaixo o fluxo de documentações:\
+![image](uploads/14cde4fdb49f1aeae86e6a7a60142aac/image.png)
+
+#### Navegando por Serviços
+O usuário também pode buscar por serviços como: psicologia, jurídico e etc. Abaixo o fluxo de serviços que o usuário pode acessar:\
+![image](uploads/da65024195c06d892c0fdca81f4c07a9/image.png)
+
+#### Navegando por Profissionais
+Uma maneira alternativa para o usuário buscar por serviços. Abaixo o fluxo de profissionais que o usuário pode buscar:\
+![image](uploads/63672fcd8ff8b995a49d9958c64a4920/image.png)
+
+### Fluxo de prestador de serviço
+#### Login e registro
+O prestador de serviço pode fazer uma solicitação de cadastro de conta, a conta então é analisada pelo administrador do sistema, se aceita, o prestador de serviço poderá então fazer login nela. Abaixo o fluxo de cadastro de conta e login:\
+![image](uploads/31d44b7c2c44d93255947e1ffbade5e6/image.png) \
+![image](uploads/7406443f9a2897f11a5a27bc8f05bf3d/image.png)
+
+#### Home
+Após o login, temos então a tela home do prestador de serviço, onde ele vai poder cadastar/editar os seus serviços prestados. Abaixo o fluxo:\
+![image](uploads/94a93dabac9b0b964e4964ab3d0d1d15/image.png)
+
+### Fluxo do administrador
+O administrador terá uma conta cadastrada direto no banco de dados, assim terá apenas o fluxo de login e realização de sua atividade de aceitar solicitações de cadastro de prestador de serviço, isso ele fará na sua home.
+
+#### Home
+![image](uploads/8c68b0453f7ee14492aba4ea78f26914/image.png)
\ No newline at end of file