Criando a interface do usuário da Kin Wallet

Requisitos do Projeto

Nosso processo de design começa determinando os requisitos do produto. Nesse caso, nosso produto precisa apresentar aos usuários do Kik o processo de ganhar e gastar Kin. Isso significa que integraremos os usuários a uma experiência completamente nova no Kik.

Durante a iteração anterior deste produto (a versão disponibilizada para usuários que participaram do evento de distribuição de tokens), foi decidido que a carteira apresentaria a aparência da marca Kin.

Isso significa que os novos usuários do Kik que visualizarem este produto experimentarão novos recursos e uma nova aparência muito diferente do que estão acostumados no Kik até agora.

Por esse motivo, percebemos desde o início que seria importante manter essa versão o mais enxuta possível.

Planejando a estrutura de IA das viagens do usuário

Onboarding

Os usuários serão apresentados à carteira por meio do bot @KikTeam. Isso nos permite explorar o que os usuários do Kik estão familiarizados - conversando - para introduzir essa nova experiência.

Arquitetura da informação da carteira (IA) - examinando diferentes estruturas

Examinamos duas estruturas possíveis de IA durante duas iterações deste projeto.

  1. Um conjunto robusto de recursos que inclui o histórico de transações e uma grande seção de maneiras de ganhar Kin.
  2. Um conjunto mais enxuto que inclui apenas opções de saldo e ganhos / gastos.

A primeira iteração

Durante a iteração inicial, começamos com a página principal usada para a carteira de um participante da TDE e adicionamos uma navegação no menu para histórico de ganhos e transações. Os gastos e o equilíbrio permaneceriam na página principal para minimizar o escopo do projeto e aumentar o que já estava disponível para os usuários. A estrutura do menu ajudaria a agrupar os conjuntos de recursos robustos planejados para esta versão em áreas separadas para ajudar na busca de caminhos e reduzir a carga cognitiva.

Para as duas novas páginas (histórico de ganhos e transações), analisamos dois padrões de design convencionais:

  1. Uma linha do tempo para o histórico de transações: esse padrão nos permitirá apresentar informações em ordem cronológica, que se encaixa no objetivo desta página - mostrar as transações Kin recebidas e enviadas ao longo do tempo. Isso é comum para aplicativos bancários.
  2. Cartões de conteúdo para ganhar: esse padrão é comumente usado em produtos de consumo e comércio eletrônico de conteúdo, que se encaixa no espaço em que o Kin operará.

Também exploramos usando layouts de lista e cartões grandes:

Ao projetar esta versão, expandimos o kit de interface do usuário para a marca Kin e experimentamos novos estilos e padrões de interface do usuário.

A segunda iteração

Passando para a segunda iteração deste projeto (IPLv2), começamos com um conjunto menor de recursos. Procuramos uma solução de design simples que exporia os usuários do Kik a uma nova experiência de uma maneira clara e seria fácil de implementar.

Esta versão da carteira será simples, com apenas uma página e layout, com um cabeçalho e guias para diferenciar entre dois tipos de informações:

  1. Balanço de parentes e informações do usuário.
  2. As ofertas econômicas nos dois lados - oportunidades de ganhar e gastar.

O uso dessa estrutura nos permitiu criar dois níveis de hierarquia.

O cabeçalho azul chamaria a atenção dos usuários para o saldo de Kin, com o nome e a foto como garantia de que essa é a conta deles.

A área das guias é rolável com um cabeçalho adesivo, para mudar o foco da balança para a economia. Assumimos que, uma vez que os usuários desviam sua atenção de seu saldo para essas guias, eles não precisam mais das informações de saldo. No entanto, a alternância entre as duas guias deve estar sempre disponível, pois atribuímos a ambas as guias o mesmo nível de hierarquia.

UI design

Aparência

O estilo de interface do usuário da carteira é baseado no guia de estilo da marca Kin. Nosso objetivo é criar uma aparência que seja confiável e amigável, usando tons de azul, ícones de linha e ilustrações mínimas de linha, referenciando ciência e tecnologia.

Do guia de estilo Kin: ilustração de herói e spot, usos de logotipo, cores e tipografiaIU da carteira

Animações e transições de tela

Usamos dois tipos de animação

  1. Transições que fornecerão feedback sobre as ações do usuário e criarão expectativas sobre o que está por vir.
  2. Tornar os erros e falhas do sistema amigáveis, de acordo com nosso objetivo de criar uma sensação confiável e amigável.

Transições

Depois que os usuários concordam com os termos, leva alguns segundos para configurar a carteira. Isso significa que tivemos que criar algum tipo de estado de carregamento. Decidimos usar essa oportunidade para enfatizar as idéias por trás dos Kin - descentralização e comunidade.

Usando elementos do logotipo (esferas feitas de formas redondas), criamos uma metáfora para indivíduos que se movem em seu próprio ritmo e direção, mas ainda se juntam.

Micro interações

Tentamos reduzir ao máximo as micro interações e usá-las apenas como feedback para as ações do usuário.

Casos de borda

Casos de borda e estados de erro não são uma ótima experiência, mas também precisamos explicá-los no design. Tentamos encontrar uma maneira de tornar um estado de erro mais amigável.

Qual é o próximo

Obtendo feedback do usuário!

Enquanto trabalhamos nesse projeto, tivemos muitas perguntas sobre usabilidade, o layout certo para nossos usuários e respostas gerais a uma nova aparência dentro do Kik.
Atualmente, estamos no processo de configurar oficinas de usuários, fazer testes de usabilidade e obter dados para esta versão assim que ela for lançada.