Giro
UI Design ⋅ Documentação ⋅ Food ⋅ Assinatura e Benefícios
Desafio
Desafio
Desenvolver uma plataforma que ajudasse a movimentar os restaurantes locais, conectando pessoas a novos lugares para comer e oferecendo benefícios como descontos, cashback e experiências exclusivas.
Desenvolver uma plataforma que ajudasse a movimentar os restaurantes locais, conectando pessoas a novos lugares para comer e oferecendo benefícios como descontos, cashback e experiências exclusivas.
Meu papel
Meu papel
Participei dos alinhamentos de negócio e das critiques com os stakeholders, explorei fluxos e arquiteturas de informação, desenhei wireframes, apliquei a identidade visual ao produto e desenvolvi as telas iniciais da interface. Também estruturei uma solução de documentação e anotações componentizadas para facilitar o handoff com desenvolvimento.
Participei dos alinhamentos de negócio e das critiques com os stakeholders, explorei fluxos e arquiteturas de informação, desenhei wireframes, apliquei a identidade visual ao produto e desenvolvi as telas iniciais da interface. Também estruturei uma solução de documentação e anotações componentizadas para facilitar o handoff com desenvolvimento.
Time
Time
Time de Design e stakeholders do projeto. 2025.
Time de Design e stakeholders do projeto. 2025.
Ferramentas
Ferramentas
Figma, Microsoft Teams
Figma, Microsoft Teams
Alinhamento inicial
Alinhamento inicial
O produto nasceu para estimular o giro pelos restaurantes de Porto Alegre e Serra Gaúcha
O produto nasceu para estimular o giro pelos restaurantes de Porto Alegre e Serra Gaúcha
Começamos com uma dinâmica presencial para alinhar o problema, explorar possibilidades de negócio e levantar ideias para a experiência. A partir desse encontro, organizamos algumas das principais frentes que deveriam orientar o produto.
Começamos com uma dinâmica presencial para alinhar o problema, explorar possibilidades de negócio e levantar ideias para a experiência. A partir desse encontro, organizamos algumas das principais frentes que deveriam orientar o produto.
O que definimos
Descoberta
Descoberta
Ajudar as pessoas a encontrar restaurantes e decidir onde comer.
Ajudar as pessoas a encontrar restaurantes e decidir onde comer.
Conteúdo
Conteúdo
Dar espaço para os restaurantes divulgarem pratos, menus e benefícios.
Dar espaço para os restaurantes divulgarem pratos, menus e benefícios.
Benefícios
Benefícios
Criar vantagens para quem utiliza a plataforma, como descontos e ofertas especiais.
Criar vantagens para quem utiliza a plataforma, como descontos e ofertas especiais.
Assinatura
Assinatura
Conectar uma assinatura a benefícios exclusivos e a uma mecânica de cashback.
Conectar uma assinatura a benefícios exclusivos e a uma mecânica de cashback.
Nossa solução ⋅
Uma plataforma para aproximar pessoas e restaurantes
Descoberta, benefícios e conteúdo para gerar movimento
Descobrir e decidir onde comer
A experiência combina diferentes formas de descoberta para ajudar na escolha: recomendações, restaurantes próximos, benefícios disponíveis no dia, categorias e destaques da semana.
A home reúne diferentes caminhos para encontrar um restaurante, enquanto a área de exploração permite buscar por categorias e características dos estabelecimentos.
Benefícios que incentivam o giro
A assinatura concentra benefícios oferecidos pelos restaurantes participantes, como descontos, menus exclusivos e condições especiais.
O cashback recebido após o consumo é convertido em giros, a moeda utilizada dentro da plataforma. A experiência também apresenta as regras e condições de uso dos benefícios, ajudando a tornar a mecânica mais clara para o usuário.
Conteúdo que aproxima pessoas e restaurantes
Restaurantes podem utilizar conteúdos para apresentar pratos, menus, novidades e benefícios.
A experiência também reúne conteúdos editoriais relacionados à gastronomia, criando mais oportunidades para descobrir lugares e despertar o interesse por novas experiências.
Desenvolvimento ⋅
Wireframes
Wireframes
Antes do layout final, explorei diferentes caminhos para a experiência
Antes do layout final, explorei diferentes caminhos para a experiência
Após o briefing e o brainstorming inicial, comecei a explorar opções de arquitetura de informação e fluxos para entender como organizar a entrada e a navegação do produto.
Após o briefing e o brainstorming inicial, comecei a explorar opções de arquitetura de informação e fluxos para entender como organizar a entrada e a navegação do produto.
Uma das decisões exploradas foi permitir que a pessoa conhecesse o Giro antes de criar uma conta, deixando o cadastro e a assinatura para o momento em que os benefícios se tornassem relevantes para sua jornada.
Uma das decisões exploradas foi permitir que a pessoa conhecesse o Giro antes de criar uma conta, deixando o cadastro e a assinatura para o momento em que os benefícios se tornassem relevantes para sua jornada.
Explorar sem assinatura
Alguns wireframes do fluxo de entrada e assinatura, com duas opções diferentes de home: uma com vídeos em destaque e outra com stories e tab bar.
Alguns outros estudos iniciais
Destaques da semana, área de busca, tela do restaurante e Meus Giros.
Identidade Visual
Identidade Visual
Uma identidade repleta de conexão e movimento
Uma identidade repleta de conexão e movimento
A parceira Briza desenvolveu a identidade visual do Giro, que serviu como base para a construção da interface.
A parceira Briza desenvolveu a identidade visual do Giro, que serviu como base para a construção da interface.
O conceito partia de um problema simples: de um lado, pessoas tentando decidir onde comer; do outro, restaurantes com mesas vazias esperando movimento. A ideia de giro conecta esses dois lados e orienta a identidade e o conceito do produto.
O conceito partia de um problema simples: de um lado, pessoas tentando decidir onde comer; do outro, restaurantes com mesas vazias esperando movimento. A ideia de giro conecta esses dois lados e orienta a identidade e o conceito do produto.
De um lado, gente tentando decidir onde comer.
Do outro, restaurantes com mesa vaga, esperando movimento.
De um lado, gente tentando decidir onde comer.
Do outro, restaurantes com mesa vaga, esperando movimento.
Manifesto Giro
Manifesto Giro
Produto final
Produto final
Uma interface simples, visual e feita para colocar o usuário em movimento
Uma interface simples, visual e feita para colocar o usuário em movimento
No layout final, a identidade ganhou espaço em uma experiência mobile centrada na descoberta.
No layout final, a identidade ganhou espaço em uma experiência mobile centrada na descoberta.
A home reúne diferentes caminhos para encontrar um restaurante - recomendações, proximidade, benefícios do dia e destaques da semana -, enquanto a área de exploração permite buscar por categorias e características dos estabelecimentos.
A home reúne diferentes caminhos para encontrar um restaurante - recomendações, proximidade, benefícios do dia e destaques da semana -, enquanto a área de exploração permite buscar por categorias e características dos estabelecimentos.
As páginas de restaurante concentram informações, benefícios e formas de contato, enquanto a área Meus Giros torna visível o saldo acumulado e o histórico de utilização do benefício.
As páginas de restaurante concentram informações, benefícios e formas de contato, enquanto a área Meus Giros torna visível o saldo acumulado e o histórico de utilização do benefício.
A experiência também foi estruturada para permitir diferentes níveis de envolvimento: a pessoa pode explorar o produto sem cadastro e, quando fizer sentido, avançar para a criação de conta e assinatura.
A experiência também foi estruturada para permitir diferentes níveis de envolvimento: a pessoa pode explorar o produto sem cadastro e, quando fizer sentido, avançar para a criação de conta e assinatura.
Início na aplicação
Início na aplicação
Início na aplicação
Após uma chamada, é possível já navegar pelo app, ver o conteúdo dos restaurantes e assinar após conhecer os benefícios.
Após uma chamada, é possível já navegar pelo app, ver o conteúdo dos restaurantes e assinar após conhecer os benefícios.
Autenticação e Perfil
Autenticação e Perfil
Autenticação e Perfil
O cadastro solicita apenas o que é estritamente necessário e em Meus Giros, posso meu saldo e extrato de Giros e as regras do programa.
O cadastro solicita apenas o que é estritamente necessário e em Meus Giros, posso meu saldo e extrato de Giros e as regras do programa.
Explorando restaurantes
Explorando restaurantes
Explorando restaurantes
Os restaurantes são recomendados de diferentes formas, como localização, benefícios do dia e preferências do usuário.
Documentação
Documentação
Uma solução para tornar o handoff mais simples
Uma solução para tornar o handoff mais simples
Durante o projeto, identifiquei uma limitação no processo de handoff: o plano de Figma utilizado pelo time não oferecia acesso ao Dev Mode e, consequentemente, aos recursos de Anotações disponíveis na ferramenta.
Durante o projeto, identifiquei uma limitação no processo de handoff: o plano de Figma utilizado pelo time não oferecia acesso ao Dev Mode e, consequentemente, aos recursos de Anotações disponíveis na ferramenta.
Então resolvi fazer um benchmark entre diferentes alternativas, explorando recursos do Figma, plugins e soluções compartilhadas pela comunidade, e criar um conjunto de anotações componentizadas no Figma, pensado para ser reutilizado em diferentes projetos.
Então resolvi fazer um benchmark entre diferentes alternativas, explorando recursos do Figma, plugins e soluções compartilhadas pela comunidade, e criar um conjunto de anotações componentizadas no Figma, pensado para ser reutilizado em diferentes projetos.
A solução permite documentar comportamentos, regras, estados e especificações diretamente nos arquivos de design, mantendo as informações próximas da interface e facilitando a comunicação entre Design e Desenvolvimento.
A solução permite documentar comportamentos, regras, estados e especificações diretamente nos arquivos de design, mantendo as informações próximas da interface e facilitando a comunicação entre Design e Desenvolvimento.
ACESSE O RECURSO DE ANOTAÇÕES PARA HANDOFF PUBLICADO NA COMUNIDADE DO FIGMA
Aprendizados ⋅
Projetar valor para diferentes
lados da experiência
Projetar valor para diferentes
lados da experiência
O Giro precisava equilibrar necessidades diferentes dentro da mesma experiência: facilitar a descoberta e a escolha para quem busca onde comer, enquanto criava oportunidades para os restaurantes divulgarem seus benefícios e produtos.
O Giro precisava equilibrar necessidades diferentes dentro da mesma experiência: facilitar a descoberta e a escolha para quem busca onde comer, enquanto criava oportunidades para os restaurantes divulgarem seus benefícios e produtos.
Esse equilíbrio ajudou a orientar a organização das informações e dos principais pontos de contato da plataforma.
Esse equilíbrio ajudou a orientar a organização das informações e dos principais pontos de contato da plataforma.
Explorar diferentes caminhos antes de definir a solução
Explorar diferentes caminhos antes de definir a solução
Trabalhar em diferentes possibilidades de arquitetura e fluxo antes do layout final ajudou a entender como organizar uma experiência que precisava equilibrar descoberta, benefícios e assinatura sem tornar a navegação complexa.
Trabalhar em diferentes possibilidades de arquitetura e fluxo antes do layout final ajudou a entender como organizar uma experiência que precisava equilibrar descoberta, benefícios e assinatura sem tornar a navegação complexa.
Documentação também é parte do processo de design
Documentação também é parte do processo de design
A limitação encontrada no handoff me levou a pesquisar diferentes formas de documentar interfaces e transformar uma necessidade pontual em uma solução reutilizável.
A limitação encontrada no handoff me levou a pesquisar diferentes formas de documentar interfaces e transformar uma necessidade pontual em uma solução reutilizável.
Criar componentes de anotação no próprio Figma mostrou como pequenas melhorias de processo podem facilitar a colaboração entre Design e Desenvolvimento.
Criar componentes de anotação no próprio Figma mostrou como pequenas melhorias de processo podem facilitar a colaboração entre Design e Desenvolvimento.