Horizonte Design System

Construindo um único design system para uma federação e suas instituições — em quatro empresas, mais de dez produtos e quatro plataformas.

Produtos construídos com o Horizonte, sobrepostos: os sites do Sesc-RS, do Senac-RS e da Fecomércio-RS, a loja virtual, a área do cliente, o app, a intranet e três telas do totem dos hotéis.

Equipe: Lead Product Designer - Bruno Berduque; Product Designer - Tamyres Rodrigues; Parceiro de design e DevOps - Stefanini
Escopo: Design system e produtos digitais selecionados; Design systems, produtos web e apps, sistemas de intranet e totens
Ferramentas: Figma para prototipação e entrevistas com usuários; FigJam para trabalho colaborativo; Notion para documentação compartilhada; Illustrator para assets vetoriais; Photoshop para tratamento de imagens

Resumo

Em 2020, recebi o desafio e a responsabilidade de aprimorar os produtos e as experiências digitais do Sesc-RS.

Implantei as primeiras práticas de UX da empresa, trabalhando ao lado de um time de desenvolvimento e de stakeholders de 8 áreas de serviço diferentes. Nos 6 anos seguintes, amadurecemos nossos projetos até chegar a um design system coeso chamado Horizonte.

177 componentes

4 empresas

Sesc-RS
Senac-RS
Fecomércio-RS
IFEP-RS

10+ produtos

Site do Sesc-RS
Site da Fecomércio-RS
Site do Senac-RS
E-commerce do Sesc-RS
App do Sesc-RS
Site dos hotéis
Intranet
Totem interno da sede
Totem dos hotéis
Representa Fecomércio
+ páginas de sistemas internos

4 tipos de plataforma

Web
App
Totem
Intranet

Pesquisa com stakeholders para os produtos digitais do Sesc-RS

Site

Cada eixo de serviço atende seu próprio público, mesmo que todos estejam sob o mesmo guarda-chuva institucional. Otimizar cada área de serviço envolveu muitas sessões de escuta com stakeholders de cada área, aprendendo regras, sistemas e operações distintas e, portanto, dores e necessidades distintas dos usuários.

áreas de serviço: 8
sessões de escuta: 12
achados: 50+

Um quadro de post-its das sessões de escuta, organizado em quatro colunas: Incluir, Manter, Alterar e Remover. — Achados das sessões de escuta, organizados entre o que incluir, manter, alterar e remover

Principais insights

Autonomia e consistência

As equipes queriam que cada unidade publicasse mais por conta própria e, na mesma conversa, se preocupavam em perder a consistência e manter as informações atualizadas.
Os improvisos revelaram as lacunas

Onde o site não comportava o conteúdo, as pessoas davam um jeito: horários publicados como imagens, inscrições feitas pelo Google e pelo Microsoft Forms, horários de eventos digitados como texto livre.
Um evento, três cadastros

O mesmo evento era cadastrado separadamente na agenda, na Loja Sesc-RS e no SescNET, então uma mudança num lugar — até uma exclusão — não chegava aos outros.

Objetivos do projeto

Junto com os líderes de cada área, transformamos os achados em sete objetivos. As seções abaixo tratam de quatro deles.

01
Publicar uma vez, mostrar em todo lugar

Conectar a agenda de eventos, a Loja Sesc-RS e o SescNET para que cada evento seja cadastrado uma única vez, com janelas de publicação e agendamento integrados.
02
Uma estrutura que toda área pode preencher

Reconstruir a navegação e a hierarquia das páginas para que cada área de serviço apresente seus programas do seu jeito dentro de uma estrutura compartilhada, e mantenha essas informações atualizadas.
03
Uma loja que as pessoas encontram

Deixar a Loja Sesc-RS ao alcance de toda página de programa, com um caminho claro entre ler sobre um serviço e comprá-lo.
04
Uma credencial que se faz online

Levar o cadastro da credencial para o online e reduzir seus requisitos, começando pela Credencial Atividades para o público em geral.
05
Uma conta, uma área do cliente

Um único login para os produtos digitais do Sesc e um só lugar para os dados, as compras e o histórico de cada cliente.
06
Confiança nas tarefas que importam

Aposentar as antigas telas do ERP ainda embutidas no site e tornar pagamentos e comprovantes confiáveis.
07
Decidir com dados

Medir como as pessoas usam o site e a loja, começando pelo Hotjar, para que as decisões futuras se baseiem em comportamento, não em opinião.

Princípios de design

Em sua essência, o Horizonte precisava comunicar os valores da federação e de suas entidades: 80 anos de tradição e milhões de clientes e histórias. Para preservar os valores institucionais no nosso design, definimos nossas estrelas-guia:

Experiência humanizada

Nosso foco é cuidar das pessoas. O Horizonte coloca as pessoas em primeiro lugar e guia nosso design. Não é tecnológico, é humano: familiar, confiável e acolhedor.
Acessibilidade

Atendemos milhões de pessoas por mês, com serviços de saúde, esporte, teatro, música, educação, assistência social e mais. O design system precisava ser acessível a todos.
Fácil de usar

O Horizonte simplificou os fluxos principais — criar credenciais, comprar serviços a distância e consultar o histórico de compras —, tornando intuitivos produtos digitais que antes eram difíceis.
Flexibilidade

O Horizonte abrange aplicações web, sistemas internos e totens digitais em mais de 60 unidades. Com perfis e preferências de usuários tão diversos, construímos um sistema flexível e adaptável.

Variáveis aplicadas em todo o sistema

Componente de botão

Identidade para cada área de serviço

Usamos as cores de apoio do nosso manual de marca para codificar por cor os principais ramos de produtos e serviços, garantindo que cada ramo tivesse personalidade própria sem se afastar demais de casa.

Esporte

#A3CB00
Academias

#F29100
Cultura

#F91567
Turismo

#4F7AFB
Lazer

#F6BE00
Educação

#4EB0FA
Assistência

#FC4629
Saúde

#009BA9

A cor do texto se adapta para garantir contraste e legibilidade

Objetivo 02: Uma estrutura que toda área pode preencher

MSPN (Main Services Preview Navigator)

O problema

O Sesc atua em 8 setores diferentes, cada um com suas próprias estratégias de gestão e operações distintas, atendendo mais de sessenta unidades no estado.

A diversidade de abordagens e serviços fazia os stakeholders disputarem com outras gestões o espaço nobre do site.

A solução

Um grid flexível com espaços configuráveis. Cada área escolhe o que mostrar e em que ordem. Mesma estrutura, variações infinitas, todas usando componentes do mesmo design system.

Objetivo 03: Uma loja que as pessoas encontram

Uma solução de e-commerce para uma grande variedade de serviços

Objetivo 04: Uma credencial que se faz online

Levando um cadastro presencial para o digital

O problema

A credencial do Sesc pode se estender à família do titular, e quem conta como dependente depende de idade, parentesco e documentos. No presencial, a equipe aplicava essas regras caso a caso. No online, o próprio fluxo precisava fazer esse trabalho — e perguntar aos adultos se eles aceitavam ser incluídos.

A solução

O fluxo proposto se divide por idade. Para um menor, o titular preenche os dados dele e as duas credenciais vão juntas para análise. Um adulto recebe um convite e tem 30 dias para aceitá-lo e criar o próprio login. Se recusar, a credencial é negada; se não responder, ela fica desativada até o titular enviar um novo convite pelo Meu Sesc.

Dois quadros do FigJam da pesquisa sobre a credencial: um fluxo das categorias de dependentes e suas características, sobre uma tabela de requisitos por tipo de credencial.

Insights

Notas de pesquisa e um cenário rápido de fluxo do usuário para o cadastro da credencial ajudaram muito a comunicar as regras complicadas de cada cenário num grupo grande e multidisciplinar.

Usamos quadros do FigJam como um espaço compartilhado e eficiente para registrar dúvidas e insights à medida que surgiam nas reuniões e no desenvolvimento do novo cadastro digital da credencial.

Menor de 18

O titular inclui os dados e os documentos do dependente
As duas credenciais vão juntas para análise

18 ou mais

Um convite é enviado por e-mail, WhatsApp ou link
O dependente responde
Aceita em até 30 dias

Cria o próprio login, inclui seus dados e documentos e vai para análise.

Recusa

A credencial é negada e nem chega à análise.

Sem resposta em 30 dias

A credencial fica desativada até o titular enviar um novo convite pelo Meu Sesc.

Proposto, não lançado. Simplificado a partir do fluxo operacional da credencial

O app da credencial

Muito antes de virar designer, eu cuidava sozinho de toda a operação da credencial física: comprava os materiais, imprimia milhares de cartões por dia em duas impressoras já gastas, embalava e despachava para cinquenta unidades no estado, rastreava erros, controlava o estoque e trabalhava direto com clientes e equipes internas para corrigir o que dava errado. Essa rotina braçal me deu uma compreensão real do processo que esse sistema digital precisava substituir — e do que ele tinha que acertar.

Nota: esta versão do app foi totalmente desenhada, mas ainda não foi lançada pela empresa — a versão no ar não reflete este nível de acabamento.

Objetivo 05: Uma conta, uma área do cliente

Fluxos de usuário convergentes entre produtos diferentes

Os principais fluxos de conversão convergem para a área do cliente, que vira um “hub” para o cliente do Sesc-RS. Essa decisão de design resolve várias dores identificadas nas fases de pesquisa do produto, feitas junto com toda a gestão das áreas de serviço e com a linha de frente de mais de 60 unidades do Sesc-RS.