Esta es la historia de creación del PROYECTO de la web de a3sides. La experiencia de usuario, el design thinking , el Mobile First y las herramientas Agile, fueron nuestros puntos clave para la estrategia y el diseño. Un proyecto lleno de retos y pasiones.

1. by Stefano Verzegnassi & Pilar Paredes
AN A3SIDES PRODUCTION
OUR WEBSITE STORY

2. Empezamos este proyecto
con el objetivo claro de
crear una página web
atractiva que satisfaga
realmente las necesidades
de los usuarios.
ARRANQUE

3. Observamos que la web
actual tenía muy pocas
visitas.
El recorrido de los usuarios
venía desde la Home a la
página de contacto sin
apenas visitar las páginas
de producto y con un
tiempo de permanencia
mínimo.
Encontrábamos pocas
visitas a los productos y
solicitudes de demo a
través del formulario.
PARA ELLO

4. Nos encontrábamos ante un rendimiento
muy pobre y tras un exhaustivo análisis
SEO necesitábamos una estrategia y un
diseño para mejor el posicionamiento y la
generación de leads.
UNO DE LOS PRINCIPALES PROBLEMAS ERA:

5. ESTUDIAMOS EN
PROFUNDIDAD
NUESTRA
AUDIENCIA

6. Con usuarios que tienen diferentes propósitos de navegación y se
sitúan en diferentes etapas del embudo de conversión. Era preciso
reflejar todo esto en un diseño unificado que pudiese también alcanzar
otros medios digitales.

7. Stefano Verzegnassi ( UX y
desarrollo)
Pilar Paredes ( estrategia y
contenidos)
Pero no los únicos
protagonistas, ya que
contamos con la
participación de nuestros
compañeros con sus ideas y
sugerencias
ASUMIMOS ROLES Y
RESPONSABILIDADES

8. Restricciones y objetivos
Queríamos “humanizar el Software” y
trasmitir que estamos a la última en
tecnología con el foco puesto en las
personas.
Restricción de tiempo: era preciso que
todos los resultado y acciones estuviesen
alineados con lo establecido en el Plan
de Marketing
An a3SIDES production
Los empleados también son usuarios de
nuestra web. Nos empeñamos en
mejorar también sus tareas y compartir
una nueva visión que les motivara a salir
de “su zona de confort”.

9. Diseño de contenido: mejorar la
fragmentación y la calidad del
contenido y conseguir una navegación
lineal
Introducir una nueva herramienta para
la automatización de procesos internos y
la eventual implantación de un
e-commerce.

10. An a3SIDES production
FINALMENTE EL PROCESO MÁS
TÉCNICO

11. INVESTIGACIÓN
Navegación primaria poco clara, con
enlaces no explícitamente visibles
(implicando un -95% en las visitas de
determinados productos).
Google Analytics (y las RR. SS.)
evidenciaba un target de usuarios 25-34
no explorado.
41 páginas de producto distintas.
Nunca habían sido actualizado desde el
lanzamiento del sitio.
Ancho de esas páginas muy variable,
entre 44 y 723 palabras, con un valor
medio de 197.

12. Descenso de usuarios “mobile”. Eso se
debe a la poca usabilidad y a la
actualización de el algoritmo de
Google Search (mobile-first indexing).
El tamaño de la página principal se
cuantifica con 4,2 MB y 252 solicitudes
de recursos (page requests).
La competencia presenta un valor
medio de 2.5 MB y 90 solicitudes.
El sitio no era mobile-ready.
El sitio presenta problemas de
seguridad por falta de
actualizaciones.
El estado de salud del sitio estaba
generalmente muy bajo

13. La corresponsabilidad de diferentes problemas
imponen un proceso diferente. El diseño tenía
que ser estratégico, basado en la dicotomía
entre "expansión" y "contracción".
Investigamos y exploramos miles de ideas,
para poder entender el problema en su
totalidad, que después resumimos en una fase
de análisis.
Detectado el problema, entendido su
tamaño y relevancia, se corrige la escala de
observación. A partir de aquí, se itera de
manera rápida, combinando métodos
inductivos y deductivos..
POR SUPUESTO, EN ESE
PROYECTO SE HAN UTILIZADO
TRES METODOLOGÍAS:
DESIGN THINKING, MOBILE-
FIRST Y CONTENT-FIRST.

14. IDEACIÓN
Simplificación de la presentación de los
productos, realizando también contenido
mobile-first.
Se simplificó la estructura de navegación,
haciéndola más linear.
Humanización del software, a través de un
típo de letra serif y el uso de ilustraciones.
Realizar un diseño mobile-first, empezando así
la realización de wireframe y prototipos con los
móviles.
Acto seguido, el diseño para ordenadores.

15. DESARROLLO
Se ha utilizado una metodología
JAMstack.
Repositorio Git
Sistema CI
Servicios CDN
Hubspot (formularios)
forestry.io (Git-based static CMS)

16. Al optimizar la velocidad del sitio, podemos
garantizar una comunicación más directa con
nuestros clientes.
El "diseño humano" representa las aspiraciones
de nuestro equipo.
Las ilustraciones trasmiten el espíritu de nuestra
gente de soporte técnico, que invierte más de
150 horas diarias para atender al cliente.
EL PRODUCTO NO ES
SIMPLEMENTE UN ARTEFACTO
QUE REALIZA UNA FUNCIÓN
TÉCNICA Y ESPECÍFICA, SINO
QUE, A TRAVÉS DE SU USO,
TAMBIÉN CUMPLE UNA
FUNCIÓN SOCIAL.

17. CONCLUSIONES
HEMOS INVERTIDO 250H DE TRABAJO
DE 4,2MB EL PESO SE HA REDUCIDO A ~150KB. PAGE
REQUESTS: DE 252 A 16
HEMOS REDUCIDO EL TEMPO DE CARGA DE ~7SEG A 1.3SEG
EN GOOGLE PAGESPEED HEMOS OBTENIDO UN 98% PARA
MÓVILES
HEMOS REDUCIDO EL NUMERO DE ÁRBOLES NECESARIO
PARA COMPENSAR LA PRODUCCIÓN DE CO2 DE NUESTRO
SITIO, DESDE 17 A 2
(HTTPS://WWW.WEBSITECARBON.COM/)

18. "Think big, start small, move fast”. La prototipación
ha demostrado ser una herramienta muy útil que
permite un desarrollo ágil y rápido.
Hemos experimentado nuevos servicios y
herramientas, abriendo una ventana a la
innovación.
Al unir y integrar las fases de análisis y ejecución, y
desarrollar internamente el sitio, hemos producido
una estrategia de autoaprendizaje.
RETROSPECTIVA