En septiembre de 2019 fui contratado como diseñador de UX/UI para trabajar en Spot Educação .

El proyecto que me asignaron era un producto B2B dirigido a escuelas de bajo presupuesto que buscaban una solución perfecta para sus ansiedades de aprendizaje de inglés. El objetivo principal de Go Bilingual fue acercarnos a dichas escuelas con una aplicación amigable dirigida a sus maestros y administradores, brindando nuestra experiencia en lo que respecta al aprendizaje de inglés a un bajo costo.

El concepto prometía muchas características. Pero, ¿qué fue realmente? ¿Cuáles fueron nuestros usuarios, sus viajes? ¿Cuántas cosas podríamos desarrollar en tan poco tiempo?

Aquí cubriré nuestro viaje hasta ahora, todo lo que aprendimos del desarrollo y diseño del producto y el futuro que imaginamos para él.

1. Descubrimiento

Tan pronto como comencé a trabajar para Spot Education , las cosas se veían sombrías: teníamos una idea sobre el concepto, pero aún no existía; No sabíamos nada al respecto además del hecho de que necesitaba tener algunas funcionalidades, pero incluso eso no fue fácil. El camino estaba nublado y lleno de incertidumbres. No sabíamos quién era nuestro usuario final; no sabíamos si muchas de dichas funciones serían realmente viables en nuestro MVP ; ni siquiera sabíamos si el producto estaría escrito en una arquitectura completamente nueva, construida desde cero, o si clonaríamos una existente, de un producto que ya funcionaba de nuestra compañía llamado Edify , y comenzaríamos desde allí.

Descubrir cuál era nuestro producto fue muy importante; Así que nuestra empresa contrató ayuda externa en forma de Grito.cc .

Grito es una agencia de diseño digital de Río de Janeiro, Brasil. Su objetivo era ofrecer una solución agradable, ágil y eficiente para nuestros problemas. Investigaron un poco con maestros y profesores y prepararon todo para nuestro sprint de diseño . También nos proporcionarían 6 pantallas para aplicaciones móviles y de escritorio, en función de este ejercicio y de nuestro propio espíritu y dirección de diseño.

Partiendo de cero, comenzamos a discutir lo que nuestro producto tendría que ser, tener y lo que no sería y no tendría. Seleccionamos a cuatro personajes, todos docentes, de diferentes orígenes, edades y posición social. Lo principal que nos mostró nuestra investigación y ejercicio de empatía es que uno de los principales problemas de los docentes era que sentían la necesidad de tener más apoyo profesional y también de estar más en contacto con contenido importante y relevante dirigido a sus necesidades de enseñanza. Querían mejorarse como profesionales.

Internamente, sentimos la necesidad de contemplar los problemas de los directores y administradores escolares también; así que hicimos nuestra propia investigación y creamos nuestra propia persona, alguien que usaría nuestra aplicación internamente, administrando personal, pedidos de libros y más.

Entonces, básicamente, teníamos dos productos en uno: una Extranet, utilizada por administradores y gerentes; y un Portal del Profesor, utilizado por los profesores y, eventualmente, por los alumnos. Así que nos fuimos a diseñar y desarrollar ambos.

2. Definición

Entonces, ¿cómo desarrollaríamos y diseñaríamos nuestras aplicaciones? ¿Qué tecnología se utilizaría? ¿Cómo iba a ser el diseño? Después del sprint de diseño, nuestra propia investigación y nuestras necesidades comerciales, ¿cómo definiríamos nuestros productos?

Dado que el producto ya se había vendido, comenzamos a discutir si sería rentable diseñar una arquitectura completamente nueva desde cero o simplemente clonar una existente que ya usaba uno de los productos de la compañía, Edify . Los responsables de la toma de decisiones optaron por lo último, ya que teníamos un calendario apretado y necesitábamos entregar la Extranet lo antes posible.

También estábamos, al mismo tiempo, comenzando a definir cómo sería el Portal del Maestro; una solución web receptiva para nuestros maestros, donde podrían tener orientación profesional y tutoría de nuestros pedagogos.

Entonces, básicamente, todas esas decisiones y definiciones sensatas nos permitieron desarrollar y diseñar el producto de manera bidireccional y también nos permitieron comenzar nuestros sprints y ciclos de producto. Mientras yo estaba a cargo de diseñar el producto como un todo y ver el panorama general, los desarrolladores tenían la tarea de construir desde cero de acuerdo con nuestras decisiones.

3. Diseño

Abróchate el cinturón porque esto va a ser largo.

Tan pronto como obtuvimos luz verde para comenzar a desarrollar y diseñar el producto, creé un archivo Figma llamado " Go Bilingual Design System ". Inicialmente, no teníamos mucho para continuar; ¿Cuál sería el concepto de nuestro sistema de diseño? ¿Cuáles eran nuestros objetivos al desarrollar dicho sistema?

Siguiendo el ejemplo de Atomic Design , decidí comenzar con nuestros íconos , ya que son el elemento más pequeño que necesitaría nuestro producto. Después de investigar un poco, encontré un excelente sistema de diseño de la gente de Akveo , Eva . Los iconos de este sistema de diseño tenían la redondez y la legibilidad que buscábamos, por lo que eran la combinación perfecta. Sin embargo, la única diferencia es que establecimos una regla básica al usar los íconos; en lugar de tener dos conjuntos de íconos, decidimos hacer que un conjunto esté disponible y el otro conjunto sea el conjunto de interacción, lo que significa que siempre que interactúes con un ícono de una manera específica, se le mostrará al usuario un posible segundo ícono.

Después de decidir cuáles serían nuestros Iconos, y dado que no habría necesidad de diseñarlos desde cero, el siguiente paso sería mirar nuestra marca, su logotipo, valores y la identidad visual, ya que los Sistemas de Diseño generalmente toman un enfoque diferente, más abierto y fluido para el desarrollo y diseño de marca.

La identidad visual de Go Bilingual fue diseñada por primera vez por la gente de Quintal . El manual que nos proporcionaron incluía el logo y algunas aplicaciones, la paleta de colores, con opciones primarias, secundarias y tipografía, con Panton como opción principal y Open Sans como secundaria. Sin embargo, los equipos de negocios sintieron que su enfoque era demasiado "alegre", "juvenil" y "colorido" y ese no era necesariamente nuestro objetivo, ya que los principales usuarios de nuestro producto serían los directores de escuela y los maestros. Necesitábamos una identidad visual más sobria, en la que nuestros usuarios se sintieran más en casa y cómodos usando el producto durante largos periodos de tiempo. También pensamos que un producto digital necesitaba ser más flexible y fluido en cuanto a sus sistemas, y su identidad visual debería reflejar eso.

Decidimos estirar los colores del proyecto; solo tres tonos principales pueden ser buenos para un gran proyecto de diseño de impresión, pero no son suficientes cuando se trata de los matices que debe abarcar un proyecto digital, al menos en mi experiencia. Entonces, lo que hicimos fue tomar cada uno de los colores principales y crear tres tonos diferentes basados ​​en ellos y también aumentamos la cantidad de tonos principales y secundarios. Otra regla que definimos fue que era posible cualquier cantidad de degradados entre cualquiera de los dos colores de nuestro conjunto, lo que hacía que nuestro diseño fuera fluido y extremadamente versátil.

Nuestro nuevo logo fue desarrollado internamente; fue solo una reinvención del anterior, centrándose más en degradados y contornos, por lo tanto, trayendo una imagen más moderna a nuestra marca. También vinculamos el concepto detrás de todo el sistema de diseño mientras echábamos un vistazo a nuestro logotipo y fue entonces cuando nació la idea de "Lattice" . Dado que todos nuestros sistemas debían ser fáciles de construir y altamente manejables, pensamos en una red, una cuadrícula abierta, donde las ideas se pudieran colocar, desarrollar y diseñar libremente y en constante evolución.

Realmente creemos en diseños y sistemas fluidos y entornos en constante cambio.

Con nuestro conjunto de temas Design System , comenzamos a diseñar nuestros componentes y cada bit que estaría presente en nuestras aplicaciones digitales. Tomamos lo que aprendimos de nuestro sprint de diseño y todo lo producido hasta ahora y comenzamos la producción, tratando de ser cohesivos y trabajando en torno a las pautas establecidas. Creo que el diseño y desarrollo de productos tiene que ver con la cohesión y la tematización; algo que he traído de mis días como diseñador de juegos y director de arte que sigue siendo válido hasta el día de hoy y me alegro de que nosotros, como empresa, sigamos las mismas premisas.

4. Entrega

Entonces llegó el momento, después de un largo ciclo de diseño y desarrollo, de entregar nuestro producto. ¿Cuáles son exactamente las funcionalidades que terminaron en nuestro producto y cómo funcionó?

Nuestro producto fue desarrollado usando Ruby para su back-end y React para su front-end y nuestros desarrolladores usaron las pautas establecidas por el sistema de diseño para implementar nuestro Portal del Profesor .

Nuestro MVP tendría una página de destino , que mostraría los valores y la misión de nuestro producto y lo que intentaríamos lograr; una página de tendencias , donde el usuario podría ver, mirar, leer y escuchar contenido exclusivamente diseñado para maestros, educadores y profesores; una página de recursos , donde encontrarías la totalidad del contenido creado por nuestros pedagogos; una página de ruta de desarrollo , donde los profesores podrían aprender cómo convertirse en mejores profesionales tomando nuestros cursos especializados; y una página habla con nosotros , donde los mismos usuarios podrían contactarnos y resolver sus dudas e inquietudes.

Nos tomó un tiempo desarrollar todo el producto ya que tenía muchas funcionalidades, pero al final todo salió bien y aquí está; El Portal del Maestro de Go Bilingual , en todo su esplendor.

Las necesidades comerciales cambian constantemente y Go Bilingual se suspendió cuando Spot Educação se convirtió en Edify Education . Sin embargo, todo el trabajo y esfuerzo que se puso en él se mostró aquí y estamos muy orgullosos de lo que entregamos. Nuestro MVP fue realmente difícil de producir y tuvimos muchos desafíos en el camino, pero supongo que así es como son el diseño y el desarrollo de productos, y profesionalmente ha sido bastante divertido y fascinante. No solo eso, este proyecto sienta las bases para muchos productos dentro de la empresa.

El sitio web principal de Go Bilingual era http://www.gobilingual.com.br/ , pero actualmente está fuera de línea porque el producto ya no existe. Todavía puede acceder al Portal del Profesor aquí: http://teachersportal.gobilingual.com.br/ . ¡Gracias por leer!