Produto mais eficiente em menos tempo com o UX/UI Design

Por Cláudia Santos, UX/UI Designer BI4ALL

Num mundo altamente tecnológico, onde a digitalização de produtos e serviços se massificou e os utilizadores se tornaram bastante exigentes, é imperativo capturar a sua atenção com ofertas extremamente eficientes no alcance dos seus objetivos e que, em última instância, estimulem a sua confiança.

Uma interface corretamente estruturada oferece aos utilizadores uma experiência de utilização fluída, garantida pela conjugação de informações valiosas para a sua experiência, apresentadas de forma sequencial. Antes de começar qualquer desenvolvimento, o UX/UI Design procura compreender a sua audiência, as respetivas necessidades, expectativas e dificuldades dando resposta a estas e outras questões importantes. Estas, por conseguinte, ajudam a estruturar as escolhas e as ações de cada persona, determinantes para arquitetar o serviço ideal que proporcione uma solução de navegação intuitiva e simples alimentada por conteúdos relevantes.

Quando este processo é elaborado corretamente o produto final traduz-se numa solução altamente funcional em que o UX/UI Design garante a maximização da eficiência, gerando:

  • Aumento na satisfação dos utilizadores finais;
  • Aumento da taxa de aceitação de produto ou serviço pelos utilizadores;
  • Fluidez de comunicação e perceção partilhada de conhecimento pelas equipas de desenvolvimento;
  • Diminuição do ciclo de feedback entre stakeholders durante o desenvolvimento;
  • Drástica redução do Custo de Mudança;
  • Diminuição da churn-rate e do custos de aquisição por cliente;
  • Aumento das receitas do negócio.

Na verdade, um utilizador satisfeito cria uma relação positiva tanto com a marca como com a empresa, impulsionando o crescimento, a credibilidade e a utilização da solução. É assim extremamente importante reforçar que, ao apostar no UX/UI Design de uma solução, existe uma probabilidade mais baixa de os utilizadores encontrarem obstáculos na sua utilização, não sendo necessário realizar constantes alterações e upgrades, ajudado a reduzir custos de tempo e investimento no desenvolvimento.

A iteratividade como um dos processos base do UX/UI Design é uma ação importante no percurso de criação de um produto. Após serem identificadas as necessidades e negócio, tecnológicas e dos utilizadores, é possível às equipas de UX/UI Design e desenvolvimento arquitetar a informação até alcançar um produto que responda e cubra todos os requisitos previamente definidos. É, nesta altura, que entra a importância do processo de iteração, numa como resposta reativa numa ótica de melhoria contínua.  Após concluído o protótipo e a fase de testagem, as equipas avaliam a necessidade de iterações e alinhamentos que possam ser necessários executar para otimizar o produto final, possibilitando assim o lançamento para o mercado de uma versão de alta performance.

Como caso de estudo neste contexto, apresentamos o Doc Recognizer, a plataforma de automatização da gestão documental totalmente desenvolvida de acordo com os princípios da experiência do utilizador. Sustentada por algoritmos de inteligência artificial, esta permite a extração de dados de documentos de forma massiva, o processamento de forma automático e a integração em outras soluções existentes.

Durante o processo inicial de desenho, a equipa de UX/UI Design focou-se em arquitetar uma plataforma que permitisse aos seus utilizadores extrair e organizar informação de documentos de forma massiva, fácil e rápida. Com a integração da inteligência artificial tornou-se possível criar um produto que automaticamente extrai informação de documentos e a digitaliza de forma estruturada. Isto permite aos seus utilizadores reduzir tanto o tempo de processamento de informação, como também os erros causados pelo trabalho manual e a descentralização de documentos.

Foi durante o processo de iteração e de melhoria contínua que se tornou possível obter novas respostas às necessidades levantadas. Com um roadmap de otimização centrado na redução do número de interações para o alcance dos objetivos, surgiram também questões sobre a possibilidade de integrar novas funcionalidades e de diminuir a complexidade técnica das que já existiam. Uma vez que o projeto tinha sido estruturado de forma a conseguir integrar estas novas soluções, a equipa do Doc Recognizer decidiu fazer um redesenho da plataforma mantendo a capacidade utilização da base de código. Este redesenho não contempla apenas a adição das novas funcionalidades, na medida em que permitiu fazer uma revisão integral à sua usabilidade e ao customer journey map definido para representar o percurso de interação dos utilizadores. Assim, ao mesmo tempo que foram adicionadas novas funcionalidades procurou-se também simplificar a experiência de utilização (fig.1):

  • Redução da complexidade de ações;
  • Menor número de cliques para alcance de um mesmo objetivo;
  • Diminuição do número de ecrãs;
  • Aumento da assertividade de comunicação pela clarificação do caminho correto para fechar cada ação.
Fig. 1 – A simplificação da experiência de utilização através da remoção de modais e da apresentação de todas as ações necessárias à conclusão de um objetivo no mesmo contexto.
Fig. 1 – A simplificação da experiência de utilização através da remoção de modais e da apresentação de todas as ações necessárias à conclusão de um objetivo no mesmo contexto.

O redesenho do Doc Recognizer foi sustentado pelo Atomic Design, metodologia utilizada para o desenvolvimento da plataforma. Esta metodologia foca-se na eliminação de inconsistências na usabilidade e no design, recorrendo a componentes que são reutilizáveis e a um conjunto de regras transversais a todas as interfaces que constituem um produto. Quase como um manual de normas, esta metodologia permite manter a coerência e a conservar a identidade da marca ao longo do desenvolvimento de todo o projeto, ajudando também na redução do tempo e dos custos de design e desenvolvimento.

Esta abordagem possibilita agir rapidamente sobre alterações e correções que necessitem de ser feitas no produto.

  • Rápida criação de páginas com a mesma organização estrutural.
UX-UI-Design-2-1024×290

Fig. 2 –  A reutilização do layout em inúmeras páginas com um único desenvolvimento.

  • Reutilização de componentes para a criação de novas features.
UX-UI-Design-3-1024×558

Fig. 3 – O desenvolvimento de componentes com capacidade de reutilização.

O Atomic Design permite ainda uma melhor comunicação e partilha de conhecimento entre todos os envolvidos no projeto desde as equipas aos stakeholders. Esta abordagem foi trabalhada maioritariamente pela equipa de UX/UI Design que teve como responsabilidade difundir o processo de design e de desenvolvimento entre as várias equipas (Front-End, Back-End e Data Science) e stakeholders externos (os clientes e diversos parceiros de serviços).

Em simultâneo com esta metodologia, a nossa equipa do Doc Recognizer, decidiu adotar um processo próprio construído pela área de UX/UI Design da BI4ALL que assenta em três touchpoints. Os BI4ALL Touchpoints (fig.4) representam três momentos de aprovação partilhada entre os diversos elementos das equipas durante na criação de novas features. A grande vantagem competitiva potenciada pelos BI4ALL Touchpoints é dada por uma melhor comunicação e uma redução nos erros durante a criação do produto (que geralmente levam a correções depois do desenvolvimento e que atrasam o lançamento):

  • Touchpoint 1 – A aprovação partilhada ocorre após o levantamento de requisitos e antes do início do design, com a aprovação das novas funcionalidades.
  • Touchpoint 2 – A aprovação partilhada dos layouts para garantia da capacidade de desenvolvimentos dos elementos desenhados;
  • Touchpoint 3 – A aprovação partilhada do desenvolvimento, com vista à garantia da coerência entre o resultado esperado (através do design previamente aprovado pelo cliente) e o resultado atingido (com o desenvolvimento do produto).

Num processo ágil em que todos os elementos das equipas respondem sobre a sua área de especialização mas com a capacidade de entendimento sobre o trabalho dos colegas, as funcionalidades passam rapidamente a produção após os BI4ALL Touchpoints, sem grandes necessidades de adaptação.

UX-UI-Design-4-1024×485

Fig.4 – Os Touchpoints enquanto metodologia BI4ALL de redução do Custo da Mudança.

Em suma, o processo de rebranding do Doc Recognizer, conferiu ao produto uma resposta mais eficiente no alcance dos objetivos dos utilizadores e também uma maior performance tecnológica. Permitiu assim dar novas respostas aos desafios identificados, com o foco na melhoria da experiência de utilização, na redução do número de ações e na simplificação das que foram estrategicamente mantidas. Como resultado deste processo, identificamos a criação de journeys que permitem aos utilizadores executarem tarefas do início ao fim de forma mais intuitiva e mais rápida. Em paralelo, a criação uma marca mais forte e consistente, enquanto contributo para o crescimento da confiança do utilizador. Este processo foi possível de executar em virtude da aplicação dos métodos anteriormente referidos (Agile, Atomic Design  e BI4ALL Touchpoints) que, de forma ágil, permitiam dar resposta e encontrar soluções eficazes e de baixo custo.

Últimos artigos