Soundbite - landing page
Principais objetivos do projeto
Criar uma landing page para o lançamento digital.
Criar uma página moderna, responsiva e que capte a essencia do aplicativo.
Mostrar as funcionalidades, benefícios e planos oferecidos no app.
Meu papel no projeto:
UI Design.
Style Guide.
Desenvolvimento no code com Framer.
Resumo
O PocketPlanner é um aplicativo de gerenciamento financeiro projetado para atender às necessidades de usuários de diferentes faixas etárias, como jovens adultos e pessoas próximas à aposentadoria. Ele oferece uma plataforma intuitiva e completa para planejamento e controle financeiro, permitindo que os usuários acompanhem suas receitas, despesas, investimentos e economias de maneira eficiente e segura.
Research
A situação de endividamento no Brasil tem sido uma preocupação crescente. Em 2024, cerca de 78,8% das famílias brasileiras relataram estar endividadas, e a maior parte dessas dívidas (86,9%) está associada a cartões de crédito. Essa proporção subiu consistentemente nos últimos anos, mostrando um aumento de 49% em 2021 para 60% em 2023.
A inadimplência, ou seja, dívidas em atraso, também permanece alta: aproximadamente 28,6% das famílias estavam inadimplentes em 2024, refletindo uma dificuldade significativa em gerenciar suas finanças. Entre os principais fatores para essa situação estão a falta de planejamento financeiro (36%), perda de emprego (31%) e gastos inesperados, como saúde (30%).
Essa situação afeta intensamente a vida dos endividados, impactando aspectos emocionais e sociais, como sono e felicidade, e pode até afetar as relações pessoais. O acesso a programas de renegociação, como o Desenrola Brasil, tem sido uma tentativa de auxiliar na recuperação financeira.
Esses dados reforçam a relevância de um aplicativo financeiro que ajude os usuários a gerenciar suas finanças de forma eficaz, fornecendo ferramentas para planejamento e educação financeira, visando reduzir a dependência de cartões de crédito e melhorar a saúde financeira geral.
UX Strategy
Antes de tudo temos que enteder os problemas e angústias do usuário, depois da nossa Desk research e com tudo que descobrimos. Comecei fazendo uma matriz CSD para analisarmos os pontos a serem pesquisados, desk research para coletar depoimemento das pessoas em entrevistas, comenários, blog posts e redes sociais, para posteriormente gerar nosso problem statement.
Style Guide
Nesse projeto, pensando nas cores e tipografia, eu usei a combinação das seguintes cores e da typeface Lexend, uma fonte projetada para diminuir o estresse visual, oferecendo uma experiência agradável ao usuário.
Design do site
O design do site do Soundbite foi cuidadosamente pensado para oferecer uma experiência moderna e envolvente. Totalmente responsivo, ele se adapta perfeitamente a qualquer dispositivo, garantindo uma navegação fluida, seja em smartphones, tablets ou desktops. Com animações sutis e interativas, o site desperta o interesse dos visitantes e os guia de forma intuitiva pelos conteúdos, mantendo-os engajados.
Cada elemento visual foi projetado para ser atrativo e destacar as funcionalidades do aplicativo, criando uma jornada dinâmica que incentiva a exploração e facilita as conversões. O uso estratégico de cores e tipografia confere ao site uma identidade única e impactante, refletindo a essência do Soundbite como uma plataforma vibrante e familiar.
Hero Section
A hero section do site foi projetada para causar uma primeira impressão poderosa. Ela apresenta imagens marcantes que capturam a essência da música e do entretenimento, transmitindo a energia e o dinamismo do aplicativo. As copys e frases são cuidadosamente elaboradas para comunicar de forma direta e envolvente os principais benefícios do Soundbite, despertando curiosidade e interesse.
No topo direito da hero section, um botão de call to action (CTA) estratégico convida o visitante a assinar o aplicativo com um teste grátis, incentivando uma ação imediata. O botão é destacado por sua cor contrastante, tornando-o impossível de ignorar e ajudando a converter visitantes em usuários.
Tudo isso contribui para uma experiência visual e interativa que motiva o público a explorar mais e se juntar à comunidade.
Funcionalidades
A seção de funcionalidades do site foi desenvolvida para mostrar de forma clara e atraente algumasfuncionalidades que o aplicativo oferece. Com um design moderno, essa seção inclui cards interativos que destacam as funções do app. Quando os visitantes passam o cursor sobre os cards (efeito hover), animações sutis entram em cena, proporcionando uma experiência visual dinâmica e informativa.
Benefícios
A seção de benefícios do site foi projetada para destacar todas as vantagens que os usuários têm ao escolher o aplicativo, enfatizando como ele pode transformar a experiência musical e de entretenimento. Com um layout visualmente atraente, essa seção comunica de forma clara os principais pontos positivos, utilizando ícones e descrições que facilitam a leitura.
Benefícios
A seção de planos do site foi projetada para ser clara e informativa, permitindo que os usuários comparem facilmente as opções e escolham a que melhor se adapta às suas necessidades. Com uma apresentação visual atrativa e organizada, a seção exibe três planos diferentes, destacando suas principais características e preços.
Utilizando uma cor contrastante, chamamos a atenção para o plano recomendado, para ajudar o usuário em sua escolha, facilitando a conversão.
ÚLTIMO CTA
A última seção do site é uma call to action (CTA) impactante, estrategicamente projetada para motivar o usuário a baixar o aplicativo. Com um fundo de cor atraente, como um tom de roxo, essa seção se destaca visualmente e encerra a página com um convite irresistível à ação.
Conclusão
Depois de criar todo esse nosso website posso afirmar que essa jornada foi extremamente enriquecedora, proporcionando um grande aprendizado sobre o uso do Framer e suas ferramentas avançadas para criação de sites interativos. Ao longo desse projeto, coloquei em prática diversos conceitos e técnicas que fortaleceram minha compreensão do design moderno e responsivo.
Utilizei styleguides para manter a consistência visual em todas as seções, garantindo que a identidade do site permanecesse coesa e atraente. Trabalhei com uma paleta de cores estrategicamente escolhida, que não só refletia a identidade vibrante do aplicativo, mas também ajudava a destacar elementos importantes, como botões de call to action (CTAs) e seções de destaque. A aplicação cuidadosa de CTAs foi fundamental para guiar o usuário de forma intuitiva e incentivá-lo a interagir com o conteúdo e baixar o aplicativo.
Todo o processo me ensinou a importância de criar interfaces que não apenas sejam visualmente atrativas, mas também funcionais e voltadas para conversão. A experiência com o Framer me proporcionou mais confiança e habilidade para desenvolver projetos futuros com mais criatividade e precisão.
