LA PICCOLA ACADEMIA

UI, UX, BRANDING WEB AND APP DESIGN CONSULTANCY

Mockup web Piccola

Imagen: Diseño web Piccola Academia

1. PROJECT OVERVIEW

Project challenges:

After making progress in the project, the Covid-19 pandemic began. Because of this the academy had to rethink its offer to move to virtuality. Therefore, there is a new user profile, new requirements, new message and new offer.

Team:

No team

When:

From January to August 2020

Problem:

In its more than 5 years of operation, the Piccola Academia has grown and diversified the services it offers. Nowadays, they rely on virtual tools to give classes and have not only a face-to-face but also a virtual offer.

Approach:

Their main objective is to reorganize the information on the website and update the content, considering that they now offer online classes as well.


2. UX RESEARCH

USERS

The users so far have been families living in the east or northeast of Bogotá. With the new online courses, the users are also spanish speaking families arount the world.

I created two different personas based on the information given by thirty stakeholders via surveys:

Señor usuario
Manuel Piedrahita

Manuel is 45 years old, an independent lawyer and lives with his family in the north of the city. He has two children, Juana, 10, and Jerónimo, 6.

Juana is a very quiet child, but Jerónimo has a lot of energy. A teacher suggested that Manuel take him to after-school classes so that he can focus more on class and learn to work as a team.

Manuel and his wife are looking for a music academy for their children. They want the kids to learn how to play instruments.

Señora usuaria
Juliana Ramírez

Juliana lives in Miami with her husband and daughter Valeria, who is 5 years old.

Since Valeria was little, she showed her love for music and dance. Juliana has been looking for ballet classes but they are far from her home, the schedules don't fit their lifestyle, and the courses are quite expensive.

Now Juliana and her husband are looking for an offer of online ballet classes for Valeria, they believe it is the best decision considering their restricted schedule and budget.


VISUAL RESEARCH

Herramienta: BENCHMARKING

Moodboard Piccola

Image: Based on keywords I collect textures and images for the moodboard.

The key words that define the academy are collected through surveys made to parents.

I make a moodboard after identifying key visual elements that can be part of the website and app:

Circles and the shape of the logo

Stave and musical notes

Curved shapes that suggest movement


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

Image: Wireframe of the website organized by sections. Large screens.

With two stakeholders we organize the information for the different sections of the website.


LANDING PROTOTYPE

Herramienta: PROTOTIPO ALTA FIDELIDAD

Prototipo alta fidelidad

Image: High-fidelity prototype with the details of the design decisions.

The high-fidelity prototype has dynamic shapes and vibrant colors that evoke the experience of the Piccola's face-to-face and virtual classes.

I create the visual design.


4. WHAT I LEARNED FROM THIS PROJECT

In this project, I like to run workshops with the stakeholders because owners, users, and clients have built a strong sense of belonging. Therefore, they want the academy to improve and have a better service.

The second phase of this project is an app that is still under development.