Para a v1 do novo portal, a proposta de design para o novo site foi criada pela Sioux, pautada pela arquitetura de informação ideada pelo time de UX da FTD em parceria com a área de Marketing.
Visão geral do board de planejamento da nova arquitetura do portal, as seções categorizadas entre institucionais, catálogo, promocionais e ferramenta.
Auxiliamos no processo com validações de conteúdo, como com a checagem da comunicação textual e, principalmente, visual, onde:
• era importante que as imagens e iconografia refletissem a identidade da marca como um todo;
• a fotografia escolhida transmitisse diversidade e os sentimentos corretos;
• o gestual das pessoas nas imagens guiasse o olhar do usuário para o conteúdo (evitando escolha de imagens em que as pessoas das imagens estivessem olhando para fora do site, por exemplo);
• verificamos a consistência das tipografias, estilos e componentes.
Também avaliamos as propostas para cada tela e funcionalidade, sempre considerando a boa usabilidade como parte essencial e reforçando a necessidade de pensar a versão mobile desde o primeiro momento, posto que é importante para um bom design responsivo e esta era uma dor do portal antigo.
Para a v2, implementamos uma página de Soluções para abarcar todos os 4 tipos de serviços que a FTD oferece em um catálogo extenso de produtos.
Essa nova página trouxe a necessidade de pensar sua arquitetura, assim como seu funcionamento no Menu.
Menu na versão desktop
Para desktop, optamos por ter um link com abertura para um supermenu com as soluções listadas dentro de cada classificação, trazendo as cores da mandala para auxiliar a identificação e reafirmar seus tons na memória da pessoa usuária que ainda não for familiarizada.
Apesar do uso das cores e a quantidade de itens, o objetivo era ter um design limpo e mais minimalista, que foi levado para a Sioux desenvolver e já está acessável na versão de produção.
Todos os links levam para a mesma página, porém com a âncora da seção respectiva. Foi preferível essa listagem para facilitar o acesso à informação de quem busca apenas uma solução específica ao invés de conhecer todas de uma vez.
Menu mobile: fechado e aberto.
Para o mobile, foi mantido o layout já existente, apenas adicionando o item Soluções com seus subitens respectivos também respeitando as cores da mandala para fixação e identificação.
Já sobre a nova página, especificamente, a arquitetura foi definida de acordo com as decisões estratégicas do marketing para a ordenação das áreas.
Uma galeria interativa por abas ou menu lateral poderia ter sido uma boa opção para listar as soluções, porém nunca seria possível visualizar todas as soluções de uma vez em algumas das categorias, ou mesmo visualizá-las sem perder a visibilidade dos controles de navegação.
Por isso, optamos por mantê-las listadas uma a uma, apenas limitando as listagens com até 3 itens por subcategoria, e adicionando um botão de "Conheça + soluções" para a pessoa usuária ativamente clicar para visualizar as demais, a fim de evitar que a tela ficasse muito longa e cansativa.
As cores da mandala foram aplicadas ao fundo de cada seção para mais um reforço visual de memória e identificação.
Você pode acessar a página desenvolvida aqui:
Trabalho realizado em conjunto com os demais membros da equipe de UX da FTD Educação: Thiago Duarte, Kamila Uchino e Tais Turci; assim como em uma parceria incrível com a Sioux para o desenvolvimento.