Parte I: uiFromMars detrás de las cámaras

Cris Busquets
uifrommars
Published in
7 min readFeb 22, 2018

¡Hola astronauta!

En esta serie de artículos en Medium contaré casi en tiempo real cómo voy creando y desarrollando uiFromMars. Siempre me ha molestado leer artículos de “cómo montar X” que solo son flores hacia el autor y dan poca o nada información de como implementarlo. Con esta serie trataré de balancear el universo.

En este primer artículo te explicaré cómo pasé de la idea al MVP junto con las herramientas, KPIs y configuraciones que he implementando.

La idea

uiFromMars es una plataforma que ofrece cursos de Sketch, UI y producto a diseñadores que quieran impulsar su carrera. Ofrece contenidos de calidad, siempre actualizados (el mundo digital cambia demasiado rápido) y accionables.

Es decir, que con uiFromMars cualquier diseñador puede mejorar sus conocimientos sin perder tiempo en miles de artículos -la mayoría en inglés- que se quedan a medias ofreciendo soluciones.

¿Y cómo surgió la idea? Básicamente, después de sufrir en mis propias carnes profesores desactualizados y darme cuenta de que pierdo mucho tiempo buscando lo que necesito. En internet hay mil artículos, pero todos tocan una parte o se quedan a medias. Así que… ¿por qué no juntarlo todo y ofrecerlo todo junto? Además, al ser profesora de diseño, también conozco qué interesa más o menos o cómo explicar los conceptos y técnicas de manera entendible y dinámica.

Dar el paso

Ya sabemos todos que el papel lo aguanta todo y que la mayoría de veces, todo suena genial en nuestra cabeza. Y de hecho, la mayoría de ideas se quedan allí, en nuestra cabeza, esperando que llegue “la oportunidad idónea”. El problema es que esa situación idónea nunca llega y que acabamos por darle vueltas a algo sin hacerlo real.

La idea de uiFromMars hacía ya bastante tiempo que rondaba mi cabeza y de hecho había empezado a consumir todo tipo de contenidos para “saberlo todo antes de hacerlo”. Lo que viene a ser una parálisis por análisis en toda regla.

Si te apuntas ahora tendrás un precio de lanzamiento especial, entre otras cosas :) → http://www.uifrommars.com.

Hasta que me di cuenta de que tenía dos opciones para no acabar con la cabeza como un bombo: o dejaba morir la idea y no pensaba más en ella o la lanzaba en modo MVP. Si estás leyendo esto ya tienes claro qué opción escogí, aunque debo decir que esto no pasó de la noche a la mañana: el cambio exige un cambio de mentalidad, de perder el miedo a equivocarse y ganar la confianza de probar las cosas y ver cómo salen. No pasará nada si sale mal, ya que sea como sea, aprenderé.

De todas formas, debo añadir que me ayudaron a pasar a la acción los tres “referentes” que tengo: Joan Boluda Sean Wes y Paul Jarvis. Os los recomiendo si estáis liados en cosas así :)

Metodología: “Scrum” a medida

Para lanzar este MVP:

Lo que hice fue listar en un Trello qué pasos necesitaría tomar para conseguir llegar a una landing decente.

Decidí utilizar algo parecido a Scrum, realizando tareas poco a poco y moviendo las tarjetas de una columna a otra a medida que finalizaba la tarea. El requisito que me puse fue que ninguna tarea debía tomarme más de una semana en completar.

Así que en más o menos dos semanas tuve planteado todo, dejando un día para configurar la plataforma de correos y programar y diseñar la landing (ahí es nada).

Herramientas

A modo de listado, para crear el MVP he utilizado las siguientes herramientas.

Planteamiento

Objetivo de la landing
El objetivo no es otro que validar la idea. Es decir, verificar si hay o no interés en la idea, mencionando que será un servicio de pago en el copy. Me pareció la forma más honesta, ya que si bien habrá contenidos gratuitos, todo lo que aporte más valor tendrá un coste.

Medición y KPIs
Key Performance Indicators. O en castellano plano, los indicadores clave de rendimiento. Para verificar si el objetivo se cumple, es necesario establecer algunas métricas y cifras que permitirán ver si se han alcanzado o no.

En el caso de uiFromMars, la única métrica que me interesa es convertir el máximo número de visitas en suscriptores a la lista de correo. Actualmente el objetivo es llegar a 50 en una semana, tirando exclusivamente de contactos y redes sociales propias. Pero necesito suscriptores que muestren interés, así que justo después de que se suscriban reciben un correo automático que les presenta el proyecto y les invita a contestar un Typeform.

Esta simple acción me permite ver qué suscriptores tienen más interés en la plataforma, de manera que los puntúo distinto dentro de MailChimp.

Del primer objetivo nace un segundo, que es iniciar una campaña de Facebook Ads para ampliar el rango: los primeros suscriptores puede que se hayan suscrito únicamente por ser familiares y amigos, así que también es vital validarlo con “el resto del mundo”. Más sobre esto en las siguientes entregas.

Test A/B
Una vez asentado el KPI principal de esta etapa, me surgió una duda. ¿Y si el copy que había incluido no era suficientemente atrayente? ¿No sería mejor testearlo antes? Empecé a liarme leyendo artículos para hacer “el copy perfecto”, pero pronto me di cuenta de que volvía a caer en una parálisis por análisis, así que entró en acción me “yo” racional: utilizar los datos.

Así que busqué de forma concreta qué necesitaba (en lugar de los “cómo testear una landing”) y encontré dos artículos que me ayudaron a configurar un Test A/B con Google Analytics. Nada de plugins de Wordpress que no hacen más que ensuciar el código.

Para obtener el dato que quería, creé un objetivo de conversión para asignarlo a ese Test A/B. De esta forma, creé un test para ver qué versión convertía más a suscriptores (por ahora, es la opción original).

Para crear el objetivo de conversión leí este artículo, para el del Test A/B, este.

MailChimp
Con la idea de automatizar al máximo posible el envío del Typeform, configuré una secuencia automática en MailChimp para que la persona que se suscriba a uiFromMars reciba un correo al rato de registrarse.

De esta manera, me aseguro de que todo el mundo recibe el Typeform (junto con una breve presentación del proyecto, obviamente) y tengo un control de quién abre qué.

Por ahora, este correo tiene un ratio de apertura del 88.6%. Nada mal :)

Diseño
uiFromMars
como tal nació hace un año, cuando quise hacer un blog en inglés de UI de ciencia ficción. Entre unas cosas y otras -principalmente, como puedes imaginar, por analizar y pensar demasiado- no lo lancé, pero esa marca seguía llamándome.

Está inspirada en David Bowie (Ziggy Stardust and the Spiders from Mars), una de mis referencias a nivel creativo. Con toda la vorágine de Elon Musk y SpaceX todavía tomaba más sentido, ya que ambos me llevan a la misma reflexión: atreverse a explorar y tirar hacia adelante con lo que crees.

La tipografía es px Grotesk de Optimo Type Foundry. Estuve dándole mil millones de vueltas (¡qué novedad!) buscando “la” tipografía hasta que me crucé con esta. Considero que tiene aires a ciencia ficción sin llegar a caer en el clásico efecto de tipografía barata de película y sin perder legibilidad.

Programación
La landing está programada con Microsoft Visual Code. Primero en HTML y CSS3 utilizando Flexbox (que tuve que aprender para hacer la landing, je…) y después creé la plantilla a medida. Es decir, que tampoco utilizo un plugin o plantilla “coming soon”. Para los emojis uso Emoji CSS. Es maravilloso, aunque debo tener cuidado de no poner emojis cada cuatro palabras.

Próximos pasos

En la próxima entrega veremos si he logrado alcanzar el objetivo de los 50 suscriptores tirando sólo de contactos directos utilizando medios propios (mi Twitter y LinkedIn) y cómo es la secuencia de e-mails que enviaré a puerta tibia y la campaña en redes.

Sigue a uiFromMars

Subscríbete a esta publicación para conocer los detalles de la construcción de uiFromMars. Si lo prefieres, también puedes darme feedback en Twitter. Estaré encantada de recibirlo :)

--

--