{"id":357,"date":"2026-03-09T02:04:13","date_gmt":"2026-03-09T02:04:13","guid":{"rendered":"https:\/\/luis-barbosa.com\/portafolio\/?post_type=project&#038;p=357"},"modified":"2026-03-11T01:41:45","modified_gmt":"2026-03-11T01:41:45","slug":"tarjeta-tuya","status":"publish","type":"project","link":"https:\/\/luis-barbosa.com\/portafolio\/project\/tarjeta-tuya\/","title":{"rendered":"Tarjeta Tuya"},"content":{"rendered":"<p>[et_pb_section fb_built=\u00bb1&#8243; _builder_version=\u00bb4.4.2&#8243; background_color=\u00bb#020202&#8243; custom_padding=\u00bb21px||5px|||\u00bb locked=\u00bboff\u00bb][et_pb_row column_structure=\u00bb2_5,3_5&#8243; _builder_version=\u00bb4.4.2&#8243; custom_margin=\u00bb|auto|22px|auto||\u00bb custom_padding=\u00bb4px||0px|||\u00bb locked=\u00bboff\u00bb][et_pb_column type=\u00bb2_5&#8243; _builder_version=\u00bb4.4.2&#8243;][et_pb_image src=\u00bbhttps:\/\/luis-barbosa.com\/portafolio\/wp-content\/uploads\/2026\/03\/tuya.png\u00bb _builder_version=\u00bb4.4.2&#8243; height=\u00bb140px\u00bb hover_enabled=\u00bb0&#8243;][\/et_pb_image][\/et_pb_column][et_pb_column type=\u00bb3_5&#8243; _builder_version=\u00bb4.4.2&#8243;][et_pb_post_title meta=\u00bboff\u00bb featured_image=\u00bboff\u00bb _builder_version=\u00bb4.4.2&#8243; title_font=\u00bbLexend Deca|700|||||||\u00bb title_text_align=\u00bbleft\u00bb title_text_color=\u00bb#00bec7&#8243; title_font_size=\u00bb42px\u00bb meta_font=\u00bb|700|||||||\u00bb custom_margin=\u00bb44px||||false|false\u00bb][\/et_pb_post_title][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=\u00bb4.4.2&#8243; custom_padding=\u00bb4px|||||\u00bb][et_pb_column type=\u00bb4_4&#8243; _builder_version=\u00bb4.4.2&#8243;][et_pb_divider color=\u00bb#00BEC7&#8243; _builder_version=\u00bb4.4.2&#8243; custom_padding=\u00bb||0px|||\u00bb][\/et_pb_divider][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=\u00bb1&#8243; admin_label=\u00bbAbout\u00bb module_id=\u00bbquienSoy\u00bb _builder_version=\u00bb4.4.2&#8243; background_color=\u00bb#060809&#8243; use_background_color_gradient=\u00bbon\u00bb background_color_gradient_start=\u00bbrgba(16,49,51,0.19)\u00bb background_color_gradient_end=\u00bb#0c161c\u00bb custom_margin=\u00bb||-29px|||\u00bb custom_padding=\u00bb42px||0px|||\u00bb locked=\u00bboff\u00bb][et_pb_row column_structure=\u00bb2_3,1_3&#8243; _builder_version=\u00bb3.25&#8243; custom_padding=\u00bb1px||5px|||\u00bb locked=\u00bboff\u00bb][et_pb_column type=\u00bb2_3&#8243; _builder_version=\u00bb3.25&#8243; custom_padding=\u00bb|||\u00bb custom_padding__hover=\u00bb|||\u00bb][et_pb_text _builder_version=\u00bb4.4.2&#8243; text_font=\u00bbLexend Deca||||||||\u00bb text_text_color=\u00bb#ffffff\u00bb text_font_size=\u00bb24px\u00bb header_font=\u00bb|600|||||||\u00bb header_text_align=\u00bbleft\u00bb header_text_color=\u00bb#ffffff\u00bb header_font_size=\u00bb37px\u00bb text_orientation=\u00bbcenter\u00bb module_alignment=\u00bbleft\u00bb custom_margin=\u00bb28px|||||\u00bb]<\/p>\n<h1 style=\"color: #00bec7 !important;\">Redise\u00f1o<\/h1>\n<h1>APP M\u00f3vil<\/h1>\n<p>[\/et_pb_text][et_pb_gallery gallery_ids=\u00bb282,298&#8243; fullwidth=\u00bbon\u00bb _builder_version=\u00bb4.4.2&#8243; hover_enabled=\u00bb0&#8243;][\/et_pb_gallery][et_pb_code _builder_version=\u00bb4.4.2&#8243; hover_enabled=\u00bb0&#8243; custom_css_main_element=\u00bb@import url(&#8216;https:\/\/fonts.googleapis.com\/css2?family=Lexend+Deca:wght@400;600&#038;display=swap&#8217;);||||.project-info {||  display: flex;||  flex-wrap: wrap;||  gap: 1.5rem;||  font-family: &#8216;Lexend Deca&#8217;, sans-serif;||  margin: 2rem 0;||}||||.info-item {||  display: flex;||  align-items: center;||  gap: 0.5rem;||  background: rgba(0, 190, 199, 0.1);||  border: 1px solid #00BEC7;||  border-radius: 12px;||  padding: 0.6rem 1rem;||  transition: background 0.3s ease, transform 0.3s ease;||}||||.info-item:hover {||  background: rgba(0, 190, 199, 0.2);||  transform: translateY(-3px);||}||||.icon {||  font-size: 1.2rem;||  color: #00BEC7;||}||||.label {||  font-weight: 600;||  color: #ffffff;||}||||.value {||  color: #bde9e9;||}\u00bb]<\/p>\n<div class=\"project-info\"><!-- [et_pb_line_break_holder] -->  <\/p>\n<div class=\"info-item\"><!-- [et_pb_line_break_holder] -->    <span class=\"icon\">\ud83d\udc64<\/span><!-- [et_pb_line_break_holder] -->    <span class=\"label\">Cliente:<\/span><!-- [et_pb_line_break_holder] -->    <span class=\"value\">Grupo \u00c9xito &#8211; Tarjeta Tuya<\/span><!-- [et_pb_line_break_holder] -->  <\/div>\n<p><!-- [et_pb_line_break_holder] -->  <\/p>\n<div class=\"info-item\"><!-- [et_pb_line_break_holder] -->    <span class=\"icon\">\ud83c\udfe5\ud83c\udfe0<\/span><!-- [et_pb_line_break_holder] -->    <span class=\"label\">Sector:<\/span><!-- [et_pb_line_break_holder] -->    <span class=\"value\">Fintech &#038; Banking<\/span><!-- [et_pb_line_break_holder] -->  <\/div>\n<p><!-- [et_pb_line_break_holder] -->  <\/p>\n<div class=\"info-item\"><!-- [et_pb_line_break_holder] -->    <span class=\"icon\">\ud83d\udcc5<\/span><!-- [et_pb_line_break_holder] -->    <span class=\"label\">Fecha:<\/span><!-- [et_pb_line_break_holder] -->    <span class=\"value\">2020<\/span><!-- [et_pb_line_break_holder] -->  <\/div>\n<p><!-- [et_pb_line_break_holder] -->  <\/p>\n<div class=\"info-item\"><!-- [et_pb_line_break_holder] -->    <span class=\"icon\">\ud83c\udfa8<\/span><!-- [et_pb_line_break_holder] -->    <span class=\"label\">Rol:<\/span><!-- [et_pb_line_break_holder] -->    <span class=\"value\">Dise\u00f1ador UX &#038; UI<\/span><!-- [et_pb_line_break_holder] -->  <\/div>\n<p><!-- [et_pb_line_break_holder] --><\/div>\n<p>[\/et_pb_code][\/et_pb_column][et_pb_column type=\u00bb1_3&#8243; _builder_version=\u00bb3.25&#8243; custom_padding=\u00bb|||\u00bb custom_padding__hover=\u00bb|||\u00bb][et_pb_code _builder_version=\u00bb4.4.2&#8243; hover_enabled=\u00bb0&#8243; custom_css_main_element=\u00bb@import url(&#8216;https:\/\/fonts.googleapis.com\/css2?family=Lexend+Deca:wght@400;600;700&#038;display=swap&#8217;);||||.profile-cards {||  display: flex;||  flex-direction: column;||  gap: 2rem;||  max-width: 1000px;||  margin: 3rem auto;||  font-family: &#8216;Lexend Deca&#8217;, sans-serif;||}||||.card {||  background: linear-gradient(90deg, #003a3d 0%, #001516 100%);||  border: 1px solid #00BEC7;||  border-radius: 16px;||  padding: 1.5rem 2rem;||  box-shadow: 0 6px 14px rgba(0,0,0,0.08);||  color: #ffffff;||  transition: transform 0.3s ease, box-shadow 0.3s ease;||}||||.card:hover {||  transform: translateY(-4px);||  box-shadow: 0 10px 20px rgba(0,0,0,0.15);||}||||.card-header {||  display: flex;||  align-items: center;||  gap: 0.8rem;||  margin-bottom: 1rem;||}||||.card-header .icon {||  font-size: 1.6rem;||}||||.card-header h2 {||  font-size: 1.3rem;||  font-weight: 700;||  color: #00BEC7;||  text-transform: uppercase;||  letter-spacing: 1px;||}||||.chips {||  display: flex;||  flex-wrap: wrap;||  gap: 0.6rem;||}||||.chip {||  background: rgba(0, 190, 199, 0.15);||  border: 1px solid #00BEC7;||  color: #ffffff;||  font-size: 0.9rem;||  padding: 0.4rem 0.9rem;||  border-radius: 9999px;||  transition: background 0.3s ease, color 0.3s ease;||}||||.chip:hover {||  background: #00BEC7;||  color: #001516;||}||\u00bb]<\/p>\n<section class=\"profile-cards\"><!-- [et_pb_line_break_holder] -->  <!-- Contexto & Problema --><!-- [et_pb_line_break_holder] -->  <\/p>\n<div class=\"card\"><!-- [et_pb_line_break_holder] -->    <\/p>\n<div class=\"card-header\"><!-- [et_pb_line_break_holder] -->      <span class=\"icon\">\ud83d\udccc<\/span><!-- [et_pb_line_break_holder] -->      <\/p>\n<h2>Contexto &#038; Problema<\/h2>\n<p><!-- [et_pb_line_break_holder] -->    <\/div>\n<p><!-- [et_pb_line_break_holder] -->    <\/p>\n<p><!-- [et_pb_line_break_holder] -->      Los usuarios enfrentaban fricciones en los flujos de autenticaci\u00f3n y creaci\u00f3n de clave segura, lo que generaba abandono en procesos cr\u00edticos de transacciones y afectaba la confianza en la app TuyaPay. La complejidad de los pasos y la falta de consistencia visual dificultaban la experiencia.<!-- [et_pb_line_break_holder] -->    <\/p>\n<p><!-- [et_pb_line_break_holder] -->  <\/div>\n<p><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  <!-- El Reto UX --><!-- [et_pb_line_break_holder] -->  <\/p>\n<div class=\"card\"><!-- [et_pb_line_break_holder] -->    <\/p>\n<div class=\"card-header\"><!-- [et_pb_line_break_holder] -->      <span class=\"icon\">\ud83c\udfaf<\/span><!-- [et_pb_line_break_holder] -->      <\/p>\n<h2>El Reto UX<\/h2>\n<p><!-- [et_pb_line_break_holder] -->    <\/div>\n<p><!-- [et_pb_line_break_holder] -->    <\/p>\n<p><!-- [et_pb_line_break_holder] -->     Dise\u00f1ar una experiencia de autenticaci\u00f3n \u00e1gil, segura y confiable, que redujera el abandono en los funnels de acceso y transacciones, y que al mismo tiempo transmitiera claridad y confianza en el manejo de datos sensibles.<!-- [et_pb_line_break_holder] -->    <\/p>\n<p><!-- [et_pb_line_break_holder] -->  <\/div>\n<p><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  <!-- Mi Proceso --><!-- [et_pb_line_break_holder] -->  <\/p>\n<div class=\"card\"><!-- [et_pb_line_break_holder] -->    <\/p>\n<div class=\"card-header\"><!-- [et_pb_line_break_holder] -->      <span class=\"icon\">\ud83d\udee0\ufe0f<\/span><!-- [et_pb_line_break_holder] -->      <\/p>\n<h2>Mi Proceso<\/h2>\n<p><!-- [et_pb_line_break_holder] -->    <\/div>\n<p><!-- [et_pb_line_break_holder] -->    <\/p>\n<p><!-- [et_pb_line_break_holder] -->      Investigaci\u00f3n con usuarios: entrevistas y pruebas de usabilidad para identificar fricciones en la creaci\u00f3n de contrase\u00f1as y uso de claves din\u00e1micas..<br \/><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->An\u00e1lisis de datos: m\u00e9tricas de abandono y tiempos de finalizaci\u00f3n para priorizar mejoras en los flujos cr\u00edticos..<br \/><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->Co-creaci\u00f3n de sistema de dise\u00f1o: definici\u00f3n de componentes visuales y patrones de interacci\u00f3n reutilizables, garantizando consistencia entre pantallas y escalabilidad para futuros flujos.<br \/><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->Validaci\u00f3n iterativa: pruebas con usuarios en escenarios reales para ajustar mensajes, tiempos y pasos de autenticaci\u00f3n.<!-- [et_pb_line_break_holder] -->    <\/p>\n<p><!-- [et_pb_line_break_holder] -->  <\/div>\n<p><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  <!-- Soluci\u00f3n de Dise\u00f1o --><!-- [et_pb_line_break_holder] -->  <\/p>\n<div class=\"card\"><!-- [et_pb_line_break_holder] -->    <\/p>\n<div class=\"card-header\"><!-- [et_pb_line_break_holder] -->      <span class=\"icon\">\ud83d\udca1<\/span><!-- [et_pb_line_break_holder] -->      <\/p>\n<h2>Soluci\u00f3n de Dise\u00f1o<\/h2>\n<p><!-- [et_pb_line_break_holder] -->    <\/div>\n<p><!-- [et_pb_line_break_holder] -->    <\/p>\n<p><!-- [et_pb_line_break_holder] -->      Un redise\u00f1o integral de los flujos de autenticaci\u00f3n y clave segura, que incluy\u00f3:<br \/><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->&#8211; Pantallas simplificadas para registro y recuperaci\u00f3n de clave.<br \/><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->&#8211; Integraci\u00f3n de clave din\u00e1mica para transacciones seguras.<br \/><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->&#8211; Mensajes claros y educativos sobre seguridad.<br \/><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->&#8211; Interfaz consistente gracias al sistema de dise\u00f1o co-creado, que permiti\u00f3 escalar la soluci\u00f3n a otros m\u00f3dulos de la app.<!-- [et_pb_line_break_holder] -->    <\/p>\n<p><!-- [et_pb_line_break_holder] -->  <\/div>\n<p><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  <!-- Impacto --><!-- [et_pb_line_break_holder] -->  <\/p>\n<div class=\"card\"><!-- [et_pb_line_break_holder] -->    <\/p>\n<div class=\"card-header\"><!-- [et_pb_line_break_holder] -->      <span class=\"icon\">\ud83d\udcc8<\/span><!-- [et_pb_line_break_holder] -->      <\/p>\n<h2>Impacto<\/h2>\n<p><!-- [et_pb_line_break_holder] -->    <\/div>\n<p><!-- [et_pb_line_break_holder] -->    <\/p>\n<p><!-- [et_pb_line_break_holder] -->      \ud83d\udcc8 Optimizaci\u00f3n de funnels de autenticaci\u00f3n<br \/><!-- [et_pb_line_break_holder] -->\ud83d\ude80 Reducci\u00f3n del abandono en procesos cr\u00edticos<br \/><!-- [et_pb_line_break_holder] -->\ud83d\udd12 Mayor confianza en transacciones seguras<br \/><!-- [et_pb_line_break_holder] -->\u2699\ufe0f Escalabilidad t\u00e9cnica gracias al sistema de dise\u00f1o<!-- [et_pb_line_break_holder] -->    <\/p>\n<p><!-- [et_pb_line_break_holder] -->  <\/div>\n<p><!-- [et_pb_line_break_holder] --><\/section>\n<p><!-- [et_pb_line_break_holder] -->[\/et_pb_code][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=\u00bb4.4.2&#8243; custom_padding=\u00bb||0px|||\u00bb][et_pb_column type=\u00bb4_4&#8243; _builder_version=\u00bb4.4.2&#8243;][et_pb_code _builder_version=\u00bb4.4.2&#8243; custom_css_main_element=\u00bb.badges-container {||  display: flex;||  flex-wrap: wrap;||  justify-content: center;||  gap: 0.5rem;||  margin-bottom: 3.5rem;||}||||.badge {||  display: inline-flex;||  align-items: center;||  gap: 0.4rem;||  padding: 0.4rem 0.9rem;||  border: 1px solid #028085;||  border-radius: 9999px;||  background: rgba(255,255,255,0.32);||  color: #fff;||  font-size: 0.75rem;||  font-weight: 500;||  backdrop-filter: blur(4px);||  transition: all 0.3s ease;||  cursor: default;||}||||.badge:hover {||  border-color: #00BEC7; \/* tono violeta para IA\/innovaci\u00f3n *\/||  color: #00BEC7;||  background: rgba(106,90,205,0.08);||}||||.dot {||  width: 6px;||  height: 6px;||  border-radius: 50%;||  background: #00BEC7; \/* color primario *\/||  flex-shrink: 0;||}||\u00bb locked=\u00bboff\u00bb]<\/p>\n<div class=\"badges-container\"><!-- [et_pb_line_break_holder] --> <span class=\"badge\"><span class=\"dot\"><\/span>UX Design<\/span><!-- [et_pb_line_break_holder] -->  <span class=\"badge\"><span class=\"dot\"><\/span>Research<\/span><!-- [et_pb_line_break_holder] -->  <span class=\"badge\"><span class=\"dot\"><\/span>Prototiping<\/span><!-- [et_pb_line_break_holder] -->  <span class=\"badge\"><span class=\"dot\"><\/span>Workshops<\/span><!-- [et_pb_line_break_holder] -->  <span class=\"badge\"><span class=\"dot\"><\/span>Usert testing<\/span><!-- [et_pb_line_break_holder] --><\/div>\n<p>[\/et_pb_code][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>[et_pb_section fb_built=\u00bb1&#8243; _builder_version=\u00bb4.4.2&#8243; background_color=\u00bb#020202&#8243; custom_padding=\u00bb21px||5px|||\u00bb locked=\u00bboff\u00bb][et_pb_row column_structure=\u00bb2_5,3_5&#8243; _builder_version=\u00bb4.4.2&#8243; custom_margin=\u00bb|auto|22px|auto||\u00bb custom_padding=\u00bb4px||0px|||\u00bb locked=\u00bboff\u00bb][et_pb_column type=\u00bb2_5&#8243; _builder_version=\u00bb4.4.2&#8243;][et_pb_image src=\u00bbhttps:\/\/luis-barbosa.com\/portafolio\/wp-content\/uploads\/2026\/03\/tuya.png\u00bb _builder_version=\u00bb4.4.2&#8243; height=\u00bb140px\u00bb hover_enabled=\u00bb0&#8243;][\/et_pb_image][\/et_pb_column][et_pb_column type=\u00bb3_5&#8243; _builder_version=\u00bb4.4.2&#8243;][et_pb_post_title meta=\u00bboff\u00bb featured_image=\u00bboff\u00bb _builder_version=\u00bb4.4.2&#8243; title_font=\u00bbLexend Deca|700|||||||\u00bb title_text_align=\u00bbleft\u00bb title_text_color=\u00bb#00bec7&#8243; title_font_size=\u00bb42px\u00bb meta_font=\u00bb|700|||||||\u00bb custom_margin=\u00bb44px||||false|false\u00bb][\/et_pb_post_title][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=\u00bb4.4.2&#8243; custom_padding=\u00bb4px|||||\u00bb][et_pb_column type=\u00bb4_4&#8243; _builder_version=\u00bb4.4.2&#8243;][et_pb_divider color=\u00bb#00BEC7&#8243; _builder_version=\u00bb4.4.2&#8243; custom_padding=\u00bb||0px|||\u00bb][\/et_pb_divider][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=\u00bb1&#8243; admin_label=\u00bbAbout\u00bb module_id=\u00bbquienSoy\u00bb _builder_version=\u00bb4.4.2&#8243; background_color=\u00bb#060809&#8243; use_background_color_gradient=\u00bbon\u00bb background_color_gradient_start=\u00bbrgba(16,49,51,0.19)\u00bb background_color_gradient_end=\u00bb#0c161c\u00bb custom_margin=\u00bb||-29px|||\u00bb custom_padding=\u00bb42px||0px|||\u00bb locked=\u00bboff\u00bb][et_pb_row column_structure=\u00bb2_3,1_3&#8243; _builder_version=\u00bb3.25&#8243; custom_padding=\u00bb1px||5px|||\u00bb locked=\u00bboff\u00bb][et_pb_column type=\u00bb2_3&#8243; _builder_version=\u00bb3.25&#8243; custom_padding=\u00bb|||\u00bb custom_padding__hover=\u00bb|||\u00bb][et_pb_text [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":520,"comment_status":"open","ping_status":"closed","template":"","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"project_category":[18],"project_tag":[],"class_list":["post-357","project","type-project","status-publish","has-post-thumbnail","hentry","project_category-fintech-banking"],"_links":{"self":[{"href":"https:\/\/luis-barbosa.com\/portafolio\/wp-json\/wp\/v2\/project\/357","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/luis-barbosa.com\/portafolio\/wp-json\/wp\/v2\/project"}],"about":[{"href":"https:\/\/luis-barbosa.com\/portafolio\/wp-json\/wp\/v2\/types\/project"}],"author":[{"embeddable":true,"href":"https:\/\/luis-barbosa.com\/portafolio\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/luis-barbosa.com\/portafolio\/wp-json\/wp\/v2\/comments?post=357"}],"version-history":[{"count":6,"href":"https:\/\/luis-barbosa.com\/portafolio\/wp-json\/wp\/v2\/project\/357\/revisions"}],"predecessor-version":[{"id":597,"href":"https:\/\/luis-barbosa.com\/portafolio\/wp-json\/wp\/v2\/project\/357\/revisions\/597"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/luis-barbosa.com\/portafolio\/wp-json\/wp\/v2\/media\/520"}],"wp:attachment":[{"href":"https:\/\/luis-barbosa.com\/portafolio\/wp-json\/wp\/v2\/media?parent=357"}],"wp:term":[{"taxonomy":"project_category","embeddable":true,"href":"https:\/\/luis-barbosa.com\/portafolio\/wp-json\/wp\/v2\/project_category?post=357"},{"taxonomy":"project_tag","embeddable":true,"href":"https:\/\/luis-barbosa.com\/portafolio\/wp-json\/wp\/v2\/project_tag?post=357"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}