Ironhack’s Week 8: Adapta_Case Study

Adapta

Es mi proyecto final dentro del Bootcamp UX/UI de Ironhack. Realicé todo el proyecto de manera individual y en dos fases, una primera semana dedicada a la invetigación y a la parte UX y una segunda centrada en el desarrollo de la marca y la parte UI.

1. Briefing

El reto consistía en dearrollar un producto que solucionase los problemas de frustración de las personas que se enfrentan por primera vez al aprendizaje de código HTML y CSS.

2. Solución

La solución es Adapta, una plataforma web para aprender de una manera visual como funciona la estructura básica responsive y el código HTML y CSS que genera.

Estás son sus funcionalidades:

Landing

Monetización

La monetización vendrá a través de dos vías:

3. Investigación

Mi investigación fue dirigida a estudiantes o profesionales que quieren acercarse al código básico para complemenetar su trabajo.

Encuestas

Después de realizar 54 encuestas y 12 entrevistas personales descubrí una serie de datos que me ayudaron a enfocar el problema.

Estos datos me decian que la solución tenía que ser una herramienta web interactiva que solucionase las dudas sobre el funcionamiento de la estructua del layout web y su traducción a código.

Entrevistas

En las entrevistas detecté dos cosas:

Los usuarios necesitan salir del código de vez en cuando para verlo desde una perspectiva más visual, de esta manera pueden ver mejor la traducción del código a la pantalla y mitigar su frustración. Necesitan una herramienta que ayude a la comprensión del código de una manera más lógica y que ayude para generar un aprendizaje más sólido.

Layout Creator Panel

Branding

Adapta es una marca digital, inteligente y moderna.

A través de estos adjetivos trabajamos en una nueva guía de estilo. En ella destacan los sigueintes elementos:

Style Tiles

Sistema de diseño

Para crear Adapta, una mrca ordenada y digital, decidí realizar un sistema de diseño. Aquí podeís ver algunos de los elemntos que lo forman.

Crear una herramienta escalable fue uno de los retos a los que me enfrentaba y para ello necesitaba crear un sistema de diseño bien definido.

Style Guides

Prototipo

Aquí puedes ver el prototipo final

Hi Fi Prototype

4. Resumen

Adapta es una manera más simple y visual de crear layouts web responsive que se complementa con un visor de código que permite ver la evolución del código HTML y CSS.

Aquí podeís ver una rápida presentación del proyecto realizada en Keynote

Keynote Presentation

5. Next Steps

Los próximos pasos a seguir son los siguientes:

6. Aprendizaje

Durante este proyecto final el aprendizaje vino de la mano del refuerzo y desarrollo personal de todas las herramientas utilizadas durante el Bootcamp:

Visual Designer, UX/UI Student

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store