Available · Montréal (ET)
FR · EN · ES · 10+ years · Figma → React

Bilingual UI/UXdesign &frontend delivery for teams

01 · Portrait
Portrait of Juan Pablo Riano
JP · 2026↗
02 · Stack
Figmadesign
React · TSbuild
Gatsbycontent
WCAGa11y
i18nFR · EN · ES

I work with agencies, product teams, and service businesses that need clearer interfaces, faster execution, and less friction between Figma and React. From landing pages to design systems, I help move work from concept to shipped frontend.

View portfolio
Best for—Agencies · Product teams · Bilingual service businesses
scroll
§ 01 · Services

What I help teams ship

I work with agencies, product teams, and service businesses that need clearer interfaces, faster execution, and less friction between Figma and React. From landing pages to design systems, I help move work from concept to shipped frontend.

  1. 01

    UI/UX Design

    Interface design in Figma wireframes, visual exploration, prototypes, and component specs ready for handoff or direct implementation.

    Figma · Prototypes · Specs
  2. 02

    Design Systems & UI Consistency

    Reusable component libraries, design tokens, and documentation so teams ship consistent UI at scale.

    Tokens · Library · Docs
  3. 03

    React & Gatsby Development

    Production-grade components, content-driven pages, and scalable frontend architecture.

    React · TS · Gatsby
  4. 04

    AI-Assisted Workflow

    Claude Code, Figma AI/Make, and Vercel v0 integrated into daily workflow faster prototyping, accelerated delivery, and consistent quality at scale.

    Claude · v0 · Figma AI
  5. 05

    Accessibility (WCAG: Web Content Accessibility Guidelines)

    Semantic HTML, keyboard navigation, contrast checks, and inclusive UX patterns baked in from the start.

    a11y · Semantic · Keyboard
  6. 06

    Multilingual Websites (i18n)

    Clean translation structures, hreflang/canonical hygiene, and content parity across languages.

    i18n · hreflang · SEO
  7. 07

    Performance Optimization

    Core Web Vitals improvements, image strategy, caching, and frontend profiling.

    LCP · INP · CLS
10+ years
across agency, SaaS, enterprise, and service-site delivery
EN / FR / ES
for bilingual content and cross-functional communication
Figma → React
in one workflow from direction to shipped interface
SEO + a11y
baked into the delivery, not left for later
§ 02 · Where this

Where this work creates the most value

Not every project needs the same level of design or frontend support. These are the situations where my involvement tends to produce the clearest return.

A / Who

Who I work best with

  • Agencies delivering multiple client sites with tight timelines
  • Product teams improving UI quality without slowing releases
  • Service businesses that need a bilingual site that looks sharp and converts
B / What

What clients usually need

  • Figma files that still need clean frontend implementation
  • Inconsistent UI that needs structure before scaling
  • Existing sites that need better speed, accessibility, or content clarity
C / What

What I bring to the table

  • Design decisions made with implementation constraints in mind
  • Frontend delivery that preserves visual intent and UX detail
  • SEO, accessibility, and multilingual structure considered from the start
§ 03 · Process

Process,
zéro friction.

01

Understand

Clarify goals, target users, constraints, and content priorities.

02

Design

Wireframes, visual exploration, and Figma prototypes validated before a single line of code.

03

Build

Clean, responsive, accessible UI implemented with maintainable code standards.

04

Refine

QA, accessibility checks, performance tuning, and SEO fundamentals.

§ 04 · Portfolio snapshot

Featured Projects

4 featured case studies · 18 Live projects (online) · 15 archived projects

Enviro Gun Image
/01

EnviroGun

Frontend Development · React, Gatsby, TypeScript, i18n
Chester Court Image
/02

Chester Court

Design + Frontend Development · React, Gatsby, TailwindCSS
Jenny Adventures Image
/03

Jenny Adventures

Design + Frontend Development · React, Gatsby, TailwindCSS, i18n
Reef Image
/04

Reef Cleaning Company

Frontend Development · React, Gatsby, TailwindCSS

The full portfolio now lives on its own page, with featured case studies, the rest of the live client work, and an archive of older offline projects.

Open full portfolio
§ 05 · About the work

About

I'm a Montréal-based UI/UX Designer and Frontend Developer working where visual design, frontend implementation, and delivery speed overlap. I help teams that want fewer handoff gaps, sharper interfaces, and production-ready frontend work that respects both UX and technical constraints.

  • Design in Figma and implementation in React within the same delivery workflow
  • AI-assisted production workflow: Claude Code, Figma AI/Make, Vercel v0
  • Accessibility, semantic HTML, and maintainability treated as baseline quality
  • Performance and SEO hygiene built into decisions before launch

§ 06 · Start the conversation

Send the site, scope, or product context. I'll reply with the best-fit next step, the right service angle, and a practical plan.