UX/UI Senior Designer · 5 Years · Costa Rica

Josué Zeledón

Industrial Designer with 5 years in UX/UI. I build structured design systems, contribute to complex platform migrations, and create experiences that build trust — from research to delivery.

View Cases Let's Talk

Design as
Growth Engine

Industrial Designer turned UX/UI Senior. I've contributed to Cisco's Design System, worked embedded in cross-functional teams, and supported platform migrations from external agencies to scalable internal practices.

End-to-end Figma expert — foundations, components, variables, prototypes. I use AI tools to accelerate, not replace, a rigorous UX process.

Experience
Senior Product Designer
BetAnything · UX Senior, Design System
2024 — Present
Web & Mobile Visual Design Consultant
Cisco Systems · Design System & Enhancements
2022 — 2024
Web & App Visual Design Consultant
Accenture · SynOps Next Generation
2022
Media & Graphics Design Analyst
Multiple Clients
2019 — 2022
Education
Industrial Design Engineering
TEC · Cartago, Costa Rica
2014 — 2023
Google UX Design Certificate
7-course Professional Certificate
2022 — 2026
Skills
UX ResearchDesign SystemsInformation ArchitecturePrototypingUsability TestingFigmaAdobe CCHTML · CSSClaude CodeAgile · ScrumEnglish C1

Five cases, one thread:
design that builds trust.

01UX Senior · Design System · Platform Migration

BetAnything

Betting platform migration from external agency to internal UX practice. Research, complete design system, and cross-functional collaboration — with measurable growth in visits.

ResearchIA · UserflowsWireframingUsability TestingDesign SystemPrototyping
BetAnything after
Cisco DNA Center
02Design System · Research · Component Library

Cisco Systems

Building and maintaining Cisco's enterprise design system across Desktop, Tablet, and Mobile. Component enhancements based on research and accessibility testing at global scale.

Design SystemResearchInterface DesignAccessibilityPresentation
03UX Prototype · VR · Luxury Commerce

SynOps Next Generation

At Accenture, I designed an immersive luxury car buying experience for SynOps — next-generation software demo with customization, VR test drives, and metaverse commerce.

ResearchInterface DesignFigma PrototypeDesktop
SynOps
PULSE DJ
04Interface Design · Iconography · Multi-touch

PULSE DJ + Live Music

App for musicians on a multi-touch table. Modern interface with custom iconography, loop visualization, and recording flow designed for creativity.

Interface DesignCustom IconographyMulti-touchInteraction Design
05UX Designer · AI-Native · Marketplace

EliteMarket

Designed a premium digital services marketplace from zero — using Claude and Figma MCP as co-pilots. From token architecture to mobile-first flows, every UX decision was made alongside AI with real production output.

UX DesignDesign SystemAI WorkflowFigma MCPMobile-firstToken Architecture

Let's create the next
transformation together.

jdzeledonc@gmail.com · +506 8644-9532
BetAnything · Case Study
UX Senior · Platform Migration · Design System

Transforming Uncertainty
into Ownership

Role
UX Senior Designer
Team
Product, Engineering, Content, Stakeholders
Timeline
2024 — Present
Overview

Large-scale betting platform migration — from external agency to internal UX practice. As UX Senior, I led the end-to-end UX process: research, content strategy, information architecture, wireframing, prototyping, usability testing, and a complete design system built from scratch with Rocket Air. The result: a cohesive modernized experience, measurable growth in visits, and UX becoming an internally trusted driver of product decisions.

Context & Collaboration

When this project began, the internal UX team was newly formed and still earning trust — much of the product strategy had been defined by an external agency. The migration spanned multiple product areas with evolving business requirements and high technical constraints. Collaboration was continuous and cross-functional, involving workshops, design reviews, stakeholder sessions, and feedback loops — not handoffs. This approach gradually shifted confidence from the agency to the internal team.

Role
UX Senior Designer
UX Team
Senior Designers
Partners
Product · Engineering · Content · Stakeholders
The Problem

The company inherited a complex betting platform with inconsistent interfaces, unclear ownership, and limited documentation. The lack of shared standards and alignment between design, product, and engineering made it impossible to maintain consistency, meet evolving business needs, or deliver efficiently across product areas. UX had no seat at the table — and no credibility yet.

Before / After · Platform

From a legacy platform with inconsistent interfaces to a modernized, cohesive experience with internal UX ownership.

BeforeAntes
AfterDespués
Process
01
Research & Competitive Audit
Betting ecosystem analysis. Identification of UX patterns, accessibility gaps, and differentiation opportunities.
02
Information Architecture & Content Strategy
Complete architecture reconstruction. Sitemaps and userflows Pre/Post login. Content Strategy 2.0 for all verticals.
03
Wireframes & Usability Testing
Low-fi wireframes in cross-functional workshops. Usability studies feeding iteration.
04
Design System · BA Core
Complete system: Color, Typography, Iconography, Components, Breakpoints. Merged with Rocket Air.
05
High-Fidelity Prototyping & Delivery
Interactive prototypes as source of truth. Handoff to development with detailed specs.
Information Architecture
Site Map IA

IA V1.0 → V3.0 · Evolución Pre/Post Login

Content Strategy

BA Content Strategy 2.0 · Final

Design System · BA Core 00

Cover · Color · Type · Hero · Navigation · CTAs · Inputs · Icons · Cards · Breakpoints — slide →

Outcomes

Growth in visits confirmed by post-migration SEO data. Platform migrated with cohesive and modernized UX. Internal team gained full UX ownership — replacing the external agency. BA Core design system now powers consistent design across multiple verticals and product lines.

What We Learned

Trust is built incrementally — and UX credibility is earned through consistent delivery, clear communication, and documented decisions, not just great design. The shift from agency-led to internal ownership required as much organizational work as it did design work.

What I'd do differently: establish documentation habits from day one. Every workshop, every decision, every iteration — documented. Well-documented artifacts are what continue to create value long after the project ends.

"What I'd do differently: establish documentation habits earlier. Trust is built incrementally — well-documented artifacts are what continue to create value."
Confidentiality Note

Certain metrics have been modified or omitted due to confidentiality agreements.

Cisco Systems · Case Study
Design System · Research · Component Library

Cisco Systems

Timeline
January 2022 — January 2024
Services
Research · Interface Design · Enhancements
Platform
Desktop · Tablet · Mobile
Overview

I contributed to the maintenance and enhancements of Cisco's Design System, ensuring coherence and accessibility across multiple platforms. I created presentation templates prioritizing storytelling — weaving research narratives and findings to communicate design decisions to global stakeholders.

The Challenge

Contribute to an enterprise design system used across thousands of pages and dozens of product teams worldwide — where each enhancement had to be backward-compatible, accessibility-compliant (WCAG AA), and approved by global stakeholders before touching a single component in production.

Cisco DNA Center issue definition

Issue Definition · Cisco DNA Center — Selectable Card enhancement

Process
Cisco Process Overview

Process Overview · Issue Definition → Acceptance Criteria → Research → Strategy → Internal Review → Stakeholder Presentation → Enhancement Approval → Implementation → Design System

01
Issue Definition & Acceptance Criteria
Concise meetings with stakeholders to define the problem and component acceptance criteria.
02
Research Analysis · Apple HIG, IBM Carbon, Atlassian, Adobe Spectrum
Analysis of common patterns, accessibility requirements, and best practices for interactive card states.
03
Strategy: Exploration & Approaches
Exploration of multiple approaches. State mapping: unselected, hover, selected, active, disabled.
04
Internal Review & Stakeholder Presentation
Full team review covering UX, interaction, and accessibility. Followed by curated presentation with global stakeholders.
05
Enhancement Approval → Implementation → Design System
Meticulous integration into design system ensuring no disruption to core foundations. Published to pattern library.
Stakeholder Presentation

Stakeholder Presentation · Webex · Future Commerce Ecosystem

Selectable Card Design Exploration

Selectable Card (Checkbox) · Design Exploration

Cisco Templates

Cisco.com · Page Templates · Hero Center/LG

Outcomes

Component enhancements successfully published to Cisco's global design system library, now active across multiple product lines. Presentation templates changed how the team communicated research to stakeholders — reducing ambiguity in decisions and accelerating approval cycles across time zones.

"Working at enterprise scale taught me that the most important design skill isn't making components — it's making decisions that survive every team that will use them."
Confidentiality Note

All rights to Cisco Systems Inc.

SynOps · Case Study
Accenture · UX Prototype · Immersive Commerce

SynOps Next
Generation

Timeline
January — February 2022
Services
Research · Interface Design · Graphics
Platform
Desktop
Overview

At Accenture, I built a Figma prototype to demonstrate the usability of next-generation SynOps software. I designed a highly customizable luxury car buying simulation — including VR test drive, vehicle configuration, and metaverse commerce.

The Challenge

Build a compelling demo prototype under 2 months — showing how next-generation AI software could transform a complex, high-stakes purchase (luxury vehicles) into an immersive, personalized experience. The prototype had to feel production-ready for C-suite stakeholder presentations at Accenture.

Landing · Customization · Interior · Car Config · Sustainability · Purchase — desliza →

Process
01
Problem Statement & Requirements
Challenge definition with stakeholders. Acceptance criteria for demo scope.
02
Research & Strategy
Research in luxury e-commerce, VR, and automotive configuration benchmarks.
03
Internal Review & Approval
Team presentation, refinement with feedback. Demo-ready prototype.
Outcomes

Demo prototype approved and presented in live Accenture SynOps stakeholder sessions. The experience became a reference for how next-generation commerce could look — combining VR, AI personalization, and metaverse integration into a single cohesive UX narrative that stakeholders could experience, not just observe.

"When you have 2 months and a C-suite audience, every screen has to tell its part of the story immediately. Ambiguity is a luxury you can't afford."
Confidentiality Note

All rights to Accenture Inc.

PULSE DJ · Case Study
Interface Design · Iconography · Multi-touch

PULSE DJ
+ Live Music

Timeline
July 2019
Services
Interface Design
Platform
Multi-touch Table
The Challenge

Design a music creation app for a multi-touch table — a non-standard interface with unique constraints: large surface, no cursor precision, potential simultaneous multi-user interaction, and no physical controls. The audience: musicians of all levels who shouldn't have to think about the interface while creating.

Concept

App for amateur and professional musicians. Create, compose, record, and share music through a modern interface. I designed the complete custom iconography and app logo.

Semantic phrase: MODERN & INSPIRING — a modern interface, as simple as possible to promote creativity.

App Icon · Multi-touch Interface · Share Screen

Process
01
Concept & Semantic Brief
Defined MODERN & INSPIRING as the product's guiding principle — a phrase testable against every decision. If something didn't feel modern or inspiring, it didn't belong. This anchored the entire visual and interaction system before a single screen was drawn.
02
Custom Iconography System
Designed every icon from scratch — instruments, controls, loops, recording states. Icons had to be instantly recognizable on a large touch surface, legible from multiple angles, and functional without any label. Each icon was a mini interaction design problem.
03
Interface Architecture
One primary action always visible. Seven independent track layers. Recording in 3 states: start / stop+share / delete. Every interaction decision was pressure-tested against the same question: does this interrupt creative flow? If yes, redesign.
Key Interactions
Record
1st touch: starts recording, blinking red dot. 2nd touch: stops and shows sharing options. 3rd touch: deletes recording. Three states, one control — minimum cognitive interruption.
Metronome
Touch enables/disables. Bursting circles animation communicates active state without requiring attention — peripheral awareness design.
Loop Tracks · 7 Layers
Drum · Rhythm · Chords · Bass · Lead · Guitar · Visualization — each layer independently controllable with tap, hold, and swipe gestures. Complex layering made simple through spatial hierarchy.
Demo Video
PULSE DJ Demo
Watch on YouTube ↗
Outcomes

PULSE demonstrated that a complex multi-touch music interface could be both powerful and approachable. The semantic guiding phrase proved its value — every ambiguous decision had a test. A formative project that shaped my understanding of interaction design for non-standard surfaces and constraint-driven creativity.

"A good interface for a musician disappears. If they're thinking about the UI, the UI failed."
EliteMarket · Case Study
UX Designer · AI-Native Workflow · Marketplace

Designing With
Intelligence

Role
UX Designer · Lead
AI Tools
Claude · Figma MCP
Timeline
2025 — Present
Overview

EliteMarket is a premium digital services marketplace built for the Costa Rican market — connecting verified local sellers (Marketing, UX/UI, Audiovisual) with buyers through a trust-first, mobile-first experience. I designed the entire product from zero: architecture, design system, component library, and user flows — with Claude and Figma MCP as integrated AI partners throughout.

The Challenge

Costa Rica's digital services market has a trust problem. Buyers don't know if sellers are real, and sellers lack a premium channel to showcase their work. The core UX challenge: make quality, safety, and discovery feel effortless — on mobile, for a market that lives on WhatsApp.

AI-Native Workflow

This project was an experiment in working with AI not as a tool, but as a collaborator. Every major design decision had Claude as a sounding board. The workflow changed how I think about velocity, documentation, and the boundary between design and implementation.

01
Claude as UX Consultant
Before opening Figma, I discussed architecture with Claude: information hierarchy, navigation patterns, trust signals, onboarding flows. It replaced the early whiteboarding phase — faster and with immediate challenge of assumptions.
02
Figma MCP · Bidirectional Token Bridge
I connected Figma directly to the codebase via MCP. Design tokens (colors, spacing, radius, shadows) defined in Figma variables were automatically synced to figma-tokens.json and then to Tailwind config — a single source of truth that eliminated the design-dev gap entirely.
03
Claude for Design System Decisions
Component variants, accessibility requirements (WCAG 2.1 AA), naming conventions, prop architecture — all decisions were made through conversation with Claude, documented in real time. The result: a 13-component library with consistent patterns and zero guesswork.
04
AI-Assisted Iteration Loop
Once screens existed in Figma, Claude served as instant design critic: reviewing flows for cognitive friction, catching accessibility gaps, and suggesting micro-copy. Iteration cycles that used to take days compressed to hours.
Design System · 3-Tier Token Architecture

The token system follows three layers — from raw values to component-level decisions — synced live between Figma and code. No hardcoded values anywhere in the codebase.

Primitives
Raw Tailwind-aligned values: all colors, spacing scale (4px base), border radii, shadows, typography. The foundation layer — never used directly in components.
Aliases
Semantic names that give meaning: color.primary, bg.secondary, text.muted. Aliases can change the entire product's feel by updating one value — and no component breaks.
Mapped
Component-level tokens: button.primary.bg, card.radius, input.border.focus. These are what components consume directly — creating a traceable path from design decision to code property.
Key UX Decisions
01
Search-First Navigation
The primary action in the bottom nav is search — not a feed. In a marketplace where intent is high (users arrive knowing they need a service), friction-free discovery outperforms passive browsing.
02
Verified Seller Badging as Primary Trust Signal
In a low-trust market, the verification badge does more conversion work than any copy or imagery. It's enforced server-side (RLS) — never client-side — making it impossible to fake. Trust signal integrity was a non-negotiable UX constraint.
03
Glassmorphism as Premium Positioning Signal
The aesthetic choice — dark backgrounds, frosted glass cards, subtle blur — was not cosmetic. It signals that this is a curated, premium environment different from generic classifieds. Visual language does the positioning work before the user reads a single word.
04
Seller Booth as Personal Brand Space
Each seller gets a /seller/:id route — a personal showcase with portfolio, services, reviews, and contact — not just a listing. The 'booth' mental model shifts perception from commodity listing to professional showcase, increasing seller motivation and buyer confidence.
Outcomes & Learnings

Working with AI as a design collaborator — not just a code generator — fundamentally changed my process. I made better-reasoned decisions faster. Documentation happened in real time. The distance between 'design intent' and 'shipped code' collapsed. The skill that evolved most wasn't using AI — it was knowing which questions to ask it.

"The most valuable thing AI gave me wasn't speed — it was a thinking partner that never got tired of my questions."