Joana Castro joanadecastro

Hi, I'm Joana Castro

UI/UX Designer | Product Design | Front-end Background

I design digital products, responsive interfaces and design systems, combining strong visual thinking with a solid Front-end background.

With 15+ years of experience in design and 4+ years in UI/UX and Front-end development, my background spans digital product design, responsive interfaces, SaaS platforms, visual design and implementation.

Currently focused on UI/UX and digital product design, with particular attention to usability, design systems, responsive interfaces and implementation. My Front-end background in Angular and TypeScript helps me bridge the gap between design and development.

I also integrate AI-assisted tools into my workflow to support exploration, implementation and iteration.

Selected Work

Atlyon — Portfolio & Digital Products

Atlyon brings together selected projects across UI/UX, product design and Front-end implementation, from initial concept and visual direction through to responsive interfaces and implementation.

Featured Projects

Civitas — Energy Management Platform

UI/UX and product design for an energy management SaaS platform, supported by Front-end implementation.

The project includes complex dashboards, reusable components, data visualisation and responsive interfaces, connecting product design decisions with implementation.

UI/UX · Product Design · SaaS · Front-end

LicitaNow — Landing Page Redesign

UI/UX redesign and Front-end adaptation of a landing page created for a competition proposal, focused on visual hierarchy, communication and user experience.

The implementation includes responsive behaviour, custom interactions and accessibility improvements, developed from an existing structural base.

UI/UX · Redesign · Front-end

JUH — Angular E-commerce

Personal Angular e-commerce project focused on Front-end application logic and responsive implementation.

The project includes product variants, shared reactive cart state with Angular Signals, local persistence, Reactive Forms checkout, route-based product states and automated testing.

Angular · TypeScript · Front-end

Full case studies and additional work are available at:

https://atlyon.pt

Expertise

UI/UX & Product Design
Figma · Interface Design · User Experience · Design Systems · Responsive Design · Prototyping

Front-end Development
Angular · TypeScript · JavaScript · HTML · SCSS/CSS

Testing & Quality Assurance
Angular Testing · Responsive QA · Cross-device Testing · Interaction & Regression Testing

AI-Assisted Workflow
Claude Code · OpenAI Codex · Google Stitch

Visual Design
Branding · Graphic Design · Visual Identity

Additional Front-end Experience
React · React Native · Responsive Web Development · Component-based Interfaces

How I Work

I approach digital products primarily from a UI/UX and product design perspective, supported by a strong technical understanding of Front-end implementation.

My process typically moves through:

Context & Objectives → Strategy & Direction → UI/UX & Product Design → Validation & Delivery

I start by understanding the problem, users and product requirements, then define the visual and functional direction, create responsive interfaces and reusable design systems, and prepare the experience for implementation and validation.

My Front-end background allows me to design with implementation in mind, collaborate closely with developers and maintain consistency between the designed experience and the final product.

I use AI-assisted tools where they add value to the workflow, supporting faster exploration, implementation and iteration while maintaining control over UX, visual quality and implementation decisions.

Quality Assurance & Testing

I validate digital products across both design and implementation, combining automated checks with responsive and real-device testing.

The Atlyon portfolio has been tested across desktop and mobile environments, including physical iOS and Android devices, with particular attention to:

Responsive layouts across multiple viewport sizes
Cross-device and mobile browser behaviour
Touch, swipe and carousel interactions
Image and video lightbox lifecycle
Autoplay and media behaviour
Navigation and scroll restoration
Repeated open/close interaction cycles
Dynamic mobile browser viewports
Accessibility and reduced-motion behaviour
Regression testing after responsive and interaction changes

Automated validation includes:

Angular unit and interaction tests
TypeScript validation
Production build validation
Regression tests for critical interaction states
Git diff validation

Real-device QA has also been used to identify mobile-specific edge cases that are difficult to reproduce through desktop emulation alone, particularly around dynamic browser viewports, touch interactions, media lifecycle and navigation state.