UX/UI Design — Projeto de EAD na área de música

Diego Curumim
Aug 9, 2017 · 4 min read

Meu ultimo trabalho foi um grande desafio pra mim, meu primeiro EAD, realizei esse trabalho na Agencia que Trabalho: e-deas
Esse foi um daqueles trabalhos que nos poem em um teste de fogo, esse é o meu primeiro post explicando a minha caminhada no que compõe a jornada de um projeto desse tamanho.

Nesse post, vocês ficarão por dentro de todo o processo que utilizei nele enquanto aplico o que aprendi e aprendo de UX conversando com profissionais da área, artigos, vídeos e cursos.

Separei em duas fases, a 1º etapa é da concepção até a entrega do trabalho e a 2º etapa é o acompanhamento após a entrega e após avaliarmos os resultados do projeto como um todo, desde a questão dos testes, pesquisas e alcance do projeto.

1ª FASE: CONCEPÇÃO

Após a reunião com o diretor e gerente de projetos chegou oficialmente a demanda! Aí foi hora de organizar as horas, analisar todo o material do cliente e propor para a equipe um conjunto de ações que culminaram em uma entrega final muito mais embasada e consistente.

Essa foi a fase da concepção e nela realizei alguns dos seguintes passos:

Road Map
Criei o plano de ação, para o desenvolvimento de um projeto ajudando a coordenar e planejar os avanços.

OBS: Os arquivos estão modificados para poder exibir aqui nesse post.

Definição das Métricas de Sucesso

Listei tudo que foi usado para medir se o projeto atingiu os objetivos do cliente. (Abaixo algumas das métricas)
- Número de visitas
- Número de horas no site
- Número de alunos
- Número de vendas

Métricas de Sucesso

Criar esses arquivos/docs também foram um desafio, pois até então não sei quais as ferramentas mais apropriadas para criá-las. Ambas as etapas acima criei com uma ferramenta chamada coggle que já utilizo no dia-a-dia de trabalho.

OBS: Os arquivos estão modificados para poder exibir aqui nesse post.

Personas

Criei duas personas para o meu projeto, o Matheus e o André, os dois são músicos, um é graduado e procura uma pós-graduação mas não tem muito tempo para se deslocar a faculdade/universidade e o outro quer se formar ou fazer algum curso livre pela internet, eles é que me ajudaram a entender melhor os usuários do Portal.

Utilizei a ferramenta de criação de persona da rock content.

Jornada do Usuário

Após as personas, criei o mapa da jornada do usuário deixou documentado cada passo da relação entre os usuários e o portal. Isso facilitou pra mim pois percebi onde precisava melhorar.

Inventário de Conteúdo

Como o conteúdo é grande, se fez necessário ter um controle dos textos que foram gerados para o portal.

Foram mapeadas todas as páginas (previstas ou existentes) e do conteúdo de cada uma. Assim, eu e a equipe conseguimos ver todo o conteúdo, o que nos trouxe uma praticidade em organizar as informações (taxonomia, vocabulário controlado), identificar conteúdo duplicado e no futuro facilitar sua encontrabilidade.

Utilizei a ferramenta de docs do google.

Wireframe e Protótipo Navegável

Eles permitiram o desenvolvimento de variações do layout para manter a consistência do design através do site. Esta é uma parte que foi muito importante do desenvolvimento inicial pois ela criou expectativas ao usuário e os ajudou a desenvolver familiaridade com o site.

Criei o protótipo navegável em uma ferramente chamada ninja mock, nele você pode clicar e navegar entre elas, como se estivesse navegando no produto final. Foram exibidos em um teste de usabilidade com o público interno do projeto (desenvolvedores, gerente de projeto, designers, cliente) para que visualizem mais facilmente como determinada vai funcionar.

Layout

Para criar o layout, utilizei o photoshop em 72dpi (web) e utilizei o grid do bootstrap para a base, o portal é pensando para celular em 1º lugar mas as versões maiores são extremamente importante pois o numero de usuários mesmo que caindo em desktop ainda são necessários devido ao alto numero de usuários do antigo portal. Para as cores utilizei a ferramenta da adobe para ter uma base melhor.

Para a ver a versão do layout acesse: https://goo.gl/nLpYKS

2ª FASE: ACOMPANHAMENTO

Algumas coisas que pretendo realizar: Testes A/B, Mapa de calor, Análise de métricas, Análise de interface e posteriormente criar outro artigo para mostrar os resultados. Agora é cuidar da criança!

Agradeço a todos que me ajudaram (Dicas, tutorias e cursos), a equipe que trabalha comigo, a AG em que estou por me dar total apoio e liberdade para trabalhar. Muito Obrigado!

@diegocurumim

Diego Curumim

Written by

UX/UI Designer and Desenvolvedor Web. diegocurumim.wordpress.com

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade