design_mockups

Home	Escopo e Cronograma	Processo	Design/Mockups	Configuração	Arquitetura	Código	BD	Qualidade	Utilização	Instruções AWS

Design do Sistema

Sumário

Design do Sistema

Descrição

Aqui consta todos os protótipos de telas desenvolvidos pela equipe do projeto HLS. Os protótipos foram divididos em grupos de funcionalidade de cada parte do aplicativo, onde cada squad dentro do time ficou responsável por prototipar uma ou mais funcionalidades. Os mockups foram feitos na ferramenta figma e podem ser encontrados em https://www.figma.com/file/XHNptiOQ8nRbwtNqrND0ld/HSL?node-id=0%3A1

Protótipos de Baixo Nível

Para início do desenvolvimento, os requisitos apresentados pelas clientes do projeto foram convertidos em protótipos com baixo nível de fidelidade. Esses protótipos foram criados na ferramenta Excalidraw junto de todo o time.

Abaixo temos uma imagem que apresenta o resultado de algumas das telas desenvolvidas:

Mockups Apresentados na Sprint 0

Splash Screen

Tela de loading da plataforma.

Tela de Login

Tela de acesso do usuário através de sua matrícula.

Tela Inicial

Na tela inicial o usuário poderá visualizar as principais funcionalidades para sua seleção.

Menu de Opções

Acessado através do Header ele possui as principais ações também contando com a opção de se desconectar e outra ação abrangendo as informações sobre o aplicativo.

Comunicados

Ilustra os comunicados gerais apresentando sua visualização pela parte do usuário e também com os privilégios de administrador podendo assim também excluir ou editar um conteúdo.

Perfil do Usuário e Listagem de Aniversariantes

Exibição do perfil do usuário e visualização da tela aniversários.

Admin Enviar Comunicado

Tela do envio de comunicados realizado por usuários com perfil de administrador.

Admin Cadastro Cardápio e Telas Externas Moodle e Cardápio

Envio de cardápio e visualização externas do cardápio e do moodle.

Usuário Enviar Mensagem

Telas referentes ao envio de uma mensagem a um determinado grupo.

Design Final do Projeto Aceito e Mockup Final

Ícone do App

Representação visual do aplicativo.

Imagem do Mockup Final

Imagem do App Desenvolvida

Splash Screen

Tela de loading da plataforma.

Imagem do Mockup Final

Imagem da Tela do App Desenvolvida

Tela de Login

Tela de acesso do usuário através de sua matrícula.

Imagem do Mockup Final

Imagem da Tela do App Desenvolvida

Tela Inicial

Na tela inicial o usuário poderá visualizar as principais funcionalidades para sua seleção.

Imagem do Mockup Final

Imagem da Tela do App Desenvolvida

Comunicados

Comunicados Hospital São Lucas da PUCRS para seus colaboradores.

Imagem do Mockup Final

Imagem da Tela do App Desenvolvida

Novo Comunicado para os Usuários

Criação de novos conteúdos.

Imagem do Mockup Final

Imagem da Tela do App Desenvolvida

Menu Lateral

Menu de opções lateral de fácil acesso onde o usuário poderá visualizar as funcionalidades para sua seleção.

Imagem do Mockup Final com as opções de usuário administrador e comum

Imagem da Tela do App Desenvolvida com as opções de usuário administrador e comum

Aniversariantes

Tela que contém todos os aniversariantes da instituição separados por mês.

Imagem do Mockup Final

Imagem da Tela do App Desenvolvida

Perfil

Tela com as informações do perfil do usuário.

Imagem do Mockup Final

Imagem da Tela do App Desenvolvida

Cardápio

Contém as informações sobre o cardápio e como inserir o cardápio.

Imagem do Mockup Final

Imagem da Tela do App Desenvolvida

Informações

Contém as informações sobre o aplicativo.

Imagem do Mockup Final

Imagem da Tela do App Desenvolvida

Desconectar

Tela de desconexão de um usuário do aplicativo.

Imagem do Mockup Final

Imagem da Tela do App Desenvolvida

Moodle

Acesso ao ambiente virtual de aprendizagem moodle.

Imagem do Mockup Final

Imagem da Tela do App Desenvolvida

Contatos

Tela de informações e meios de contato com o Hospital São Lucas da PUCRS.

Imagem do Mockup Final

Imagem da Tela do App Desenvolvida

Fale Conosco

Tela para entrar em contato com o Hospital São Lucas da PUCRS através do aplicativo.

Imagem do Mockup Final

Imagem da Tela do App Desenvolvida