Design systems

DesignOps

Accessibility (WCAG)

Leadership

Enterprise

B2B

RISEWorten Design System
The system Worten didn’t know they needed.

Company

Worten (Sonae Group)

Worten
(Sonae Group)

Role

Lead Designer & Product Owner

Period

Apr 2023 - Present

Team

7 designers, 5 developers

95%

Component adoption
across 31 teams

60+

Components built from foundations
to complex patterns

80%

80%

Of the designers report saving
significant time vs. before

4.75/5

4.75/5

User confidence score using RISE

Of the designers report saving
significant time vs. before

__

The problem

__

The problem

__

The problem

Dozens of product teams. Hundreds of daily decisions. Zero shared foundation.

Dozens of product teams. Hundreds of daily decisions. Zero shared foundation.

Context
Worten's digital ecosystem had grown organically over years, resulting in 20+ B2B products built in silos — 7 of which were audited in depth. Each team created their own components, maintained separate design files, and spent 40% of design time recreating existing solutions.

The impact
The real cost wasn't just duplicated work — it was inconsistent user experiences across products, slower time-to-market, and a growing gap between design and engineering velocity.

Chart showing productivity over time with and without a design system. Without a design system, productivity dips initially before recovering to baseline. With a design system, productivity rises significantly above baseline over time, crossing the "without" line at the midpoint and continuing to grow. Based on an image by Ben Callahan / A List Apart.
Chart showing productivity over time with and without a design system. Without a design system, productivity dips initially before recovering to baseline. With a design system, productivity rises significantly above baseline over time, crossing the "without" line at the midpoint and continuing to grow. Based on an image by Ben Callahan / A List Apart.

__

The solution

__

The solution

__

The solution

Maximum flexibility. Maximum responsibility.

Maximum flexibility. Maximum responsibility.

Built RISE — a scalable design system that unified 20+ products under one visual language.
I functioned as both Product Designer and Product Owner, managing the full lifecycle from strategy to adoption.

Chart comparing time-to-market and costs between legacy development and design system-driven development over time. Legacy digital development shows three tall stacked blocks representing UX, UI, and DEV — indicating high combined cost and effort. Design System digital development shows the same three layers significantly reduced in height, with UI nearly eliminated, demonstrating lower overall cost and faster delivery as the system matures. X-axis: Evolution. Y-axis: Time to market vs Costs.
Chart comparing time-to-market and costs between legacy development and design system-driven development over time. Legacy digital development shows three tall stacked blocks representing UX, UI, and DEV — indicating high combined cost and effort. Design System digital development shows the same three layers significantly reduced in height, with UI nearly eliminated, demonstrating lower overall cost and faster delivery as the system matures. X-axis: Evolution. Y-axis: Time to market vs Costs.

__

The hard decisions

__

The hard decisions

__

The hard decisions

These are the decisions that separate design system builders from design system leaders.

These are the decisions that separate design system builders from design system leaders.

1

Aligning 20+ product teams under one visual language

Decision: Negotiated a dedicated investment window by showing leadership that doing nothing was the most expensive option.

✓ Full stakeholder buy-in

✓ Zero roadmap conflicts

2

Balancing consistency with product team autonomy

Decision: Built a governance model where product designers own the system in their teams — keeping quality without slowing teams down.

✓ 95% adoption across teams

3

Making accessibility non-negotiable from day one

Decision: Every component was built with WCAG AA compliance from day one — with no exceptions.

✓ Accessibility standards

RISE Button component showing all six interactive states: Default (solid  red), Hover (slightly darker red), Pressed (darker still), Disabled (grey,  reduced opacity), Loading (red with spinning indicator), and Focus (red  with cyan outline). All states show a "Download file" label with a left  icon. A Figma Dev Mode panel connected to the Default state exposes  its design tokens: height 56px, width 171px, corner radius r-border- radius/xs, gap r-spacing/3xs, padding r-spacing/sm, fill  ...rimary/default, component properties Button=Primary, State=Default,  Size=lg (56), Mobile=False, Color=Default. Toggle controls on the right  show Icon-left enabled, Icon-right and Count-badge disabled.
RISE Button component showing all six interactive states: Default (solid  red), Hover (slightly darker red), Pressed (darker still), Disabled (grey,  reduced opacity), Loading (red with spinning indicator), and Focus (red  with cyan outline). All states show a "Download file" label with a left  icon. A Figma Dev Mode panel connected to the Default state exposes  its design tokens: height 56px, width 171px, corner radius r-border- radius/xs, gap r-spacing/3xs, padding r-spacing/sm, fill  ...rimary/default, component properties Button=Primary, State=Default,  Size=lg (56), Mobile=False, Color=Default. Toggle controls on the right  show Icon-left enabled, Icon-right and Count-badge disabled.

__

The process

__

The process

__

The process

Foundations

3 months

Set up the governance model, created regular syncs across teams, and researched how the best design systems in the industry worked.

→ Built trust before building components.

Build & Scale

12 months

Led creation of foundations (tokens, typography, colors) and 60+ components.

→ One source of truth for design and engineering.

Multi-technology

6 months

Extended the system into code — built in HTML/CSS documented via Storybook, and developed a dedicated RISE theme for OutSystems, enabling consistent component consumption across different technology stacks.

→ One design language, multiple technology outputs.

Discovery

4 months

Audited 7+ B2B products, identified 40+ unique components doing the same things differently.

→ Mapped unified component families with clear variants.

Adoption

12+ months

Drove adoption through workshops, documentation, and hands-on migration support. Changed behaviour, not just tools.

→ 95% component adoption across 20+ products.

Evolution

On going

Continuous maintenance and improvements — deprecating outdated patterns, raising quality standards, and evolving the system alongside product and brand needs. A living system, not a finished one.

→ A design system that grows with the product, not against it.

Foundations

3 months

Set up the governance model, created regular syncs across teams, and researched how the best design systems in the industry worked.

→ Built trust before building components.

Discovery

4 months

Audited 7+ B2B products, identified 40+ unique components doing the same things differently.

→ Mapped unified component families with clear variants.

Build & Scale

12 months

Led creation of foundations (tokens, typography, colors) and 60+ components.

→ One source of truth for design and engineering.

Adoption

12+ months

Drove adoption through workshops, documentation, and hands-on migration support. Changed behaviour, not just tools.

→ 95% component adoption across 20+ products.

Multi-technology

6 months

Extended the system into code — built in HTML/CSS documented via Storybook, and developed a dedicated RISE theme for OutSystems, enabling consistent component consumption across different technology stacks.

→ One design language, multiple technology outputs.

Evolution

On going

Continuous maintenance and improvements — deprecating outdated patterns, raising quality standards, and evolving the system alongside product and brand needs. A living system, not a finished one.

→ A design system that grows with the product, not against it.

A Miro workshop board showing early RISE branding and  discovery work. Centre: the RISE wordmark with its geometric logo  construction — a grid of squares, circles, and triangles in red outlines,  with a solid red triangle as the key mark, above the text "rise / worten  design system". Surrounding the board: green sticky notes with  Portuguese brand attribute words (online, grande, trabalho, compras,  electrónica, 100% portuguesa, etiquetas); yellow sticky notes with UX  writing terms (Acronym, B.U.D.I., Abbreviation); handwritten notes in  blue (Rampa, Ascensão); and partially visible references including a  dark UI screen and what appears to be Apple HIG documentation.
Jira kanban board titled "Work Board | RISE Worten Design System"  showing the component development workflow across 8 columns:  Backlog (39 items), Discovery (2), Refinement (3), Ready for Dev (9),  Committed for Dev (1), In Progress (6), Ready for Code review (2), and  In Code Review (partially visible). Visible tickets include components  such as Bottom.bar, Progress.bar, Progress.circle, Blank.slate,  Range.slider, Upload.file, Header, Notifications, Avatar, and  Chat.message. Tickets are tagged with labels including Foundations,  Icons, Desktop Components, Dashboards, and W-Suporte, and show  effort estimates, dates, and assignee avatars. The board is actively  used by a team of at least 6 members visible in the header.
Jira kanban board titled "Work Board | RISE Worten Design System"  showing the component development workflow across 8 columns:  Backlog (39 items), Discovery (2), Refinement (3), Ready for Dev (9),  Committed for Dev (1), In Progress (6), Ready for Code review (2), and  In Code Review (partially visible). Visible tickets include components  such as Bottom.bar, Progress.bar, Progress.circle, Blank.slate,  Range.slider, Upload.file, Header, Notifications, Avatar, and  Chat.message. Tickets are tagged with labels including Foundations,  Icons, Desktop Components, Dashboards, and W-Suporte, and show  effort estimates, dates, and assignee avatars. The board is actively  used by a team of at least 6 members visible in the header.

__

Bringing people along

__

Bringing people along

__

Bringing people along

Building the system was the easier half of the job.
The harder half was convincing people it was worth using.

Building the system was the easier half of the job.
The harder half was convincing people it was worth using.

Change at scale is never straightforward. Some people were new to the concept of a design system entirely — and needed to understand why it mattered before they could commit. Others worried it would limit their creative freedom. And with multiple stakeholders involved across different levels, building trust took time — some were convinced early, others needed to see results first.

So I stopped trying to convince people with arguments. I started showing them with the results.

I brought stakeholders in early — not to approve decisions, but to shape them. I framed RISE not as a design tool but as a business accelerator: faster delivery, fewer inconsistencies, less rework. I ran workshops, wrote documentation that non-designers could actually read, and made adoption as frictionless as possible.

For the designers who resisted — I didn't force the system. I made it better than their alternatives. When RISE was more flexible, more documented, and easier to use than building from scratch, the resistance faded on its own.

Change at scale is never straightforward. Some people were new to the concept of a design system entirely — and needed to understand why it mattered before they could commit. Others worried it would limit their creative freedom. And with multiple stakeholders involved across different levels, building trust took time — some were convinced early, others needed to see results first.

So I stopped trying to convince people with arguments. I started showing them with the results.

I brought stakeholders in early — not to approve decisions, but to shape them.

I framed RISE not as a design tool but as a business accelerator: faster delivery, fewer inconsistencies, less rework. I ran workshops, wrote documentation that non-designers could actually read, and made adoption as frictionless as possible.

For the designers who resisted — I didn't force the system. I made it better than their alternatives. When RISE was more flexible, more documented, and easier to use than building from scratch, the resistance faded on its own.

Some people are still not fully converted. That's honest. But the system is alive, adopted, and growing— and that only happens when people choose to use it.

__

Technical architecture

__

Technical architecture

__

Technical architecture

Architecture
Design tokens → Foundations → Components → Patterns

Architecture
-> Design tokens → Foundations
→ Components → Patterns

Inspired by Brad Frost's Atomic Design principles — adapted to fit Worten's product ecosystem and team structure.

Figma

Supernova

Confluence

HTML & CSS

Outsystems

Other technologies

WCAG AA compliance baked into every component from day one.

Automated docs via Supernova + Confluence for cross-functional alignment.

WCAG AA compliance baked into every component from day one.

Automated docs via Supernova + Confluence for cross-functional alignment.

Annotated diagram explaining the anatomy of a RISE colour token.  A red colour swatch (hex #E41A15) is labelled with four callouts:  Contrast ratio — the swatch carries a white "AA" badge confirming  WCAG AA compliance; Token name — --color-brand-primary-pure  (the CSS custom property); Variable — "Primary Pure" (the  human-readable name used in Figma); Color value — #E41A15  (the raw hex value).
Annotated diagram explaining the anatomy of a RISE colour token.  A red colour swatch (hex #E41A15) is labelled with four callouts:  Contrast ratio — the swatch carries a white "AA" badge confirming  WCAG AA compliance; Token name — --color-brand-primary-pure  (the CSS custom property); Variable — "Primary Pure" (the  human-readable name used in Figma); Color value — #E41A15  (the raw hex value).
Isometric layout showing multiple screens from the Atlas campaign  management platform, built with RISE. Visible interfaces include:  a campaign creation form ("Campanhas online — Nome da campanha")  with promotional mechanic selection cards showing Direct discount in €,  Direct discount in %, Buy X Pay Y, Diffused discount, and Scratched  price; a campaign list view with calendar and list tabs; a Gantt-style  timeline with colour-coded campaign rows; and a "Create single  campaign" form with structured sections for general data, details,  media reports, and milestones. Demonstrates RISE components  applied at full product scale across a complex B2B workflow.
Isometric layout showing multiple screens from the Atlas campaign  management platform, built with RISE. Visible interfaces include:  a campaign creation form ("Campanhas online — Nome da campanha")  with promotional mechanic selection cards showing Direct discount in €,  Direct discount in %, Buy X Pay Y, Diffused discount, and Scratched  price; a campaign list view with calendar and list tabs; a Gantt-style  timeline with colour-coded campaign rows; and a "Create single  campaign" form with structured sections for general data, details,  media reports, and milestones. Demonstrates RISE components  applied at full product scale across a complex B2B workflow.
Isometric layout showing multiple screens from the Atlas campaign  management platform, built with RISE. Visible interfaces include:  a campaign creation form ("Campanhas online — Nome da campanha")  with promotional mechanic selection cards showing Direct discount in €,  Direct discount in %, Buy X Pay Y, Diffused discount, and Scratched  price; a campaign list view with calendar and list tabs; a Gantt-style  timeline with colour-coded campaign rows; and a "Create single  campaign" form with structured sections for general data, details,  media reports, and milestones. Demonstrates RISE components  applied at full product scale across a complex B2B workflow.

__

The team

__

The team

__

The team

RISE was built by a rotating team of designers and developers who contributed at different stages of the journey:

RISE was built by a rotating team of designers and developers who contributed at different stages of the journey:

7 7 Design contributors

1 Lead Designer (me)


3 Senior / Mid designers


3 Junior designers


1 Lead Designer (me)


3 Senior / Mid designers


3 Junior designers



Designers from different products in our team COE UX contributed to naming, components, patterns, UX Writing, and, of course, feedback.

6 Engineering contributors

3 OutSystems developers (initial

platform)


2 HTML/React developers (web

components)


1 React developer (current — maintenance

+ new components + project support)

3 OutSystems developers (initial

platform)


2 HTML/React developers (web

components)


1 React developer (current —
maintenance + new components +
project support)

Engineering team provides ongoing support and helps project teams adopt RISE.

7 7 Design contributors

1 Lead Designer (me)


3 Senior / Mid designers


3 Junior designers


Designers from different products in our team COE UX contributed to naming, components, patterns, UX Writing, and, of course, feedback.

6 Engineering contributors

3 OutSystems developers (initial

platform)


2 HTML/React developers (web

components)


1 React developer (current —
maintenance + new components +
project support)

Engineering team provides ongoing support and helps project teams adopt RISE.

__

Design system lifecycle

__

Design system lifecycle

__

Design system lifecycle

RISE is not a project — it's an evolving product.

RISE is not a project
— it's an evolving product.

Establish the core

v1.0 — Foundation • Apr – Jun 2023

Deliverables
Design tokens

Typography system

Colour palette

Spacing & elevation


0 Components

3 Pilot products

0 Components

3 Pilot products

Build the building blocks

v2.0 — Core Components • Jul – Dec 2023

Deliverables
Buttons, inputs, cards

Navigation components

Form elements

Data display

150+ Components

8 Products adopted

150+ Components

8 Products adopted

Enable complex use cases

v3.0 — Patterns & Templates • Jan – Jun 2024

Deliverables
Page templates

Complex patterns

Data visualisation

Mobile components

15+ Products

15+ Products

15+ Products

Mature and optimise

v4.0 — Scale & Optimise • Jul 2024 - Present

Deliverables
Performance improvements

Enhanced documentation

AI integration

Advanced patterns

60+ components

31 teams

20+ products

95% adoption

Establish the core

v1.0 — Foundation • Apr – Jun 2023

Deliverables
Design tokens

Typography system

Colour palette

Spacing & elevation

0 Components

3 Pilot products

Build the building blocks

v2.0 — Core Components • Jul – Dec 2023

Deliverables
Buttons, inputs, cards

Navigation components

Form elements

Data display

150+ Components

8 Products adopted

Enable complex use cases

v3.0 — Patterns & Templates • Jan – Jun 2024

Deliverables
Page templates

Complex patterns

Data visualisation

Mobile components

15+ Products

15+ Products

Mature and optimise

v4.0 — Scale & Optimise • Jul 2024 - Present

Deliverables
Performance improvements

Enhanced documentation

AI integration

Advanced patterns

60+ components

31 teams

20+ products

95% adoption

Roadmap Focus

✓ Figma AI integration for faster prototyping

✓ Figma AI for faster prototyping

✓ Advanced data visualisation components

✓ Advanced data visualisation

✓ Multi-brand theming capabilities

✓ Real-time collaboration features

Grid overview of RISE component library showcasing the breadth  of the system. Visible components include: progress/upload indicator  (69% circular progress), file upload area with drag-and-drop, button  variants (primary red, outlined, ghost), toast/alert notification, radio  button group, data table with selectable rows and management level  columns, range slider (0–100), tabs with title and description, button  with dropdown variant, footer with RISE wordmark and copyright,  tag/card component with actions, RISE header with search bar  ("Type anything…"), search input field, media card with image gallery  and action icons, contextual menu with options, Atlas sidebar with  item labels and a highlighted red item, dropdown select with  searchable options and Apply/Clear actions, skeleton loader, feedback  widget ("Help us improve your experience") with 5-star rating,  checkbox group with options, link, and toggle switches (active/inactive).
Grid overview of RISE component library showcasing the breadth  of the system. Visible components include: progress/upload indicator  (69% circular progress), file upload area with drag-and-drop, button  variants (primary red, outlined, ghost), toast/alert notification, radio  button group, data table with selectable rows and management level  columns, range slider (0–100), tabs with title and description, button  with dropdown variant, footer with RISE wordmark and copyright,  tag/card component with actions, RISE header with search bar  ("Type anything…"), search input field, media card with image gallery  and action icons, contextual menu with options, Atlas sidebar with  item labels and a highlighted red item, dropdown select with  searchable options and Apply/Clear actions, skeleton loader, feedback  widget ("Help us improve your experience") with 5-star rating,  checkbox group with options, link, and toggle switches (active/inactive).

__

Outcomes

__

Outcomes

__

Outcomes

Design impact

95% component adoption across 20+

products teams (within 18 months)


4.75/5 developer confidence score using

RISE


80% reduction in design review cycles (5

days → 1 day)


100% team awareness of design system

existence

95% component adoption across 20+

products teams (within 18 months)


4.75/5 developer confidence score
using RISE


80% reduction in design review
cycles (5 days → 1 day)


100% team awareness of design
system existence

Business impact

Enabled "Atlas" platform launch 4 months

ahead of schedule


Estimated €1.2M saved in duplicated

design work (Year 1)


Reduced new product onboarding from 3

weeks to 3 days


Zero accessibility violations across core

library

Enabled "Atlas" platform launch 4
months ahead of schedule


Estimated €1.2M saved in duplication

design work (Year 1)


Reduced new product onboarding
from 3 weeks to 3 days


Zero accessibility violations across
core library

Design impact

95% component adoption across 20+

products teams (within 18 months)


4.75/5 developer confidence score
using RISE


80% reduction in design review cycles
(5 days → 1 day)


100% team awareness of design
system existence

Business impact

Enabled "Atlas" platform launch 4
months ahead of schedule


Estimated €1.2M saved in duplication

design work (Year 1)


Reduced new product onboarding
from 3 weeks to 3 days


Zero accessibility violations across core

library

Note: Results based on internal survey (Q4 2025) and project metrics. Full ROI analysis scheduled for Q2 2026. Limited sample size — values reflect user perception, not objective ROI.

__

Governance

__

Governance

__

Governance

A design system without governance is just a library.
Our model is a decentralised ownership with centralised standards.

A design system without governance is just a library.
Our model is a decentralised ownership with centralised standards.

A design system without governance is just a library. Our model is a decentralised ownership with centralised standards.

Principles

New products start with RISE by default.


Existing products migrate progressively — one page at a time.


Product designers as first line of defence against drift


Formal validation process for new component requests

New products start with RISE by
default.


Existing products migrate
progressively — one page at a time.


Product designers are the first line of
defence against drift.


Formal validation process for new
component requests.

New products start with RISE by default.


Existing products migrate progressively — one page at a time.


Product designers are the first line of defence against drift.


Formal validation process for new component requests.

__

See it live

__

See it live

__

See it live

RISE is publicly documented — components, tokens, accessibility guidelines, and more.

One place for designers and developers. No outdated PDFs. No tribal knowledge. Just a living system that speaks for itself.

-> rise.worten.io

Screenshot of the RISE public documentation site at rise.worten.io.  The left sidebar shows the full navigation structure: Welcome to RISE,  About RISE, Accessibility, UX Writing, Design tokens, Grids, and Core  components (expanded to show Components > Overview, Accordion,  Action sheet, Actions, Alerts, Avatar, Bottom bar, Breadcrumbs).  The main content area shows the "Components Overview" page with  six category filters (All categories, Buttons & Actions, Containers &  Layout, Feedback & Status, Form inputs & Controls, Navigation &  Structure, Visual & UI Elements) and a component grid showing  Accordion, Action.sheet (mobile-only, marked with a phone icon),  Actions, and three further components partially visible. Each  component card includes a preview thumbnail and a short description.  The page header states the documentation covers usage,  customisation with tokens, and accessibility considerations.
Screenshot of the RISE public documentation site at rise.worten.io.  The left sidebar shows the full navigation structure: Welcome to RISE,  About RISE, Accessibility, UX Writing, Design tokens, Grids, and Core  components (expanded to show Components > Overview, Accordion,  Action sheet, Actions, Alerts, Avatar, Bottom bar, Breadcrumbs).  The main content area shows the "Components Overview" page with  six category filters (All categories, Buttons & Actions, Containers &  Layout, Feedback & Status, Form inputs & Controls, Navigation &  Structure, Visual & UI Elements) and a component grid showing  Accordion, Action.sheet (mobile-only, marked with a phone icon),  Actions, and three further components partially visible. Each  component card includes a preview thumbnail and a short description.  The page header states the documentation covers usage,  customisation with tokens, and accessibility considerations.
Screenshot of the RISE public documentation site at rise.worten.io.  The left sidebar shows the full navigation structure: Welcome to RISE,  About RISE, Accessibility, UX Writing, Design tokens, Grids, and Core  components (expanded to show Components > Overview, Accordion,  Action sheet, Actions, Alerts, Avatar, Bottom bar, Breadcrumbs).  The main content area shows the "Components Overview" page with  six category filters (All categories, Buttons & Actions, Containers &  Layout, Feedback & Status, Form inputs & Controls, Navigation &  Structure, Visual & UI Elements) and a component grid showing  Accordion, Action.sheet (mobile-only, marked with a phone icon),  Actions, and three further components partially visible. Each  component card includes a preview thumbnail and a short description.  The page header states the documentation covers usage,  customisation with tokens, and accessibility considerations.

This wouldn't have been possible without the designers and developers who were part of the team at different stages of the journey. They know who they are.

__

Ready for the next long-term challenge?

If our goals align, I’d love to meet the team.

__

Ready for the next long-term challenge?

If our goals align, I’d love to meet the team.

__

Ready for the next long-term challenge?

If our goals align, I’d love to meet the team.

Copyright 2026 by Juliana Freitas

Copyright 2026 by Juliana Freitas

Copyright 2026 by Juliana Freitas