Durante a construção de wireframes, foram propostas diversas hipóteses para os problemas levantados nas etapas anteriores. Os wireframes, desenvolvidos no Figma, apresentam elementos de interface novos ou remodelados, em relação às telas atuais da central de ajuda, reorganizam o conteúdo existente e traduz visualmente algumas telas novas propostas anteriormente, como a categoria de tópicos para resolução de problemas.
Cabeçalho e rodapé
No cabeçalho, componente presente em todas as páginas, foram propostas:
- Adequação tipográfica ao nome “Central de ajuda”, exibido junto à marca da Estante Virtual, com a tipografia utilizada predominantemente pelo portal.
- Reposicionamento da barra de busca em páginas internas à direita, eliminando o botão “Voltar para o site” e simplificando o cabeçalho.
- O rodapé recebeu uma cor de fundo escura para diferenciar-se do restante do conteúdo, facilitando o rastreio de conteúdo relevante pelo usuário.
- No rodapé, o botão de “Ajuda” foi convertido para um botão que ativa o sistema de chat ou chatbot da central de ajuda, dando mais uma opção de contato com a empresa.
Página inicial
Na página inicial, a primeira seção, chamada above the fold, foi modificada para ter maior concordância visual com as recomendações temáticas na página inicial da Estante Virtual.
- Ícones e descrições breves foram adicionados aos botões de ações rápidas, tornando-os mais explicativos e dando mais segurança ao usuário. O botão “Trocar ou cancelar meu pedido” foi substituído por um botão que direciona o usuário para tópicos de resolução de problemas gerais.
- A barra de busca foi modificada para ter melhor diferenciação em relação aos botões, além de contar com um botão “Buscar” à direita para que o usuário tenha uma indicação evidente de como proceder para buscar por um termo específico.
- A seção de categorias foi simplificada para que cada categoria ocupe menos espaço, mostrando todas sem a necessidade de rolar a tela em desktops e tablets.
- A página inicial ganhou uma seção final convidando os usuários para acompanhar a Estante Virtual nas redes sociais, dando opções alternativas para o usuário entrar em contato com a empresa.
Páginas de artigos
As páginas de artigos de ajuda foram remodeladas para permitir ao usuário navegar mais facilmente entre tópicos diferentes e localizar em pouco tempo a informação que deseja.
- Ao lado do texto, foi adicionado um menu que direciona o usuário para as categorias principais, replicando a hierarquia de informações mostrada na página inicial.
- No final de cada texto, o link que direciona para o formulário de contato foi transformado num botão semelhante aos botões de ações rápidas da página inicial, mantendo consistência entre as páginas e tornando a opção de contato direto mais fácil de acessar, caso o conteúdo do tópico não resolva o problema.
Listagens de artigos
A listagem de tópicos de ajuda também foi modificada, distribuindo os tópicos de ajuda em páginas diferentes, ao invés de concentra-las em apenas duas páginas (dúvidas de compradores e de vendedores).
- Os tópicos são listados integralmente na listagem de cada categoria, sem necessidade de botões adicionais para mostrar conteúdo oculto.