SEBRAE Fashion Observatory

The challenge was not to design the best interface. It was to design the best interface that SEBRAE’s CMS could publish, for readers I assumed to have little data familiarity.

SEBRAE’s standard CMS, from Datawheel, publishes only a single page, with no modals, within an established visual guideline.

See the live page
Role
Product Designer (UX, UI and PO), TD Business. I designed the experience and the page structure; the CMS implementation was done by the team’s developer.
Outcome
Approved by the SEBRAE board at a presentation in São Paulo, October 13, 2026, according to oral feedback from the CEO and the director of TD Business. Since launch, about 4,800 sessions, 28% of them using filters, places or questions (SEBRAE report). Limit: no baseline.
Timeline
Project ran March to October 2026; I joined in late July; final delivery on October 7, 2026
Team
1 project manager, 1 designer, 2 economists, 1 data analyst, 1 full-stack developer

Highlights

Everything had to fit inside the CMS

The observatory runs on the Datawheel CMS, SEBRAE’s standard. A superior interface that the CMS cannot publish serves no one, so fidelity to the CMS became my quality criterion, not a limitation to work around.

The cost: what it cannot publish, like the modals in my prototypes, left the design. The Technical POC sorted 28 elements: what the CMS could do on its own and what needed new code.

A page that starts with questions

SEBRAE asked for indicators for every state and municipality in the country, and nothing was left out. I started from a premise of mine, not a finding: with SEBRAE’s reach across the whole country, many people arrive without the habit of reading data.

The team considered opening with a dashboard of indicators. I opened with context and questions: the chain “Do fio à vitrine” (from thread to storefront), the classification “Três tecidos, uma moda” (three fabrics, one fashion) and “Por onde começar?” (where to start?), with eight questions that lead to the right part of the page. Criterion: people with little data practice meet a familiar question before an indicator. Cost: the indicator comes one step after the question. The structure was my decision, and the team approved it on the first pass.

A moda vai muito
além da roupa.

É um setor que une indústria, comércio e serviços para levar cada peça da confecção até o consumidor final, na loja ou no e-commerce. No caminho, movimenta criatividade, tecnologia e muitos empregos. E muda de lugar para lugar. Cada estado e cada município tem o seu perfil de empresas, de emprego e de comércio exterior, que depende da vocação econômica da região e do tamanho do mercado local.

O Observatório da Moda junta num só lugar dados públicos que hoje estão espalhados por várias bases oficiais. Aqui eles viram números, mapas e gráficos de leitura rápida, pensados para pesquisadores, empreendedores e gestores públicos.

OBSERVATÓRIO DA MODA · SEBRAE

Do fio à vitrine

  1. 1 · Fios e tecidosFiação, tecelagem, malharia, estamparia e acabamento de fios e tecidos.
  2. 2 · ConfecçãoConfecção e facção de roupas, peças sob medida, calçados, bolsas e bijuterias.
  3. 3 · VendaVarejo de vestuário, calçados e joias, armarinhos, lojas de tecidos, atacado e representantes.
  4. 4 · Uso e cuidadoLavanderias, aluguel de roupas e acessórios, conserto de calçados, bolsas, joias e relógios.
  5. 5 · PegadaO impacto ambiental e social de toda a cadeia, na seção Pegada da Moda.
  • Indústria da moda
  • Comércio de moda
  • Serviços da moda

Três tecidos, uma moda

Como o Observatório organiza as atividades do setor (classificação SEBRAE, por CNAE)

  • 40 atividades
    Indústria da modaQuem transforma fio em peça: confecção e facção de roupas, malharias, estamparias, calçados de couro e bijuterias.
  • 17 atividades
    Comércio de modaQuem leva a peça até você: lojas de roupas, calçados e joias, armarinhos, lojas de tecidos, atacado e representantes.
  • 7 atividades
    Serviços da modaQuem cuida do que já existe: lavanderias, aluguel de roupas e acessórios, conserto de calçados, bolsas, joias e relógios.

Por onde começar?

O Brasil e os conteúdos do Observatório

Dados do seu estado ou município

The Overview block of the real page, reproduced in Portuguese. Only 9 links respond. The questions about a state and about the labor market scroll to the Filters frame, further down. The Studies question scrolls to the Studies section. The ones for Sector, Exports, Services and Events open the matching section under Go deeper. The Pegada da Moda question and link open the real page.

See the real page

The whole country in one map and four numbers

The map shows how many active fashion companies each state has, in five shades of blue. Hovering over or tapping a state shows the number, its share of the country and its rank among the 27 states. Next to it, four numbers sum up the latest full year: exports, imports, balance and the share of small businesses among companies opened.

The map does not try to answer everything. Its text sends anyone who wants state or municipality detail to the data section, and the top menu leads to each part of the single page.

Moda no Brasil

Setor econômico

Dados de empresas, emprego e comércio exterior da moda brasileira, do país inteiro a cada município. Também há estudos sobre sustentabilidade, tendências e os desafios do setor.

Brasil

Quanto mais escuro o azul, mais empresas de moda ativas aquele estado tem. Passe o mouse ou toque em um estado para ver o número.

Para ver os dados completos de moda de uma UF ou município (empresas, emprego, exportações, atendimentos e produtividade), vá até a seção Dados.

  • até 20 mil
  • 20 a 50 mil
  • 50 a 100 mil
  • 100 a 200 mil
  • 200 mil+

EXPORTAÇÕES DA MODA

US$ 8.216,4 mi

Brasil · 2025

IMPORTAÇÕES DA MODA

US$ 8.906,6 mi

Brasil · 2025

SALDO COMERCIAL DA MODA

− US$ 690,1 mi

Brasil · 2025 · exportações menos importações

PEQUENOS NEGÓCIOS NAS ABERTURAS

97%

2025 · MEI ou Simples Nacional entre as empresas de moda abertas

Dados fornecidos por Receita Federal e IBGE.

The top, the map and the highlights, reproduced in Portuguese. The menu and the Dados submenu open the real page at the chosen section; the map responds to mouse, touch and keyboard. Live data from the public API.

See the real page

Filters everywhere to keep the page short

Filters instead of screens and modals

Situation
The observatory covers every state and municipality, with many subsegments and CNAE codes. Showing everything would make the page grow endlessly, and the CMS offers no extra screens or modals. In the prototypes, the state detail opened in a modal.
Decision
I put filters on everything: theme and question, state, municipality, subsegment and CNAE. Each control swaps the content in place, and a state card summarizes the slice. Criterion: a short page that the CMS can publish.
Trade-off
Cost: more controls to discover. Consequence: less scrolling, and the state detail became an in-place card instead of a modal.

Dados da moda segmentados

Escolha uma UF para ver os dados de moda do estado. Para aprofundar o recorte, filtre também por município, por subsegmento (indústria, comércio ou serviços da moda) ou por atividade econômica (CNAE subclasse).

        Unidade da Federação · Região Sudeste

        São Paulo

        • 1º em empresas de moda abertas
        • 1º em empregos
        • 2º em exportações

        • Empresas de moda abertas (2025)

          71,4 mil

          +33,8% sobre 2024 · 29,6% do Brasil

          1º de 27 UFs

        • Empregos formais na moda (2025)

          601,6 mil

          +0,1% sobre 2024 · 25,7% do Brasil

          1º de 27 UFs

        • Exportações de moda (2025)

          US$ 1,89 bi

          −5,6% sobre 2024 · 23,0% do Brasil

          2º de 27 UFs

        • Atendimentos SEBRAE à moda (2025)

          1,57 mi

          −6,3% sobre 2024 · 30,6% do Brasil

          1º de 27 UFs

        Fontes: Receita Federal, RAIS, Comex Stat e SEBRAE.

        Mercado de trabalho

        Tema
        Empresas da moda por município

        The filter bar, the state card and the Mercado de trabalho (labor market) block, reproduced in Portuguese. The card reacts only to the state; in the labor market block, the filters change the map, chart and reading. Example reading: “In 2025, 71,352 fashion companies were opened in São Paulo that are still active”.

        See the real page

        The frames reproduce the real page in Portuguese, with redrawn charts and no text under 16px. Data comes from the Observatory public API and IBGE, live in most blocks; if the query does not respond, the frame uses the October 19, 2026 collection and says so. Studies and Events use the site’s fixed content.

        Five reports in 25 browsable summaries

        Estudos (studies) organizes five reports in tabs. Each one opens into five topics, with a summary, a figure and what it is for: 25 browsable summaries, with the PDF download in a box above, showing title and date. The cards state each study’s limit, such as “no measured result yet”.

        Estudos

        Resumos de cinco relatórios sobre a moda brasileira: sustentabilidade, tendências tecnológicas, acordo Mercosul-UE, cadeia de valor e análise setorial. Cada um pode ser baixado em PDF.

        Sustentabilidade, Circularidade e ESG: Indústria da Moda BrasileiraJulho | 2026
        Baixar Documento

        Brasil e a transição sustentável

        Onde a moda entra na estratégia de transição do Brasil?

        O estudo situa a transição da moda nas políticas públicas do país, na energia renovável que o Brasil já tem e nas linhas de financiamento disponíveis.

        Temas principais
        • Plano de Transformação Ecológica
        • Powershoring e neoindustrialização
        • PNRS e Estratégia Nacional de Economia Circular
        • Taxonomia Sustentável Brasileira
        O que o estudo destaca
        • Economia circular, desenvolvimento regional, dados e financiamento aparecem amarrados na mesma estratégia.
        • Políticas e instrumentos entram como contexto da transição do setor.
        Plano de Transformação Ecológica
        PTEestratégia nacional de desenvolvimento
        Finanças Sustentáveis
        Adensamento Tecnológico
        Bioeconomia
        Transição Energética
        Economia Circular"eixo central desta mudança"
        Infraestrutura Verde
        > 85%da matriz elétrica é renovável (EPE), a base do powershoring
        R$ 179 bimobilizados para a transição via Fundo Clima (BNDES) e Eco Invest Brasil

        Fonte: Relatório Sustentabilidade, Circularidade e ESG (jul. 2026), pp. 16, 20 e 23.

        Para que serve

        Situa a moda na agenda nacional de transição. O que aparece aqui são diretrizes e planos, ainda sem resultado medido.

        The Estudos (studies) block, reproduced in Portuguese. Tabs switch the report and the list switches the topic; the download opens the real file in a new tab.

        See the real page

        What the page delivers and what I take from it

        The SEBRAE board approved the page at a presentation in São Paulo on October 13, 2026 (oral feedback relayed by the CEO and the director of TD Business). It delivers the Fashion observatory, for every state and municipality, on a single page.

        What I take from it: treat fidelity to what can be implemented as a quality criterion. A design the platform cannot publish is not a delivery.

        Usage since launch

        Approximate figures from a SEBRAE report. Exploring, here, means a session that used filters, places or questions. My reading: about 7 in 10 sessions do not use the controls, so the context and questions at the top are what most people read. That is consistent with opening with questions, but it does not prove the decision: the figures measure use, not understanding, and there is no baseline.

        • about 4,800sessions on the Fashion page
        • 28%of sessions used filters, places or questions
        • 4.5%of sessions downloaded a study

        Behind the work

        Oral account, no written record

        I followed the private October 13 presentation over Google Meet; the CEO and the TD Business director passed the feedback on to me as “total success”.

        See the live page

        The rest of the real page, frame by frame

        Every other block of the real page, reproduced in a frame, plus the before and after and who did each part. Open only what you want to check.

        Each question brings its own chart

        In “O setor da moda no Brasil” (the fashion sector in Brazil), the theme only filters the questions. The question is what changes the chart, the numbers and the reading. Answers compare fashion with the country’s total: in 2025, fashion was 6.1% of active companies opened and 3.9% of formal jobs.

        In foreign trade, Asia appears at two levels: by year or by month, and then country by country. Clicking a country opens the products Brazil imports from it. For products, exports and imports sit on opposite sides of zero, sorted by balance.

        O setor da moda no Brasil

        A moda no país inteiro, com dados oficiais. Escolha um tema (empresas, emprego ou comércio exterior) e uma pergunta. Cada resposta traz os números principais, uma leitura curta e a evolução do setor nos últimos anos.

        Tema

        Empresas de moda ativas no Brasil

        • 241,1 mil

          empresas ativas abertas em 2025

        • 69,9%

          das abertas em 2025 são do comércio de moda

        O número de empresas de moda ativas abertas por ano multiplicou-se por cerca de 4,6 entre 2015 (51.883) e 2025 (241.112). Das abertas em 2025, 69,9% são do comércio de moda, 27,2% da indústria e 2,9% dos serviços.

        Dados fornecidos por Receita Federal.

        Empresas ativas por ano de abertura, por subsegmento

        Empresas ativas por ano de abertura, por subsegmentoComércio de moda: 36 mil em 2015 e 169 mil em 2025; Indústria da moda: 14 mil em 2015 e 66 mil em 2025; Serviços da moda: 1 mil em 2015 e 7 mil em 2025.050 mil100 mil150 mil200 mil20152016201720182019202020212022202320242025169 mil66 mil7 mil

        The “O setor da moda no Brasil” (the fashion sector in Brazil) block, reproduced in Portuguese. Theme and question swap the answer. Charts show details on hover, tap or arrow keys, and some have a year or measure selector; among Asian countries, clicking a country opens its products.

        See the real page
        Exports: four questions on the same slice

        The section explains the hard term before the numbers: FOB value has a fixed definition at the top. Four questions (how much was exported, month by month, which municipalities, which products) change the chart, numbers and text, and each one comes with two numbers and a calculated paragraph, such as the change from the previous year or the concentration of the top five.

        State, municipality and product apply to all four questions. Subsegment and CNAE do not apply here, because the foreign trade data does not record the company’s activity. For municipalities, the filter does not hide the list: it highlights the chosen municipality in the state ranking.

        Exportações

          Carregando as exportações.

          The Exportações (exports) block, reproduced in Portuguese. State, municipality, product chapter and heading, question and measure change the result; on the map and the ranking, clicking highlights a municipality. Live data from the public API and IBGE.

          See the real page
          Services: SEBRAE’s reach in fashion

          The section uses the same four filters and groups the questions by theme: general, activities, topics and municipalities. The measure switches between services delivered and clients served.

          On the map, each municipality shows coverage: clients served over active companies. It is a reading of reach, not just a count.

          Atendimentos SEBRAE

                Tema

                Atendimentos SEBRAE à moda por ano

                The Atendimentos SEBRAE (SEBRAE services) block, reproduced in Portuguese, with its own filter bar. Theme, measure, question, year and geographic level change the result. Live data from the public API.

                See the real page
                A calendar that does not make up dates

                The Eventos (events) calendar opens on the current month. The bar color separates events with a published 2026 date from events that only have the previous edition’s date. Events with no published day sit in a separate box instead of taking a made-up day.

                Eventos

                Feiras, semanas de moda, salões e congressos do setor, no Brasil e no exterior. Troque o mês no calendário, passe o mouse sobre um evento para ver os detalhes e clique nele para abrir o site oficial.

                Outubro de 20264 eventos em outubro
                DOMSEGTERQUAQUISEXSÁB
                27282930123
                45678910
                11121314151617São Paulo Fashion WeekData de 2026 publicadaSão Paulo Fashion WeekData13 a 18 de outubro de 2026ObservaçõesConvênio com NA via PatrocinioSitespfw.com.brClique no evento para abrir o site oficial ↗Congresso AbitData da edição 2025 · 2026 não confirmadaCongresso AbitData14 e 15 de outubro de 2026 (edição anterior)ObservaçõesConvênio com NA via Abit / Ativação via POLOEvento sem site oficial informado
                18192021222324São Paulo Fashion WeekData de 2026 publicadaSão Paulo Fashion WeekData13 a 18 de outubro de 2026ObservaçõesConvênio com NA via PatrocinioSitespfw.com.brClique no evento para abrir o site oficial ↗ONDM - O negócio da ModaData de 2026 publicadaONDM - O negócio da ModaData20 a 22 de outubro de 2026ObservaçõesBalneario CamboriuSitejasper.com.brClique no evento para abrir o site oficial ↗Minas Trend - Ed. Outono/InvernoData de 2026 publicadaMinas Trend - Ed. Outono/InvernoData21 a 23 de outubro de 2026ObservaçõesConvênio com NA via AbitSiteminastrend.com.brClique no evento para abrir o site oficial ↗
                25262728293031
                1234567
                Data de 2026 publicadaData da edição 2025 (2026 ainda não confirmada)Hoje
                Eventos sem data publicada (4)

                The Eventos (events) block, reproduced in Portuguese. Change the month and hover or focus a bar to see the event; the bar opens the official site. On narrow screens there is a list of the month, which the real site does not have.

                See the real page
                In the CMS, the detail became an in-place card instead of a modal

                The August React app, which predates the CMS, was already a single page with anchors. In the September and October prototypes, the state detail still opened in a modal. On the published page, it became a card in place, driven by filters.

                Prototype with its own identity

                Prototype of the observatory with its own visual identity: dark background, the title Moda no Brasil and a pink Explorar os dados button

                Page published in the CMS

                Fashion in Brazil page published in the CMS, with the title over a photo, the navigation bar and the text A moda vai muito além da roupa

                On the left, the August React app, which predates the CMS, with its own identity. On the right, the live page, built with the CMS’s own resources.

                Who did each part

                The platform belongs to Datawheel. The experience, the page design and the choice of filters are mine. The content comes from the economists and the data analyst, the CMS implementation from the full-stack developer, and the coordination from the project manager.

                I built the prototypes with Claude Code and the Claude Product Studio. The site images were generated in ChatGPT.

                Next case

                Nexo Quality

                Two approvals for sensitive decisions, in a platform with seven user roles.

                Role: Product Designer

                Web · Concept project · Fictional company

                Limit: evaluated with AI and 12 scenarios, no real users.

                A non-conformance case screen in Nexo Quality, in dark mode