FuraFilla
Contexto
A FuraFilla é uma startup curitibana que tem como principal objetivo reduzir o tempo de fila dos seus usuários, oferecendo um serviço de compra de produtos em restaurantes e bares. Agora, o foco da empresa está em eventos, pensando numa forma de facilitar a compra do ingresso e os itens de consumação do restaurante ou bar do local.
Função: Product Designer
Duração: 5 dias
Ferramentas: Figma, Figjam
Empresa: FuraFilla
Problema
A empresa identificou que os usuários enfrentavam longas filas em eventos para comprar ingressos e itens de consumação, causando cansaço, frustração e perda de parte da experiência.
O cliente solicitou a criação de uma página responsiva que integre a compra de ingressos e itens de consumação;
O projeto deveria seguir a identidade visual da FuraFilla, mas permitir a personalização dos eventos;
Entregar um MVP funcional dentro do prazo de 5 dias
Desafio
O principal desafio foi o prazo de apenas cinco dias para concluir o projeto. Tive que analisar quais etapas eram realmente essenciais para entregar o projeto dentro do prazo, sem comprometer a qualidade do produto e com as principais funcionalidades inclusas.
Solução
O projeto foi direcionado para ter um contato maior com o cliente, pois não tínhamos o tempo para perder com desencontros e muitos ajustes. Além disso, para otimizar ainda mais o tempo, foi determinado que seriam utilizados elementos do Material UI, a fim de acelerar a criação do design, sem comprometer a usabilidade e estética das telas.
Processo
Descoberta
Devido ao prazo curto, não foi possível conduzir pesquisas com usuários reais. Para minimizar esse impacto, mantive contato direto com o cliente, coletando feedbacks frequentes, que permitiram entender suas necessidades, objetivos e expectativas em relação ao projeto, além de refinar a solução com base no conhecimento do cliente sobre os seus usuários.
Também analisei um protótipo inicial fornecido pelo cliente, que foi descartado por não atender todas as funcionalidades necessárias. Utilizei ele apenas como referência antes de iniciar o projeto do zero.
Definição
Com base nas informações obtidas nas reuniões, foi definido o principal desafio: desenvolver uma experiência intuitiva e eficiente para a compra integrada de ingressos e produtos do cardápio. A plataforma precisava ser responsiva, garantindo uma navegação fluida em diferentes dispositivos.
Outro requisito importante era seguir a identidade visual da FuraFilla. O cliente já possuía um branding definido, incluindo cores, tipografia e logo, que deveriam ser mantidos na plataforma. Ao mesmo tempo, a solução deveria permitir que cada evento personalizasse sua página, incluindo um banner e sua própria logo, mas sem comprometer a identidade da marca.
Elementos da marca FuraFilla.
Ideação
Userflow: elaborei um userflow para organizar os pedidos do cliente, para que ele pudesse visualizar melhor e dar o ok para prosseguir com o projeto, já que ele tinha pedidos específicos para o fluxo.
UserFlow para organizar o pedido do cliente.
Benchmarking: com um fluxo organizado e validado, segui para um breve benchmarking, para entender padrões e pontos de melhorias que eu pudesse aplicar no projeto.
Priorização de funcionalidades: aqui tive que ser concisa e realista. Fiz algumas perguntas como: Quantas telas eu conseguiria entregar mantendo uma boa qualidade? Quais são as principais funcionalidades para garantir que os requisitos do cliente sejam cumpridos? Como posso otimizar meu tempo de criação?
Rabiscoframes: após definir as principais funcionalidades, fui para os rabiscoframes para passar as ideias da minha cabeça para o papel.
Alguns dos rabiscoframes feitos para esse projeto.
Prototipação
Wireframe: após passar as ideias para o papel, elaborei um wireframe para primeira validação com o cliente.
Wireframes desenhados para validação com cliente.
Após analise do wireframe, o cliente pediu os seguintes ajustes:
Pensar em uma página que utilize mais as cores da FuraFilla, como o header e footer com a cor primária (roxo);
Adicionar no header um botão de meus pedidos;
Retirar a avaliação, pois a plataforma não contempla essa função;
Melhorar como é apresentado o evento dentro do card;
Adicionar step de verificação do número de telefone do usuário no fluxo de finalização da compra.
Análise de acessibilidade: antes de seguir para os protótipos de alta fidelidade, analisei a acessibilidade das cores da marca em relação às cores dos textos que seriam utilizados, conforme as diretrizes do WCAG. A cor primária atendeu aos requisitos de contraste e foi a mais utilizada, enquanto a cor secundária não passou nos critérios e foi usada apenas em alguns detalhes. Como o cliente não tinha interesse em um rebranding, o desafio foi equilibrar a identidade visual com as boas práticas de acessibilidade.
Teste de constraste entre as cores da marca e as cores dos textos.
Protótipo de alta fidelidade
Home: após os ajustes, a tela inicial agora mostra mais as cores da marca FuraFilla, mas permite que o local do evento personalize a página, com o banner e o logo. O header também conta com o botão "Meus pedidos” e foi adicionado um campo de pesquisa para facilitar a busca de elementos do cardápio.
Ingressos: na aba Ingressos, foram adicionadas mais informações no card do evento, como a data, horário, local e valor do ingresso. Foi adicionado também um breve texto sobre o evento, como foi requisitado pelo cliente.
Carrinho: na visualização do carrinho, o usuário terá acesso tanto aos ingressos quanto aos itens do restaurante. Nos ingressos, reforçamos o tipo escolhido, se é inteira ou meia-entrada.
Pagamento
Meus pedidos: conforme solicitado, foi adicionada uma tela com os pedidos do cliente, onde é possível acompanhar o status e os detalhes desses pedidos.
Validação e implementação
Validação com o cliente: O protótipo foi apresentado ao cliente e recebeu um feedback extremamente positivo, superando as expectativas iniciais;
Contato direto com o desenvolvedor: mantive reuniões constantes com o desenvolvedor responsável para garantir que o design fosse implementado corretamente, reduzindo riscos de desalinhamento e evitando retrabalho.
Aprendizados
A importância do contato direto com o cliente para alinhar expectativas e garantir que a solução atenda às suas necessidades;
Como otimizar processos utilizando bibliotecas de componentes, como os do Material UI, para acelerar o desenvolvimento sem comprometer a qualidade;
A relevância da colaboração constante com desenvolvedores para garantir a fidelidade da implementação;
Mesmo sem a pesquisa com usuários reais, o contato direto com o cliente foi fundamental para entender as necessidades do público-alvo e garantir uma boa experiência no produto final, porém, testes futuros podem validar a usabilidade real da solução.
Quanto aos próximos passos:
Testes com usuários: realizar testes de usabilidade com usuários reais para identificar possíveis pontos de melhoria;
Melhorias contínuas: refinar a interface e o fluxo com base no feedback dos usuários e nos dados coletados;
Exploração de novas funcionalidades: Avaliar a necessidade de novos recursos que possam melhorar ainda mais a experiência de compra e aumentar a conversão.
Outros projetos
Fluxo de pagamento: o pagamento consiste nos steps carrinho, identificação e pagamento. Na identificação, será feita a verificação da conta através de um código enviado para o celular do cliente. Caso ele já tenha uma conta, será direcionado para o step de pagamento. Caso contrário, abre um formulário com itens para cadastro, como nome, endereço, etc.
Carrinho
Identificação
FuraFilla
Contexto
A FuraFilla é uma startup curitibana que tem como principal objetivo reduzir o tempo de fila dos seus usuários, oferecendo um serviço de compra de produtos em restaurantes e bares. Agora, o foco da empresa está em eventos, pensando numa forma de facilitar a compra do ingresso e os itens de consumação do restaurante ou bar do local.
Função: Product Designer
Duração: 5 dias
Ferramentas: Figma, Figjam
Empresa: FuraFilla
Problema
A empresa identificou que os usuários enfrentavam longas filas em eventos para comprar ingressos e itens de consumação, causando cansaço, frustração e perda de parte da experiência.
O cliente solicitou a criação de uma página responsiva que integre a compra de ingressos e itens de consumação;
O projeto deveria seguir a identidade visual da FuraFilla, mas permitir a personalização dos eventos;
Entregar um MVP funcional dentro do prazo de 5 dias
Desafio
O principal desafio foi o prazo de apenas cinco dias para concluir o projeto. Tive que analisar quais etapas eram realmente essenciais para entregar o projeto dentro do prazo, sem comprometer a qualidade do produto e com as principais funcionalidades inclusas.
Solução
O projeto foi direcionado para ter um contato maior com o cliente, pois não tínhamos o tempo para perder com desencontros e muitos ajustes. Além disso, para otimizar ainda mais o tempo, foi determinado que seriam utilizados elementos do Material UI, a fim de acelerar a criação do design, sem comprometer a usabilidade e estética das telas.
Processo
Descoberta
Devido ao prazo curto, não foi possível conduzir pesquisas com usuários reais. Para minimizar esse impacto, mantive contato direto com o cliente, coletando feedbacks frequentes, que permitiram entender suas necessidades, objetivos e expectativas em relação ao projeto, além de refinar a solução com base no conhecimento do cliente sobre os seus usuários.
Também analisei um protótipo inicial fornecido pelo cliente, que foi descartado por não atender todas as funcionalidades necessárias. Utilizei ele apenas como referência antes de iniciar o projeto do zero.
Definição
Com base nas informações obtidas nas reuniões, foi definido o principal desafio: desenvolver uma experiência intuitiva e eficiente para a compra integrada de ingressos e produtos do cardápio. A plataforma precisava ser responsiva, garantindo uma navegação fluida em diferentes dispositivos.
Outro requisito importante era seguir a identidade visual da FuraFilla. O cliente já possuía um branding definido, incluindo cores, tipografia e logo, que deveriam ser mantidos na plataforma. Ao mesmo tempo, a solução deveria permitir que cada evento personalizasse sua página, incluindo um banner e sua própria logo, mas sem comprometer a identidade da marca.
Elementos da marca FuraFilla.
Ideação
Userflow: elaborei um userflow para organizar os pedidos do cliente, para que ele pudesse visualizar melhor e dar o ok para prosseguir com o projeto, já que ele tinha pedidos específicos para o fluxo.;
UserFlow para organizar o pedido do cliente.
Benchmarking: com um fluxo organizado e validado, segui para um breve benchmarking, para entender padrões e pontos de melhorias que eu pudesse aplicar no projeto.
Priorização de funcionalidades: aqui tive que ser concisa e realista. Fiz algumas perguntas como: Quantas telas eu conseguiria entregar mantendo uma boa qualidade? Quais são as principais funcionalidades para garantir que os requisitos do cliente sejam cumpridos? Como posso otimizar meu tempo de criação?
Rabiscoframes: após definir as principais funcionalidades, fui para os rabiscoframes para passar as ideias da minha cabeça para o papel.
Alguns dos rabiscoframes feitos para esse projeto.
Prototipação
Wireframe: após passar as ideias para o papel, elaborei um wireframe para primeira validação com o cliente.
Wireframes desenhados para validação com cliente.
Após analise do wireframe, o cliente pediu os seguintes ajustes:
Pensar em uma página que utilize mais as cores da FuraFilla, como o header e footer com a cor primária (roxo);
Adicionar no header um botão de meus pedidos;
Retirar a avaliação, pois a plataforma não contempla essa função;
Melhorar como é apresentado o evento dentro do card;
Adicionar step de verificação do número de telefone do usuário no fluxo de finalização da compra.
Análise de acessibilidade: antes de seguir para os protótipos de alta fidelidade, analisei a acessibilidade das cores da marca em relação às cores dos textos que seriam utilizados, conforme as diretrizes do WCAG. A cor primária atendeu aos requisitos de contraste e foi a mais utilizada, enquanto a cor secundária não passou nos critérios e foi usada apenas em alguns detalhes. Como o cliente não tinha interesse em um rebranding, o desafio foi equilibrar a identidade visual com as boas práticas de acessibilidade.
Teste de constraste entre as cores da marca e as cores dos textos.
Protótipo de alta fidelidade
Home: após os ajustes, a tela inicial agora mostra mais as cores da marca FuraFilla, mas permite que o local do evento personalize a página, com o banner e o logo. O header também conta com o botão "Meus pedidos” e foi adicionado um campo de pesquisa para facilitar a busca de elementos do cardápio.
Ingressos: na aba Ingressos, foram adicionadas mais informações no card do evento, como a data, horário, local e valor do ingresso. Foi adicionado também um breve texto sobre o evento, como foi requisitado pelo cliente.
Carrinho: na visualização do carrinho, o usuário terá acesso tanto aos ingressos quanto aos itens do restaurante. Nos ingressos, reforçamos o tipo escolhido, se é inteira ou meia-entrada.
Fluxo de pagamento: o pagamento consiste nos steps carrinho, identificação e pagamento. Na identificação, será feita a verificação da conta através de um código enviado para o celular do cliente. Caso ele já tenha uma conta, será direcionado para o step de pagamento. Caso contrário, abre um formulário com itens para cadastro, como nome, endereço, etc.
Carrinho
Identificação
Pagamento
Meus pedidos: conforme solicitado, foi adicionada uma tela com os pedidos do cliente, onde é possível acompanhar o status e os detalhes desses pedidos.
Validação e implementação
Validação com o cliente: o protótipo foi apresentado ao cliente e recebeu um feedback extremamente positivo, superando as expectativas iniciais.
Contato direto com o desenvolvedor: mantive reuniões constantes com o desenvolvedor responsável para garantir que o design fosse implementado corretamente, reduzindo riscos de desalinhamento e evitando retrabalho.
Aprendizados
A importância do contato direto com o cliente para alinhar expectativas e garantir que a solução atenda às suas necessidades.
Como otimizar processos utilizando bibliotecas de componentes, como os do Material UI, para acelerar o desenvolvimento sem comprometer a qualidade.
A relevância da colaboração constante com desenvolvedores para garantir a fidelidade da implementação.
Mesmo sem a pesquisa com usuários reais, o contato direto com o cliente e stakeholders foi fundamental para entender as necessidades do público-alvo e garantir uma boa experiência no produto final, porém, testes futuros podem validar a usabilidade real da solução.
Quanto aos próximos passos
Testes com usuários: realizar testes de usabilidade com usuários reais para identificar possíveis pontos de melhoria.
Melhorias contínuas: refinar a interface e o fluxo com base no feedback dos usuários e nos dados coletados.
Exploração de novas funcionalidades: avaliar a necessidade de novos recursos que possam melhorar ainda mais a experiência de compra e aumentar a conversão.
FuraFilla
Contexto
A FuraFilla é uma startup curitibana que tem como principal objetivo reduzir o tempo de fila dos seus usuários, oferecendo um serviço de compra de produtos em restaurantes e bares. Agora, o foco da empresa está em eventos, pensando numa forma de facilitar a compra do ingresso e os itens de consumação do restaurante ou bar do local.
Função: Product Designer
Duração: 5 dias
Ferramentas: Figma, Figjam
Empresa: FuraFilla
Problema
A empresa identificou que os usuários enfrentavam longas filas em eventos para comprar ingressos e itens de consumação, causando cansaço, frustração e perda de parte da experiência.
O cliente solicitou a criação de uma página responsiva que integre a compra de ingressos e itens de consumação;
O projeto deveria seguir a identidade visual da FuraFilla, mas permitir a personalização dos eventos;
Entregar um MVP funcional dentro do prazo de 5 dias
Desafio
O principal desafio foi o prazo de apenas cinco dias para concluir o projeto. Tive que analisar quais etapas eram realmente essenciais para entregar o projeto dentro do prazo, sem comprometer a qualidade do produto e com as principais funcionalidades inclusas.
Solução
O projeto foi direcionado para ter um contato maior com o cliente, pois não tínhamos o tempo para perder com desencontros e muitos ajustes. Além disso, para otimizar ainda mais o tempo, foi determinado que seriam utilizados elementos do Material UI, a fim de acelerar a criação do design, sem comprometer a usabilidade e estética das telas.
Processo
Descoberta
Devido ao prazo curto, não foi possível conduzir pesquisas com usuários reais. Para minimizar esse impacto, mantive contato direto com o cliente, coletando feedbacks frequentes, que permitiram entender suas necessidades, objetivos e expectativas em relação ao projeto, além de refinar a solução com base no conhecimento do cliente sobre os seus usuários.
Também analisei um protótipo inicial fornecido pelo cliente, que foi descartado por não atender todas as funcionalidades necessárias. Utilizei ele apenas como referência antes de iniciar o projeto do zero.
Definição
Com base nas informações obtidas nas reuniões, foi definido o principal desafio: desenvolver uma experiência intuitiva e eficiente para a compra integrada de ingressos e produtos do cardápio. A plataforma precisava ser responsiva, garantindo uma navegação fluida em diferentes dispositivos.
Outro requisito importante era seguir a identidade visual da FuraFilla. O cliente já possuía um branding definido, incluindo cores, tipografia e logo, que deveriam ser mantidos na plataforma. Ao mesmo tempo, a solução deveria permitir que cada evento personalizasse sua página, incluindo um banner e sua própria logo, mas sem comprometer a identidade da marca.
Elementos da marca FuraFilla.
Ideação
Userflow: Elaborei um userflow para organizar os pedidos do cliente, para que ele pudesse visualizar melhor e dar o ok para prosseguir com o projeto, já que ele tinha pedidos específicos para o fluxo.;
UserFlow para organizar o pedido do cliente.
Benchmarking: com um fluxo organizado e validado, segui para um breve benchmarking, para entender padrões e pontos de melhorias que eu pudesse aplicar no projeto.
Priorização de funcionalidades: aqui tive que ser concisa e realista. Fiz algumas perguntas como: Quantas telas eu conseguiria entregar mantendo uma boa qualidade? Quais são as principais funcionalidades para garantir que os requisitos do cliente sejam cumpridos? Como posso otimizar meu tempo de criação?
Rabiscoframes: após definir as principais funcionalidades, fui para os rabiscoframes para passar as ideias da minha cabeça para o papel.
Alguns dos rabiscoframes feitos para esse projeto.
Prototipação
Wireframe: após passar as ideias para o papel, elaborei um wireframe para primeira validação com o cliente.
Wireframes desenhados para validação com cliente.
Após analise do wireframe, o cliente pediu os seguintes ajustes:
Pensar em uma página que utilize mais as cores da FuraFilla, como o header e footer com a cor primária (roxo);
Adicionar no header um botão de meus pedidos;
Retirar a avaliação, pois a plataforma não contempla essa função;
Melhorar como é apresentado o evento dentro do card;
Adicionar step de verificação do número de telefone do usuário no fluxo de finalização da compra.
Análise de acessibilidade: antes de seguir para os protótipos de alta fidelidade, analisei a acessibilidade das cores da marca em relação às cores dos textos que seriam utilizados, conforme as diretrizes do WCAG. A cor primária atendeu aos requisitos de contraste e foi a mais utilizada, enquanto a cor secundária não passou nos critérios e foi usada apenas em alguns detalhes. Como o cliente não tinha interesse em um rebranding, o desafio foi equilibrar a identidade visual com as boas práticas de acessibilidade.
Teste de constraste entre as cores da marca e as cores dos textos.
Protótipo de alta fidelidade
Home: após os ajustes, a tela inicial agora mostra mais as cores da marca FuraFilla, mas permite que o local do evento personalize a página, com o banner e o logo. O header também conta com o botão "Meus pedidos” e foi adicionado um campo de pesquisa para facilitar a busca de elementos do cardápio.
Ingressos: na aba Ingressos, foram adicionadas mais informações no card do evento, como a data, horário, local e valor do ingresso. Foi adicionado também um breve texto sobre o evento, como foi requisitado pelo cliente.
Carrinho: na visualização do carrinho, o usuário terá acesso tanto aos ingressos quanto aos itens do restaurante. Nos ingressos, reforçamos o tipo escolhido, se é inteira ou meia-entrada.
Fluxo de pagamento: o pagamento consiste nos steps carrinho, identificação e pagamento. Na identificação, será feita a verificação da conta através de um código enviado para o celular do cliente. Caso ele já tenha uma conta, será direcionado para o step de pagamento. Caso contrário, abre um formulário com itens para cadastro, como nome, endereço, etc.
Carrinho
Identificação
Pagamento
Meus pedidos: conforme solicitado, foi adicionada uma tela com os pedidos do cliente, onde é possível acompanhar o status e os detalhes desses pedidos.
Validação e implementação
Validação com o cliente: o protótipo foi apresentado ao cliente e recebeu um feedback extremamente positivo, superando as expectativas iniciais.
Contato direto com o desenvolvedor: mantive reuniões constantes com o desenvolvedor responsável para garantir que o design fosse implementado corretamente, reduzindo riscos de desalinhamento e evitando retrabalho.
Aprendizados
A importância do contato direto com o cliente para alinhar expectativas e garantir que a solução atenda às suas necessidades.
Como otimizar processos utilizando bibliotecas de componentes, como os do Material UI, para acelerar o desenvolvimento sem comprometer a qualidade.
A relevância da colaboração constante com desenvolvedores para garantir a fidelidade da implementação.
Mesmo sem a pesquisa com usuários reais, o contato direto com o cliente e stakeholders foi fundamental para entender as necessidades do público-alvo e garantir uma boa experiência no produto final, porém, testes futuros podem validar a usabilidade real da solução.
Quanto aos próximos passos
Testes com usuários: realizar testes de usabilidade com usuários reais para identificar possíveis pontos de melhoria.
Melhorias contínuas: refinar a interface e o fluxo com base no feedback dos usuários e nos dados coletados.
Exploração de novas funcionalidades: avaliar a necessidade de novos recursos que possam melhorar ainda mais a experiência de compra e aumentar a conversão.