← All work
CASE STUDY / 01 OF 07

FCCN
UI Kit Evolution & WordPress Template Upgrade

A more consistent, accessible and scalable digital ecosystem for research and education.

CLIENTFCCN
YEAR2025–2026
ROLEUX/UI Designer
FOCUSDesign system, Accessibility, Handoff
TOOLSFigma · Adobe Creative Cloud · WordPress
FCCN project image from original portfolio
01 / OVERVIEW

The context

At FCCN, digital platforms serve Portugal’s academic and research communities. The UI kit and WordPress template needed to work as a coherent system across teams and content types.

The challenge

Improve consistency and usability while making the templates easier to scale, document and implement.

02 / MY ROLE

What I did

I evolved the interface patterns, worked on the UI kit and WordPress templates, and prepared design specifications in collaboration with developers.

03 / PROCESS

From thinking
to making

  1. 01UI kit review
  2. 02Component design
  3. 03Template refinement
  4. 04Accessibility considerations
  5. 05Module documentation
  6. 06Developer handoff
04 / DESIGN

Ideas in detail.

The work covered color, typography, input and card states, responsive guidelines and documentation for 32 modules. Annotated files and design tokens helped translate design intent into implementation.

08 / ACCESSIBILITY

Built for more people.

Accessibility was part of the UI kit’s component states, documentation and responsive guidelines. This made decisions more explicit for both design and development teams.

09 / OUTCOME

What moved forward

An evolved UI kit, improved templates and structured module documentation to support consistency and cross-team collaboration.

NEXT PROJECT / 02PTCRIS ↗PTCRIS project preview