Em setembro de 2019 fui contratada como UX/UI Designer para trabalhar na Spot Educação .

O projeto que me foi atribuído era um produto B2B destinado a escolas de baixo orçamento que procuravam uma solução perfeita para suas ansiedades de aprendizado de inglês. O principal objetivo da Go Bilingual foi aproximar essas escolas com um aplicativo amigável voltado para seus professores e gestores, trazendo nossa expertise no aprendizado de inglês a baixo custo.

O conceito prometia muitos recursos. Mas o que realmente era? Quais eram nossos usuários, suas jornadas? Quantas coisas poderíamos realmente desenvolver em tão pouco tempo?

Aqui cobrirei nossa jornada até agora, tudo o que aprendemos ao desenvolver e projetar o produto e o futuro que vislumbramos para ele.

1. Descoberta

Assim que comecei a trabalhar para a Spot Education , as coisas começaram a ficar feias: tínhamos uma ideia do conceito, mas ainda não existia; Não sabíamos nada sobre ele além do fato de que precisava ter algumas funcionalidades, mas nem isso foi fácil. O caminho era nebuloso e cheio de incertezas. Não sabíamos quem era nosso usuário final; não sabíamos se muitos desses recursos seriam realmente viáveis ​​em nosso MVP ; nem sabíamos se o produto seria escrito em uma arquitetura totalmente nova, construída do zero, ou se clonaríamos uma já existente, a partir de um produto já em funcionamento da nossa empresa chamada Edify , e começaríamos a partir daí.

Descobrir o que era o nosso produto foi muito importante; Portanto, nossa empresa contratou ajuda externa na forma de Grito.cc .

Grito é uma agência de design digital do Rio de Janeiro, Brasil. O foco deles era fornecer uma solução ágil e enxuta para nossos problemas. Eles fizeram algumas pesquisas com professores e professoras e prepararam tudo para o nosso design sprint . Eles também nos forneceriam 6 telas para aplicativos de desktop e móveis, com base neste exercício e em nosso próprio espírito e direção de design.

Partindo do zero, começamos a discutir o que nosso produto precisaria ser, ter e o que não seria e não teria. Elaboramos quatro personas, todas professoras, de diferentes formações, idades e posições sociais. O principal que nossa pesquisa e exercício de empatia nos mostraram é que uma das principais mazelas dos professores era que eles sentiam a necessidade de ter mais suporte profissional e também de estar mais em contato com conteúdos importantes, relevantes e voltados para suas necessidades pedagógicas. Eles queriam se aprimorar como profissionais.

Internamente, sentimos a necessidade de contemplar as mazelas dos gestores escolares e também dos administradores; então fizemos nossa própria pesquisa e criamos nossa própria persona, alguém que usaria nosso aplicativo internamente, gerenciando equipe, registrando pedidos e muito mais.

Então, basicamente, tínhamos dois produtos em um: uma Extranet, utilizada por administradores e gerentes; e um Portal do Professor, utilizado pelos professores e, eventualmente, pelos alunos. Então lá fomos nós projetando e desenvolvendo ambos.

2. Definindo

Então, como desenvolveríamos e projetaríamos nossos aplicativos? Que tecnologia seria usada? Como seria o desenho? Após o design sprint, nossa própria pesquisa e nossas necessidades de negócios, como definiríamos nossos produtos?

Como o produto já havia sido vendido, começamos a discutir se seria rentável projetar uma arquitetura totalmente nova desde o início ou apenas clonar uma existente já usada por um dos produtos da empresa, o Edify . Os tomadores de decisão optaram por esta última, pois estávamos com um cronograma apertado e precisávamos entregar a Extranet o mais rápido possível.

Também estávamos, ao mesmo tempo, começando a definir como seria o Portal do Professor; uma solução web responsiva para nossos professores, onde eles poderiam ter orientação profissional e orientação de nossos pedagogos.

Então, basicamente, todas essas decisões e definições sensatas nos permitiram desenvolver e projetar o produto de maneira bidirecional e também nos permitiram iniciar nossos sprints e ciclos de produto. Enquanto eu estava encarregado de projetar o produto como um todo e ver o quadro geral, os desenvolvedores foram encarregados de construí-lo desde o início, de acordo com nossas decisões.

3. Desenhar

Aperte o cinto porque isso vai ser longo.

Assim que recebemos luz verde para começar a desenvolver e projetar o produto, criei um arquivo Figma chamado " Go Bilingual Design System ". Inicialmente, não tínhamos muito o que fazer; qual seria o conceito do nosso sistema de design? Quais eram nossos objetivos ao desenvolver esse sistema?

Seguindo as dicas do Atomic Design , decidi começar com nossos Icons , pois são o menor elemento que nosso produto precisaria. Após algumas pesquisas, encontrei um excelente sistema de design do pessoal da Akveo , Eva . Os ícones deste sistema de design tinham a redondeza e a legibilidade que procurávamos, por isso eram a combinação perfeita. A única diferença, porém, é que estabelecemos uma regra básica na hora de usar os ícones; em vez de ter dois conjuntos de ícones, decidimos disponibilizar um conjunto e o outro conjunto para ser o conjunto de interação, ou seja, sempre que você interagir com um ícone de uma forma específica, um possível segundo ícone seria mostrado ao usuário.

Depois de decidirmos quais seriam nossos Ícones — e já que não haveria necessidade de desenhá-los do zero — o próximo passo seria olhar para nossa marca, seu logotipo, valores e identidade visual, já que os Sistemas de Design costumam levar uma abordagem diferente, mais aberta e fluida para o desenvolvimento e design da marca.

A identidade visual da Go Bilingual foi desenvolvida inicialmente pelo pessoal do Quintal . O manual que nos forneceram incluía o logótipo e algumas aplicações, a paleta de cores, com opções primárias e secundárias e tipografia, com Panton como opção primária e Open Sans como secundária. No entanto, as equipes de negócios sentiram que sua abordagem era muito "alegre", "jovem" e "colorida" e esse não era necessariamente o nosso alvo, uma vez que os principais usuários de nosso produto seriam gestores escolares e professores. Precisávamos de uma identidade visual mais sóbria, em que nossos usuários se sentissem mais em casa e confortáveis ​​usando o produto por longos períodos de tempo. Também pensamos que um produto digital precisava ser mais flexível e fluido em relação aos seus sistemas, e sua identidade visual deveria refletir isso.

Resolvemos alongar as cores do projeto; apenas três matizes principais podem ser bons para um ótimo projeto de design de impressão, mas não é o suficiente quando se trata das nuances que um projeto digital precisa abranger, pelo menos na minha experiência. Então o que fizemos foi pegar cada uma das cores principais e criar três tonalidades diferentes com base nelas e também aumentar o número de tons principais e subsidiários. Outra regra que definimos foi que qualquer número de gradientes entre qualquer uma das duas cores do nosso conjunto era possível, tornando nosso design fluido e extremamente versátil.

Nosso novo logotipo foi desenvolvido internamente; foi apenas uma re-imaginação do antigo, focando mais em degradês e contornos, trazendo assim um visual mais moderno para nossa marca. Também amarramos o conceito por trás de todo o Sistema de Design enquanto estávamos dando uma olhada em nosso logotipo e foi aí que nasceu a ideia "Lattice" . Como todos os nossos sistemas precisavam ser fáceis de construir e altamente gerenciáveis, pensamos em uma treliça, uma grade aberta, onde as ideias pudessem ser colocadas, desenvolvidas e projetadas livremente e em constante evolução.

Nós realmente acreditamos em projetos e sistemas fluidos e ambientes em constante mudança.

Com o tema do Design System definido, começamos a projetar nossos componentes e cada bit que estaria presente em nossos aplicativos digitais. Pegamos o que aprendemos com nosso design sprint e tudo o que produzimos até agora e iniciamos a produção, tentando ser coesos e trabalhando dentro das diretrizes definidas. Eu acredito que o design e desenvolvimento de produtos tem tudo a ver com coesão e temas; algo que eu trouxe da minha época de game designer e diretor de arte que ainda hoje vale e fico feliz que nós, como empresa, seguimos as mesmas premissas.

4. Entregando

Então chegou a hora, após um longo ciclo de design e desenvolvimento, de entregar nosso produto. Quais são exatamente as funcionalidades que acabaram em nosso produto e como funcionou?

Nosso produto foi desenvolvido utilizando Ruby como back-end e React como front-end e nossos desenvolvedores utilizaram as diretrizes estabelecidas pelo design system para implementar nosso Portal do Professor .

Nosso MVP teria uma página de destino , que mostraria os valores e a missão de nosso produto e o que tentaríamos alcançar; uma página de tendências , onde o usuário poderia ver, assistir, ler e ouvir conteúdos voltados exclusivamente para professores, educadores e professores; uma página de recursos , onde você encontraria todo o conteúdo criado por nossos pedagogos; uma página de caminho de desenvolvimento , onde os professores poderiam aprender a se tornar profissionais ainda melhores fazendo nossos cursos especializados; e uma página Fale Conosco , onde os mesmos usuários poderiam entrar em contato conosco e sanar suas dúvidas e anseios.

Demoramos um pouco para desenvolver todo o produto por ter muitas funcionalidades, mas no final deu tudo certo e aqui está; Portal do Professor Go Bilingual , em toda a sua glória.

As necessidades dos negócios estão sempre mudando e o Go Bilingual foi descontinuado quando o Spot Educação se tornou Edify Education . No entanto, todo o trabalho e esforço que foi colocado nele foi mostrado aqui e estamos muito orgulhosos do que entregamos. Nosso MVP foi realmente difícil de produzir e tivemos muitos desafios ao longo do caminho, mas acho que é assim que o design e o desenvolvimento do produto são, e tem sido muito divertido e envolvente profissionalmente. Além disso, este projeto construiu a base para muitos produtos dentro da empresa.

O site principal da Go Bilingual era http://www.gobilingual.com.br/ , mas atualmente está fora do ar, pois o produto não existe mais. Você ainda pode acessar o Portal do Professor aqui: http://teachersportal.gobilingual.com.br/ . Obrigado por ler!