A FifthDelta é uma organização global de gerenciamento de recursos, com sede no Reino Unido. É uma entidade fechada que apenas permite o ingresso de clientes pré-existentes ou de novos por recomendação. A companhia oferece aos clientes a capacidade de administrar seus investimentos, ativos e todas as questões financeiras. Os clientes alcançam isso por meio de MiniApps exclusivos da empresa, disponibilizados na plataforma.
Cliente
FifthDelta
Ano
2024
Serviço provido
Plataforma SaaS
Para compreender a finalidade do meu trabalho, fiz entrevistas com os encarregados do departamento de desenvolvimento, pois não existia uma divisão de design na companhia.
Descobri que:
✦ A Experiência e Interface do Usuário como um todo precisariam ser modificados por exigência dos encarregados. Pediram também que a Home possuísse Widgets com certas funcionalidades.
✦ Os usuários encontravam obstáculos no gerenciamento do fluxo de trabalho, pois muitas vezes ele precisava abrir novos MiniApps sem precisar fechar os anteriores.
✦ Os usuários enfrentavam desafios ao buscar MiniApps específicos na plataforma.
Como a plataforma é um modelo SaaS, todo o sistema é online via navegador. As linguagens de programação utilizadas foram React.js e Javascript e possuem certas limitações e peculiaridades que devemos destacar:
✦ O React incentiva componentes reutilizáveis, mas isso pode limitar variações visuais personalizadas sem quebrar a consistência.
✦ Componentes mal otimizados podem levar a lentidão.
✦ Animações pesadas em CSS/JS podem travar em navegadores antigos.
Com os problemas em mãos, rascunhei wireframes de baixa fidelidade para entender a interface no qual seria criada.
Implementei Design Tokens consistentes com marca a fim de facilitar e agilizar o serviço dos desenvolvedores. As linguagens usadas pedem o uso de Componentes e Variáveis que o Figma nos disponibiliza para uso.
Todo o processo foi feito em união com os desenvolvedores garantindo a qualidade do produto final.
/ Soluções
Problema 01 / Home
Nova Home Page
Como solicitação do cliente, fiz Widgets que mostram algumas informações necessárias ao entrar na plataforma. Esses componentes são totalmente móveis, possibilitando o "Soltar e Arrastar" ou o "Redimensionar".
Um sistema de ícones foi incluído para manter a consistência visual.
Problema 02 / Fluxo de Trabalho
Workspaces
Implementei um sistema de Workspaces no qual seria possível alternar entre os mesmos sem precisar fechar MiniApps. Essa feature permite que os usuários possam gerenciar de forma aprimorada seus MiniApps a fim de obter um fluxo de trabalho agradável. O usuário consegue também redimensionar e reposicionar os MiniApps abertos de acordo com sua preferência.
Problema 03 / Busca de MiniApps
Pesquisa Aprimorada
Inseri um menu lateral com barra de pesquisa e MiniApps organizados por Categorias em forma de cascata. Para abrí-los, o usuário pode arrastar para o Workspace ou clicar no MiniApp e selecionar "Abrir".
