Works

Sitio web oficial del gobierno de Santiago, Nuevo León

Cómo diseñar un sitio web – Portal oficial del gobierno de Santiago, Nuevo León

Tópicos

Branding, gobierno de santiago, plantillas, Sitio web.

Links

El pueblo mágico de Santiago, Nuevo León, es una puerta hacia todos los tesoros que encierra la Sierra Madre Oriental, desde las panorámicas de ensueño de ríos, cascadas y bosques o el avistamiento de aves de mil colores, hasta las mejores aventuras de senderismo que puedan disfrutarse en México.

Es por eso que la nueva administración tenía la necesidad de diseñar un sitio web que pudiera plasmar e interpretar digitalmente toda la belleza que este pueblo esconde.

behance-1-01

Antes de intervenir

¿Por qué se rediseña un sitio web en primer lugar?

La razón por la que nos contrataron era para optimizar la usabilidad y experiencia de usuario.

El sitio no era amigable para todos los trámites que los ciudadanos o los turistas del municipio de Santiago necesitaban hacer. Lo que tenían habilitado, en el sentido de los servicios digitales, recaía en algo simple y que muchas veces no cumplía las necesidades de los visitantes del sitio.

1. Diseñar una página sencilla para un rango de edades y personas amplio.

La nueva administración tenía la misión de agilizar, por medio del sitio, la gestión de los servicios y trámites digitales en el contexto de la pandemia.

Teníamos el reto de que el sitio fuese accesible, sencillo e intuitivo para cualquier persona: desde un chavo que está familiarizado con las experiencias digitales, hasta una persona de la tercera edad.

Esto se resuelve al tener en cuenta un fácil acceso para Google, considerar un fácil escaneo al momento de diseñar la página, lo cual resulta en un buen performance del sitio.

2. Interpretar la renovación del branding del municipio

De nuestra parte, debíamos proyectar la renovación del liderazgo de este pueblo mágico, mientras unificamos el branding recientemente trabajado para el municipio en el sitio web.

Así mismo, tomamos en cuenta que un sitio web como este, debe cumplir 2 puntos importantes:

  1. Por un lado, debe tener un enfoque turístico en los próximos eventos, noticias relevantes, lugares de interés, actividades alrededor, etc.
  2. Y, por otra parte, debe cubrir el lado más gubernamental y proporcionar una experiencia amigable para los usuarios que lleven a cabo trámites o solicitudes.

El resultado de estos dos puntos fue un portal de utilidad para las personas que viven en Santiago, así como turistas que quieren visitar el pueblo mágico.

behance-1-02 behance-1-03

​​¿Primero el home, la página de contacto, el huevo o la gallina?

Con respecto al orden de pantallas, definimos primero cuáles son las más importantes y las relacionadas con el objetivo del sitio y las metas de los usuarios.

Para el resto, solemos ponernos de acuerdo con el líder del proyecto, cliente y equipo de FE (Front-end) & Dev para definir orden de las pantallas a diseñar.

Un hack que le ayuda al equipo de FE y que funcionó de maravilla para este proyecto fue desarrollar primero las más sencillas de programar o las que tengan más componentes que se repitan, para luego proceder con las más complicadas.

Normalmente, nuestro Diseñador UX/UI comparte un número de pantallas diseñadas para aprobación y luego al equipo de FE, mientras él o ella sigue diseñando otras pantallas a medida que FE desarrolla las anteriores.

Para cualquier sitio web que armamos, solemos volver a los 3 errores más comunes que algunos cometen al diseñar un sitio web, porque conocer la historia es lo que nos permite no volver a repetirla.

Cuando el cliente quiere diseñar más pantallas

Otro entregable con el que tuvimos que ser ágiles fue un UI Kit, es decir, una librería de todos los estilos, tipografías, colores, tamaños, componentes como inputs, tablas, headers, cards, etc.

Este Kit normalmente se diseña primero en Figma y se entrega en HTML/CSS para los clientes que quieren diseñar más pantallas a partir de los templates que diseña nuestro equipo.

Generalmente, los sitios oficiales de municipios y gobiernos exceden un poco su formalidad y se sienten demasiado institucionales y poco intuitivos, ya que su sistema de marca no es moderno.

El rebranding que vivió el municipio ayudó bastante a que la marca se sintiera mucho más cercana, y nuestra interpretación de ese trabajo —una alineación del branding con el sitio web— fue importante para plasmar esta accesibilidad en el entorno digital.

Ahora los residentes y visitantes de Santiago pueden disfrutar de una página mucho más fresca y accesible para cualquier trámite o información referente al turismo que este maravilloso pueblo tiene para ofrecer.

behance-2-01 behance-2-02 behance-2-03 behance-2-04

Highlights

  • 12 templates
  • 25 pantallas
  • 13 semanas en total
  • 8 semanas en programación Front-end

Equipo dedicado

  • Project Manager
  • Diseñador UX/UI
  • Consultor UX
  • Líder Técnico
  • Diseñador Front-end

¡Hola!





    .





    .





    .

    *Protegido de spam, claro.