top of page

UNIVERSIDADE DE MOGI DAS CRUZES

Workflow

O Workflow é uma plataforma on-line focada em equipes de produção de conteúdo educacional, permitindo que ele gerenciem de maneira clara, ágil e colaborativa a evolução da produção dos chamados objetos de aprendizagem, que podem ser ilustrações, infográficos, videoaulas e jogos interativos.

Contexto

A versão anterior da plataforma foi desenvolvida sem contato com os usuários ou com sua rotina.

O time sofria com muita falha de comunicação entre os membros, gerando duplicidade de trabalho.

As limitações da plataforma levaram o time a também usar outras ferramentas para atender suas necessidades.

Meu papel: Discovery, Entrevista com usuários, Desenvolvimento de conceito, Prototipação de solução

A versão anterior da plataforma era totalmente baseada na navegação por tabelas. Basicamente, cada disciplina em desenvolvimento é apresentada como uma grande tabela em que as aulas são dispostas em colunas e algumas das etapas de produção são dispostas em linhas. O clique em qualquer uma das células da tabela abre uma janela lightbox (ou, em alguns casos, OUTRA tabela antes da janela lightbox), onde os usuários podiam inserir dados como relatório de status, datas de entrega, atribuirem tarefas um ao outro e validar objetos multimídia.

UMC_wf_01.png

​A homepage de cada usuário é um painel inicial (dashboard) que traz cada tarefa em que o usuário está marcado, evitando a necessidade de navegar pela tabela da disciplina. Ele também permite que o usuário acesse outros recursos da plataforma, como distribuição de tarefas, lista de disciplina e agenda

UMC_wf_02.png

Nesse cenário, eram frequentes as falhas de comunicação na equipe, gerando perda de informações na produção de conteúdo; redução da capacidade produtiva da equipe e baixa assertividade dos projetos desenvolvidos; já que a plataforma foi projetada por pessoas que não participavam do processo produtivo.

 

Propusemos então uma nova versão dessa ferramenta, agora baseada nas reais necessidades da equipe, com os seguintes desafios:

  • centralizar a comunicação em uma plataforma verificável;

  • construir um histórico detalhado da produção de conteúdo multimídia com fácil acesso e monitoramento;

  • acelerar o compartilhamento de informações entre a equipe;

  • eliminar o ruído da comunicação e a perda de informações essenciais para o processo de produção

Definindo o problema

A primeira etapa do processo de design envolveu uma análise detalhada da plataforma, a fim de listar todos os seus prós e contras e criar o mapa de navegação. Então, com alguns logins representando todas as posições da equipe de produção, dedicamos tempo navegando por todas as telas, anotando como poderíamos melhorar a experiência do usuário com algumas ações simples (como reduzir o número de cliques para acessar determinadas informações, quais botões deveriam ser adicionados, quais poderiam ser retirados) e também diagnosticar áreas onde eram necessárias interferências mais complexas (quais telas precisariam ser completamente redesenhadas, quais funcionalidades precisariam ser implementadas etc.).

O passo seguinte foi obter uma compreensão macro de como cada membro da equipe trabalhava. Pedimos a alguns dos colegas que nos enviassem um pequeno texto descrevendo sua colaboração nas etapas de produção de cada produto multimídia. Depois disso, selecionamos alguns pares de colegas (cada um representando uma posição da equipe) para conversar sobre como eles usavam a plataforma: o que eles gostavam, o que não gostavam, o que era útil para o trabalho deles ou apenas um monte de telas onde eles são obrigados a inserir informações. Isso trouxe informações suficientes para gerar conceitos e hipóteses.

UMC_wf_03.png

Combinamos todas essas informações com as rotinas de cada membro do time para visualizar os pontos em que nossos trabalhos se encontravam e também para ter uma idéia de como deveria ser a jornada do usuário na nova versão da plataforma. Com isso, aprendemos que:​

  • A maioria da equipe não sabia como navegar pela plataforma sem o dashboard, mesmo havendo um menu dedicado na página inicial.

  • Ao buscar qualquer informação fora do dashboard, o usuário precisava de muitos cliques para encontrá-la.

  • A plataforma não cobriu novos produtos e processos adicionados ao portfólio após sua implementação.

  • Não havia nenhum sistema de notificação para avisar o usuário sobre alterações feitas nas tarefas ou disciplina sob sua responsabilidade.

Com isso em mente, começamos a conceituar a solução, focando nos fluxos de navegação do usuário e no wireframe.

UMC_wf_04.png

Discovery

Desenho de solução

Cores e tipografia

O próximo passo foi focar o design da interface em si: que tipografia deveríamos usar? Quais cores? Após algumas pesquisas chegamos a uma identidade que se encaixasse nas necessidades da equipe.

Optamos por uma interface com tema azul escuro para reduzir a fadiga ocular e torná-la mais confortável, já que a equipe permaneceria longos períodos conectada. Além disso, isso proporcionaria um bom contraste quando combinado com as cores principais e outros elementos do sistema.

UMC_wf_05.avif

A equipe produz conteúdo de educação à distância para três categorias de disciplinas: Bacharelado (100% EaD), Bacharelado (Regular) e Pós-graduação. Portanto, definimos um código de cores para destacar o grau de cada um na nova plataforma:

UMC_wf_06.avif

A hierarquia dos produtos na plataforma ainda é a mesma: as disciplinas contêm aulas, e as aulas contêm tarefas, que são organizadas em 13 tipos.

A primeira coisa que pensamos foi nos afastar da visualização em tabelas para um sistema baseado em cartões, cujas capas mostrariam informações importantes sobre o produto ao qual fossem relacionados. Então, definimos 3 tipos de cartão: disciplinas, aulas e tarefas.

UMC_wf_07.PNG

Dashboard

Para evitar que o usuário "saísse clicando" na busca por informações, escolhemos mostrar todas as informações fixas na capa de cada cartão, junto com dois ícones de notificação: status da tarefa e novas alterações ainda não vistas pelo usuário.

Assim, o dashboard da nova plataforma agora mostra, junto com os menus lateral e superior, 4 informações principais: um calendário com tarefas agendadas, um pequeno gráfico sobre o status da produção até a data de acesso, a distribuição das tarefas e os cartões relacionados a cada tarefa atualmente em desenvolvimento. Montamos a exibição dessas informações em 3 combinações, de acordo com as posições da equipe:

  • Designers Instrucionais, Designers Multimídia Plenos e Revisores de Texto: calendário, gráfico do status de produção e cartões de cada disciplina atribuída.

  • Designers Multimídia Júnior, Ilustradores, Editores de Vídeo e Produtora de Vídeo: calendário, distribuição de tarefas e cartões de tarefas em andamento.

  • Supervisor da Equipe: calendário, gráfico global do status da produção e cartões de todas as disciplinas.

UMC_wf_11.avif

Com esse sistema de cartões, ao clicar nas capa, o usuário acessa o "verso" do cartão, onde está a maioria das informações de produção. Aqui, o usuário pode inserir dados sobre a disciplina, aula ou tarefa à qual está atribuído. Ele pode usar a caixa de texto para inserir informações com hiperlinks, verificar o status da linha do tempo de desenvolvimento, convidar um ou mais colegas para trabalhar com ela na tarefa e navegar pelo histórico dessa tarefa. Cada tipo de cartão tem seu verso específico, cujas informações podem variar de acordo com a posição do usuário na equipe, como visto acima. Abaixo estão exemplos dos cartões de Tarefa e de Disciplina

UMC_wf_12.avif

Na parte superior da tela, o usuário acessa o repositório de notificações, que traz quem realizou determinada ação, qual foi a ação, em qual cartão e quando ela foi feita. Ao clicar na notificação, o usuário abre o verso do cartão em que a ação foi realizada. Essas notificações também seguem o código de cores do sistema.

Ao lado da notificação há um botão que envia a notificação para o Histórico. Na guia "Histórico", estão todas as notificações já visualizadas pelo usuário e também um campo de pesquisa, onde o usuário pode procurar uma notificação específica.

Telas de Disciplinas e Tarefas

Além do dashboard, a plataforma possui mais algumas telas. Duas delas são a Tela de Disciplinas e a Tela de Tarefas.

UMC_wf_13.avif

Como você pode ver, elas são bem parecidas: temos legendas interativas na parte superior da tela que explicam os ícones usados ​​nos cartões, também temos os níveis das disciplinas atuando como filtros clicáveis, ​​e os cartões. Cada tela exibe um tipo de cartão: disciplinas e tarefas. Vamos passar pelos cartões primeiro.

A Tela de Tarefas é a visão mais detalhada do processo de produção, o último nível da hierarquia. Aqui, o usuário vê apenas as tarefas às quais está atribuído. Lembra dos versos específicos que falamos antes? Então, aqui, quando o usuário clica em um dos cartões, ele acessa informações detalhadas sobre a tarefa. A Tela de Disciplinas mostra os dois níveis superiores da produção, com seus cartões específicos.

E as legendas interativas? Bem, aqui estão as variações para cada tela.

UMC_wf_14.png
UMC_wf_14.png

Na Tela de Tarefas, o usuário pode reorganizar seus cartões pelo tipo de tarefa em um menu suspenso ou usar os botões de opção para classificá-los por status da produção e até navegar pelas tarefas concluídas ou atualmente em desenvolvimento com o botão de alternância.

Já na Tela de Disciplinas a legenda interativa é um pouco diferente, aqui temos uma pequena chave que alterna entre "Todas as Disciplinas" e "Minhas Disciplinas".  Aqui, todos podem navegar por todas as disciplinas e aulas ou pelas tarefas às quais ele está atribuído, mas apenas os Designers Instrucionais têm permissão para inserir e editar dados nesses cartões ou criar um novo cartão para uma nova disciplina. Portanto, quando o usuário clica em um dos cartões de disciplina, ele acessa os cartões da aula dessa disciplina e, ao clicar em um desses cartões de aula, ele acessa todos os cartões de tarefas dessa classe, usando os cartões ou o submenu que aparece no menu lateral da tela.

Telas de Distribuição e Tarefas

Outra tela que temos é a de Distribuição de Tarefas (Demanda Jobs), onde toda a equipe é listada de acordo com as posições de cada membro. Esta é a única tabela que trouxemos da versão anterior, mas com novos recursos.

Nesta tela, o usuário pode ver quantas tarefas cada pessoa do time tem até o momento e o quanto elas representam na demanda total da equipe: cada tarefa recebe um valor numérico de acordo com sua complexidade, assim o cálculo chega em um número mais próximo da quantidade real de trabalho de cada um.

UMC_wf_15.avif

Ao clicar em uma das linhas da tabela, o usuário tem uma visão detalhada do membro selecionado: os tipos e quantidades das tarefas atuais, a data da atribuição de cada tarefa, seu status de produção e quem são os Designer Pleno e Designer Instrucional responsáveis. A tabela também mostra quais dessas tarefas dependem da intervenção direta do membro selecionado e quais dependem da intervenção de outros membros, como aprovação ou qualquer outra pendência.

E, finalmente, temos uma chave que alterna entre as tarefas em andamento e as já concluídas.

Notificações via Push

Por fim, a nova versão da plataforma traz um recurso solicitado em todas as entrevistas que fizemos na fase de descoberta: um sistema de notificação via push para ajudar o usuário a rastrear alterações e ações nas tarefas em que ele estiver marcado.

O ícone de notificações aparece basicamente em duas situações: na capa dos cartões com alterações ainda não visualizadas pelo usuário e fixo no menu superior direito de todas as telas, com o total de novas notificações para o usuário.

UMC_wf_17.avif
bottom of page