Hi ShipHero team,

thanks for visiting this private page.

For privacy reasons, I can’t publicly share sensitive mockups or internal details, but I’ve created a private page with curated material so you can review the project in context.

About this project

One of the projects I’m most proud of is the redesign of the AETR-VISHID platform for the Catalan Water Agency.
It’s a critical application that integrates real-time hydrological data and serves both technical specialists and the general public.

👉 Because of this, the product needed to be accessible, robust, and scalable, with a clear balance between complexity and usability.

This was also a Mobile First project, which meant designing core flows and components from a mobile-first perspective, ensuring that the experience worked flawlessly on smaller screens before scaling it to desktop.
This approach forced us to make the system cleaner, more modular, and more focused on essential user tasks — a foundation that ultimately improved the entire Design System.

Below is a selection of mid- and high-fidelity wireframes created during different stages of the UX/UI process.

A selection of mid- and high-fidelity wireframes created during different stages of the UX/UI process.

My role and responsibilities

Design System Foundations

Building a full Design System from scratch: components, patterns, tokens, and naming conventions.
Creating modular, reusable libraries in Figma
Documenting every visual and functional rule for consistency and clarity.

Collaboration with Development

Working closely with the engineering team to validate feasibility,
reduce ambiguity, and ensure frictionless implementation.
Leaving detailed notes and references in Figma for developers and
QA teams.
Aligning visual logic with technical constraints and accessibility
standards.

User Experience

Designing the UX flows and task structures entirely from a
mobile-first logic.
Running usability tests with users from diverse
demographic groups.
Conducting A/B tests and task-completion time studies to
validate decisions.

Why I chose this project

I’m sharing this project because it reflects the way I work:

Real collaboration between design, engineering, and QA.
A strong focus on scalability, maintainability, and long-term product evolution.
Iterative design grounded in usability testing and evidence, not assumptions.
System thinking, creating foundations that support a growing ecosystem.
A clean, mobile-first architecture, which helped structure the rest of the product.

The Design System we built became the backbone of the entire platform and continues to support future enhancements and new modules.

Selected Screens, Wireframes & Design System Artifacts

Desktop Home proposal — early high-fidelity direction exploring structure, hierarchy, and key user actions.

Alternative Home layout — variation focused on clarity, prioritization, and responsive scalability.

Example of developer-facing notes and screen organization in Figma to ensure clear, frictionless handoff.

Public user view — desktop interface showing real-time data visualized for non-technical audiences.

Annotated screen illustrating interaction logic, component behavior, and implementation details.

Additional annotated UI detailing flow logic and component guidance for engineering.

Component architecture overview — structured, modular system following atomic and token-based principles.

Extended component library — atomic design structure ensuring consistency, scalability, and reuse.

Download – Full CV & Portfolio

If you’d like to explore more of my work you can download my full CV and portfolio here:

Closing

Thank you for taking the time to review this page.
If you’d like to discuss any part of the project, the system logic, or my workflow in more detail, I’d be happy to walk you through it during the interview.