Foursafe
Foursafe
Foursafe
Foursafe
Foursafe
Foursafe
Foursafe
Comunicando a população com alertas de chuvas e deslizamentos.
Comunicando a população com alertas de chuvas e deslizamentos.
Comunicando a população com alertas de chuvas e deslizamentos.
Comunicando a população com alertas de chuvas e deslizamentos.
Comunicando a população com alertas de chuvas e deslizamentos.
Comunicando a população com alertas de chuvas e deslizamentos.
Comunicando a população com alertas de chuvas e deslizamentos.
Cliente:
Wiiglo
Timeline:
2018 — 2019
Atuação:
Product Designer
Squad:
Daniel Huanchicay - Designer
Paula Fernandes - Designer
Victor Azevedo - CEO
Daniel Morim - CTO
Amauri Maciel - Strategy Consultant
Roberto Oliveira - Dev
Roberto Pacheco - Dev
Cliente:
Wiiglo
Timeline:
2018 — 2019
Atuação:
Product Designer
Squad:
Daniel Huanchicay - Designer
Paula Fernandes - Designer
Victor Azevedo - CEO
Daniel Morim - CTO
Amauri Maciel - Strategy Consultant
Roberto Oliveira - Dev
Roberto Pacheco - Dev
Cliente:
Wiiglo
Timeline:
2018 — 2019
Atuação:
Product Designer
Squad:
Daniel Huanchicay - Designer
Paula Fernandes - Designer
Victor Azevedo - CEO
Daniel Morim - CTO
Amauri Maciel - Strategy Consultant
Roberto Oliveira - Dev
Roberto Pacheco - Dev
Cliente:
Wiiglo
Timeline:
2018 — 2019
Atuação:
Product Designer
Squad:
Daniel Huanchicay - Designer
Paula Fernandes - Designer
Victor Azevedo - CEO
Daniel Morim - CTO
Amauri Maciel - Strategy Consultant
Roberto Oliveira - Dev
Roberto Pacheco - Dev
Cliente:
Wiiglo
Timeline:
2018 — 2019
Atuação:
Product Designer
Squad:
Daniel Huanchicay - Designer
Paula Fernandes - Designer
Victor Azevedo - CEO
Daniel Morim - CTO
Amauri Maciel - Strategy Consultant
Roberto Oliveira - Dev
Roberto Pacheco - Dev
Cliente:
Wiiglo
Timeline:
2018 — 2019
Atuação:
Product Designer
Squad:
Daniel Huanchicay - Designer
Paula Fernandes - Designer
Victor Azevedo - CEO
Daniel Morim - CTO
Amauri Maciel - Strategy Consultant
Roberto Oliveira - Dev
Roberto Pacheco - Dev
Cliente:
Wiiglo
Timeline:
2018 — 2019
Atuação:
Product Designer
Squad:
Daniel Huanchicay - Designer
Paula Fernandes - Designer
Victor Azevedo - CEO
Daniel Morim - CTO
Amauri Maciel - Strategy Consultant
Roberto Oliveira - Dev
Roberto Pacheco - Dev
Contexto, problema e desafio
Contexto, problema e desafio
A Wiiglo é uma startup de tecnologia para cidades inteligentes. Um dos seus principais projetos é um algoritmo capaz de prever riscos de deslizamento de terra através de dados em tempo real.
O objetivo do negócio era disponibilizar essa solução à população através de um produto de previsões e alertas de risco por geolocalização, o Foursafe. Nesse contexto, entrei no projeto em 2018, para atuar na criação da plataforma web, buscando validar a tecnologia e o interesse dos moradores da região serrana do Rio de Janeiro. Gostaria de descobrir mais sobre como esse produto foi criado? Vamos em frente então!
A Wiiglo é uma startup de tecnologia para cidades inteligentes. Um dos seus principais projetos é um algoritmo capaz de prever riscos de deslizamento de terra através de dados em tempo real.
O objetivo do negócio era disponibilizar essa solução à população através de um produto de previsões e alertas de risco por geolocalização, o Foursafe. Nesse contexto, entrei no projeto em 2018, para atuar na criação da plataforma web, buscando validar a tecnologia e o interesse dos moradores da região serrana do Rio de Janeiro. Gostaria de descobrir mais sobre como esse produto foi criado? Vamos em frente então!
Responsabilidades:
Desenhar e lançar o produto.
Trabalhar de forma colaborativa com time da Wiiglo.
Analisar materiais do negócio e alinhar com a visão de design.
Mapear e identificar o público e as necessidades B2C.
Impactos: Ganhos para o negócio
1ª versão do produto para lançamento e testes.
Produto foi usado como base em projetos com o Centro de Operações do Rio (COR).
Finalista em premiações de inovação na categoria “Impacto Social” no Innovation by Brazil Awards (INNXBR).
Produto se tornou piloto para projeto de cidades inteligentes com o projeto “Cittua”.
Imergindo no assunto
Imergindo no assunto
No início do projeto, nosso foco era criar uma versão inicial do produto. Comecei com uma pesquisa aprofundada sobre o tema para entender mais sobre o assunto, o mercado, o projeto e os concorrentes. Esse processo envolveu:
No início do projeto, nosso foco era criar uma versão inicial do produto. Comecei com uma pesquisa aprofundada sobre o tema para entender mais sobre o assunto, o mercado, o projeto e os concorrentes. Esse processo envolveu:
Entrevista com os especialistas
Conversas com os engenheiros da Wiiglo e professores da área meteorológica que apoiam o projeto.
Benchmarking
Análise de outras plataformas de meteorologia, alertas e de geolocalização.
Pesquisa Desk
Busca por notícias, artigos acadêmicos, classificações oficiais, dados e informações em fontes secundárias confiáveis.
Ferramentas de Design Thinking
Atividades com o time com o objetivo de mapear e alinhar para quem estávamos projetando, principais problemas que pretendíamos resolver e as soluções que deveríamos priorizar.
Canva de mapeamento de usuários
Proto-personas
Dinâmicas para gerar as primeiras ideias
Dinâmicas para gerar as primeiras ideias
Como resultado das atividades da etapa anterior, criamos as proto-personas, coletamos informações, geramos ideias e priorizamos as soluções. Dessa forma, conseguimos insumos para começar a esboçar a construção de um protótipo. Para iniciar a criação das telas, foi realizada uma dinâmica de ideação com o time.
Como resultado das atividades da etapa anterior, criamos as proto-personas, coletamos informações, geramos ideias e priorizamos as soluções. Dessa forma, conseguimos insumos para começar a esboçar a construção de um protótipo. Para iniciar a criação das telas, foi realizada uma dinâmica de ideação com o time.
Atividades realizadas:
CNPs (Como nós podemos)
Brainswarming
Crazy Eights
Criação de conceitos (Storytelling)
Principais insights das dinâmicas:
Funcionalidade de rotas
Sirene virtual
Alertas favoritos
Busca por endereço ou CEP
Primeiro protótipo, testes e entrevistas com o público
Primeiro protótipo, testes e entrevistas com o público
Como resultado da dinâmica de ideação, iniciei a construção do protótipo. O objetivo era testá-lo na Região Serrana do Rio, para coletar feedbacks e validar a solução. Em paralelo à construção do protótipo, também realizamos pesquisas online (surveys) em grupos de redes sociais e entrevistas com usuários para validação das protos-personas.
Como resultado da dinâmica de ideação, iniciei a construção do protótipo. O objetivo era testá-lo na Região Serrana do Rio, para coletar feedbacks e validar a solução. Em paralelo à construção do protótipo, também realizamos pesquisas online (surveys) em grupos de redes sociais e entrevistas com usuários para validação das protos-personas.
Prototipação e testes
✲ Criação do primeiro protótipo para ser testado em Petrópolis.
✲ Realização de testes de guerrilha indo a áreas estratégicas.
Destaques da pesquisa online:
75,9%
Consideram deslizamentos e desmoronamentos a sua maior preocupação quando chove forte.
93,2%
Conhecem pessoas ou já passaram por problemas derivados da chuva forte.
76,9%
Dos que enfrentaram problemas com a chuva mencionaram que a perda de bens por deslizamento e desmoronamento foram os maiores problemas.
79,7%
Costuma notificar amigos e parentes sobre previsões de chuva forte.
Frases de destaque das entrevistas:
“Todo mundo fica preocupado com todo mundo é a sensação da cidade, mobilização geral, clima negativo.”
“Já passei por situações de risco.”
"Minha mãe fica desesperada. Com certeza usaria."
“Gastei 10 mil em um muro de contenção.”
“Não fico mais tensa. Já estou acostumada.”
“Quando chove as vendas diminuem. Quando cai barreira diminui 80%. As pessoas ficam com medo. Mas muitas vezes o problema não foi aqui.”
Conclusões após os primeiros testes e entrevistas
Conclusões após os primeiros testes e entrevistas
O problema é latente, com muitas pessoas que vivenciaram ou conhecem pessoas que passaram por situações de risco.
No geral, os usuários conseguiram digitar seu endereço e ficaram impactados quando viram o alerta de risco de deslizamento.
Validação de algumas das proto-personas criadas.
Comerciantes teriam interesse em avisar quando a rua está segura.
Validação no interesse na funcionalidade de rotas.
A proto-persona motorista de ônibus foi descartada nas entrevistas, pois eles não controlam se vão ou não pegar a estrada.
Funcionalidade de rotas muito discreta no protótipo.
Usuários ficaram sem saber o que fazer após ver o alerta de risco.
Necessidade de destacar mais os alertas e incluir outros riscos além deslizamento. Como alertas de chuva e previsões do tempo.
Faltou formas de contato para empresas e voluntários.
Nova estruturação após os resultados
Nova estruturação após os resultados
A partir dos resultados dos testes, pesquisas e entrevistas comecei a desenhar uma nova estrutura para a interface baseada nas informações coletadas.
A partir dos resultados dos testes, pesquisas e entrevistas comecei a desenhar uma nova estrutura para a interface baseada nas informações coletadas.
Interface final do produto
Interface final do produto
Após a estrutura validada, comecei a desenhar a interface final do produto. Inseri a identidade visual do Foursafe, cuidando principalmente das cores dos alertas, pois elas são o elemento principal das situações de risco.
Após a estrutura validada, comecei a desenhar a interface final do produto. Inseri a identidade visual do Foursafe, cuidando principalmente das cores dos alertas, pois elas são o elemento principal das situações de risco.
Versão responsiva com conceitos de PWA
Versão responsiva com conceitos de PWA
Uma importante caracteristica que observamos nos testes e entrevistas é que muitos moradores que foram entrevistados priorizam a navegação por celular. Por isso, adaptamos a interface usando princípios de progressive web apps para deixar a experiência o mais fluida e similar com um aplicativo padrão.
Uma importante caracteristica que observamos nos testes e entrevistas é que muitos moradores que foram entrevistados priorizam a navegação por celular. Por isso, adaptamos a interface usando princípios de progressive web apps para deixar a experiência o mais fluida e similar com um aplicativo padrão.
Tela de detalhes de riscos no local
Tela de detalhes de riscos no local
Também baseado nos resultados dos testes, fizemos alguns ajustes na tela de detalhes da localização. As principais modificações foram deixar o card de alerta mais evidente e priorizar o botão "O que fazer" para orientar o usuário em situações de risco.
Também baseado nos resultados dos testes, fizemos alguns ajustes na tela de detalhes da localização. As principais modificações foram deixar o card de alerta mais evidente e priorizar o botão "O que fazer" para orientar o usuário em situações de risco.
Funcionalidades de rotas
Funcionalidades de rotas
A funcionalidade de alertas em sua rota é uma solução para informar sobre os riscos de chuvas e deslizamentos em trajetos. O usuário escolhe a origem e o destino da viagem e visualiza os alertas ao longo do caminho.
A funcionalidade de alertas em sua rota é uma solução para informar sobre os riscos de chuvas e deslizamentos em trajetos. O usuário escolhe a origem e o destino da viagem e visualiza os alertas ao longo do caminho.
Posicionamento de sirene virtual
Posicionamento de sirene virtual
Em regiões de risco de deslizamento é comum existirem sirenes de alerta. Assim, trouxemos este recurso para a plataforma, onde o usuário pode posicionar “sirenes” nos locais desejados e configurar os alertas e canais de comunicação que deseja receber.
Em regiões de risco de deslizamento é comum existirem sirenes de alerta. Assim, trouxemos este recurso para a plataforma, onde o usuário pode posicionar “sirenes” nos locais desejados e configurar os alertas e canais de comunicação que deseja receber.
Organização de guia de estilos
Organização de guia de estilos
Antes de entregar o projeto, produzi um guia de estilos e definição dos componentes para reutilização e expansão da plataforma. Isso forneceu flexibilidade, velocidade e consistência, principalmente para os desenvolvedores.
Antes de entregar o projeto, produzi um guia de estilos e definição dos componentes para reutilização e expansão da plataforma. Isso forneceu flexibilidade, velocidade e consistência, principalmente para os desenvolvedores.
Retrospectiva
Retrospectiva
Participar do projeto Foursafe foi uma oportunidade incrível, onde pude construir um produto do zero e tentar tornar simples um assunto tão complexo. Ao longo do projeto, as incertezas foram clareando e o time foi ficando mais confiante e a solução mais robusta. Além disso, é muito gratificante a sensação de estar trabalhando em algo que pode ajudar muitas pessoas e inclusive salvar vidas.
Também foi muito bom acompanhar os desdobramentos da solução e participar da evolução do produto nos anos seguintes. Hoje em dia o Foursafe se tornou uma tecnologia que faz parte do produto Cittua, uma solução B2G e B2C de cidades inteligentes e que é utilizado pelo Centro de Operações da prefeitura do Rio e Petrópolis.
Participar do projeto Foursafe foi uma oportunidade incrível, onde pude construir um produto do zero e tentar tornar simples um assunto tão complexo. Ao longo do projeto, as incertezas foram clareando e o time foi ficando mais confiante e a solução mais robusta. Além disso, é muito gratificante a sensação de estar trabalhando em algo que pode ajudar muitas pessoas e inclusive salvar vidas.
Também foi muito bom acompanhar os desdobramentos da solução e participar da evolução do produto nos anos seguintes. Hoje em dia o Foursafe se tornou uma tecnologia que faz parte do produto Cittua, uma solução B2G e B2C de cidades inteligentes e que é utilizado pelo Centro de Operações da prefeitura do Rio e Petrópolis.
Próximo projeto
Próximo projeto
Worc empregabilidade
Worc empregabilidade
Uma nova experiência para candidatos à vagas de bares e restaurantes.
Uma nova experiência para candidatos à vagas de bares e restaurantes.
© 2024 · Daniel Huanchicay
© 2024 · Daniel Huanchicay
© 2024 · Daniel Huanchicay
© 2024 · Daniel Huanchicay
© 2024 · Daniel Huanchicay
© 2024 · Daniel Huanchicay
© 2024 · Daniel Huanchicay
Foursafe
Comunicando a população com alertas de chuvas e deslizamentos.
Cliente:
Wiiglo
Timeline:
2018 — 2019
Atuação:
Product Designer
Squad:
Daniel Huanchicay - Designer
Paula Fernandes - Designer
Victor Azevedo - CEO
Daniel Morim - CTO
Amauri Maciel - Strategy Consultant
Roberto Oliveira - Dev
Roberto Pacheco - Dev
Contexto, problema e desafio
A Wiiglo é uma startup de tecnologia para cidades inteligentes. Um dos seus principais projetos é um algoritmo capaz de prever riscos de deslizamento de terra através de dados em tempo real.
O objetivo do negócio era disponibilizar essa solução à população através de um produto de previsões e alertas de risco por geolocalização, o Foursafe. Nesse contexto, entrei no projeto em 2018, para atuar na criação da plataforma web, buscando validar a tecnologia e o interesse dos moradores da região serrana do Rio de Janeiro. Gostaria de descobrir mais sobre como esse produto foi criado? Vamos em frente então!
Responsabilidades:
Desenhar e lançar o produto.
Trabalhar de forma colaborativa com time da Wiiglo.
Analisar materiais do negócio e alinhar com a visão de design.
Mapear e identificar o público e as necessidades B2C.
Impactos: Ganhos para o negócio
1ª versão do produto para lançamento e testes.
Produto foi usado como base em projetos com o Centro de Operações do Rio (COR).
Finalista em premiações de inovação na categoria “Impacto Social” no Innovation by Brazil Awards (INNXBR).
Produto se tornou piloto para projeto de cidades inteligentes com o projeto “Cittua”.
Imergindo no assunto
No início do projeto, nosso foco era criar uma versão inicial do produto. Comecei com uma pesquisa aprofundada sobre o tema para entender mais sobre o assunto, o mercado, o projeto e os concorrentes. Esse processo envolveu:
Entrevista com os especialistas
Conversas com os engenheiros da Wiiglo e professores da área meteorológica que apoiam o projeto.
Benchmarking
Análise de outras plataformas de meteorologia, alertas e de geolocalização.
Pesquisa Desk
Busca por notícias, artigos acadêmicos, classificações oficiais, dados e informações em fontes secundárias confiáveis.
Ferramentas de Design Thinking
Atividades com o time com o objetivo de mapear e alinhar para quem estávamos projetando, principais problemas que pretendíamos resolver e as soluções que deveríamos priorizar.
Canva de mapeamento de usuários
Proto-personas
Dinâmicas para gerar as primeiras ideias
Como resultado das atividades da etapa anterior, criamos as proto-personas, coletamos informações, geramos ideias e priorizamos as soluções. Dessa forma, conseguimos insumos para começar a esboçar a construção de um protótipo. Para iniciar a criação das telas, foi realizada uma dinâmica de ideação com o time.
Atividades realizadas:
CNPs (Como nós podemos)
Brainswarming
Crazy Eights
Criação de conceitos (Storytelling)
Principais insights das dinâmicas:
Funcionalidade de rotas
Sirene virtual
Alertas favoritos
Busca por endereço ou CEP
Primeiro protótipo, testes e entrevistas com o público
Como resultado da dinâmica de ideação, iniciei a construção do protótipo. O objetivo era testá-lo na Região Serrana do Rio, para coletar feedbacks e validar a solução. Em paralelo à construção do protótipo, também realizamos pesquisas online (surveys) em grupos de redes sociais e entrevistas com usuários para validação das protos-personas.
Prototipação e testes
✲ Criação do primeiro protótipo para ser testado em Petrópolis.
✲ Realização de testes de guerrilha indo a áreas estratégicas.
Destaques da pesquisa online:
75,9%
Consideram deslizamentos e desmoronamentos a sua maior preocupação quando chove forte.
93,2%
Conhecem pessoas ou já passaram por problemas derivados da chuva forte.
76,9%
Dos que enfrentaram problemas com a chuva mencionaram que a perda de bens por deslizamento e desmoronamento foram os maiores problemas.
79,7%
Costuma notificar amigos e parentes sobre previsões de chuva forte.
Frases de destaque das entrevistas:
“Todo mundo fica preocupado com todo mundo é a sensação da cidade, mobilização geral, clima negativo.”
“Já passei por situações de risco.”
"Minha mãe fica desesperada. Com certeza usaria."
“Gastei 10 mil em um muro de contenção.”
“Não fico mais tensa. Já estou acostumada.”
“Quando chove as vendas diminuem. Quando cai barreira diminui 80%. As pessoas ficam com medo. Mas muitas vezes o problema não foi aqui.”
Conclusões após os primeiros testes e entrevistas
O problema é latente, com muitas pessoas que vivenciaram ou conhecem pessoas que passaram por situações de risco.
No geral, os usuários conseguiram digitar seu endereço e ficaram impactados quando viram o alerta de risco de deslizamento.
Validação de algumas das proto-personas criadas.
Comerciantes teriam interesse em avisar quando a rua está segura.
Validação no interesse na funcionalidade de rotas.
A proto-persona motorista de ônibus foi descartada nas entrevistas, pois eles não controlam se vão ou não pegar a estrada.
Funcionalidade de rotas muito discreta no protótipo.
Usuários ficaram sem saber o que fazer após ver o alerta de risco.
Necessidade de destacar mais os alertas e incluir outros riscos além deslizamento. Como alertas de chuva e previsões do tempo.
Faltou formas de contato para empresas e voluntários.
Nova estruturação após os resultados
A partir dos resultados dos testes, pesquisas e entrevistas comecei a desenhar uma nova estrutura para a interface baseada nas informações coletadas.
Interface final do produto
Após a estrutura validada, comecei a desenhar a interface final do produto. Inseri a identidade visual do Foursafe, cuidando principalmente das cores dos alertas, pois elas são o elemento principal das situações de risco.
Versão responsiva com conceitos de PWA
Uma importante caracteristica que observamos nos testes e entrevistas é que muitos moradores que foram entrevistados priorizam a navegação por celular. Por isso, adaptamos a interface usando princípios de progressive web apps para deixar a experiência o mais fluida e similar com um aplicativo padrão.
Tela de detalhes de riscos no local
Também baseado nos resultados dos testes, fizemos alguns ajustes na tela de detalhes da localização. As principais modificações foram deixar o card de alerta mais evidente e priorizar o botão "O que fazer" para orientar o usuário em situações de risco.
Funcionalidades de rotas
A funcionalidade de alertas em sua rota é uma solução para informar sobre os riscos de chuvas e deslizamentos em trajetos. O usuário escolhe a origem e o destino da viagem e visualiza os alertas ao longo do caminho.
Posicionamento de sirene virtual
Em regiões de risco de deslizamento é comum existirem sirenes de alerta. Assim, trouxemos este recurso para a plataforma, onde o usuário pode posicionar “sirenes” nos locais desejados e configurar os alertas e canais de comunicação que deseja receber.
Organização de guia de estilos
Antes de entregar o projeto, produzi um guia de estilos e definição dos componentes para reutilização e expansão da plataforma. Isso forneceu flexibilidade, velocidade e consistência, principalmente para os desenvolvedores.
Retrospectiva
Participar do projeto Foursafe foi uma oportunidade incrível, onde pude construir um produto do zero e tentar tornar simples um assunto tão complexo. Ao longo do projeto, as incertezas foram clareando e o time foi ficando mais confiante e a solução mais robusta. Além disso, é muito gratificante a sensação de estar trabalhando em algo que pode ajudar muitas pessoas e inclusive salvar vidas.
Também foi muito bom acompanhar os desdobramentos da solução e participar da evolução do produto nos anos seguintes. Hoje em dia o Foursafe se tornou uma tecnologia que faz parte do produto Cittua, uma solução B2G e B2C de cidades inteligentes e que é utilizado pelo Centro de Operações da prefeitura do Rio e Petrópolis.
Próximo projeto
Worc empregabilidade
Uma nova experiência para candidatos à vagas de bares e restaurantes.
© 2024 · Daniel Huanchicay