Edtech
Technical Share - Hackathon Fcamara
Setor
Setor
Edtech
Edtech
Localização
Localização
Remoto
Remoto
Fundada em
Fundada em
2007
2007
Colaboradores
Colaboradores
4000-5000
4000-5000
Desafio
Em uma grande companhia com vários projetos e colaboradores, era uma dificuldade alocar cada profissional de acordo com suas habilidades em uma vaga que condizia com seu perfil. Além de centralizar e distribuir de forma eficiente o conhecimento e as capacidades entre a comunidade.
Resultados
Este projeto tinha como objetivo principal servir como laboratório para avaliação das competências individuais e em grupo dos candidatos. A maioria dos integrantes da squad foi bem avaliada e demonstrou excelentes capacidades técnicas e colaborativas, o que resultou na contratação efetiva de todos na FCamara. O projeto desenvolvido em seguida serviu de base para a construção de ferramenta interna com propósito similar.
Entrevistas com Usuários
Entrevistas com Usuários
Design de UI
Design de UI
Protótipos Interativos
Protótipos Interativos
Design Critique
Design Critique
Testes com Usuários
Testes com Usuários
MVP
MVP
Contexto & Objetivo
Neste hackathon, fiz parte de uma squad composta por mais três designers e desenvolvedores. Tínhamos 15 dias para entregar uma solução MVP funcional. Nosso desafio foi criar uma plataforma capaz de centralizar conteúdos e fomentar conexões entre colaboradores de diferentes níveis de experiência. O objetivo era disponibilizar todo o material em um único lugar, simplificar a busca por especialistas em cada tema, acelerar a troca de conhecimento e, consequentemente, direcionar as pessoas a novas oportunidades profissionais.
Neste hackathon, fiz parte de uma squad composta por mais três designers e desenvolvedores. Tínhamos 15 dias para entregar uma solução MVP funcional. Nosso desafio foi criar uma plataforma capaz de centralizar conteúdos e fomentar conexões entre colaboradores de diferentes níveis de experiência. O objetivo era disponibilizar todo o material em um único lugar, simplificar a busca por especialistas em cada tema, acelerar a troca de conhecimento e, consequentemente, direcionar as pessoas a novas oportunidades profissionais.
Neste hackathon, fiz parte de uma squad composta por mais três designers e desenvolvedores. Tínhamos 15 dias para entregar uma solução MVP funcional. Nosso desafio foi criar uma plataforma capaz de centralizar conteúdos e fomentar conexões entre colaboradores de diferentes níveis de experiência. O objetivo era disponibilizar todo o material em um único lugar, simplificar a busca por especialistas em cada tema, acelerar a troca de conhecimento e, consequentemente, direcionar as pessoas a novas oportunidades profissionais.
Neste hackathon, fiz parte de uma squad composta por mais três designers e desenvolvedores. Tínhamos 15 dias para entregar uma solução MVP funcional. Nosso desafio foi criar uma plataforma capaz de centralizar conteúdos e fomentar conexões entre colaboradores de diferentes níveis de experiência. O objetivo era disponibilizar todo o material em um único lugar, simplificar a busca por especialistas em cada tema, acelerar a troca de conhecimento e, consequentemente, direcionar as pessoas a novas oportunidades profissionais.
Descobrir
Inicialmente foi feita uma desk research para imersão dentro do tema, afim de entender tanto o contexto das operações em uma empresa de tecnologia quanto o ambiente de plataformas que oferecem alguma forma de consulta ou resoluções de questões.
CSD
Para levantar os conhecimentos obtidos após a pesquisa inicial, elaboramos uma matriz de certezas, dúvidas e suposições. Possibilitando uma visão objetiva dos pontos de interesse a serem estudados a fundo durante os próximos passos de pesquisa.
Matriz CSD
Proto Personas
Criamos as proto-personas baseadas inicialmente nas suposições que surgiram da desk research e análise do briefing, de modo a alinhar o conhecimento até aquele momento sobre o público-alvo. Com a criação das proto-personas foi possível ter um melhor direcionamento na priorização das suposições mais relevantes durante o planejamento das pesquisas.
A princípio iniciamos com uma pessoa recém contratada na empresa no início de sua carreira e estudo na área e uma pessoa tech lead encarregada de alocar pessoas em projetos e sanar dúvidas de seus desenvolvedores.
Proto Personas
Entrevistas
Com parte das suposições esclarecidas, elaboramos um roteiro semiestruturado para aprofundar qualitativamente as questões levantadas e compreender melhor a jornada atual do usuário.
A partir das entrevistas, organizamos os principais achados em um mapa de afinidade e discutimos os padrões emergentes:
A comunicação entre colaboradores já era bem atendida por canais como WhatsApp, Teams e Discord, não sendo necessária a criação de um novo meio.
Identificamos divergências nas trilhas de aprendizado entre desenvolvedores e designers, o que nos levou a dividir a proto-persona em dois perfis distintos.
Alguns colaboradores buscavam ajuda fora da empresa para evitar exposição, o que levantou a hipótese de incluir anonimato nas interações da plataforma.
Para incentivar o uso da ferramenta, surgiram sugestões de recursos de gamificação como forma de engajar e recompensar os usuários.
Resultados do Google Analytics
Descobrir
Inicialmente foi feita uma desk research para imersão dentro do tema, afim de entender tanto o contexto das operações em uma empresa de tecnologia quanto o ambiente de plataformas que oferecem alguma forma de consulta ou resoluções de questões.
CSD
Para levantar os conhecimentos obtidos após a pesquisa inicial, elaboramos uma matriz de certezas, dúvidas e suposições. Possibilitando uma visão objetiva dos pontos de interesse a serem estudados a fundo durante os próximos passos de pesquisa.
Matriz CSD
Proto Personas
Criamos as proto-personas baseadas inicialmente nas suposições que surgiram da desk research e análise do briefing, de modo a alinhar o conhecimento até aquele momento sobre o público-alvo. Com a criação das proto-personas foi possível ter um melhor direcionamento na priorização das suposições mais relevantes durante o planejamento das pesquisas.
A princípio iniciamos com uma pessoa recém contratada na empresa no início de sua carreira e estudo na área e uma pessoa tech lead encarregada de alocar pessoas em projetos e sanar dúvidas de seus desenvolvedores.
Proto Personas
Entrevistas
Com parte das suposições esclarecidas, elaboramos um roteiro semiestruturado para aprofundar qualitativamente as questões levantadas e compreender melhor a jornada atual do usuário.
A partir das entrevistas, organizamos os principais achados em um mapa de afinidade e discutimos os padrões emergentes:
A comunicação entre colaboradores já era bem atendida por canais como WhatsApp, Teams e Discord, não sendo necessária a criação de um novo meio.
Identificamos divergências nas trilhas de aprendizado entre desenvolvedores e designers, o que nos levou a dividir a proto-persona em dois perfis distintos.
Alguns colaboradores buscavam ajuda fora da empresa para evitar exposição, o que levantou a hipótese de incluir anonimato nas interações da plataforma.
Para incentivar o uso da ferramenta, surgiram sugestões de recursos de gamificação como forma de engajar e recompensar os usuários.
Resultados do Google Analytics
Descobrir
Inicialmente foi feita uma desk research para imersão dentro do tema, afim de entender tanto o contexto das operações em uma empresa de tecnologia quanto o ambiente de plataformas que oferecem alguma forma de consulta ou resoluções de questões.
CSD
Para levantar os conhecimentos obtidos após a pesquisa inicial, elaboramos uma matriz de certezas, dúvidas e suposições. Possibilitando uma visão objetiva dos pontos de interesse a serem estudados a fundo durante os próximos passos de pesquisa.
Matriz CSD
Proto Personas
Criamos as proto-personas baseadas inicialmente nas suposições que surgiram da desk research e análise do briefing, de modo a alinhar o conhecimento até aquele momento sobre o público-alvo. Com a criação das proto-personas foi possível ter um melhor direcionamento na priorização das suposições mais relevantes durante o planejamento das pesquisas.
A princípio iniciamos com uma pessoa recém contratada na empresa no início de sua carreira e estudo na área e uma pessoa tech lead encarregada de alocar pessoas em projetos e sanar dúvidas de seus desenvolvedores.
Proto Personas
Entrevistas
Com parte das suposições esclarecidas, elaboramos um roteiro semiestruturado para aprofundar qualitativamente as questões levantadas e compreender melhor a jornada atual do usuário.
A partir das entrevistas, organizamos os principais achados em um mapa de afinidade e discutimos os padrões emergentes:
A comunicação entre colaboradores já era bem atendida por canais como WhatsApp, Teams e Discord, não sendo necessária a criação de um novo meio.
Identificamos divergências nas trilhas de aprendizado entre desenvolvedores e designers, o que nos levou a dividir a proto-persona em dois perfis distintos.
Alguns colaboradores buscavam ajuda fora da empresa para evitar exposição, o que levantou a hipótese de incluir anonimato nas interações da plataforma.
Para incentivar o uso da ferramenta, surgiram sugestões de recursos de gamificação como forma de engajar e recompensar os usuários.
Resultados do Google Analytics
Descobrir
Inicialmente foi feita uma desk research para imersão dentro do tema, afim de entender tanto o contexto das operações em uma empresa de tecnologia quanto o ambiente de plataformas que oferecem alguma forma de consulta ou resoluções de questões.
CSD
Para levantar os conhecimentos obtidos após a pesquisa inicial, elaboramos uma matriz de certezas, dúvidas e suposições. Possibilitando uma visão objetiva dos pontos de interesse a serem estudados a fundo durante os próximos passos de pesquisa.
Matriz CSD
Proto Personas
Criamos as proto-personas baseadas inicialmente nas suposições que surgiram da desk research e análise do briefing, de modo a alinhar o conhecimento até aquele momento sobre o público-alvo. Com a criação das proto-personas foi possível ter um melhor direcionamento na priorização das suposições mais relevantes durante o planejamento das pesquisas.
A princípio iniciamos com uma pessoa recém contratada na empresa no início de sua carreira e estudo na área e uma pessoa tech lead encarregada de alocar pessoas em projetos e sanar dúvidas de seus desenvolvedores.
Proto Personas
Entrevistas
Com parte das suposições esclarecidas, elaboramos um roteiro semiestruturado para aprofundar qualitativamente as questões levantadas e compreender melhor a jornada atual do usuário.
A partir das entrevistas, organizamos os principais achados em um mapa de afinidade e discutimos os padrões emergentes:
A comunicação entre colaboradores já era bem atendida por canais como WhatsApp, Teams e Discord, não sendo necessária a criação de um novo meio.
Identificamos divergências nas trilhas de aprendizado entre desenvolvedores e designers, o que nos levou a dividir a proto-persona em dois perfis distintos.
Alguns colaboradores buscavam ajuda fora da empresa para evitar exposição, o que levantou a hipótese de incluir anonimato nas interações da plataforma.
Para incentivar o uso da ferramenta, surgiram sugestões de recursos de gamificação como forma de engajar e recompensar os usuários.
Resultados do Google Analytics
Definir
Com as informações levantadas por meio das entrevistas e a confirmação de algumas hipóteses, passamos para a definição da solução começando pela revisão das proto-personas.
Personas
Partindo dos dados obtidos através de nossa survey e entrevistas, validamos nossos usuários de modo a adicionar mais uma persona referente à divisão da jornada de desenvolvedores e UX designers, além da já existente referente à jornada de tech leads.
Personas Revisadas
Priorização
Com as dores dos usuários definidas, encontramos oportunidades para features que poderiam ser implementadas em nossa plataforma.
Dadas essas soluções, em conjunto à toda pesquisa realizada até este ponto, foi feita uma priorização dessas features junto aos desenvolvedores, medindo aquilo que trazia mais valor ao MVP.
Mapeamento de Priorização
Definir
Com as informações levantadas por meio das entrevistas e a confirmação de algumas hipóteses, passamos para a definição da solução começando pela revisão das proto-personas.
Personas
Partindo dos dados obtidos através de nossa survey e entrevistas, validamos nossos usuários de modo a adicionar mais uma persona referente à divisão da jornada de desenvolvedores e UX designers, além da já existente referente à jornada de tech leads.
Personas Revisadas
Priorização
Com as dores dos usuários definidas, encontramos oportunidades para features que poderiam ser implementadas em nossa plataforma.
Dadas essas soluções, em conjunto à toda pesquisa realizada até este ponto, foi feita uma priorização dessas features junto aos desenvolvedores, medindo aquilo que trazia mais valor ao MVP.
Mapeamento de Priorização
Definir
Com as informações levantadas por meio das entrevistas e a confirmação de algumas hipóteses, passamos para a definição da solução começando pela revisão das proto-personas.
Personas
Partindo dos dados obtidos através de nossa survey e entrevistas, validamos nossos usuários de modo a adicionar mais uma persona referente à divisão da jornada de desenvolvedores e UX designers, além da já existente referente à jornada de tech leads.
Personas Revisadas
Priorização
Com as dores dos usuários definidas, encontramos oportunidades para features que poderiam ser implementadas em nossa plataforma.
Dadas essas soluções, em conjunto à toda pesquisa realizada até este ponto, foi feita uma priorização dessas features junto aos desenvolvedores, medindo aquilo que trazia mais valor ao MVP.
Mapeamento de Priorização
Definir
Com as informações levantadas por meio das entrevistas e a confirmação de algumas hipóteses, passamos para a definição da solução começando pela revisão das proto-personas.
Personas
Partindo dos dados obtidos através de nossa survey e entrevistas, validamos nossos usuários de modo a adicionar mais uma persona referente à divisão da jornada de desenvolvedores e UX designers, além da já existente referente à jornada de tech leads.
Personas Revisadas
Priorização
Com as dores dos usuários definidas, encontramos oportunidades para features que poderiam ser implementadas em nossa plataforma.
Dadas essas soluções, em conjunto à toda pesquisa realizada até este ponto, foi feita uma priorização dessas features junto aos desenvolvedores, medindo aquilo que trazia mais valor ao MVP.
Mapeamento de Priorização
Idear
Após a definição das funcionalidades do MVP e seu peso em termos de viabilidade e valor para o produto, iniciamos a fase de ideação pela pesquisa dessas funcionalidades em produtos de propóstas similares.
Benchmarking e Referências
Para a fase de ideação do protótipo, foram pesquisadas funcionalidades similares em plataformas já conhecidas. Os principais produtos que trazem as funcionalidades iguais ou similares as levantadas são: Quora, Stackoverflow, Linkedin, Mentora, Toptal e Upwork
Benchmark de Soluções
Site Map
Antes da etapa de wireframes, juntamos as referências e montamos o mapa da aplicação, em modo de fluxograma para entender como as features se integrariam no sistema como um todo.
Site-Map
Esboços e Wireframes
Após pesquisar referências, montamos wireframes em papel individualmente para compararmos o que cada um entendia como viável e votamos naqueles que faziam mais sentido com o MVP. Assim montamos o protótipo de baixa fidelidade entendendo o posicionamento de cada componente e um fluxo simples de uma tela para outra. Optamos pela estratégia de “mobile first”, usando componentes que funcionariam tanto para dispositivos móveis como para os desktops, assim facilitando o desenvolvimento.
Esboços e Wireframes
Protótipos
Para o protótipo de média fidelidade, utilizamos componentes do Material Design (Design System desenvolvido pela Google) o que agilizou o processo para testes de usabilidade.
Nesta etapa, nós nos preocupamos em estabelecer a navegação do produto, nos poupando tempo na decisão de cores e outras características estéticas durante esta fase.
Alta Fidelidade
Idear
Após a definição das funcionalidades do MVP e seu peso em termos de viabilidade e valor para o produto, iniciamos a fase de ideação pela pesquisa dessas funcionalidades em produtos de propóstas similares.
Benchmarking e Referências
Para a fase de ideação do protótipo, foram pesquisadas funcionalidades similares em plataformas já conhecidas. Os principais produtos que trazem as funcionalidades iguais ou similares as levantadas são: Quora, Stackoverflow, Linkedin, Mentora, Toptal e Upwork
Benchmark de Soluções
Site Map
Antes da etapa de wireframes, juntamos as referências e montamos o mapa da aplicação, em modo de fluxograma para entender como as features se integrariam no sistema como um todo.
Site-Map
Esboços e Wireframes
Após pesquisar referências, montamos wireframes em papel individualmente para compararmos o que cada um entendia como viável e votamos naqueles que faziam mais sentido com o MVP. Assim montamos o protótipo de baixa fidelidade entendendo o posicionamento de cada componente e um fluxo simples de uma tela para outra. Optamos pela estratégia de “mobile first”, usando componentes que funcionariam tanto para dispositivos móveis como para os desktops, assim facilitando o desenvolvimento.
Esboços e Wireframes
Protótipos
Para o protótipo de média fidelidade, utilizamos componentes do Material Design (Design System desenvolvido pela Google) o que agilizou o processo para testes de usabilidade.
Nesta etapa, nós nos preocupamos em estabelecer a navegação do produto, nos poupando tempo na decisão de cores e outras características estéticas durante esta fase.
Alta Fidelidade
Idear
Após a definição das funcionalidades do MVP e seu peso em termos de viabilidade e valor para o produto, iniciamos a fase de ideação pela pesquisa dessas funcionalidades em produtos de propóstas similares.
Benchmarking e Referências
Para a fase de ideação do protótipo, foram pesquisadas funcionalidades similares em plataformas já conhecidas. Os principais produtos que trazem as funcionalidades iguais ou similares as levantadas são: Quora, Stackoverflow, Linkedin, Mentora, Toptal e Upwork
Benchmark de Soluções
Site Map
Antes da etapa de wireframes, juntamos as referências e montamos o mapa da aplicação, em modo de fluxograma para entender como as features se integrariam no sistema como um todo.
Site-Map
Esboços e Wireframes
Após pesquisar referências, montamos wireframes em papel individualmente para compararmos o que cada um entendia como viável e votamos naqueles que faziam mais sentido com o MVP. Assim montamos o protótipo de baixa fidelidade entendendo o posicionamento de cada componente e um fluxo simples de uma tela para outra. Optamos pela estratégia de “mobile first”, usando componentes que funcionariam tanto para dispositivos móveis como para os desktops, assim facilitando o desenvolvimento.
Esboços e Wireframes
Protótipos
Para o protótipo de média fidelidade, utilizamos componentes do Material Design (Design System desenvolvido pela Google) o que agilizou o processo para testes de usabilidade.
Nesta etapa, nós nos preocupamos em estabelecer a navegação do produto, nos poupando tempo na decisão de cores e outras características estéticas durante esta fase.
Alta Fidelidade
Idear
Após a definição das funcionalidades do MVP e seu peso em termos de viabilidade e valor para o produto, iniciamos a fase de ideação pela pesquisa dessas funcionalidades em produtos de propóstas similares.
Benchmarking e Referências
Para a fase de ideação do protótipo, foram pesquisadas funcionalidades similares em plataformas já conhecidas. Os principais produtos que trazem as funcionalidades iguais ou similares as levantadas são: Quora, Stackoverflow, Linkedin, Mentora, Toptal e Upwork
Benchmark de Soluções
Site Map
Antes da etapa de wireframes, juntamos as referências e montamos o mapa da aplicação, em modo de fluxograma para entender como as features se integrariam no sistema como um todo.
Site-Map
Esboços e Wireframes
Após pesquisar referências, montamos wireframes em papel individualmente para compararmos o que cada um entendia como viável e votamos naqueles que faziam mais sentido com o MVP. Assim montamos o protótipo de baixa fidelidade entendendo o posicionamento de cada componente e um fluxo simples de uma tela para outra. Optamos pela estratégia de “mobile first”, usando componentes que funcionariam tanto para dispositivos móveis como para os desktops, assim facilitando o desenvolvimento.
Esboços e Wireframes
Protótipos
Para o protótipo de média fidelidade, utilizamos componentes do Material Design (Design System desenvolvido pela Google) o que agilizou o processo para testes de usabilidade.
Nesta etapa, nós nos preocupamos em estabelecer a navegação do produto, nos poupando tempo na decisão de cores e outras características estéticas durante esta fase.
Alta Fidelidade
Testes e Validação
O teste de usabilidade foi feito com o intuito de testar o fluxo entre telas, avaliando tasks e entendendo o que precisaria ser ajustado para o protótipo de alta fidelidade.
Teste de Usabilidade & Critique
Através da plataforma Maze foram realizadas duas iterações partindo do primeiro protótipo de média-fidelidade, com uma média de 5 participantes no modelo assistido de teste. Além disso, simultaneamente, aplicamos algumas sessões de design critique com os mentores e mentoras do hackaton, a fim de obter feedbacks não apenas dos usuários, mas de outras visões como, UX, QA e desenvolvimento.
Testes e Validação
O teste de usabilidade foi feito com o intuito de testar o fluxo entre telas, avaliando tasks e entendendo o que precisaria ser ajustado para o protótipo de alta fidelidade.
Teste de Usabilidade & Critique
Através da plataforma Maze foram realizadas duas iterações partindo do primeiro protótipo de média-fidelidade, com uma média de 5 participantes no modelo assistido de teste. Além disso, simultaneamente, aplicamos algumas sessões de design critique com os mentores e mentoras do hackaton, a fim de obter feedbacks não apenas dos usuários, mas de outras visões como, UX, QA e desenvolvimento.
Testes e Validação
O teste de usabilidade foi feito com o intuito de testar o fluxo entre telas, avaliando tasks e entendendo o que precisaria ser ajustado para o protótipo de alta fidelidade.
Teste de Usabilidade & Critique
Através da plataforma Maze foram realizadas duas iterações partindo do primeiro protótipo de média-fidelidade, com uma média de 5 participantes no modelo assistido de teste. Além disso, simultaneamente, aplicamos algumas sessões de design critique com os mentores e mentoras do hackaton, a fim de obter feedbacks não apenas dos usuários, mas de outras visões como, UX, QA e desenvolvimento.
Testes e Validação
O teste de usabilidade foi feito com o intuito de testar o fluxo entre telas, avaliando tasks e entendendo o que precisaria ser ajustado para o protótipo de alta fidelidade.
Teste de Usabilidade & Critique
Através da plataforma Maze foram realizadas duas iterações partindo do primeiro protótipo de média-fidelidade, com uma média de 5 participantes no modelo assistido de teste. Além disso, simultaneamente, aplicamos algumas sessões de design critique com os mentores e mentoras do hackaton, a fim de obter feedbacks não apenas dos usuários, mas de outras visões como, UX, QA e desenvolvimento.
Melhorias
Após os testes, compilamos os feedbacks e as observações dos usuários e, em seguida, implementamos as alterações mais relevantes, atualizando o protótipo de alta fidelidade.
Antes e Depois
Inicialmente o botão de nova pergunta não estava intuitivo para quando os usuários precisavam executar essa ação, nos levando a adicionar um botão estilo fab, flutuando no menu inicial.
Em relação ao menu, ajustamos a navegação para que a home da plataforma pudesse servir mais como um hub para todas as funcionalidades disponíveis.
Fizemos ajustes na taxonomia, principalmente em relação aos breadcrumbs.
Modificamos a barra de navegação para que ficasse mais nítido para o usuário em qual seção ele estava.
Iterações dos Protótipos
Style Guide
Nosso style guide parte de componentes customizados do Material Design.
Style Guide
Acessibilidade
O tema e cores escolhidos passaram por testes de contraste para garantir a acessibilidade da aplicação.
Check de Acessibilidade
Responsividade
Com todos os ajustes necessários para o fluxo de navegação mobile, começamos o desenvolvimento do protótipo decidindo os pontos de quebra para a responsividade desktop e tablet utilizando os mesmos componentes e escalando o que fosse necessário. Além de ajustes pontuais como a adaptação da barra de navegação, aumento de tipografia e mudança do botão fab para submeter uma nova pergunta.
Layout para Desktop/Tablet
Melhorias
Após os testes, compilamos os feedbacks e as observações dos usuários e, em seguida, implementamos as alterações mais relevantes, atualizando o protótipo de alta fidelidade.
Antes e Depois
Inicialmente o botão de nova pergunta não estava intuitivo para quando os usuários precisavam executar essa ação, nos levando a adicionar um botão estilo fab, flutuando no menu inicial.
Em relação ao menu, ajustamos a navegação para que a home da plataforma pudesse servir mais como um hub para todas as funcionalidades disponíveis.
Fizemos ajustes na taxonomia, principalmente em relação aos breadcrumbs.
Modificamos a barra de navegação para que ficasse mais nítido para o usuário em qual seção ele estava.
Iterações dos Protótipos
Style Guide
Nosso style guide parte de componentes customizados do Material Design.
Style Guide
Acessibilidade
O tema e cores escolhidos passaram por testes de contraste para garantir a acessibilidade da aplicação.
Check de Acessibilidade
Responsividade
Com todos os ajustes necessários para o fluxo de navegação mobile, começamos o desenvolvimento do protótipo decidindo os pontos de quebra para a responsividade desktop e tablet utilizando os mesmos componentes e escalando o que fosse necessário. Além de ajustes pontuais como a adaptação da barra de navegação, aumento de tipografia e mudança do botão fab para submeter uma nova pergunta.
Layout para Desktop/Tablet
Melhorias
Após os testes, compilamos os feedbacks e as observações dos usuários e, em seguida, implementamos as alterações mais relevantes, atualizando o protótipo de alta fidelidade.
Antes e Depois
Inicialmente o botão de nova pergunta não estava intuitivo para quando os usuários precisavam executar essa ação, nos levando a adicionar um botão estilo fab, flutuando no menu inicial.
Em relação ao menu, ajustamos a navegação para que a home da plataforma pudesse servir mais como um hub para todas as funcionalidades disponíveis.
Fizemos ajustes na taxonomia, principalmente em relação aos breadcrumbs.
Modificamos a barra de navegação para que ficasse mais nítido para o usuário em qual seção ele estava.
Iterações dos Protótipos
Style Guide
Nosso style guide parte de componentes customizados do Material Design.
Style Guide
Acessibilidade
O tema e cores escolhidos passaram por testes de contraste para garantir a acessibilidade da aplicação.
Check de Acessibilidade
Responsividade
Com todos os ajustes necessários para o fluxo de navegação mobile, começamos o desenvolvimento do protótipo decidindo os pontos de quebra para a responsividade desktop e tablet utilizando os mesmos componentes e escalando o que fosse necessário. Além de ajustes pontuais como a adaptação da barra de navegação, aumento de tipografia e mudança do botão fab para submeter uma nova pergunta.
Layout para Desktop/Tablet
Melhorias
Após os testes, compilamos os feedbacks e as observações dos usuários e, em seguida, implementamos as alterações mais relevantes, atualizando o protótipo de alta fidelidade.
Antes e Depois
Inicialmente o botão de nova pergunta não estava intuitivo para quando os usuários precisavam executar essa ação, nos levando a adicionar um botão estilo fab, flutuando no menu inicial.
Em relação ao menu, ajustamos a navegação para que a home da plataforma pudesse servir mais como um hub para todas as funcionalidades disponíveis.
Fizemos ajustes na taxonomia, principalmente em relação aos breadcrumbs.
Modificamos a barra de navegação para que ficasse mais nítido para o usuário em qual seção ele estava.
Iterações dos Protótipos
Style Guide
Nosso style guide parte de componentes customizados do Material Design.
Style Guide
Acessibilidade
O tema e cores escolhidos passaram por testes de contraste para garantir a acessibilidade da aplicação.
Check de Acessibilidade
Responsividade
Com todos os ajustes necessários para o fluxo de navegação mobile, começamos o desenvolvimento do protótipo decidindo os pontos de quebra para a responsividade desktop e tablet utilizando os mesmos componentes e escalando o que fosse necessário. Além de ajustes pontuais como a adaptação da barra de navegação, aumento de tipografia e mudança do botão fab para submeter uma nova pergunta.
Layout para Desktop/Tablet
Considerações Finais
Após a implementação das features principais e dos ajustes finais no projeto, seguimos para analisar as demais demandas secundárias levantadas durante a priorização.
Próximos Passos
Como próximos passos e oportunidades, consideramos a possibilidade de integrar os serviços de agenda e ligações (Teams) do Office 365, de modo a facilitar o agendamento e contato entre os colaboradores.
Atualmente o sistema de pontuação e ranqueamento são mockados(não funcionais) na versão desenvolvida durante este hackaton. Como continuação deste produto, a aplicação poderá ser integrada com plataformas de gerenciamento de ideias como a Imagine, da própria FCamara, possibilitando aos colaboradores um ambiente fértil e recompensador.
Integração com Outros Seviços
Conclusão
Durante esses 15 dias de hackathon, tive grandes oportunidades de conhecer colegas e mentores que, com muito prazer, me ensinaram sobre habilidades técnicas e comportamentais. Aplicar tanto os conhecimentos que já possuía quanto tudo o que aprendi durante o projeto foi um esforço intenso e de enorme gratificação.
Talvez meu maior desafio tenha sido buscar uma comunicação cada vez mais eficiente entre as diferentes funções. Manter o alinhamento constante entre todos exigiu dedicação além dos protótipos e das linhas de código, pois a falta dessa conexão poderia comprometer todo o trabalho. Um aspecto fundamental que me ajudou a integrar as etapas foi o interesse genuíno em entender e colaborar com o trabalho de cada um, mesmo de forma assíncrona.
Mais do que a técnica e os entregáveis, a recompensa deste evento foi construir um projeto em equipe, com pessoas de ideias e perfis distintos. Eu não sou mais a mesma pessoa de 15 dias atrás.
André Constancio | Alisson Ferreira | Francisco Kleuvys | Leo Rigotto | Mariane Saito
Considerações Finais
Após a implementação das features principais e dos ajustes finais no projeto, seguimos para analisar as demais demandas secundárias levantadas durante a priorização.
Próximos Passos
Como próximos passos e oportunidades, consideramos a possibilidade de integrar os serviços de agenda e ligações (Teams) do Office 365, de modo a facilitar o agendamento e contato entre os colaboradores.
Atualmente o sistema de pontuação e ranqueamento são mockados(não funcionais) na versão desenvolvida durante este hackaton. Como continuação deste produto, a aplicação poderá ser integrada com plataformas de gerenciamento de ideias como a Imagine, da própria FCamara, possibilitando aos colaboradores um ambiente fértil e recompensador.
Integração com Outros Seviços
Conclusão
Durante esses 15 dias de hackathon, tive grandes oportunidades de conhecer colegas e mentores que, com muito prazer, me ensinaram sobre habilidades técnicas e comportamentais. Aplicar tanto os conhecimentos que já possuía quanto tudo o que aprendi durante o projeto foi um esforço intenso e de enorme gratificação.
Talvez meu maior desafio tenha sido buscar uma comunicação cada vez mais eficiente entre as diferentes funções. Manter o alinhamento constante entre todos exigiu dedicação além dos protótipos e das linhas de código, pois a falta dessa conexão poderia comprometer todo o trabalho. Um aspecto fundamental que me ajudou a integrar as etapas foi o interesse genuíno em entender e colaborar com o trabalho de cada um, mesmo de forma assíncrona.
Mais do que a técnica e os entregáveis, a recompensa deste evento foi construir um projeto em equipe, com pessoas de ideias e perfis distintos. Eu não sou mais a mesma pessoa de 15 dias atrás.
André Constancio | Alisson Ferreira | Francisco Kleuvys | Leo Rigotto | Mariane Saito
Considerações Finais
Após a implementação das features principais e dos ajustes finais no projeto, seguimos para analisar as demais demandas secundárias levantadas durante a priorização.
Próximos Passos
Como próximos passos e oportunidades, consideramos a possibilidade de integrar os serviços de agenda e ligações (Teams) do Office 365, de modo a facilitar o agendamento e contato entre os colaboradores.
Atualmente o sistema de pontuação e ranqueamento são mockados(não funcionais) na versão desenvolvida durante este hackaton. Como continuação deste produto, a aplicação poderá ser integrada com plataformas de gerenciamento de ideias como a Imagine, da própria FCamara, possibilitando aos colaboradores um ambiente fértil e recompensador.
Integração com Outros Seviços
Conclusão
Durante esses 15 dias de hackathon, tive grandes oportunidades de conhecer colegas e mentores que, com muito prazer, me ensinaram sobre habilidades técnicas e comportamentais. Aplicar tanto os conhecimentos que já possuía quanto tudo o que aprendi durante o projeto foi um esforço intenso e de enorme gratificação.
Talvez meu maior desafio tenha sido buscar uma comunicação cada vez mais eficiente entre as diferentes funções. Manter o alinhamento constante entre todos exigiu dedicação além dos protótipos e das linhas de código, pois a falta dessa conexão poderia comprometer todo o trabalho. Um aspecto fundamental que me ajudou a integrar as etapas foi o interesse genuíno em entender e colaborar com o trabalho de cada um, mesmo de forma assíncrona.
Mais do que a técnica e os entregáveis, a recompensa deste evento foi construir um projeto em equipe, com pessoas de ideias e perfis distintos. Eu não sou mais a mesma pessoa de 15 dias atrás.
André Constancio | Alisson Ferreira | Francisco Kleuvys | Leo Rigotto | Mariane Saito
Considerações Finais
Após a implementação das features principais e dos ajustes finais no projeto, seguimos para analisar as demais demandas secundárias levantadas durante a priorização.
Próximos Passos
Como próximos passos e oportunidades, consideramos a possibilidade de integrar os serviços de agenda e ligações (Teams) do Office 365, de modo a facilitar o agendamento e contato entre os colaboradores.
Atualmente o sistema de pontuação e ranqueamento são mockados(não funcionais) na versão desenvolvida durante este hackaton. Como continuação deste produto, a aplicação poderá ser integrada com plataformas de gerenciamento de ideias como a Imagine, da própria FCamara, possibilitando aos colaboradores um ambiente fértil e recompensador.
Integração com Outros Seviços
Conclusão
Durante esses 15 dias de hackathon, tive grandes oportunidades de conhecer colegas e mentores que, com muito prazer, me ensinaram sobre habilidades técnicas e comportamentais. Aplicar tanto os conhecimentos que já possuía quanto tudo o que aprendi durante o projeto foi um esforço intenso e de enorme gratificação.
Talvez meu maior desafio tenha sido buscar uma comunicação cada vez mais eficiente entre as diferentes funções. Manter o alinhamento constante entre todos exigiu dedicação além dos protótipos e das linhas de código, pois a falta dessa conexão poderia comprometer todo o trabalho. Um aspecto fundamental que me ajudou a integrar as etapas foi o interesse genuíno em entender e colaborar com o trabalho de cada um, mesmo de forma assíncrona.
Mais do que a técnica e os entregáveis, a recompensa deste evento foi construir um projeto em equipe, com pessoas de ideias e perfis distintos. Eu não sou mais a mesma pessoa de 15 dias atrás.
André Constancio | Alisson Ferreira | Francisco Kleuvys | Leo Rigotto | Mariane Saito
Contato
Ficou interessado no meu trabalho ou tem um projeto em mente?
Abaixo estão meus contatos e um formulário onde você pode descrever sua ideia para conversarmos.