Sweet Home, el primer E-Learning que te enseña a comprarte una casa en Madrid.
Sweet Home es una plataforma E-Learning sencilla de usar, con sistema multimedia (texto, audio, vídeo, imagen) que mediante módulos estructurados y metodologías de aprendizaje nos proporcionarán los conocimientos necesarios para conocer el mercado inmoviliario y saber movernos en el con el fin de comprarnos una casa en Madrid.
El problema — ¿De dónde nace la idea?
La edad de acceso a una hipoteca cada vez se retrasa más, a esto se le suma que es más difícil conseguir financiación por la precariedad laboral y la dificultad de ahorrar con precios cada vez más altos que exigen dedicar cada vez más recursos a la compra. Una familia debe destinar, según los datos del Banco de España, más de ocho años de su renta bruta para costear la adquisición de una casa, lo que supone el doble que hace tres décadas.
Sweet Home tiene el objetivo de enfrentarse a los miedos relacionados con las complicaciones de la comprar de una vivienda y mejorar la experiencia de compra. Si quieres saber cómo aplicamos la metodología Design Thinking para llegar hasta aquí tienes disponible el siguiente artículo.
En el encontraras paso a paso el proceso de investigación con entregables como Desk research, Research Questions y etnografía. Entrevistas o User persona y journey map. Y el proceso de prototipado y desarrollo.
Sweet Home
Sweet Home, es una plataforma de E Learning para aprender a comprarte una casa y vencer al miedo mediante el conocimiento. Y a continuación veremos el proceso de diseño, prototipado y desarrollo.
Arquitectura y flujo
previamente a comenzar a diseñar la interfaz de la web realizamos un site map de los contenidos qué vamos a incorporar como una calculadora de hipoteca, perfil de usuario dónde documentar nuestras visitas o tener una tutoria con nuestros profesionales.
Nuestro flujo principal es el del contenido relacionado con los cursos puesto que es contenido multimedia que nos van a proporcionar los conocimientos necesarios para conocer todo lo necesario para comprarnos una casa sin miedo.
Wireframes
Una vez tenemos claro el contenido y la interacción, es hora de lanzar los primeros wireframes en papel. Esto nos permitirá un estudio ágil y flexible puesto que el objetivo que hay detrás de todo esto es priorizar el pensamiento crítico por encima del arte.
Identidad visual
Vamos a analizar las decisiones de diseño de la identidad. En primer lugar el logotipo consta de un isotipo que combina un libro con un tejado y sustituye a la letra ‘W’ y a la letra ‘M’. Nuestro isotipo también será usado como icono.
La tipografía empleada para Sweet Home es la Gotham Bold de la familia Gotham. Esto de debe a su legibilidad y efectividad sobre todo al reducirla.
Para la construcción hemos usado una retícula usando como X la distancia entre la gracia de la letra ‘e’ y la barra.
Posteriormente hemos repetido esa distancia en la construcción usando X entre letras y 2X en la distancia de seguridad.
En relación a los colores es un elemento fundamental en la personalidad visual de Sweet Home. El azul es un color frío que se asocia a la calma y a la serenidad. En este caso, combinado con blanco nos permite equilibrar las luces.
Usando esta construcción y esta paleta de colores, desarrollamos las versiones en positivo y negativo. Para posteriormente indicar las versiones en color con fondo oscuro o la aplicación principal que combina el isotipo en negro y la tipografía en azul (esquina inferior derecha).
Prototipado
Para construir el prototipo hemos utilizado Figma, componetizando todos los elementos para agilizar y optimizar el proceso.
Estilo
Algunos elementos clave para escribir la voz de la plataforma:
- Evitar la jerga sencilla pero con un tono correcto.
- Escritura positiva. Utilizariamos un lenguaje positivo y empoderador en lugar de un lenguaje negativo.
Y ahora si, veamos a ver las partes más importantes de la plataforma y algunas pantallas de la landing:
Componentes y Atomic Design
Para la organización de los componentes se ha utilizado Atomic Design, es un sistema de trabajo que se basa en la creación de elementos modulares sencillos para crear estructuras de información mucho más complejas.
Para garantizar un diseño lo más optimo posible, utilizamos el sistema de diseño de Atomic Design. Este método de diseñar sitios web consiste en comenzar el diseño desde lo más pequeño (átomos), agrupándolos (moléculas), hasta llegar al diseño final. Gracias a este sistema podremos modificar los elementos de manera más flexible, rápida y precisa.
Esta organización de los componentes atomizados está en un documento llamado Componentes (assets):
Diseño visual de la plataforma (UI)
La plataforma está dibujada siguiendo el sistema de diseño de Bootstrap, con una grid de 12 columnas, width de 65 y un gutter de 30. Este sistema nos ayuda en la disposición del contenido y su adaptación a diferentes dispositivos (responsive).
Guía de estilo
Por un lado se establecieron los colores, diferenciándolos entre primarios (de mayor importancia), secundarios y colores neutros.
Posteriormente establecimos la tipografía jerarquizando el texto. Gracias a esto, garantizamos que la web tenga la misma consistencia entre las diferentes páginas, además de facilitarle el trabajo al equipo de desarrollo.
Átomos
Posteriormente realizamos los átomos, en este apartado disponemos de cada elemento de manera independiente. Todos estos elementos están componetizados, y cualquier alteración que se realice sobre estos, modificará todos los componentes ‘hijos’ que se hayan aplicado en el diseño.
Moléculas
Todos estos elementos se agrupan formado moléculas, las cuales representan un conjunto de elementos que van a estar siempre dispuestos de la misma manera. Al crear componentes en grupo, con sus respectivas variantes (variants), nos aseguramos que estas agrupaciones tengan siempre las mismas propiedades y así conseguir un diseño homogéneo.
Si has llegado hasta aquí, gracias por la lectura! 👋