Diseño de sitio web Angular y diseño de App en Ionic

Construir las maquetas o el diseño gráfico de la web y la app del ciudadano, alineando las interfaces gráficas en las buenas prácticas de experiencia e interface de usuario (ux y ui), de modo que el ciudadano pueda realizar trámites y hacer seguimiento de los servicios de la manera mas practica y eficiente posible.

Requerimientos No Funcionales

1: Sitio web 100% Responsive
Debe estar alineado con norma técnica colombiana NTC5854 (accesibilidad portales web). Lineamientos de usabilidad de gobierno en línea y adaptable a los diferentes navegadores

2: Urls amigables

Condiciones generales
3: El corte o maquetado debe ser para angular 6 para la web y ionic 3.2 para la app

4: Identidad corporativa
El diseño debe estar alineado a la imagen corporativa de la ciudad de Bogotá (adjunto manual de imagen)

5: Plantillas de correo
Diseño de platillas para el envío de correos electrónicos, validadas para las diferentes plataformas (clientes de correo), incluido Outlook

6: Mensajes Push
No funcional
Diseño de notificaciones push

7: Personalización
El usuario debe poder cambiar el color de fondo del menú y del header (escoger entre dos o tres hojas de estilo)


Requerimientos funcionales

8: Home
Contenido explicativo de lo que el ciudadano puede realizar en esta sección

9: Sección de noticias
Contenido editorial, puede incluir:
• Título
• Resumen de noticia
• Descripción de noticia
• Imagen

10: Formulario Login
        Validaciones de formulario
        Recuperar contraseña
        Recordar email
        Mostrar contraseña

11: Formulario de registro
        Validaciones de formulario
        Validación de términos y condiciones
12: Avatar
Posibilidad de personalizar el avatar (puede ser, escoger entre uno que represente el género femenino y otro que represente el género masculino.

13: Editar información básica del usuario
Puede editar el nombre, cédula y contraseña + validaciones

14: Formulario de creación de cuentas contrato
Debe tener espacio para contenido explicativo + formulario + validaciones + (crear, editar y eliminar)

15: Datos del usuario
Sección o espacio para mostrar los datos del suscriptor

16: Formulario de radicación de PQRS
Debe tener espacio para contenido explicativo + formulario + validaciones + adjuntar archivos (máximo 3)

17: Detalle de seguimiento a PQRS
Visualizar documentos

18: Listado de PQRS
La lista de los PQRS radicados para el caso de que el ciudadano tenga radicados

19: Listado de facturas
Lista de las ultimas 3 facturas

20: Listado de pagos
Lista de los últimos 3 pagos

21: Ubicación
Ubicación del carro recolector vs ubicación del predio (distancia y tiempo aproximado para la recolección). En caso de que no sea el día de recolección se montará un mensaje o pantalla con los horarios de recolección

22: Mapa de puntos de atención
Un mapa de Google con los globos de puntos de atención de cada uno de los operadores de aseo

23: Términos y condiciones
Contenido de términos y condiciones

24: Formulario Registrar evento
El ciudadano debe poder registrar un evento relacionado con el aseo de ciudad de Bogotá, poder adjuntar una foto (acceso a la cámara, para el caso de la APP y adjuntar imagen para el caso de la web).

25: Sección de Aprovechamiento
Contenido que será consumido mediante servicio al WordPress,
Sección de contenido tipo carrusel que incluya imágenes y videos con enlace a otra página, posibilidad de visualizar imágenes y videos, ampliar etc.

26: Sección de indicadores
Dashboard con graficas de indicadores
Grids para presentar el detalle de los gráficos

27: Sección de ayuda
Plantilla de contenido para la presentación de ayuda, enfocada a lo que puede encontrar en la web o en la app y los trámites que puede realizar