Claudiana Melo
  • Home
  • Portfólio
  • Sobre
  • Blog
  • Contato
Menu

Hubly

Data:
18/04/2024

Nome do projeto:
Hubly

Via:
SouJunior Labs

Sobre o projeto

Hubly é uma rede projetada para conectar apaixonados por tecnologia e profissionais em busca de conhecimento e colaboração. A plataforma oferece um espaço virtual onde profissionais de áreas relacionadas à tecnologia podem se reunir, compartilhar seus conhecimentos, experiências e projetos, e expandir suas redes de contatos.

A SouJunior Labs

A SouJunior é uma iniciativa inovadora dedicada a abrir portas para profissionais juniores no universo dos produtos digitais. O projeto não só visa proporcionar oportunidades reais de trabalho, mas também enfoca no desenvolvimento de competências essenciais, no aprofundamento do conhecimento técnico e na aquisição de habilidades práticas inestimáveis.

Durante minha jornada na equipe do Hubly, tive a chance única de colaborar de perto com um grupo multidisciplinar de talentos. Juntos, trocamos insights valiosos, aprimoramos ideias e asseguramos a incorporação de práticas de UX de vanguarda em nosso projeto. Essa colaboração intensa e produtiva não apenas acelerou meu crescimento profissional, mas também me motivou profundamente a persistir na busca por inovações significativas no design de produtos digitais.

Essa jornada na SouJunior se revelou excepcionalmente gratificante e enriquecedora, marcando um capítulo decisivo na minha carreira. Ela solidificou minha paixão pelo design de produtos digitais e reforçou minha dedicação em contribuir de forma impactante para esta área.

A equipe

Dois UX Designers, um  Scrum master, um QA, um Product Manager, três Desenvolvedores Backend, três Desenvolvedores Frontend.

Processo de Design

Desk research
e Benchmark

Durante o processo de pesquisa de UX, utilizamos uma abordagem abrangente que incorporou técnicas de Desk Research e Benchmarking.

Através da Desk Research, buscamos compreender o contexto do mercado, analisar as tendências da indústria e identificar as necessidades dos usuários. Isso envolveu a coleta e análise de uma variedade de informações secundárias disponíveis publicamente.

Já a técnica de Benchmarking, nos possibilitou comparar as práticas de design, produtos e serviços do nossa projeto com os concorrentes e líderes de mercado. Analisamos redes sociais com propostas semelhantes para identificar pontos fortes e fracos, características de design eficazes e áreas de oportunidade para melhorias. Essa análise comparativa foi fundamental para orientar nossas decisões de design e garantir que nossas soluções
estivessem alinhadas com as melhores práticas do setor.

Confira a Desk research aqui!

Confira o Benchmarking aqui!

Formulário de pesquisa

Para assegurar que o Hubly fosse genuinamente centrado no usuário, implementamos um formulário de pesquisa abrangente como parte integrante do processo de design. Nosso principal objetivo era coletar feedback valioso dos usuários para informar o desenvolvimento do produto e garantir uma experiência excepcional para o usuário.

Utilizamos uma variedade de perguntas abertas e fechadas para capturar insights tanto quantitativos quanto qualitativos, permitindo uma compreensão holística das necessidades e desejos dos usuários.

Os resultados obtidos por meio do formulário de pesquisa foram cruciais para orientar o processo de design. Eles forneceram insights valiosos que influenciaram nossas decisões de design, melhorias na usabilidade e inclusão de recursos adicionais. A abordagem centrada no usuário, conduzida por meio deste formulário, foi fundamental para o sucesso do projeto, garantindo que o produto final satisfizesse verdadeiramente as necessidades e expectativas dos usuários.

Confira mais informações sobre a pesquisa aqui!

User persona

Mapa da jornada do usuário

Confira o mapa em alta qualidade aqui!

Fluxo do usuário

Confira o fluxo em alta qualidade aqui!

MoSCoW

O método MoSCoW é uma técnica de priorização que utilizamos no projeto para categorizar requisitos em quatro níveis: Must have, Should have, Could have e Won’t have. Esta abordagem nos permitiu definir claramente o que seria essencial para o sucesso do projeto, o que seria importante, mas poderia ser adiado, o que seria desejável, mas não crucial, e o que seriaexplicitamente excluído.

Durante a aplicação do MoSCoW, trabalhamos em estreita colaboração com a equipe para identificar e classificar os requisitos de acordo com essas categorias. Isso nos ajudou a concentrar nossos esforços nos elementos mais críticos do projeto, garantindo que atendêssemos às necessidades dos usuários de forma eficaz e eficiente. Essa técnica não apenas nos ajudou a estabelecer prioridades, mas também a manter o foco nas metas e objetivos principais do projeto.

Confira o MoSCoW em alta qualidade aqui!

Wireframes de papel

Os wireframes de papel representam uma fase crucial no processo de design de UX, onde as ideias ganham forma tangível antes mesmo de seremdigitalizadas. Nesta etapa, utilizamos papel e caneta para esboçar as interfaces do usuário de forma rápida e iterativa. Isso nos permitiu explorar diferentes conceitos, testar fluxos de navegação e validar soluções de design de maneira ágil e econômica.

Além disso, os wireframes de papel nos permitiram experimentar livremente com layouts, hierarquias de informação e interações sem o peso das ferramentas digitais. Isso promoveu a criatividade e a colaboração, ajudando-nos a refinar e aprimorar as soluções de design antes de avançarmos para as etapas de prototipagem digital.

Confira todos os wireframes de papel aqui!

Protótipo de baixa fidelidade

Os wireframes de baixa fidelidade serviram como a espinha dorsal do design, delineando a estrutura e a disposição dos elementos na interface do usuário.

Com uma abordagem centrada na estruturação da interface e na experiência do usuário, eles foram a base sólida sobre a qual construímos os protótipos de alta fidelidade e finalizamos o design do produto. Eles desempenharam um papel crucial na garantia de que o produto final atendesse às necessidades e expectativas dos usuários de maneira eficaz e intuitiva.

Confira os wireframes digitais aqui!

Estudo de usabilidade

Com o MVP já definido, era necessário validar nossos designs e obter insights diretos sobre a experiência do usuário. Para isso, realizamos testes de usabilidade com a participação de usuários reais. Solicitamos que os participantes completassem uma série de tarefas específicas, enquanto monitorávamos indicadores como tempo de tarefa, taxas de conversão e taxas de erro. Esses KPIs foram escolhidos pela sua capacidade de fornecer uma visão tanto quantitativa quanto qualitativa do
desempenho do usuário.

Resultados: Os testes de usabilidade revelaram insights valiosos:

• Tempo de Tarefa: Notamos que uma tarefa específica levava mais tempo do que o esperado para ser concluída, indicando áreas em que o design poderia ser simplificado.

• Taxas de Conversão: A análise das taxas de conversão identificou pontos fortes no processo de navegação, onde os
usuários realizavam as ações com 100% de acerto.

• Taxas de Erro: Recebemos sugestões específicas que apontavam para elementos da interface do usuário (UI) que poderiam ser redesenhados para minimizar confusões.

Com base nesses resultados, fizemos iterações nos wireframes de baixa fidelidade, implementando mudanças focadas em:

Reduzir o tempo de tarefa, por meio da simplificação de processos e do aprimoramento da intuitividade da interface.
Revisar elementos da interface do usuário que causavam confusão, implementando um feedback mais claro para os
usuários.

Essas alterações visam aprimorar a experiência do usuário, facilitando a interação com o produto e aumentando a eficiência na conclusão de tarefas.

 

Confira mais sobre o estudo aqui!

Style Guide

Ao criar o Style Guide, nosso objetivo foi elaborar um documento essencial para garantir a consistência e coesão da interface. Este guia atua como uma referência crucial para a equipe, assegurando que cada elemento do design contribua para uma experiência de usuário fluida e intuitiva.

O Style Guide não apenas direciona a equipe atual, mas também se estabelece como um recurso valioso para o desenvolvimento futuro do projeto. Ele é a chave para manter a uniformidade do produto em todas as suas iterações, reforçando a importância de uma base sólida e bem definida para o design.

Confira o Style Guide aqui!

Protótipo de alta fidelidade

O protótipo de alta fidelidade apresentado reflete o ápice do nosso processo de design, incorporando pesquisas aprofundadas sobre as necessidades dos usuários e os princípios tanto de UX quanto de UI para criar uma experiência de usuário rica e intuitiva.

Cada elemento foi meticulosamente projetado para garantir usabilidade, acessibilidade e estética alinhadas com os objetivos do projeto. Este protótipo não apenas visualiza a solução proposta, mas também serve como uma ferramenta vital para testes, feedback e desenvolvimento.

Ele é a concretização da nossa visão de design, demonstrando como cada decisão contribui para uma jornada do usuário coesa e envolvente.

Todos os protótipos interativos estão disponíveis ao final desta apresentação. Não deixe de conferi-los!

Versão Desktop

Versão Tablet

Versão Smartphone