Horizonte Design System

Building one design system for a federation and its institutions — across four companies, more than ten products, and four platforms.

Products built on Horizonte, overlapping: the Sesc-RS, Senac-RS and Fecomércio-RS websites, the e-commerce store, the customer area, the app, the intranet and three hotel totem screens.

Team: Lead Product Designer - Bruno Berduque; Product Designer - Tamyres Rodrigues; Design and DevOps partner - Stefanini
Scope: Design system and selected digital products; Design Systems, Web Products and Apps, Intranet systems and Totems
Tools: Figma for prototyping, user interviews; FigJam for collaborative works; Notion for shared documentation; Illustrator for vector assets; Photoshop for image assets

Summary

In 2020 I was tasked with the challenge and responsibility of refining the digital products and experiences of Sesc-RS.

I developed the first UX practices within the company, working alongside a development team and stakeholders from 8 different service areas. Over the next 6 years we matured our projects into a cohesive Design System called Horizonte.

177 components

4 companies

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

10+ products

Sesc-RS website
Fecomércio-RS website
Senac-RS website
Sesc-RS e-commerce
Sesc-RS app
Hotels website
Intranet
Internal building totem
Hotels totem
Representa Fecomércio
+ internal system pages

4 platform types

Web
App
Kiosk
Intranet

Stakeholder-based research for Sesc-RS digital products

Website

Each service axis serves its own target audience, even though they all fall under the same institutional umbrella. Optimizing each service area involved extensive listening sessions with stakeholders from each area, learning about distinct rules, systems, and operations, and therefore, distinct user pain points and needs.

service areas: 8
listening sessions: 12
findings: 50+

A board of sticky notes from the listening sessions, sorted into four columns: Incluir, Manter, Alterar and Remover. — Findings from the listening sessions, sorted into what to include, keep, change and remove

Key insights

Autonomy and consistency

Teams wanted each location to publish more on its own, and in the same conversation worried about losing consistency and keeping information current.
Workarounds showed the gaps

Where the site couldn’t hold the content, people worked around it: timetables posted as images, registrations run through Google and Microsoft Forms, event times typed as free text.
One event, three records

The same event was entered separately in the agenda, Loja Sesc-RS and SescNET, so a change in one place — even a deletion — didn’t reach the others.

Project objectives

Together with the leads from each area, we turned the findings into seven objectives. The sections below take on four of them.

01
Publish once, show everywhere

Connect the events agenda, Loja Sesc-RS and SescNET so each event is entered once, with publishing windows and scheduling built in.
02
One structure every area can fill

Rebuild navigation and page hierarchy so each service area can present its programs its own way inside a shared structure, and keep that information current.
03
A store people can find

Put Loja Sesc-RS within reach of every program page, with a clear path from reading about a service to buying it.
04
A credential you can get online

Move credential sign-up online and cut its requirements, starting with the Credencial Atividades for the general public.
05
One account, one customer area

One login across Sesc’s digital products, and one place for a customer’s details, purchases and history.
06
Trust in the tasks that matter

Retire the old ERP screens still built into the site, and make payments and receipts dependable.
07
Decide with data

Measure how people use the site and the store, starting with Hotjar, so later decisions rest on behavior rather than opinion.

Design principles

At its core Horizonte needed to communicate the values of the federation and its entities, 80 years of tradition and millions of clients and stories. In order to retain the institutional values in our design, we defined our guiding stars:

Humanized experience

We focus on nurturing people. Horizonte is human-first, guiding our design. It’s not techy but human, feeling familiar, trustworthy, and welcoming.
Accessibility

We serve millions monthly, offering services in health, sports, theater, music, education, social services, and more. The design system had to be accessible to all.
Easy to use

Horizonte simplified core user flows—creating credentials, purchasing services remotely, and checking purchase history—making previously difficult digital products intuitive.
Flexibility

Horizonte spans web apps, internal systems, and digital totems across 60+ locations. With diverse user profiles and preferences, we built a flexible, adaptable system.

Variables applied across the entire system

Button component

Identity for each service area

We utilized the supporting colors of our brand manual to color-code the main branches of products and services, all while making sure each branch carried its own personality without straying too far from home.

Esporte

#A3CB00
Academias

#F29100
Cultura

#F91567
Turismo

#4F7AFB
Lazer

#F6BE00
Educação

#4EB0FA
Assistência

#FC4629
Saúde

#009BA9

Text color adapts for contrast and legibility

Objective 02: One structure every area can fill

MSPN (Main Services Preview Navigator)

The problem

Sesc operates in 8 different sectors, each with its own management strategies and distinct operations, servicing over sixty locations across the state.

The diversity of approaches and services meant stakeholders competing with other administrations for premium space on the site.

The solution

One flexible grid with configurable slots. Each area chooses what to show and in what order. Same structure, infinite variation, all utilizing components from the very same design system.

Objective 03: A store people can find

An e-commerce solution for a wide range of services

Objective 04: A credential you can get online

Bringing an in-person sign-up process to the digital space

The problem

A Sesc credential can extend to the holder’s family, and who counts as a dependent depends on age, relationship and documents. In person, staff worked through those rules case by case. Online, the flow had to do that work itself, and ask adults whether they agreed to be added at all.

The solution

The proposed flow splits by age. For a minor, the holder fills in their details and both credentials go to review together. An adult gets an invitation and has 30 days to accept it and create their own login. If they decline, the credential is refused; if they don’t answer, it’s disabled until the holder sends a new invite from Meu Sesc.

Two FigJam boards from the credential research: a flow of dependent categories and their characteristics, over a table of requirements per credential type.

Insights

Research notes and a quick user-flow scenario for the credential sign-up process were really helpful in communicating the complicated rules for each scenario in the context of a big multi-disciplinary group.

We used FigJam boards as an efficient shared space for registering enquiries and insights as they came during meetings and during the development of the new digital credential sign-up process.

Under 18

The holder adds the dependent’s details and documents
Both credentials go to review together

18 or over

An invite goes out by email, WhatsApp or link
The dependent replies
Accepts within 30 days

Creates their own login, adds their details and documents, and goes to review.

Declines

The credential is refused and never reaches review.

No reply in 30 days

The credential is disabled until the holder sends a new invite from Meu Sesc.

Proposed, not shipped. Simplified from the credential ops flow

The Credential App

Long before I became a designer, I ran the entire physical credential operation myself, sourcing materials, printing thousands of cards a day across two aging printers, packaging and routing them to fifty locations statewide, tracking errors, managing inventory, and working directly with clients and internal teams to fix what went wrong. That hands-on grind gave me a real understanding of the process this digital system needed to replace, and what it had to get right.

Note: This app version was fully designed but not yet shipped by the company — the live version does not reflect this level of polish.

Objective 05: One account, one customer area

Converging user flows across different products

The main conversion flows converge toward the client area, which becomes a “hub” for the Sesc-RS customer. This design decision addresses several pain points identified during the product research phases, carried out together with the entire management of the service areas and front-line operations across more than 60 Sesc-RS locations.