Plataforma Orange Evolution
Plataforma Orange Evolution
Introdução
Este desafio foi apresentado no Hackathon do Programa de Formação da FCamara, onde participei como UX/UI Designer do Squad 12, ao lado dos desenvolvedores Dheniarley e Luiz Felipe. A comunidade tech Orange Juice entra neste projeto como cliente, precisando melhorar o seu produto, Orange Evolution, que oferece trilhas de estudo com conteúdos gratuitos através do Notion. Nosso objetivo foi desenvolver em 15 dias um MVP (Produto Mínimo Viável) de uma aplicação web que melhorasse a entrega e a utilização destas trilhas.
Para tal, conduzi o projeto seguindo o processo do Diamante Duplo, utilizamos a metodologia Kanban organizando nosso fluxo de desenvolvimento no Trello, e mantivemos reuniões diárias (Daily) para agilizar o trabalho e reduzir riscos.
O processo do Diamante Duplo.
1. Descoberta
Nosso primeiro passo foi realizar o alinhamento inicial interno da squad, compartilhamos nossas habilidades e experiências para criar um planejamento de acordo com nossos conhecimentos. Decidimos então iniciar o primeiro dia de projeto mergulhando no cenário atual do problema: nós 3 realizamos separadamente o processo para acessar as trilhas de estudo e observamos as possíveis dores dos usuários.
1.1 Entendimento
Também anotamos diversos dados com base no perfil que acreditamos ser o usuário da nossa solução, e a partir destas nossas idealizações construí 4 Proto Personas.
Resumo: Paulo representa o usuário apaixonado pela área de tecnologia, que deseja migrar de carreira, porém tem pouco tempo para estudar.
Resumo: Carlos representa o usuário que deseja melhorar sua situação financeira e já está acostumado com o ambiente online.
Resumo: Simone representa o usuário que deseja alcançar estabilidade financeira, está iniciando sua carreira e se preocupa com certificações.
Resumo: Afonso representa o usuário que busca realização pessoal na profissão, mas tem muitas dúvidas sobre qual caminho seguir.
O objetivo até aqui foi manter o projeto centrado no usuário desde o início, reunir as ferramentas necessárias para direcionar as pesquisas e avaliar se o que estamos buscando possui valor para o usuário.
1.2 Pesquisa
Iniciei minhas pesquisas com uma Desk Research, buscando dados de outras pesquisas já realizadas, artigos, fontes confiáveis que pudessem validar as informações da Matriz CSD e das Proto Personas.
Após análise das evidências coletadas listei alguns insights:
- Existe uma grande quantidade de profissionais buscando cursos e formas de se atualizar.
- O cenário atual está favorecendo a migração de carreiras, muito pela crescente identificação com o Home Office.
- Cada vez mais cresce a necessidade por realização profissional e a busca por melhor qualidade de vida.
- O que mais afeta a tomada de decisão por mudar de área/emprego é a alta taxa de desemprego atual.
- Quem ainda busca entrar no mercado de trabalho encontra mais preocupações e inseguranças do que quem está migrando.
- O Discord é uma ferramenta amplamente utilizada como solução de ensino-aprendizagem.
- A aplicação de gamificação no processo de ensino melhora a experiência do usuário e sua participação online.
Como a Desk Research me retornou validações sobre um perfil mais geral do usuário, decidi realizar uma pesquisa qualitativa com este perfil para explorar especificamente a experiência do usuário durante o processo de estudo online e o consumo de materiais gratuitos.
No fluxo indicado pela linha verde são os usuários que não conheciam o plano de estudos da Orange Evolution.
No fluxo azul, temos os usuários que conheciam a Orange Evolution e chegaram a iniciar os estudos.
No fluxo amarelo, temos os usuários que conheciam a Orange Evolution mas escolheram não se inscrever ou não prosseguir com os estudos da trilha.
O formulário foi respondido por 20 pessoas e após análise das respostas pude listar mais insights:
- O tipo de conteúdo influencia no interesse, já que cada usuário terá uma necessidade/disponibilidade diferente.
- A falta de interação é desestimulante.
- A falta de direcionamento e de um acompanhamento que comprove o conhecimento adquirido atrapalham na continuação dos estudos.
Estas duas pesquisas em conjunto foram essenciais para visualizar o usuário real e suas dores, e com base nessa visualização decidi investigar pela visão de negócio, trazendo uma pesquisa de benchmarking para identificar soluções da área de estudo online que já funcionam no mercado e que amenizem as dores descobertas.
Nessa análise foram selecionadas algumas soluções de guias educacionais, assim como alguns modelos de plataforma EAD
2. Definição
Chegar nesse ponto foi decisivo para validar as hipóteses iniciais e visualizar melhor o caminho que a solução tomaria. Analisando os insights e avaliações reunidas através das pesquisas consegui identificar o problema raiz a ser atacado e as Personas que de fato representam os usuários.
2.1 Problema Raiz
As pessoas em migração de carreira ou iniciando na área pedem por uma maior interação com a plataforma de ensino, é necessário diálogo nessa relação.
O perfil do usuário traz diversas motivações pessoais e carrega um interesse pela área da tecnologia, mas sem espaço para trocar feedbacks o ambiente online se torna vazio e irrelevante. A plataforma precisa encontrar formas de alimentar essa motivação/interesse do usuário durante o processo educacional.
2.2 Persona
Me utilizando apenas dos dados validados pelas pesquisas pude construir 2 Personas principais:
Resumo: Paulo representa o perfil que busca migrar de carreira para alcançar melhor qualidade de vida, se frustra com os obstáculos que surgem nesse caminho.
Resumo: Simone representa o perfil que está iniciando a carreira e busca formas de se qualificar, se frustra com a superficialidade dos cursos.
3. Desenvolvimento
Neste momento de expansão de ideias decidi trazer o exercício Crazy 8’s, onde cada pessoa da squad se propôs a criar em rabiscoframe 8 telas da solução em 5 minutos.
3.1 Wireframes
Reuni os rabiscoframes e comecei a planejar a arquitetura das informações seguindo o conceito Mobile First, utilizando como guia a área de fácil acesso mobile do polegar.
5 telas da solução, com 2 opções de layout para cada.
Todas as funcionalidades e telas foram pensadas a partir das dores do usuário e do problema raiz. Pensando no diálogo entre plataforma e aluno, a ideia era trazer uma tela para o acesso às trilhas que deixasse claro o caminho que precisava ser seguido, uma tela para o perfil onde o progresso dos estudos pudesse ser acompanhado, e uma landing page com descrições sobre o conteúdo para auxiliar o aluno em sua tomada de decisão pela plataforma.
Enquanto isso, a tela de conteúdo individual foi planejada para ser um espaço de receptividade, onde o usuário pudesse dar feedbacks sobre aquele conteúdo diretamente para a plataforma e receber o convite para participar da comunidade Orange Juice, onde poderia interagir com outros alunos, tirar dúvidas e realmente fazer parte de um grupo de estudos.
3.2 Style Guide
Como a plataforma é o produto em si, o logo do Orange Evolution foi utilizado como logo da plataforma. A paleta de cores e a tipografia também foram definidos com base na identidade já existente do produto.
4. Entrega
A plataforma possui duas formas de acesso, uma pelo usuário estudante e outra pelo usuário administrador. Partindo do Wireframe e do Style Guide, comecei a construção do protótipo em alta fidelidade pelo fluxo da pessoa estudante, deixando o fluxo da administração por último.
Utilizei o protótipo em alta para realizar testes de usabilidade através do Discord, onde eu pude conversar com o usuário enquanto acompanhava sua tela navegando pelo protótipo. Recrutei 5 usuários para cada fluxo pensando na eficiência dos testes, seguindo recomendação do Nielsen Norman Group.
4.1 Teste de Usabilidade Moderado - Estudante
A condução destes testes foi mais aberta para captar livres reações e comentários dos usuários. O objetivo aqui foi mais observar o entendimento de cada bloco, botões e funcionalidades pelo usuário.
O primeiro teste foi com uma mentora, também como uma forma de treino pessoal para os testes seguintes. As 4 pessoas restantes não estavam envolvidas com o hackathon.
Ao analisar essa nova rodada de testes consegui fechar os últimos ajustes para o fluxo do usuário estudante.
Ajustes realizados:
- falha: tela de login/registro necessitava de um botão para retornar à landing page
- falha: alteração do nome de cursos para módulos (trilha > módulo > conteúdo)
- falha: correção do menu bottom para que o usuário entenda sua localização
- oportunidade: mais informações descritivas sobre as trilhas na landing page
4.2 Teste de Usabilidade Moderado - Admin
Para o acesso administrativo marquei testes com os stakeholders/mentores do projeto, e dessa vez criei tarefas mais específicas, por se tratar de telas de gerenciamento da plataforma.
Consegui realizar os testes com 2 stakeholders e 3 mentores, onde 1 dos mentores havia montado uma das trilhas de estudo atuais.
A primeira tarefa era passada antes do usuário acessar a plataforma, para identificar se a tela era intuitiva. Eu solicitava que fosse realizado o cadastro de uma trilha ou um módulo. Dependendo da interação a próxima tarefa incluía a edição de um conteúdo, então passando pela observação e entendimento do menu bottom, até chegar na tela de Dashboard, onde eu solicitava a informação de quantos alunos estavam cadastrados na trilha de QA (Quality Assurance).
Ao analisar cada interação consegui melhorar muito a usabilidade do fluxo de administração. Enquanto o Dashboard foi constantemente bem validado, a tela de gerenciamento de conteúdo precisou passar por algumas mudanças de layout.
4.3 Acessibilidade
Para analisar a acessibilidade das páginas utilizei 2 plugins do Figma em conjunto com o site colorable.
Com o plugin Contrast, de Roman Nurik, gerei um relatório de avaliação de contraste que me permitiu identificar pontos de baixo contraste, segundo as Diretrizes de Acessibilidade para Conteúdo Web (WCAG). O tom de cinza (#767676) e o tom de verde (#00856C) mais escuros foram adições à paleta de cores do Style Guide após essa avaliação, com o objetivo de alcançar o contraste mínimo (WCAG 2.2 critério 1.4.3). Para identificar o melhor tom utilizei o site colorable para comparação de contraste entre primeiro e segundo plano.
teste no site colorable
teste no site colorable
Decidi manter o baixo contraste apenas em elementos visuais no estado desabilitado.
Com o plugin Adee Comprehensive Accessibility Tool analisei as páginas através do simulador de daltonismo, e identifiquei problemas de contraste na landing page para pessoas com Deuteranopia (deficiência total nos cones verdes), Protanopia (deficiência total nos cones vermelhos) e Protanomalia (deficiência parcial nos cones vermelhos).
como as pessoas com essas deficiências enxergam a tela
O problema se restringe à área do banner, dificultando a leitura do texto superior, e devido ao curto prazo este problema deverá ser tratado em uma futura atualização.
4.4 Interface Responsiva
4.5 Roadmap
O objetivo do MVP é oferecer um Produto Mínimo Viável, e por isso algumas funcionalidades interessantes e ideias que demandavam mais tempo para implementação ficaram para uma próxima atualização da solução.
Para ilustrar o planejamento da equipe com relação a essas atualizações organizei nossas propostas em um Roadmap, um documento que indica o direcionamento da visão da squad com relação a desenvolvimentos futuros e problemas a serem resolvidos, divididos em colunas que indicam a passagem do tempo de forma mais abrangente: curto prazo, médio prazo e futuro.
Conclusões e Aprendizado
Como esse foi meu primeiro hackathon, primeiro projeto de UX/UI e primeira participação em uma squad, colaborando com um time de desenvolvedores, o que mais tirei de todo esse processo foram aprendizados.
Com relação ao planejamento do projeto, hoje percebo que algumas etapas poderiam ter sido feitas um pouco diferentes. Eu gostaria de ter levantado uma Matriz de Esforço x Impacto logo após a definição do problema, para conseguir alinhar melhor as expectativas e agilizar o processo de construção de telas e codificação, focando no MVP.
E a utilização diária do Figma, buscando resolver problemas reais, me ensinou muito mais do que seria possível ao estudar só na teoria. Aprendi a criar componentes e tive a oportunidade de passar essa aprendizagem adiante. O grupo do hackathon foi super colaborativo, com muitos conteúdos sendo compartilhados pelos participantes, mas também com mentorias que foram essenciais no andamento do projeto. A madrinha da nossa squad, Letícia, UX Designer da FCamara, me auxiliou a realizar Testes de Usabilidade, e graças a ela tive a confiança para realizar diversos testes.
O desenvolvimento em squad também, recebendo feedbacks sobre a viabilidade das telas, dos layouts propostos, realizando exercícios de brainstorm, analisando possíveis soluções e funcionalidades com discussões em grupo, foi uma experiência única que só um projeto real como esse poderia oferecer. E após esses 15 dias de desenvolvimento com metodologias ágeis pude perceber minhas dificuldades com SCRUM e MVP, e a partir daqui focarei meus planos de estudo nessa área.
Obrigade por conferir meu trabalho! ♥
Quer ver outros projetos?
Entre em Contato
Portfolio desenvolvido com carinho por mim, Alex Matos.