UI Case: Novo site do Sesc - Santa Catarina
Como ocorreu o desenvolvimento da nova experiência e interface do usuário do site Sesc SC, case aprovado e implementado!
Objetivo
O novo site Sesc tinha como objetivo modernizar a plataforma visualmente, e promover uma melhor organização das informações, priorizando o que era mais utilizado pelos usuários na categorização do conteúdo e organização do menu.
Processo
Para entender o que era mais utilizado pelos usuários, com qual objetivo o usuário entrava na plataforma e ter feedback do que já funcionava, realizamos uma pesquisa quantitativa através de formulário do google. A partir dessas respostas, decidimos a priorização do que mostrar no menu e reduzir a quantidade de opções que existia no site antigo. O novo design do site já está no ar e não possuo prints de como era anteriormente, infelizmente. Você pode acessar o novo site aqui https://www.sesc-sc.com.br/portal/.
Benchmark ocorreu como pesquisa de desk research, buscando principalmente referências com outros sites de sesc pelo Brasil. Isso, obviamente, para manter uma consistência de design não só dentro do site, mas entre os sites do Sesc. O cliente também nos enviava sites que os agradava como inspiração.
A partir disso, fomos para a alta fidelidade testar possiblidades, e com o feedback do cliente íamos ajustando as ideias para aprovação, tanto mobile como desktop. Ao final, o conteúdo do projeto contou com mais de 40 páginas (frames).
Para o handoff foi exportado todas as imagens utilizadas e ícones em svg e o arquivo em figma possuia todos os grids, espaçamentos de padding e margin necessário.
Guia de Estilo
Guia de estilo foi realizado em duas etapas, a primeira é a configuração da tipografia e cores, e depois, a adição de elementos conforme a adição ao design.
Tipografia
Tipografia foi baseada em proporção perfect fourth começando com parágrafo em 16px.
Cores
As cores utilizadas partiram do branding da marca, azul e amarelo. Clientes não gostam de variações das cores da marca, portanto, utilizamos apenas cores principais e uma escala de cinza.
Ícones
Os ícones utilizados estão no formato SVG para melhor uso no handoff. Os ícones mantem uma padronização no básico, mantendo a constância do design.
Botões
Botões foram configurados já com o hover para prototipação dentro do componente utilizando as variantes.
Para ver todo o guia de estilo, clique aqui.
Protótipo
O protótipo foi muito priorizado no projeto. Além das interações entre frames, muita micro interação foi feita no figma por mim.
Veja prints finais da interações entre frames:
Para acessar o conteúdo, clique aqui.
Funcionamento do protótipo
Veja um vídeo realizando uma navegação no protótipo:
Exemplos de pontos de melhoria
Aqui mostrarei alguns pontos de melhoria.
Documentos necessários
Para realizar cadastro no sesc, vários documentos são necessários. Porém, dependendo da profissão, se está desempregado ou trabalhando, se é autônomo ou não, os requisitos de documentação e valores se alteram.
Anteriormente, tudo era mostrado de uma vez só para o usuário. Ou seja, era uma grande lista com documentação necessária para todos os casos.
Então, caso você fosse um trabalhador autônomo, iria ver o requisitos de todos os outros casos. Isso é ruim para o usuário, pois, aumenta a carga cognitiva com informações que ele não deseja ver.
Dessa forma, implementemos uma forma que o usuário selecionaria de forma passo a passo a sua condição como cliente para mostrar apenas o que ELE necessita.
Passo a passo:
Detalhe importante, é que deixo selecionado todo o caminho percorrido pelo usuário com a opção em destaque amarelo, para que o mesmo lembre o caminho percorrido e o design contemple a Neurística de Nielsen de estatos de visibilidade do sistema.
Serviços entrantes
Com a pesquisa quantitativa e dados do site anterior, classificamos os serviços entrantes. Ou seja, os serviços que trazem mais usuários ao site e novos clientes para o sesc.
Dessa forma, a organização se deu separando os principais dos restantes.
Conclusão
Nesse artigo demonstro de maneira bem objetiva o que foi feito de forma geral sobre o design do novo site sesc sc. Houve muito aprendizado e experiência.
Para acessar o site que foi foi aprovado e implementado pelo cliente, clique aqui.
Espero que goste, qualquer dúvida entre em contato! Obrigado por ler até aqui.
