Dashboard de Assinatura

Subscription Dashboard

Category

Web App

My role

Wireframing, Prototipação, Handoff

Duration

2 semanas

Client

Meu Crediário

Context

Os clientes precisam acessar diversas telas para visualizar as informações da assinatura do sistema; ao logar no módulo, eles veem uma tela que não entrega valor e sem informações úteis. Como poderíamos permitir que proprietários e gerentes de lojas vejam facilmente o status da assinatura para que possam agir rapidamente e se concentrar em suas atividades prioritárias?

Solution

Criar um painel com informações úteis e resumidas, com acesso às principais ações do módulo para desktops e dispositivos móveis.


Visão geral


Este projeto apresenta como melhoramos a experiência de gestores e lojistas clientes do Meu Crediário, tornando as informações e possíveis ações referentes à adesão ao sistema mais visíveis e facilmente acessíveis em qualquer dispositivo.


Tive ajuda de colegas da equipe de Desenvolvimento para tirar dúvidas que tinha sobre a complexidade de desenvolver as ideias que tive ao longo do processo. Também conversei com as equipes de Suporte ao Cliente e Vendas para coletar sugestões e suas impressões sobre as ideias de soluções.


Contexto


No final de 2021, estávamos realizando algumas mudanças estruturais no software Meu Crediário. O objetivo principal foi fazer melhorias para reduzir o retrabalho e aproveitar a oportunidade de implementar um novo modelo de cobrança, criando uma carteira digital na qual o cliente deve recarregar para continuar usando o sistema e ter seus serviços funcionando, sem limites, em vez de planos mensais fixos.


Assim, a nova estrutura foi composta por módulos separados para cada atividade do sistema, o que também poderia melhorar a experiência dos usuários com o sistema, uma vez que cada tipo de usuário (funcionário da loja) poderia acessar apenas os módulos focados em suas tarefas diárias, evitando distrações e excessos.


O "módulo Assinatura"


Este módulo é a parte do sistema mais utilizada pelos lojistas e lojistas (nossos clientes) para visualizar o saldo de suas lojas com o Meu Crediário, o extrato dos serviços utilizados (como análise de crédito, por exemplo), acessar faturas, gerenciar usuários e, principalmente, recarregar o saldo da loja.


Até agosto de 2022, tínhamos 1.056 clientes pagantes ativos (lojas) e mais de R$ 2 milhões recebidos em recargas.


Nosso problema


Os clientes precisam acessar diversas telas para acessar as informações da assinatura; ao logar no módulo, eles veem uma tela que não entrega valor e sem informações úteis.

Como poderíamos permitir que proprietários e gerentes de lojas vejam facilmente o status da assinatura para que possam agir rapidamente e se concentrar em suas atividades prioritárias?


Perfil e contexto do usuário


Nossos usuários possuem um perfil demográfico diversificado, bem como familiaridade com tecnologia.


São pessoas de diversos estados do Brasil, que administram lojas de diversos tamanhos e segmentos diversificados de varejo.


Assim, mesmo as tarefas e objetivos do dia a dia podem diferir de usuário para usuário. Porém, focamos em melhorar o sistema com base no nosso conhecimento e feedback obtido através de gestores e proprietários de grandes contas, com quem temos contato mais direto.


Procuro projetar soluções e melhorias com cuidado, pensando em apresentar as interfaces da forma mais compreensível possível, com a intenção de que todos os usuários, independente de seu conhecimento, possam atingir seus objetivos ao utilizar o sistema.


A solução


Como equipe, sabíamos que queríamos fazer uma bela tela inicial com dashboard, pois tornaria o módulo mais atraente visualmente e também útil para atender às necessidades dos usuários.


Também sabíamos que teríamos que criar, pelo menos, uma versão MVP do módulo para smartphones. Isso foi relevante porque o gerente ou os lojistas são os responsáveis pela recarga do saldo da loja e era importante para nós permitir que eles fizessem isso de qualquer lugar; eles nem sempre estão na frente de um computador.


Então comecei fazendo um checklist de dados e informações que deveríamos incluir no dashboard.


Depois, fiz alguns esboços para começar a construir as minhas ideias e também para ter algo para mostrar aos meus colegas do CS e Vendas e recolher as suas sugestões.



Protótipo de alta fidelidade


Fiquei muito animada para projetar esse dashboard, então já tinha muitas ideias para a aparência final em mente. Procurei referências de UI design na internet e comecei a transferir os esboços que havia feito para o Figma, iniciando o wireframe.


Com os wireframes, conversei com as equipes de CS e Vendas para coletar suas impressões e verificar se minhas escolhas de design deixaram as informações suficientemente claras.


Apesar de não serem nossos utilizadores, através da sua experiência e contato diário com os usuários, conseguimos sempre encontrar vários pontos de melhoria e potenciais problemas, apenas conversando com eles. Sempre os incluo em minhas criações, principalmente quando não falamos diretamente com nossos usuários.


Pouco tempo depois, evoluí os wireframes para telas de alta fidelidade e comecei a prototipar.



Captura de tela do arquivo Figma mostrando os três tamanhos de tela no protótipo do dashboard.


Para a versão mobile, além da tela do dashboard, tivemos que implementar a funcionalidade de recarga de saldo, algo que até então só era possível através de um desktop ou tablet.


Para tornar a implementação mais simples, optamos por transferir para a versão mobile pequena apenas os elementos indispensáveis: extrato da carteira, configuração de recarga automática e nova recarga.


Handoff e desenvolvimento


Nossa equipe utilizou uma ferramenta gerenciadora de tarefas (aplicativo Linear) onde documentamos as tarefas a serem desenvolvidas. Meu trabalho de handoff consistiu em criar as tarefas com a descrição, regras de funcionamento da tela e todas as explicações necessárias para que o desenvolvedor pudesse entender facilmente a solicitação.


Desenvolver todo o dashboard era uma atividade considerada grande, então dividi em pequenas entregas, para que o dashboard pudesse ser codificado em partes.


Dessa forma, nossos clientes não teriam que esperar que o painel estivesse completo para começar a aproveitá-lo.



Captura de tela do arquivo Figma mostrando o fluxo e as explicações de handoff da versão mobile.


Aprendizados e próximos passos


Com este projeto, pude exercitar, principalmente, minhas habilidades de UI design, pois tive que desenhar o dashboard de forma que fosse simples para o usuário identificar o status atual da assinatura e quais ações deveriam ser tomadas a respeito.


Além disso, adaptei a versão principal do dashboard para uma tela simples para dispositivos móveis, para que fosse rápido para a equipe de desenvolvimento aplicar as melhorias e permitir que o usuário utilizasse os recursos o mais rápido possível.


Apesar dos cards principais do dashboard já estarem disponíveis, ainda falta o card com o extrato, pois a equipe de desenvolvimento relatou que teremos dificuldades em apresentar o extrato com um bom desempenho de carregamento; além disso, outras prioridades ultrapassaram este projeto.


Dashboard de Assinatura

Subscription Dashboard

Category

Web App

My role

Wireframing, Prototipação, Handoff

Duration

2 semanas

Client

Meu Crediário

Context

Os clientes precisam acessar diversas telas para visualizar as informações da assinatura do sistema; ao logar no módulo, eles veem uma tela que não entrega valor e sem informações úteis. Como poderíamos permitir que proprietários e gerentes de lojas vejam facilmente o status da assinatura para que possam agir rapidamente e se concentrar em suas atividades prioritárias?

Solution

Criar um painel com informações úteis e resumidas, com acesso às principais ações do módulo para desktops e dispositivos móveis.


Visão geral


Este projeto apresenta como melhoramos a experiência de gestores e lojistas clientes do Meu Crediário, tornando as informações e possíveis ações referentes à adesão ao sistema mais visíveis e facilmente acessíveis em qualquer dispositivo.


Tive ajuda de colegas da equipe de Desenvolvimento para tirar dúvidas que tinha sobre a complexidade de desenvolver as ideias que tive ao longo do processo. Também conversei com as equipes de Suporte ao Cliente e Vendas para coletar sugestões e suas impressões sobre as ideias de soluções.


Contexto


No final de 2021, estávamos realizando algumas mudanças estruturais no software Meu Crediário. O objetivo principal foi fazer melhorias para reduzir o retrabalho e aproveitar a oportunidade de implementar um novo modelo de cobrança, criando uma carteira digital na qual o cliente deve recarregar para continuar usando o sistema e ter seus serviços funcionando, sem limites, em vez de planos mensais fixos.


Assim, a nova estrutura foi composta por módulos separados para cada atividade do sistema, o que também poderia melhorar a experiência dos usuários com o sistema, uma vez que cada tipo de usuário (funcionário da loja) poderia acessar apenas os módulos focados em suas tarefas diárias, evitando distrações e excessos.


O "módulo Assinatura"


Este módulo é a parte do sistema mais utilizada pelos lojistas e lojistas (nossos clientes) para visualizar o saldo de suas lojas com o Meu Crediário, o extrato dos serviços utilizados (como análise de crédito, por exemplo), acessar faturas, gerenciar usuários e, principalmente, recarregar o saldo da loja.


Até agosto de 2022, tínhamos 1.056 clientes pagantes ativos (lojas) e mais de R$ 2 milhões recebidos em recargas.


Nosso problema


Os clientes precisam acessar diversas telas para acessar as informações da assinatura; ao logar no módulo, eles veem uma tela que não entrega valor e sem informações úteis.

Como poderíamos permitir que proprietários e gerentes de lojas vejam facilmente o status da assinatura para que possam agir rapidamente e se concentrar em suas atividades prioritárias?


Perfil e contexto do usuário


Nossos usuários possuem um perfil demográfico diversificado, bem como familiaridade com tecnologia.


São pessoas de diversos estados do Brasil, que administram lojas de diversos tamanhos e segmentos diversificados de varejo.


Assim, mesmo as tarefas e objetivos do dia a dia podem diferir de usuário para usuário. Porém, focamos em melhorar o sistema com base no nosso conhecimento e feedback obtido através de gestores e proprietários de grandes contas, com quem temos contato mais direto.


Procuro projetar soluções e melhorias com cuidado, pensando em apresentar as interfaces da forma mais compreensível possível, com a intenção de que todos os usuários, independente de seu conhecimento, possam atingir seus objetivos ao utilizar o sistema.


A solução


Como equipe, sabíamos que queríamos fazer uma bela tela inicial com dashboard, pois tornaria o módulo mais atraente visualmente e também útil para atender às necessidades dos usuários.


Também sabíamos que teríamos que criar, pelo menos, uma versão MVP do módulo para smartphones. Isso foi relevante porque o gerente ou os lojistas são os responsáveis pela recarga do saldo da loja e era importante para nós permitir que eles fizessem isso de qualquer lugar; eles nem sempre estão na frente de um computador.


Então comecei fazendo um checklist de dados e informações que deveríamos incluir no dashboard.


Depois, fiz alguns esboços para começar a construir as minhas ideias e também para ter algo para mostrar aos meus colegas do CS e Vendas e recolher as suas sugestões.



Protótipo de alta fidelidade


Fiquei muito animada para projetar esse dashboard, então já tinha muitas ideias para a aparência final em mente. Procurei referências de UI design na internet e comecei a transferir os esboços que havia feito para o Figma, iniciando o wireframe.


Com os wireframes, conversei com as equipes de CS e Vendas para coletar suas impressões e verificar se minhas escolhas de design deixaram as informações suficientemente claras.


Apesar de não serem nossos utilizadores, através da sua experiência e contato diário com os usuários, conseguimos sempre encontrar vários pontos de melhoria e potenciais problemas, apenas conversando com eles. Sempre os incluo em minhas criações, principalmente quando não falamos diretamente com nossos usuários.


Pouco tempo depois, evoluí os wireframes para telas de alta fidelidade e comecei a prototipar.



Captura de tela do arquivo Figma mostrando os três tamanhos de tela no protótipo do dashboard.


Para a versão mobile, além da tela do dashboard, tivemos que implementar a funcionalidade de recarga de saldo, algo que até então só era possível através de um desktop ou tablet.


Para tornar a implementação mais simples, optamos por transferir para a versão mobile pequena apenas os elementos indispensáveis: extrato da carteira, configuração de recarga automática e nova recarga.


Handoff e desenvolvimento


Nossa equipe utilizou uma ferramenta gerenciadora de tarefas (aplicativo Linear) onde documentamos as tarefas a serem desenvolvidas. Meu trabalho de handoff consistiu em criar as tarefas com a descrição, regras de funcionamento da tela e todas as explicações necessárias para que o desenvolvedor pudesse entender facilmente a solicitação.


Desenvolver todo o dashboard era uma atividade considerada grande, então dividi em pequenas entregas, para que o dashboard pudesse ser codificado em partes.


Dessa forma, nossos clientes não teriam que esperar que o painel estivesse completo para começar a aproveitá-lo.



Captura de tela do arquivo Figma mostrando o fluxo e as explicações de handoff da versão mobile.


Aprendizados e próximos passos


Com este projeto, pude exercitar, principalmente, minhas habilidades de UI design, pois tive que desenhar o dashboard de forma que fosse simples para o usuário identificar o status atual da assinatura e quais ações deveriam ser tomadas a respeito.


Além disso, adaptei a versão principal do dashboard para uma tela simples para dispositivos móveis, para que fosse rápido para a equipe de desenvolvimento aplicar as melhorias e permitir que o usuário utilizasse os recursos o mais rápido possível.


Apesar dos cards principais do dashboard já estarem disponíveis, ainda falta o card com o extrato, pois a equipe de desenvolvimento relatou que teremos dificuldades em apresentar o extrato com um bom desempenho de carregamento; além disso, outras prioridades ultrapassaram este projeto.


Dashboard de Assinatura

Subscription Dashboard

Web App

Wireframing, Prototipação, Handoff

2 semanas

Meu Crediário

Os clientes precisam acessar diversas telas para visualizar as informações da assinatura do sistema; ao logar no módulo, eles veem uma tela que não entrega valor e sem informações úteis. Como poderíamos permitir que proprietários e gerentes de lojas vejam facilmente o status da assinatura para que possam agir rapidamente e se concentrar em suas atividades prioritárias?

Criar um painel com informações úteis e resumidas, com acesso às principais ações do módulo para desktops e dispositivos móveis.


Visão geral


Este projeto apresenta como melhoramos a experiência de gestores e lojistas clientes do Meu Crediário, tornando as informações e possíveis ações referentes à adesão ao sistema mais visíveis e facilmente acessíveis em qualquer dispositivo.


Tive ajuda de colegas da equipe de Desenvolvimento para tirar dúvidas que tinha sobre a complexidade de desenvolver as ideias que tive ao longo do processo. Também conversei com as equipes de Suporte ao Cliente e Vendas para coletar sugestões e suas impressões sobre as ideias de soluções.


Contexto


No final de 2021, estávamos realizando algumas mudanças estruturais no software Meu Crediário. O objetivo principal foi fazer melhorias para reduzir o retrabalho e aproveitar a oportunidade de implementar um novo modelo de cobrança, criando uma carteira digital na qual o cliente deve recarregar para continuar usando o sistema e ter seus serviços funcionando, sem limites, em vez de planos mensais fixos.


Assim, a nova estrutura foi composta por módulos separados para cada atividade do sistema, o que também poderia melhorar a experiência dos usuários com o sistema, uma vez que cada tipo de usuário (funcionário da loja) poderia acessar apenas os módulos focados em suas tarefas diárias, evitando distrações e excessos.


O "módulo Assinatura"


Este módulo é a parte do sistema mais utilizada pelos lojistas e lojistas (nossos clientes) para visualizar o saldo de suas lojas com o Meu Crediário, o extrato dos serviços utilizados (como análise de crédito, por exemplo), acessar faturas, gerenciar usuários e, principalmente, recarregar o saldo da loja.


Até agosto de 2022, tínhamos 1.056 clientes pagantes ativos (lojas) e mais de R$ 2 milhões recebidos em recargas.


Nosso problema


Os clientes precisam acessar diversas telas para acessar as informações da assinatura; ao logar no módulo, eles veem uma tela que não entrega valor e sem informações úteis.

Como poderíamos permitir que proprietários e gerentes de lojas vejam facilmente o status da assinatura para que possam agir rapidamente e se concentrar em suas atividades prioritárias?


Perfil e contexto do usuário


Nossos usuários possuem um perfil demográfico diversificado, bem como familiaridade com tecnologia.


São pessoas de diversos estados do Brasil, que administram lojas de diversos tamanhos e segmentos diversificados de varejo.


Assim, mesmo as tarefas e objetivos do dia a dia podem diferir de usuário para usuário. Porém, focamos em melhorar o sistema com base no nosso conhecimento e feedback obtido através de gestores e proprietários de grandes contas, com quem temos contato mais direto.


Procuro projetar soluções e melhorias com cuidado, pensando em apresentar as interfaces da forma mais compreensível possível, com a intenção de que todos os usuários, independente de seu conhecimento, possam atingir seus objetivos ao utilizar o sistema.


A solução


Como equipe, sabíamos que queríamos fazer uma bela tela inicial com dashboard, pois tornaria o módulo mais atraente visualmente e também útil para atender às necessidades dos usuários.


Também sabíamos que teríamos que criar, pelo menos, uma versão MVP do módulo para smartphones. Isso foi relevante porque o gerente ou os lojistas são os responsáveis pela recarga do saldo da loja e era importante para nós permitir que eles fizessem isso de qualquer lugar; eles nem sempre estão na frente de um computador.


Então comecei fazendo um checklist de dados e informações que deveríamos incluir no dashboard.


Depois, fiz alguns esboços para começar a construir as minhas ideias e também para ter algo para mostrar aos meus colegas do CS e Vendas e recolher as suas sugestões.



Protótipo de alta fidelidade


Fiquei muito animada para projetar esse dashboard, então já tinha muitas ideias para a aparência final em mente. Procurei referências de UI design na internet e comecei a transferir os esboços que havia feito para o Figma, iniciando o wireframe.


Com os wireframes, conversei com as equipes de CS e Vendas para coletar suas impressões e verificar se minhas escolhas de design deixaram as informações suficientemente claras.


Apesar de não serem nossos utilizadores, através da sua experiência e contato diário com os usuários, conseguimos sempre encontrar vários pontos de melhoria e potenciais problemas, apenas conversando com eles. Sempre os incluo em minhas criações, principalmente quando não falamos diretamente com nossos usuários.


Pouco tempo depois, evoluí os wireframes para telas de alta fidelidade e comecei a prototipar.



Captura de tela do arquivo Figma mostrando os três tamanhos de tela no protótipo do dashboard.


Para a versão mobile, além da tela do dashboard, tivemos que implementar a funcionalidade de recarga de saldo, algo que até então só era possível através de um desktop ou tablet.


Para tornar a implementação mais simples, optamos por transferir para a versão mobile pequena apenas os elementos indispensáveis: extrato da carteira, configuração de recarga automática e nova recarga.


Handoff e desenvolvimento


Nossa equipe utilizou uma ferramenta gerenciadora de tarefas (aplicativo Linear) onde documentamos as tarefas a serem desenvolvidas. Meu trabalho de handoff consistiu em criar as tarefas com a descrição, regras de funcionamento da tela e todas as explicações necessárias para que o desenvolvedor pudesse entender facilmente a solicitação.


Desenvolver todo o dashboard era uma atividade considerada grande, então dividi em pequenas entregas, para que o dashboard pudesse ser codificado em partes.


Dessa forma, nossos clientes não teriam que esperar que o painel estivesse completo para começar a aproveitá-lo.



Captura de tela do arquivo Figma mostrando o fluxo e as explicações de handoff da versão mobile.


Aprendizados e próximos passos


Com este projeto, pude exercitar, principalmente, minhas habilidades de UI design, pois tive que desenhar o dashboard de forma que fosse simples para o usuário identificar o status atual da assinatura e quais ações deveriam ser tomadas a respeito.


Além disso, adaptei a versão principal do dashboard para uma tela simples para dispositivos móveis, para que fosse rápido para a equipe de desenvolvimento aplicar as melhorias e permitir que o usuário utilizasse os recursos o mais rápido possível.


Apesar dos cards principais do dashboard já estarem disponíveis, ainda falta o card com o extrato, pois a equipe de desenvolvimento relatou que teremos dificuldades em apresentar o extrato com um bom desempenho de carregamento; além disso, outras prioridades ultrapassaram este projeto.


Dashboard de Assinatura

Subscription Dashboard

Category

Web App

My role

Wireframing, Prototipação, Handoff

Duration

2 semanas

Client

Meu Crediário

Context

Os clientes precisam acessar diversas telas para visualizar as informações da assinatura do sistema; ao logar no módulo, eles veem uma tela que não entrega valor e sem informações úteis. Como poderíamos permitir que proprietários e gerentes de lojas vejam facilmente o status da assinatura para que possam agir rapidamente e se concentrar em suas atividades prioritárias?

Solution

Criar um painel com informações úteis e resumidas, com acesso às principais ações do módulo para desktops e dispositivos móveis.


Visão geral


Este projeto apresenta como melhoramos a experiência de gestores e lojistas clientes do Meu Crediário, tornando as informações e possíveis ações referentes à adesão ao sistema mais visíveis e facilmente acessíveis em qualquer dispositivo.


Tive ajuda de colegas da equipe de Desenvolvimento para tirar dúvidas que tinha sobre a complexidade de desenvolver as ideias que tive ao longo do processo. Também conversei com as equipes de Suporte ao Cliente e Vendas para coletar sugestões e suas impressões sobre as ideias de soluções.


Contexto


No final de 2021, estávamos realizando algumas mudanças estruturais no software Meu Crediário. O objetivo principal foi fazer melhorias para reduzir o retrabalho e aproveitar a oportunidade de implementar um novo modelo de cobrança, criando uma carteira digital na qual o cliente deve recarregar para continuar usando o sistema e ter seus serviços funcionando, sem limites, em vez de planos mensais fixos.


Assim, a nova estrutura foi composta por módulos separados para cada atividade do sistema, o que também poderia melhorar a experiência dos usuários com o sistema, uma vez que cada tipo de usuário (funcionário da loja) poderia acessar apenas os módulos focados em suas tarefas diárias, evitando distrações e excessos.


O "módulo Assinatura"


Este módulo é a parte do sistema mais utilizada pelos lojistas e lojistas (nossos clientes) para visualizar o saldo de suas lojas com o Meu Crediário, o extrato dos serviços utilizados (como análise de crédito, por exemplo), acessar faturas, gerenciar usuários e, principalmente, recarregar o saldo da loja.


Até agosto de 2022, tínhamos 1.056 clientes pagantes ativos (lojas) e mais de R$ 2 milhões recebidos em recargas.


Nosso problema


Os clientes precisam acessar diversas telas para acessar as informações da assinatura; ao logar no módulo, eles veem uma tela que não entrega valor e sem informações úteis.

Como poderíamos permitir que proprietários e gerentes de lojas vejam facilmente o status da assinatura para que possam agir rapidamente e se concentrar em suas atividades prioritárias?


Perfil e contexto do usuário


Nossos usuários possuem um perfil demográfico diversificado, bem como familiaridade com tecnologia.


São pessoas de diversos estados do Brasil, que administram lojas de diversos tamanhos e segmentos diversificados de varejo.


Assim, mesmo as tarefas e objetivos do dia a dia podem diferir de usuário para usuário. Porém, focamos em melhorar o sistema com base no nosso conhecimento e feedback obtido através de gestores e proprietários de grandes contas, com quem temos contato mais direto.


Procuro projetar soluções e melhorias com cuidado, pensando em apresentar as interfaces da forma mais compreensível possível, com a intenção de que todos os usuários, independente de seu conhecimento, possam atingir seus objetivos ao utilizar o sistema.


A solução


Como equipe, sabíamos que queríamos fazer uma bela tela inicial com dashboard, pois tornaria o módulo mais atraente visualmente e também útil para atender às necessidades dos usuários.


Também sabíamos que teríamos que criar, pelo menos, uma versão MVP do módulo para smartphones. Isso foi relevante porque o gerente ou os lojistas são os responsáveis pela recarga do saldo da loja e era importante para nós permitir que eles fizessem isso de qualquer lugar; eles nem sempre estão na frente de um computador.


Então comecei fazendo um checklist de dados e informações que deveríamos incluir no dashboard.


Depois, fiz alguns esboços para começar a construir as minhas ideias e também para ter algo para mostrar aos meus colegas do CS e Vendas e recolher as suas sugestões.



Protótipo de alta fidelidade


Fiquei muito animada para projetar esse dashboard, então já tinha muitas ideias para a aparência final em mente. Procurei referências de UI design na internet e comecei a transferir os esboços que havia feito para o Figma, iniciando o wireframe.


Com os wireframes, conversei com as equipes de CS e Vendas para coletar suas impressões e verificar se minhas escolhas de design deixaram as informações suficientemente claras.


Apesar de não serem nossos utilizadores, através da sua experiência e contato diário com os usuários, conseguimos sempre encontrar vários pontos de melhoria e potenciais problemas, apenas conversando com eles. Sempre os incluo em minhas criações, principalmente quando não falamos diretamente com nossos usuários.


Pouco tempo depois, evoluí os wireframes para telas de alta fidelidade e comecei a prototipar.



Captura de tela do arquivo Figma mostrando os três tamanhos de tela no protótipo do dashboard.


Para a versão mobile, além da tela do dashboard, tivemos que implementar a funcionalidade de recarga de saldo, algo que até então só era possível através de um desktop ou tablet.


Para tornar a implementação mais simples, optamos por transferir para a versão mobile pequena apenas os elementos indispensáveis: extrato da carteira, configuração de recarga automática e nova recarga.


Handoff e desenvolvimento


Nossa equipe utilizou uma ferramenta gerenciadora de tarefas (aplicativo Linear) onde documentamos as tarefas a serem desenvolvidas. Meu trabalho de handoff consistiu em criar as tarefas com a descrição, regras de funcionamento da tela e todas as explicações necessárias para que o desenvolvedor pudesse entender facilmente a solicitação.


Desenvolver todo o dashboard era uma atividade considerada grande, então dividi em pequenas entregas, para que o dashboard pudesse ser codificado em partes.


Dessa forma, nossos clientes não teriam que esperar que o painel estivesse completo para começar a aproveitá-lo.



Captura de tela do arquivo Figma mostrando o fluxo e as explicações de handoff da versão mobile.


Aprendizados e próximos passos


Com este projeto, pude exercitar, principalmente, minhas habilidades de UI design, pois tive que desenhar o dashboard de forma que fosse simples para o usuário identificar o status atual da assinatura e quais ações deveriam ser tomadas a respeito.


Além disso, adaptei a versão principal do dashboard para uma tela simples para dispositivos móveis, para que fosse rápido para a equipe de desenvolvimento aplicar as melhorias e permitir que o usuário utilizasse os recursos o mais rápido possível.


Apesar dos cards principais do dashboard já estarem disponíveis, ainda falta o card com o extrato, pois a equipe de desenvolvimento relatou que teremos dificuldades em apresentar o extrato com um bom desempenho de carregamento; além disso, outras prioridades ultrapassaram este projeto.


Vamos trabalhar juntos?

© Copyright 2024. Todos os direitos reservados.

Vamos trabalhar juntos?

© Copyright 2024. Todos os direitos reservados.

Vamos trabalhar
juntos?

© 2024. Todos os direitos reservados.

Vamos trabalhar juntos?

© Copyright 2024. Todos os direitos reservados.