top of page

App Pagstar PF

Produto pra mobile Carteira digital Pagstar
Group 1056.png

VISÃO GERAL

A Pagstar é uma empresa fundada em 2019 com o objetivo de simplificar o pagamento de jogos online, oferecendo uma solução prática e segura aos usuários. Durante o desenvolvimento do aplicativo, concentrei-me em criar uma experiência de pagamento intuitiva e conveniente, priorizando usabilidade, design e segurança. Com uma abordagem flexível e criativa, aprendi com os erros e busquei constantemente aprimorar tanto a mim quanto ao produto ao longo dos dois anos de envolvimento no projeto.

Group 1055.png

PAPEL DESEPENHADO

Design UX/UI, Ilustração, Animação, UX Reasearch, Design de Materiais

FERRAMENTAS UTILIZADAS

Figma, Adobe Illustrator, Paint Tool SAI, LottieFiles, Font Awesome, Rive

2020 ~ 2024

Group 1.png
Organização de trabalho

Neste projeto trabalhamos sob a metodologia Agile baseada no framework Scrum. Por sua abordagem iterativa e incremental, realizei entregas frequentes fragmentadas com foco na rápidez para entregar valor e funcionalidades aos usuários, dividindo o projeto em sprints de duração fixa, adaptando as tarefas e prioridades à medida que elas surgiam.

Processos de design

O processo de design consistia em compreender o problema em questão, discutir ideias e insights, realizar pesquisas detalhadas, validar soluções por meio de wireframes e fluxos e criar protótipos. O testes com usuário para validação aconteciam esporadicamente, devido a complexidade e verba detinada ao projeto.

Pesquisas

Durante minha participação no projeto realizei pesquisas de refências, benchmark, quantitativas, qualitativas, entrevistas com usuários conforme a função e problema que estava sendo trabalhado.

​

Em dado momento apliquei um teste de usabilidade e entrevista com pessoas bancarizadas acima de 45 anos (baseado no publico alvo do produto). O objetivo era aprimorar a arquitetura da informação e validar pontos de mudança proposto pelo time de design.

Group 1057.png

Com base nos resultados do teste e entrevistas, confirmei minhas hipóteses iniciais. Havia urgência em melhorar a acessibilidade e cotrastes, priorizando cores com maior contraste, ajustando o fluxo das ações básicas e renomeando as funções de acordo com o padrão do mercado.

Group 1058.png

Elaborei um style guide sólido e coeso a partir de uma análise detalhada das cores e de como elas interagem em relação à combinação texto/figura/fundo. O teste resultou na melhoria da arquitetura da informação e na revisão da acessibilidade das cores dos botões, feedbacks e textos do aplicativo. Estabelecemos critérios mais definidos para o uso das cores, com foco na acessibilidade e contraste, especialmente para pessoas com daltonismo. Essas alterações contribuíram para a acessibilidade geral do aplicativo.

Group 1033.png
Group 1034.png
Group 1035_edited.png
Wireframing

Participei ativamente do desenvolvimento de um wireframe para o aplicativo, visualizando de forma simplificada a estrutura e fluxo das telas. Ele serviu como guia inicial para o design e a funcionalidade do aplicativo, facilitando a comunicação e a compreensão do projeto. O wireframe representou um passo importante na criação do aplicativo, proporcionando uma visão clara e organizada de como seria sua interface e interação.

Group 1059.png
Group 1060.png
Design System

Para garantir a consistência visual e uma experiência de usuário coerente, criei um design system robusto para o aplicativo. O processo envolveu a definição de diretrizes de design, como cores, tipografia e elementos de interface, além da criação de componentes reutilizáveis e padrões de layout. Com esse sistema, conseguimos agilizar o desenvolvimento, garantir a coesão visual e proporcionar uma experiência fluida e intuitiva aos usuários do aplicativo.

Group 1063.png
Group 1041.png
Ilustrações

Para agregar ao design system, elaborei diversas ilustrações personalizadas para o produto, mantendo a consistência com a identidade visual estabelecida. As ilustrações foram desenvolvidas com o objetivo de complementar a marca, transmitindo visualmente os conceitos e valores da empresa de forma criativa e envolvente.

Group 1061.png
Group 1062.png
Group 1063.png
Prototipagem

Na etapa de prototipagem, utilizamos wireflows das telas desenvolvidas para apresentar a solução proposta pelo design à equipe comercial. Isso agiliza o trabalho da equipe de desenvolvimento e otimiza as reuniões de alinhamento do produto com os times envolvidos. Eventualmente, criamos protótipos clicáveis no Figma, principalmente para casos de pesquisa e testes com usuários.

Group 1041.png
Group 955 3.png
Conclusões

Como UX/UI designer no projeto da Pagstar, desempenhei um papel abrangente, desde a pesquisa inicial até a criação de protótipos e implementação das melhorias. Foi extremamente gratificante observar o impacto positivo dessas mudanças no produto, resultando em uma experiência mais agradável e funcional para os usuários.

bottom of page