Calendar Pro Redesign

Tipo de Projeto: App
Setor: Tecnologia
Ferramentas: Figma, Illustrator.

Visão Geral

O Calendar Pro é um aplicativo “de design inovador, simples, mas útil” de calendário. Possui muitas opções de personalização, permitindo que os usuários mudem quase todos os aspectos de sua aparência.

Desafio

Como melhorar a experiência do usuário do aplicativo sem comprometer as funcionalidades principais que já estão bem aceitas entre os usuários?

Introdução

Este é um projeto pessoal em que decidi redesenhar um aplicativo que uso diariamente, o Calendar Pro. O redesign é totalmente baseado em minha experiência como designer, usuário e também em análises e pesquisas realizadas por mim, com o objetivo de alcançar um resultado mais refinado para uma melhor experiência no produto. Considerando que o único tipo de calendário que funciona para mim é o vertical, que é basicamente uma lista dos dias do mês (ou meses) que me dá uma visão completa das tarefas e eventos que tenho nesse período, o app foi uma solução imediata para os problemas que eu tinha ao usar outras opções que possuem apenas visualização mensal e semanal tradicional. O aplicativo faz parte da minha rotina há mais de um ano e tem sido minha plataforma principal de organização desde que o baixei pela primeira vez.

Processo

Análise de Produto

O app Calendar Pro é um calendário simples que exibe cada mês como uma lista, permitindo que os usuários adicionem eventos diretamente no calendário e sincronizem dados de outros calendários como o Google, Exchange e Outlook. A funcionalidade é tão simples quanto possível e essa sensação direta ao ponto é mostrada como um de seus principais benefícios, mas a característica distintiva é a possibilidade de personalizar totalmente sua interface escolhendo entre diferentes opções de visualização e mudando a cor de quase todos os elementos que aparecem na tela. Ao mesmo tempo, parece uma vantagem em relação a outros apps similares, minha experiência com o aplicativo me levou a acreditar que a experiência poderia ser refinada para destacar o produto.

Pontos de melhoria

  • Personalização Excessiva: Houve algumas possibilidades de melhoria em relação a uma das heurísticas de usabilidade: Flexibilidade e eficiência de uso. Apesar de o produto desejar dar ao usuário total controle sobre seus elementos, permitindo um grande número de opções em relação aos seus aspectos visuais, esse grau de flexibilidade pode ser esmagador desde o início, quando o aplicativo solicita escolhas de personalização antes de apresentar suas funcionalidades.
Primeiras telas do aplicativo Calendar Pro, exibidas na ordem em que aparecem.
  • Funcionalidades duplicadas: Depois das telas iniciais, é possível encontrar mais opções de personalização e algumas delas até aparecem mais de uma vez em lugares diferentes da interface, tornando a navegação confusa. No menu suspenso que está localizado no canto superior esquerdo é possível encontrar opções para personalizar o layout, e elas também aparecem no menu de configurações. Para adicionar um evento, você pode tanto tocar no botão “+” na barra superior do aplicativo quanto manter pressionada uma data para abrir o menu de eventos.
Lugares diferentes para executar a mesma tarefa: 1 e 2: Personalizar visualização | 3 e 4: Adicionar evento
  • Aspectos visuais: O esquema de cores com cores ousadas e a falta de “respiro” provavelmente são os aspectos mais facilmente percebidos. A inconsistência entre o fundo claro e o fundo escuro das configurações também é um ponto importante de atenção. E por último, mas não menos importante, a escolha de estrelas como símbolo em vez de botões de rádio  não é muito intuitiva para o usuário.
1. Visão principal com rolagem horizontal | 2. Visão principal com rolagem vertical | 3. Menu de configurações | 4. Menu "View"

Análise de Competidores

Considerando os poucos concorrentes diretos, a análise foi baseada em dois dos aplicativos de calendário tradicional mais bem classificados e dois dos aplicativos de lista de tarefas mais bem classificados de acordo com estes atributos: 1. Proposta de valor 2 .Necessidade de cadastro/login 3. Execução da tarefa principal 4. Recursos de personalização 5. Tom de voz 6. Interface.
    • proposta de valor única: calendário off-line altamente personalizável, sem recursos complicados ou permissões e anúncios desnecessários.
    • cadastro e login: nenhuma conta ou login é necessário. 
    • realizando a tarefa principal: para adicionar um evento você deve clicar no botão “+” no canto inferior direito da tela. depois disso, você pode definir um título, um local, uma descrição, duração em horas, definir um alarme, definir se é um evento recorrente e definir seu tipo, que corresponde a uma cor. depois disso você clica no check que está localizado na barra de menu para salvar o evento. esta é a única maneira de adicionar um evento; se você clicar em uma data antes de clicar no botão +, ele o levará à página da data, mas você ainda precisará pressionar o sinal de mais para adicionar um evento naquele dia. 
    • recursos de personalização: cores (pro), idioma (pro), formato de hora, primeiro dia da semana, lembretes, visualização de dados (diário, semanal, mensal, anual, lista de eventos simples, mensal e diário (pro)) e algumas especificidades para cada um, widgets;
    • tom: simples, o aplicativo não é conversacional
    • interface: barra de menu laranja e adicionar botão de evento com fundo cinza escuro e tipografia e elementos visuais brancos. a cor do elemento do tipo de evento é personalizável, onde é possível escolher em um seletor de cores. personalização adicional não pôde ser testada porque era um recurso pago, mas na página da versão paga afirma que você pode personalizar totalmente o tema alterando o texto, plano de fundo, principal e cor do ícone do aplicativo. você também pode aplicar a mesma configuração de cores a todos os outros aplicativos do mesmo desenvolvedor.

    nota adicional: o aplicativo não é mais atualizado, apenas sua versão paga (Simple Calendar Pro). alguns recursos como personalização de cor e idioma, configurações de importação e sincronização com caldav estão disponíveis apenas na versão paga. 

  • unique value proposition: “the simplest calendar app”, simple and easy-to-use with no extra features. 4.9/5 star on play store
  • cadastro e login: no account or login is necessary. you need a google account to backup and restore data
  • performing the main task: to add an event you have to click the “+” button on the inferior right side of the screen. after this, you can define a title, a date a description, duration in hours, a color and you can also choose the option “add items”, where you can add more dates to the same event and/or add a note. after that, you click on the “check” button to save the event. this is the only way to add an event; if you click on a date before clicking the + button, it brings you to the date page, but you still have to press the plus to add an event on that day. 
  • customization features: theme (you can choose between light and dark mode), start day of the week (saturday, sunday and monday).
  • tone: direct, not conversational
  • interface: the standard interface is the light mode, which has a white background, dark and light gray fonts (depending of the type of the text) and dark yellow buttons. at the bottom of the screen there is an add section.
  • proposta de valor única: rastreador de tarefas eficaz e gratuito e gerenciador de tarefas de lista de tarefas e planejador de cronograma. “fácil e bonito”; “amigo do usuário”;
  • cadastro e login: o app oferece a opção de fazer login com e-mail ou conta do google; há também a opção “outros”, que mostra a alternativa de entrar com uma conta no facebook ou twitter. você também pode pular esse processo e acessar o aplicativo sem uma conta. após o processo de inscrição (ou se você pulou), o aplicativo mostra uma tela onde você pode escolher a finalidade ou finalidades do aplicativo, com a pergunta: “o que você deseja criar?” seguido por estas opções: trabalho, pessoal, compras, aprendizagem, lista de desejos, fitness e aniversário. você pode escolher várias opções ou pular a pergunta.
  • realizando a tarefa principal:para adicionar uma tarefa você deve clicar no botão “+” no canto inferior direito da tela. depois disso, você pode descrever sua tarefa e definir alguns aspectos como prazo, prioridade, uma tag e a lista de tarefas (Caixa de entrada e Boas-vindas são as listas padrão). depois disso, você clica no botão de seta para salvar a tarefa, que vai direto para o topo da lista. você pode clicar na caixa de seleção após a conclusão da tarefa, ao fazer isso um botão de seta aparece por um breve período de tempo no canto inferior esquerdo da tela para você desfazer a ação. esta é a única maneira de adicionar uma tarefa; depois de adicionar tarefas, você pode executar algumas ações passando o dedo sobre elas: se deslizar para a direita, pode marcar uma tarefa como concluída ou fixar uma tarefa, se deslizar para a esquerda, move a tarefa para outra lista, exclui-a ou altera seu prazo .
  • recursos de personalização: barra de guias (você pode escolher até 5 recursos para aparecer na barra de guias, mais do que isso, os ícones aparecerão dentro de um menu oculto de três pontos / recursos disponíveis: tarefa, matriz de eisenhower, pomodoro, rastreador de hábitos, calendário, configuração, pesquisa); aparência (opção de tema com e sem ilustrações, cores e estilos dos ícones (recurso premium), tamanho da fonte, contagem da barra lateral e estilo da tarefa concluída); você pode mostrar ou ocultar os detalhes das tarefas; mostrar ou ocultar as tarefas concluídas; alterar a visualização (lista, kanban ou linha do tempo (pro)); você também pode personalizar as opções de prazo, priorizando as opções que são recorrentemente utilizadas para ter um acesso mais fácil a elas. no geral, o aplicativo oferece ao usuário muito poder de personalização.
  • tom: direto, primeiros passos tem tom coloquial com uso de ilustrações humanas; o uso de emojis nas tarefas de exemplo dão um tom mais leve ao produto;
  • interface: o tema segue o modo do sistema. tema claro tem fundo azul claro, fonte cinza escuro com caixas brancas que segregam cada tipo de conteúdo; adicionar botão de tarefa, cabeçalho de menu e alguns ícones de configuração são azuis; os ícones também aparecem em verde e laranja claro;
  •  
  • proposta de valor única: planejador de agenda diária, organizador de tarefas, aplicativo de lembrete de tarefas, calendário. “tamanho pequeno e fácil de usar” “rastreador de tarefas eficaz e gratuito e gerenciador de listas de tarefas para ajudá-lo a gerenciar o tempo e desfrutar de uma vida fácil. 4,9/5 estrelas na Play Store
  • cadastro e login: nenhuma conta ou login é necessário. você pode optar por sincronizar com o google drive
  • realizando a tarefa principal: para adicionar uma tarefa você deve clicar no botão “+” no canto inferior direito da tela. depois disso, você pode descrever sua tarefa e definir alguns aspectos como uma categoria, um prazo (data, hora, recorrência e notificação), subtarefas ou escolher um modelo. depois disso, você clica no botão de seta para salvar a tarefa, que mostra um tutorial de quais ações você pode executar em uma tarefa passando o dedo ou arrastando-a. deslizando para a esquerda, você pode marcar a tarefa com uma estrela, alterar sua data ou excluí-la; deslizando para a direita, você pode marcá-lo como concluído. na parte superior do aplicativo existem categorias que você pode escolher e criar as tarefas dentro delas. 
  • recursos de personalização: você pode criar e gerenciar as categorias que são mostradas na página inicial; você pode classificar as tarefas por data de vencimento, hora de criação, ordem alfabética e manual; você pode escolher entre temas com diferentes cores de destaque e na versão pro você pode adicionar textura, cenário e fazer upload de suas próprias imagens para o aplicativo. você também pode alterar o primeiro dia da semana, o formato da hora, o formato da data e a data de vencimento padrão
  • tom: tom de conversa, dá as boas-vindas ao aplicativo; balão de diálogo amarelo sugere algumas ações a serem tomadas, como adicionar uma tarefa (“clique aqui para criar sua primeira tarefa”); app sugere bons hábitos para rastrear (“vamos começar com alguns bons hábitos?”); quando você conclui todas as suas tarefas, o aplicativo o parabeniza com uma mensagem que aparece com uma ilustração humana (“que orgulho de você, todas as tarefas concluídas”). cada categoria tem uma ilustração diferente, sempre mostrando uma pessoa realizando alguma ação que tenha a ver com a categoria. há dicas ao longo de todo o app que sugerem uma ação que você pode realizar e como fazê-la; 
  • interface: ícone do app com movimento na tela de abertura; mostra uma “oferta especial” para novo usuário antes de acessar o app; movimento nas setas que estão no botão “continuar” para adquirir a versão premium; ilustração humana na primeira tela, quando você ainda não tem tarefas. adicionar botão de tarefa com movimento; tema padrão tem um fundo branco com texto de fonte cinza escuro (cinza claro quando a tarefa é concluída); botão azul com ícone/categoria azul (quando selecionado), ícones de menu também azuis.
  •  

Arquitetura de informação

Após a análise do produto e da concorrência, a arquitetura da informação foi reorganizada de forma a facilitar o acesso às principais funcionalidades e definir o local onde estariam as funcionalidades duplicadas. O menu de configurações também foi redefinido com novas, mas menos categorias para um melhor arranjo.
Site Map Anterior
Site Map atualizado

Experiência do usuário

O objetivo do redesenho foi apresentar as principais funcionalidades por meio de uma composição visual renovada, melhorando a experiência do usuário durante o uso do app. As opções de customização relacionadas ao layout do calendário foram reunidas em um novo menu, exibido no canto superior direito.

As opções de rolagem vertical e horizontal agora são exibidas como opções excludentes, diferente de antes, onde o uso de estrelas em vez de botões de opção poderia levar o usuário a acreditar que poderiam ser escolhidos ao mesmo tempo.

Diferentes opções de rolagem
Novo menu e opções de adicionar tarefa.
A ação principal, adicionar um evento ao calendário, agora pode ser realizada clicando em um botão de ação flutuante que aparece no canto inferior direito. Um botão redondo azul elevado traz a atenção necessária para a tarefa.
O menu do app também foi remodelado, trazendo menos opções, porém mais intuitivas, para acessar mais customizações e outros recursos de configuração.
Scroll to Top