prompt inicial

redesenhar app "m24"

Role
ux/ui designer

ferramentas
figma
whiteboard & figjam
hand-drawing
photoshop
illustrator
spotify

prompts
redesenhar login & onboarding
redesenhar dashboard
redesenhar área de menu ‘para si’

contexto

qual a situação actual?

a m24 é uma app de home banking da Montepio Geral que visa facilitar operações bancárias seus clientes como 1) abrir conta 2) pedir e gerir cartões 3) aceder a operações bancárias do dia-a-dia 4) subscrever produtos financeiros (soluções de poupança e investimento, créditos, etc.).

Foi-me proposto renovar o interface inicial (como login, dashboard e área de menu) para dar resposta a problemas funcionais e enquadra-los numa nova roupagem a nível gráfico, mantendo a identidade corporativa da empresa.

onboarding ►
permite entrar na aplicação e aceder a outros serviços e funcionalidades como abrir conta (no ponto de vista do first time user), efectuar pagamentos, etc.

onboarding ►
permite entrar na aplicação e aceder a outros serviços e funcionalidades como abrir conta (no ponto de vista do first time user), efectuar pagamentos, etc.

login ►
login convencional, com ênfase no botão 'entrar' e parece apresentar uma gestão irregular do espaçamento entre elementos.

login ►
login convencional, com ênfase no botão 'entrar' e parece apresentar uma gestão irregular do espaçamento entre elementos.

dashboard ►
parece enfrentar problemas de acessibilidade como o contraste de cromático e a hierarquia dos componentes.

dashboard ►
parece enfrentar problemas de acessibilidade como o contraste de cromático e a hierarquia dos componentes.

área menu "para si" ►
parece apresentar alguns problemas de 'cognitive overload' com uma interacção em 'animated slide in' e pouca organização hierárquica dos elementos de menu.

área menu "para si" ►
parece apresentar alguns problemas de 'cognitive overload' com uma interacção em 'animated slide in' e pouca organização hierárquica dos elementos de menu.

'affinity mapping'
Para poder saber mais sobre a relação da app com os clientes montepio geral, foi recolhido feedback através das app store de ambas as plataformas onde a mesma está disponível (android e iOS).

Estes feedbacks foram depois agrupados em quatro temas: usabilidade, funcionalidades, design e outros.

usabilidade

"uma aplicação do banco que depende de mais duas aplicações. necessita da app aprova ou complica a vida, precisa da app mbway ou nem consegue levantar dinheiro no mb."

"super confusa. Não se encontra nada"

"Não dá para fazer muita coisa"

"a app é boa e funciona (...)"

"a consulta de operações é difícil e confusa"

"pouco prática"

"Muito pouco intuitiva..."

"A app não representa o bom funcionamento do Montepio. Pouco intuitiva."

"A App é um pouco confusa."

funcionalidades

"há a possibilidade de receber notificações sempre que entra ou sai dinheiro da conta?"

"deviam ter notificações sempre que há movimentos na conta, quer entrada de dinheiros ou saídas."

"a consulta de operações é difícil e confusa"

"(...) Como é possível uma aplicação bancária só possibilitar ver os últimos 5 movimentos?(...)"

"Muito limitada no que respeita a consultas"

"Pouco intuitiva, principalmente na análise dos movimentos diários, temos que especificar sempre um periodo de tempo, não faz o balanço valor remanescente após cada movimento."

"Outra falha é as notificações, não sei porque e já contactei o apoio ao cliente que também não sabe, estão bloqueadas e não é possível ativar, o que torna o serviço de alertas inútil."

design

"o design é muito mau (...) Não segue normas de design nenhumas."

"para quando uma alteração de fundo da aplicação a nível de design?"

"(...) o layout é antigo (...)"

"(...) O Layout deveria ser revisto, apostem num layout mais moderno e apelativo."

outros

"para além de estar sempre em baixo(...)"

"é desnecessário app prova e não acrescenta segurança. Deixem de inventar e simplifiquem. Uma app tem uma chave privada não precisam de duas."

kickstart

processo

após recolher feedback dos utilizadores, senti-me apto para definir qual o caminho a tomar  neste design sprint, começando pela pesquisa dos utilizadores, para entender qual a relação com a marca/serviços.

depois, será estudada a relação entre a marca e o mercado com uma análise competitiva, seguida pela fase de definição/ideação para se estabelecer uma base sólida para a nova roupagem da app.

será de seguida iniciada a fase de design & prototipagem, com a recolha de elementos gráficos e desenho de um user flow que responda às necessidades sos utilizadores.

pesquisa do utilizador

quem é o utilizador?

as minhas assumpções e a tipologia dos seus serviços, junto com universo da marca, encompassaram uma user persona:

maria, uma utilizadora diária, cuja gestão financeira exigente depende do funcionamento da app.

maria

gestora de recursos humanos de 37 anos.
casada e mãe de três filhos, vive em lisboa.

frustrações
1. Tempo limitado para uma gestão financeira muito activa e exigente.
2. Preocupações constantes sobre segurança e prevenção de fraudes com o aumento recente de chamadas de spam e spoofing.
3. a sua app é pouco intuitiva e difícil de usar.

objectivos
1. ter um acesso rápido aos saldos da conta e transações recentes.
2. efectuar de forma rápida pagamentos de contas e transferências de fundos fáceis.
3. gerir despesas & poupanças através de ferramentas rápidas e intuitivas.
4. ter acesso a Alertas para atividades incomuns na conta.

pain point I
a maria sente dificuldades ao aceder a serviços financeiros do seu banco, já que a app m24 apresenta diversos problemas e o balcão mais próximo fechou portas há alguns meses.

pain point II
a maria sente que a app não é agradável de se ser usada para tratar/resolver assuntos urgentes, agravando a sua relação próxima com o banco.

pesquisa qualitativa
para uma análise competitiva mais afunilada e incisiva, foi feita uma triagem de apps que servirão de referência para a o redesenho da nova mp24 de acordo com os seguintes denominadores:

1. faixa etária do utilizador
2. feedback nas plataformas de app store
3. usabilidade
4. design
5. segurança

millennium bcp

simplicidade
o user flow demonstra uma usabilidade e interface simples e intuitivas, demonstrando organização das funcionalidades e conteúdo.

hierarquia
o conteúdo encontra-se organizado em formato 'T', em que olhar do utilizador é magnetizado desde a parte superior com formas descontínuas para a inferior com similaridade das formas horizontais.

(in)formalismo
o aspecto profissional da interface contrasta com as cores vibrantes, alargando o público alvo do utilizador.

activobank

minimalismo
o user flow dispensa imagens ilustrativas e aposta nas cores da sua identidade corporativa em consonância com iconografia e copywriting assertivo.

iconografia
a interface dispensa imagens e outro conteúdo não informativo para uma leitura mais eficaz do user flow.

f-menu
o menu em formato 'f' mostra o elemento principal (saldo & débitos) na parte superior e restantes funcionalidades secundárias em verticalidade.

definir + idealizar

inspirado pela análise competitiva efectuada e pela necessidade de reforçar a relação com o cliente, cheguei à conclusão de que uma secção de login de uma app de homebanking deve ser simples e clara e deve transmitir o estilo de  comunicação (voice tone) da marca.

minimalismo
a interface deve transmitir clareza por via da simplicidade dos componentes de design, equilibrando elementos gráficos da marca e a hierarquia das várias funcionalidades pré-existentes.

proximidade
deve reforçar a relação de proximidade para com o cliente, assim como de confiança e até de intimidade no tratamento das operações efectuadas pelo cliente na gestão da sua vida pessoal/profissional.

facilidade
a interface deve ser simplificada de forma a transmitir uma sensação de segurança e de privacidade ao cliente, de forma a garantir um user flow rápido, intuitivo e simples do ponto de vista do 'development'.

segurança
o user flow 'outdated' de usar o teclado para inserir uma passe complexa proveniente de outras duas apps de autenticação deve ser substituída por uma passe numérica simples, reforçada pela autenticação biométrica.

intro+login

► alguns wireframes foram pensados para estudar o processo de entrar na aplicação de forma simples e segura.

dashboard + menu 'para si'

foram esboçadas algumas ideias para resolver os problemas de contraste e de organização dos produtos financeiros do banco transpostas na app.

► alguns wireframes foram pensados para estudar a relação entre a dashboard e a área de menu de forma a potenciar o envolvimento do utilizador.

protótipos lo-fi
intro
login
dashboard
menu 'para si'
protótipos hi-fi

login ►
um método de login mais agilizado e com funcionalidades de pagamento rápido foi criado.

login ►
um método de login mais agilizado e com funcionalidades de pagamento rápido foi criado.

login ►
foi introduzido um método de autenticação biométrico com uma opção adicional com recurso à AppProva para uma transição suave ano recurso à autenticação.

login ►
foi introduzido um método de autenticação biométrico com uma opção adicional com recurso à AppProva para uma transição suave ano recurso à autenticação.

dashboard ►
o 'look and feel' da app foi remodelado, tendo como prioridade as funcionalidades mais corriqueira dos utilizadores.

dashboard ►
o 'look and feel' da app foi remodelado, tendo como prioridade as funcionalidades mais corriqueira dos utilizadores.

menu ►
o menu de produtos foi criado com uma linguagem clara e intuitiva.

menu ►
o menu de produtos foi criado com uma linguagem clara e intuitiva.