LA PICCOLA ACADEMIA

CONSULTORÍA UI, UX, DISEÑO WEB

Mockup web Piccola

Imagen: Diseño web Piccola Academia

1. GENERALIDADES DEL PROYECTO

Retos del proyecto:

Luego de avanzar en la organización de información del sitio web, empezó la pandemia por el Covid-19. Debido a esto la academia se tuvo que replantear su oferta para pasar a la virtualidad, esto cambia la infomación, requerimientos, mensaje y oferta.

Equipo de:

Sin equipo de trabajo

Tiempo:

Desde enero hasta agosto 2020

Problema:

En sus más de 5 años de funcionamiento, la Piccola Academia ha crecido y diversificado los servicios que ofrece. En la actualidad se apoyan en herramientas virtuales para dar clases y tienen oferta no sólo presencial sino también virtual

Enfoque:

Su objetivo principal es reorganizar la información del sitio web y actualizar el contenido, contemplando que ahora ofrecen también clases online.


2. INVESTIGACIÓN UX

USUARIO OBJETIVO

Los usuarios objetivo de la academia son familias que viven en el oriente o nororiente de Bogotá.

Con la información obtenida, se piensa en una forma de organizar la información para los usuarios.

Herramienta: ARQUETIPO - PERSONA

Señor usuario
Manuel Piedrahita

Manuel tiene 45 años, es abogado independiente y vive con su familia al norte de la ciudad. Tiene dos hijos, Juana de 10 años y Jerónimo de 6 años.

Juana es una niña muy tranquila, pero Jerónimo tiene mucha energía. Una profesora le sugirió a Manuel que lo llevara a clases extracurriculares para que se pueda enfocar más en clase y aprenda a trabajar en equipo.

Manuel y su esposa buscan una academia de música para que los niños aprendan a tocar instrumentos.

Señora usuaria
Juliana Ramírez

Juliana vive en Miami con su esposo y su hija Valeria, de 5 años.

Desde que Valeria era pequeña, mostró su gusto por la música y el baile. Juliana ha averiguado clases de ballet pero son lejos de su casa, los horarios no se ajustan a su estilo de vida, y además son bastante costosas.

Ahora Juliana y su esposo están buscando oferta de clases online de ballet para Valeria, creen que es la mejor decisión considerando la restricción de sus horarios y su presupuesto.


INVESTIGACIÓN VISUAL

Herramienta: BENCHMARKING

Moodboard Piccola

Imagen: Moodboard de texturas e imágenes tomadas a partir de las palabras clave

Se recopilan palabras clave que definen la academia gracias a encuestas que se hicieron a los padres de familia.

Al hacer una búsqueda visual en las fotos de la academia, las instalaciones, las clases y las presentaciones, se reconocen elementos visuales clave que pueden ser parte del sitio web:

Círculos y la forma del logo

Pentagrama y notas musicales

Formas curvas que sugieran movimiento


ORGANIZACIÓN Y DISEÑO DE INFORMACIÓN

Con las herramientas anteriores, se reunen conclusiones que son relevantes para el diseño y arquitectura de información. A continuación están las secciones y guía de estilos UI:

Es importante resaltar las modalidades de clases presencial y virtual

Las secciones son: Cursos, beneficios, testimonios, nosotros y contacto.

Guía de estilo tipografías
Guía de estilo colores
Guía de estilo textos
Guía de estilo botones

WIREFRAME

Herramienta: WIREFRAME

Wireframe Piccola

Imagen: Wireframe del sitio web organizada por secciones. Pantallas grandes.

Se estructura la información del sitio web en diferentes secciones para pantallas grandes y móviles.


PROTOTIPO

Herramienta: PROTOTIPO ALTA FIDELIDAD

Prototipo alta fidelidad

Imagen: Prototipo de alta fidelidad con los detalles de las decisiones de diseño.

El prototipo de alta fidelidad tiene formas dinámicas y colores vibrantes que evocan la experiencia de las clases presenciales y virtuales de la Piccola.

Con la información obtenida con las herramientas usadas, se hace el diseño visual. Los elementos a destacar son:

Uso de los colores y tipografía de La Piccola

El uso de líneas repetidas evoca el pentagrama en el header y footer. La nota musicar en el footer tiene las mismas curvas que la P del logo

Los elementos dinámicos del fondo son círculos y las curvas del logo de la Piccola.


4. LO QUE APRENDÍ CON ESTE PROYECTO

En este proyecto, disfruté los workshops con los stakeholders porque los clientes y los usuarios han construido un fuerte sentido de pertenencia con la academia. Por esta razón, están dispuestos a colaborar para que la academia mejore y crezca.

La segunda fase del proyecto es una aplicación que está aún en desarrollo.