HERMES

Oficina de Diseño de Comunicación Digital Municipal

Título	Oficina de Diseño de Comunicación Digital Municipal
Palabras Clave	municipio
Período	2023-2023
Asignatura	Taller de Diseño de Interacción
Del Curso	Taller de Diseño de Interacción 2023
Carreras	Diseño
Alumno(s)	Francisca Ortega, Carla Gómez Guerra, Scarleth Osorio, Marisol Cekalovic, Rafaella Osorio Corvetto
Profesor	Daniela Salgado, Herbert Spencer
URL	https://www.figma.com/file/AVrUxMOA0MA24KX9Ovjrq2/Wireframe-II?node-id=0%3A1&t=X7S5ZqFuCM2Lf8n4-1

HERMES

Hermes se funda con la intención de acercar a los usuarios al uso de plataformas digitales, a través del uso de herramientas que promueven la accesibilidad y la claridad. El nombre se origina del dios griego del lenguaje y la comunicación. Nuestra misión es que, a través del uso del lenguaje cotidiano el usuario se acerque a la virtud visual y escrita de la interfaz.

OBJETIVOS

• Recorrido entendible para el usuario
• Manejo del paso paso para realizar el trámite
• Diseño para la facilidad al completar un formulario
• Jerarquía de trámites
• Originalidad de iconos y elegir una paleta de color identitaria

INVESTIGACIÓN PREVIA

Evidencias y Hallazgos de los Usuarios

Encuesta

Se realizó una investigación sobre usuarios que realizan trámites en la municipalidad de Valparaíso. Se realizaron una serie de encuestas que evidenciaron carencias que obstaculizan el trayecto del trámite, de los cuales se hacen ver en los puntos de información, en el recorrido del usuario, en la atención, en el personal de la municipalidad y en el usuario, aquellos que se resumen en la falta de información y desactualización de ella para el usuario. Se menciona la falta de comunicación tanto personal, como de manera gráfica, para definir un recorrido definido para cada sector de trámites a realizar, la falta de señaléticas para dirigir al usuario dentro de la municipalidad y el sitio web, aquel, que debería funcionar con más facilidad a la hora de necesitar su funcionamiento para todo tipo de persona, sea cualquier tipo de usuario.

Con respecto a los 19 usuarios entrevistados podemos decir que:

El espacio se presenta desordenado y desorganizado. El viaje del usuario es desorientado y tardío

• 14 personas de 19 llegaron en Transporte público y son mayormente de la comuna.
• A 2 personas se les ha dificultado entender en donde tienen que realizar el trámite.
• 11 personas han tenido que ir dos o más veces para terminar su trámite.
• 10 personas se demoraron de 30 a 1:30 mins en realizar su trámite y por lo menos 4 personas se demoraron de 2 a 4 horas en terminar su trámite.

Tanto el sistema web como el sistema presencial presentan una deficiencia de información previa para la realización de trámites.

• 5 personas no sabían de los documentos necesarios para realizar su trámite.
• 5 personas no tenían la información de los trámites que se realizaban en la municipalidad.
• 13 personas ha ido más de 1 vez a realizar trámites.

Identificamos un lenguaje de los usuarios que no se relaciona con el lenguaje administrativo

• 6 personas revisan el sitio web antes de ir a realizar su trámite.
• 11 personas prefieren realizar tu trámite presencialmente ya que les genera más confianza y seguridad.
• 8 personas prefieren online debido a la rapidez y ahorro de transporte.

¿Que paso?

• Reclamos por parte del usuario
• Problemas de recorrido al realizar un trámite online y/o presencial
• Lenguaje administrativo v/s Lenguaje del usuario
• División de Municipalidad

¿Por qué pasó?

• Falta de organización Municipal
• Desactualización de información
• Paleta de color diversa
• Lenguaje complicado para el entender del usuario

Lenguaje de los Usuarios (Palabras Lazarillo)

Se presentan palabras y frases Lazarillos que mencionan los usuarios a la necesidad de facilitar su comunicación para buscar y hacer un trámite, la cual se presenta un problema entre el lenguaje administrativo y el propio lenguaje del usuario.

Un ejemplo dentro lo que respecta Ayudas sociales encontramos las siguientes palabras que utilizaba la gente para referirse al trámite que necesitaban hacer: DIDECO, junta vecinal, Ficha de hogar, Becas, Beneficios Estudiantil, Pueblos originarios, Para el Registro social, OMIL Contratos, Buscar trabajo, Techo de Chile, REGISTRO SOCIAL DE HOGARES, El asunto de la familia, prenatal, Asistente Social, Agua/Luz, Ayuda social/asistente, ayuda para la casa, Canasta básica, Retiro de papel de Ticket de gas.

Mapa de Flujo

Se presenta un mapa de flujo del usuario al ingresar a la Municipalidad para realizar un trámite o consultar información de este. Donde se distingue con un color diferente cada movimiento a realizar del usuario para llegar al mesón de trámite.

Estudio de la Página web Municipal

• Comentarios y Sugerencias al mapa de navegación de la Web Link Miro 1
• Costumer Journey Map Link Miro 1
• Estudio los pasos de Interacción de la página web Link Miro 2
• Estudio de la descripción de cada trámite Link Miro 2
• El paso a paso de los trámites Link Miro 2
• Definición detallada de los trámites de Obra, documentos necesarios para realizarlos Link Miro 2
• Cardsorting Link Miro 3

Benchmarking (Referencias de Otras Páginas Web)

1. https://www.munizapallar.cl
2. https://providencia.cl/provi/site/edic/base/port/inicio.html
3. https://www.munistgo.cl
4. https://www.gov.uk
5. https://www.weslacotx.gov
6. https://www.ms.gov

ARQUETIPOS

• Primera Propuesta De Arquetipos Link PPT
• Mapa de Empatía de los Arquetipos Link Miro 2
• Creando los arquetipos y el Storytelling Link Miro 4

USER PERSONA Basándose en las entrevistas previamente realizadas, se desarrollaron 4 arquetipos para así identificar al usuario objetivo.

FUNDAMENTO Y PROPUESTAS

Realizamos un rediseño para la plataforma web, tanto en formato de computador, como, en tamaño android small. Identificamos los trámites municipales y los categorizamos para generar una mejor orientación en el trayecto del Usuario. Rediseñamos una nueva estructura de la página web: Reorganizamos la diagramación, seleccionando la información más relevante y necesaria para realizar el trámite, determinamos que la primera visualización del usuario sea para dirigirlo hacia la sección de trámites. Minimizamos la Paleta de colores para alivianar el peso visual que implica un amplio rango de colores saturados, uno de ellos es el azul marino, representativo de la identidad actual de la municipalidad, contrastado con un amarillo brillante que funciona para componer los elementos que queremos acentuar, y blanco grisáceo de fondo. Elegimos la Tipografía Barlow porque es neutra y legible en un sitio web en ambas pantallas. Para cuidar la legibilidad se utilizaron escalas acorde a cada pantalla, minimizando la cantidad de tamaños y variando en el peso de la tipografía para establecer jerarquías. Además, para mantener la coherencia visual en la página, se crearon distintos íconos que siguieran una misma línea gráfica.

Se proponen distintos atributos. Primero, un inicio de sesión que facilite la visibilidad del proceso del trámite del usuario, además de guiarlo por sus trámites de interés. Segundo, mejorar la buscabilidad de los trámites, utilizando las palabras lazarillo previamente identificadas dentro de la descripción de cada uno.

DESARROLLO DEL PROYECTO

Propuesta 1

Presentación Sobre las Decisiones Gráficas

Rediseño Presentación Google

Propuesta 2

Wireframs Interactuables Uizard

Rediseño Interactuable XD

Mapa de Navegación Miro

Propuesta 3

Presentación de Google

Wireframes Interactuables

Mapa de Navegación Figma

Propuesta 4

Figma Editable

Figma Interactuable - Rediseño

Propuesta 5

Figma Editable

Figma Interactuable - Rediseño Interactuable Computador

Figma Interactuable - Rediseño Interactuable Celular

Epicas

• Epica de Registro de Usuario y Epica de Trámite Link de Youtube

PROPUESTA FINAL

Mapa de Navegación

Referencia a Mapa de Garret Link

Mapa de navegación Propuesta Ayuda Social: Trámite Beca Presidente de la República Link Figma

Elementos de Diseño de la Interfaz

Ilustraciones

Ilustraciones usadas en la web, pero la propiedad intelectual de todas aquellas es de figma.com

Estilos de Texto

Paleta de Color

Íconos

Componentes y Estilos Gráficos

Diagramación

Android Small 360x800 píxeles y Computador 1532x3061 píxeles.

Épicas

Una Epica corresponde a una narrativa del trayecto que el Usuario hace en el Sitio web.

Figma Editable Abrir

Figma Interactuable Computador Abrir

Figma Interactuable Celular Abrir

Perfil de Usuario de La Epicas

Camila Curihuinca

Conocedora de la tecnología (19 años, Soltera, Estudiante, Vive en Valparaíso Vive con sus padres).

“Quiero que mis papás estén tranquilos económicamente”

Personalidad: Esperanzadora, prometedora, querer solventar sus estudios.

Objetivos:

• Conseguir una beca para sus estudios universitarios.
• Obtener flexibilidad para realizar el trámite sin esperar un año más por retraso.
• Contar con la facilidad de contar su experiencia positiva a sus amigos.

Motivadores

• Ir de manera presencial u online para hacer el trámite.
• Información específica para quien se dirige cada beca.
• Tener la motivación de ayudar a sus padres con sus estudios.

Frenos

• Limitación de horarios para un estudiante de manera presencial.
• Necesitan la aprobación de manera urgente, y que se demoran en aprobar.

Canales

• Prefiere la web para realizar trámites simples.
• APP para navegar.
• Utilización de redes sociales para la información.

Epica de búsqueda y filtración de trámites

Esta épica se basa en la búsqueda del trámite con la utilización de las palabras lazarillo, las cuales, son sinónimos o palabras que se asemejan al nombre o a los intereses del trámite que necesita realizar el usuario, dando así una manera más accesible y rápida para que el Usuario llegue a él.

• Objetivo: Permitir a los usuarios encontrar los trámites de su interés de forma más rápida.
• Beneficiarios: Usuarios finales.
• Funcionalidades clave: Búsqueda por palabras clave y palabras lazarillo, filtrado por categoría.
• Criterios de éxito: Tiempo en la página, satisfacción del usuario.

Epica de Categorización del trámite

En esta narrativa se visualiza como es la trayectoria total del trámite desde la página de inicio hasta la iniciación de este, sin atajos. Este es el trayecto en donde se categorizan los trámites, dándole sentido y coherencia entre ellos. Diferenciando unos y familiarizando otros teniendo un acceso referenciado.

• Objetivo: Mejorar la información de los trámites para que sea comprensible para los usuarios.
• Beneficiarios: Usuarios finales.
• Funcionalidades clave: Recolectar datos de preferencias, datos por categoría.
• Criterios de éxito: Tasa de clics en trámites categorizados, legibilidad del usuario, satisfacción del usuario.

Epica de Registro de Usuarios

El registro de usuario se hizo para que pueda tener un vínculo más cercano, tanto en la existencia de una relación del lenguaje del usuario en coherencia con el lenguaje administrativo de los trámites, como en la transparencia del estado de sus trámites y en las notificaciones de intereses personales.

• Objetivo: Facilitar el acceso seguro y personalizado a la plataforma y obtener más transparencia de los trámites.
• Beneficiarios: Usuarios finales y administradores.
• Funcionalidades clave: Registro, inicio de sesión, recuperación de contraseña, seguimiento, notificaciones, archivos guardados, mostrar sugerencias personalizadas, Recolectar datos de trámites finalizados.
• Criterios de éxito: Tasa de registro exitoso, tiempo promedio para iniciar sesión, satisfacción del usuario.