{"id":1747,"date":"2024-08-23T01:38:16","date_gmt":"2024-08-23T07:38:16","guid":{"rendered":"https:\/\/yaelalvizuri.com\/?post_type=portfolio&#038;p=1747"},"modified":"2025-01-22T09:48:39","modified_gmt":"2025-01-22T15:48:39","slug":"pagina-alterna-ine","status":"publish","type":"portfolio","link":"https:\/\/yaelalvizuri.com\/en\/portfolio-item\/pagina-alterna-ine\/","title":{"rendered":"Case Study \u2013 Alternate Page"},"content":{"rendered":"<h3>Redise\u00f1o de la P\u00e1gina Alterna del Portal INE para las Elecciones 2024<\/h3>\n<h3><\/h3>\n<p>&nbsp;<\/p>\n<h4><strong>Introducci\u00f3n al Problema de Dise\u00f1o<\/strong><\/h4>\n<p>Una de las encomiendas cuando estuve en el INE como <strong>Product Designer<\/strong> fue redise\u00f1ar la p\u00e1gina alterna. Esta p\u00e1gina es important\u00edsima porque se activa durante los periodos electorales para que los usuarios puedan tener acceso a informaci\u00f3n crucial seg\u00fan el momento de la elecci\u00f3n.<\/p>\n<p>Mi objetivo fue asegurar que la p\u00e1gina no solo fuera funcional y accesible, tambi\u00e9n deb\u00eda de ser ligera y r\u00e1pida para garantizar una experiencia satisfactoria, permitiendio encontrar la informaci\u00f3n que necesitaban de manera r\u00e1pida y eficiente.<\/p>\n<h4><strong>Metodolog\u00eda: Design Thinking en Acci\u00f3n<\/strong><\/h4>\n<p>Para abordar este proyecto, me gui\u00e9 con la metodolog\u00eda Design Thinking, realizando el proceso creativo a trav\u00e9s de sus cinco fases: Empatizar, Definir, Idear, Prototipar y Testear.<\/p>\n<hr \/>\n<h3><strong>Fase 1: Empatizar<\/strong><\/h3>\n<p><strong>Investigaci\u00f3n de Usuarios y An\u00e1lisis de Datos<\/strong><\/p>\n<p>El primer paso fue comprender profundamente a los usuarios y sus necesidades. Realic\u00e9 un an\u00e1lisis exhaustivo de las p\u00e1ginas alternas de a\u00f1os anteriores (2018 y 2021) y de procesos espec\u00edficos como la Consulta Popular y la Revocaci\u00f3n de Mandato. Utilizando Google Analytics, estudi\u00e9 el comportamiento de los usuarios, identificando patrones y \u00e1reas problem\u00e1ticas.<\/p>\n<p><strong>Insights Clave:<\/strong><\/p>\n<ul>\n<li><strong>Visitas y Tiempo de Carga:<\/strong> Identifiqu\u00e9 las p\u00e1ginas m\u00e1s visitadas y analic\u00e9 los tiempos de carga. Por ejemplo, en 2018, la p\u00e1gina de inicio y la secci\u00f3n de &#8220;Elecciones 2018&#8221; fueron las m\u00e1s frecuentadas.<\/li>\n<li style=\"text-align: left;\"><strong>Relevancia del Contenido:<\/strong> Detect\u00e9 la necesidad de actualizar el contenido con informaci\u00f3n real en lugar de textos de relleno, mejorando as\u00ed la utilidad y relevancia del sitio.<\/li>\n<\/ul>\n<p style=\"text-align: center;\"><iframe style=\"border: 1px solid rgba(0, 0, 0, 0.1);\" src=\"https:\/\/www.figma.com\/embed?embed_host=share&amp;url=https%3A%2F%2Fwww.figma.com%2Fdesign%2F7wnkKrPmTjYJRHQyeViuRH%2FP%25C3%25A1gina-Alterna-INE%3Fnode-id%3D25-755%26t%3DNakxdegGCG8QfahZ-1\" width=\"800\" height=\"450\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<h3><strong>Fase 2: Definir<\/strong><\/h3>\n<p><strong>Problemas Identificados y Oportunidades<\/strong><\/p>\n<p>Con los datos recopilados y el entendimiento con los usuarios, defin\u00ed los problemas a resolver:<\/p>\n<ul>\n<li><strong>Accesibilidad y Usabilidad:<\/strong> Era necesario mejorar la accesibilidad de informaci\u00f3n cr\u00edtica, como la ubicaci\u00f3n de casillas y el estatus de credenciales, informaci\u00f3n de candidatos y\u00a0 sus propuestas e informaci\u00f3n sobre el Programa de Resultados Preeliminares (PREP)<\/li>\n<li><strong>Carga de Informaci\u00f3n:<\/strong> Se deb\u00eda reducir la saturaci\u00f3n de contenido para mejorar la velocidad de carga de la p\u00e1gina.<\/li>\n<li><strong>Interacci\u00f3n y Compromiso:<\/strong> Tambi\u00e9n se necesitaba aumentar la interacci\u00f3n del usuario, esto se lograr\u00eda con un dise\u00f1o intuitivo y llamados a la acci\u00f3n muy claros.<\/li>\n<\/ul>\n<h3><strong>Fase 3: Idear<\/strong><\/h3>\n<p><strong>Generaci\u00f3n de Soluciones y Propuestas<\/strong><\/p>\n<p>En esta fase, gener\u00e9 diversas ideas para abordar los problemas identificados. Hic\u00e9 sesiones de brainstorming con el equipo de arquitectura y entre todos pensamos en los elementos necesarios en la interfaz tanto para dispositivos m\u00f3viles como para escritorio.<\/p>\n<p><strong>Propuestas Clave:<\/strong><\/p>\n<ul>\n<li><strong>Interfaz Modular:<\/strong> Dise\u00f1ar una interfaz modular que permita cambios din\u00e1micos en el contenido seg\u00fan la etapa del proceso electoral.<\/li>\n<li><strong>Llamado a la Acci\u00f3n:<\/strong> Incluir botones y enlaces con llamados a la acci\u00f3n claros, sencillos y directos.<\/li>\n<li><strong>Accesibilidad Mejorada:<\/strong> Utilizar iconos y globos de ayuda para explicar t\u00e9rminos t\u00e9cnicos y facilitar la navegaci\u00f3n.<\/li>\n<\/ul>\n<h3>Fase 4: Prototipar<\/h3>\n<p><strong>Creaci\u00f3n de Wireframes, prototi\u00f3s y Diagramas de Flujo<\/strong><\/p>\n<p>Mi parte favorita, realizar los wireframes con los elementos sugeridos y en un segundo momento, los prototipos.<\/p>\n<p style=\"text-align: center;\"><iframe style=\"border: 1px solid rgba(0, 0, 0, 0.1);\" src=\"https:\/\/www.figma.com\/embed?embed_host=share&amp;url=https%3A%2F%2Fwww.figma.com%2Fdesign%2F7wnkKrPmTjYJRHQyeViuRH%2FP%25C3%25A1gina-Alterna-INE%3Fnode-id%3D0-1%26t%3DNakxdegGCG8QfahZ-1\" width=\"800\" height=\"450\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<p><img fetchpriority=\"high\" decoding=\"async\" class=\" wp-image-1783 alignnone aligncenter\" src=\"https:\/\/yaelalvizuri.com\/wp-content\/uploads\/2024\/06\/pa2.png\" alt=\"\" width=\"195\" height=\"417\" srcset=\"https:\/\/yaelalvizuri.com\/wp-content\/uploads\/2024\/06\/pa2.png 413w, https:\/\/yaelalvizuri.com\/wp-content\/uploads\/2024\/06\/pa2-140x300.png 140w\" sizes=\"(max-width: 195px) 100vw, 195px\" \/><\/p>\n<p style=\"text-align: center;\"><a href=\"https:\/\/xd.adobe.com\/view\/7ee6c3ab-e954-4345-698e-b8c277820a8d-08d7\/?fullscreen\" target=\"_blank\" rel=\"noopener\">Ver prototipo m\u00f3vil<\/a> | <a href=\"https:\/\/xd.adobe.com\/view\/31226cfe-2e9e-4617-5a29-3e455cd4a2f9-4713\/?fullscreen\" target=\"_blank\" rel=\"noopener\">Ver prototipo de escritorio<\/a><br \/>\n(Contrase\u00f1a: PREP_pef_2024)<\/p>\n<ul>\n<li><strong>Elementos Constantes<\/strong>:\u00a0Me asegur\u00e9 de que la informaci\u00f3n sobre la ubicaci\u00f3n de casillas y detalles de los candidatos se mantuviera siempre visible y accesible. Reemplac\u00e9 todo el texto de relleno con informaci\u00f3n real y relevante para que los usuarios pudieran evaluar r\u00e1pidamente su efectividad.<\/li>\n<li><strong>Jerarqu\u00eda de la Informaci\u00f3n<\/strong>: Llegu\u00e9 a la conclusi\u00f3n de que una jerarqu\u00eda clara era fundamental. As\u00ed que utilic\u00e9 diferentes tama\u00f1os y estilos de fuente para separar la informaci\u00f3n de manera que los t\u00e9rminos t\u00e9cnicos y procesos se explicaran f\u00e1cilmente y no resultaran confusos.<\/li>\n<li><strong>Interacci\u00f3n del Usuario<\/strong>: Pens\u00e9 en c\u00f3mo facilitar la vida de los usuarios al buscar informaci\u00f3n. Por eso, dise\u00f1\u00e9 interacciones que simplificaran la localizaci\u00f3n de casillas y el acceso a la informaci\u00f3n de los candidatos, fomentando la participaci\u00f3n electoral.<\/li>\n<\/ul>\n<p><strong>Elementos del Prototipo:<\/strong><\/p>\n<ul>\n<li><strong>Navegaci\u00f3n Intuitiva:<\/strong> Me asegur\u00e9 de que el diagrama de flujo mostrara una navegaci\u00f3n clara y accesible, guiando al usuario a trav\u00e9s de la informaci\u00f3n m\u00e1s relevante en cada etapa del proceso electoral.<\/li>\n<li><strong>Dise\u00f1o Visual:<\/strong> Llegu\u00e9 a la conclusi\u00f3n de que era clave mantener una jerarqu\u00eda visual bien definida. As\u00ed que dise\u00f1\u00e9 los prototipos para que los elementos clave del contenido estuvieran siempre visibles y accesibles seg\u00fan la temporalidad de la elecci\u00f3n. Todo el texto de relleno fue reemplazado por informaci\u00f3n real y \u00fatil para maximizar la efectividad.<\/li>\n<\/ul>\n<h3>Fase 5: Testear<\/h3>\n<p><strong>Pruebas de Usuario y Refinamiento<\/strong><\/p>\n<p>Para asegurarme de que las ideas implementadas realmente cumpl\u00edan con lo que necesitaban los usuarios, llev\u00e9 a cabo pruebas de usuario. Me asegur\u00e9 de recopilar feedback valioso para entender qu\u00e9 funcionaba bien y qu\u00e9 aspectos deb\u00edamos ajustar para optimizar la experiencia.<\/p>\n<p><strong>Resultados de las Pruebas:<\/strong><\/p>\n<ul>\n<li><strong>Claridad y Comprensi\u00f3n:<\/strong> Me di cuenta de que los usuarios encontraban m\u00e1s f\u00e1cil y r\u00e1pido acceder a la informaci\u00f3n cr\u00edtica. El 75% de los usuarios experiment\u00f3 una navegaci\u00f3n m\u00e1s intuitiva y el 80% calific\u00f3 su experiencia como satisfactoria.<\/li>\n<li><strong>Interacci\u00f3n Mejorada:<\/strong> Tambi\u00e9n not\u00e9 un aumento notable en la interacci\u00f3n con elementos clave de la p\u00e1gina, como la b\u00fasqueda de la ubicaci\u00f3n de casillas y la informaci\u00f3n sobre candidatos. Esto me confirm\u00f3 que los cambios realizados realmente mejoraron la utilidad y el atractivo de la p\u00e1gina para los usuarios.<\/li>\n<\/ul>\n<hr \/>\n<h3>Resultados Finales y Conclusi\u00f3n<\/h3>\n<p>&nbsp;<\/p>\n<p><img decoding=\"async\" class=\"wp-image-1795 aligncenter\" src=\"https:\/\/yaelalvizuri.com\/wp-content\/uploads\/2024\/06\/pa3-1024x521.png\" alt=\"\" width=\"596\" height=\"303\" srcset=\"https:\/\/yaelalvizuri.com\/wp-content\/uploads\/2024\/06\/pa3-1024x521.png 1024w, https:\/\/yaelalvizuri.com\/wp-content\/uploads\/2024\/06\/pa3-300x153.png 300w, https:\/\/yaelalvizuri.com\/wp-content\/uploads\/2024\/06\/pa3-768x391.png 768w, https:\/\/yaelalvizuri.com\/wp-content\/uploads\/2024\/06\/pa3-1536x782.png 1536w, https:\/\/yaelalvizuri.com\/wp-content\/uploads\/2024\/06\/pa3.png 1867w\" sizes=\"(max-width: 596px) 100vw, 596px\" \/><\/p>\n<div class=\"flex max-w-full flex-col flex-grow\">\n<div class=\"min-h-[20px] text-message flex w-full flex-col items-end gap-2 break-words [.text-message+&amp;]:mt-5 overflow-x-auto whitespace-normal\" dir=\"auto\" data-message-author-role=\"assistant\" data-message-id=\"1c1a4603-a282-408b-a1cb-8a26a26f9234\">\n<div class=\"flex w-full flex-col gap-1 empty:hidden first:pt-[3px]\">\n<div class=\"markdown prose w-full break-words dark:prose-invert light\">\n<p>Redise\u00f1ar la p\u00e1gina alterna del INE para las elecciones de 2024 fue realmente una traves\u00eda llena de desaf\u00edos y lecciones. Desde el principio, quise que esta p\u00e1gina no solo fuera m\u00e1s r\u00e1pida y f\u00e1cil de usar, sino que de verdad ayudara a la gente a encontrar la informaci\u00f3n que necesitaban, especialmente en los momentos m\u00e1s estresantes de las elecciones. Para ser sincero, hubo muchos d\u00edas en los que los problemas parec\u00edan nunca acabar, y las soluciones se sent\u00edan bastante limitadas, pero justamente en esos momentos dif\u00edciles, despu\u00e9s de despejarme un rato, es donde suced\u00eda la magia.<\/p>\n<p>Cada cambio y cada peque\u00f1a mejora que hice ten\u00eda un objetivo claro: que nadie se sintiera perdido buscando lo que necesitaba. De hecho, ver c\u00f3mo la p\u00e1gina tuvo m\u00e1s de 1,900,000 visitas en el primer mes fue como recibir un gran reconocimiento al esfuerzo realizado.<\/p>\n<p>Me queda la satisfacci\u00f3n de saber que no solo ayudamos a que las personas navegaran con mayor facilidad, sino que tambi\u00e9n se logr\u00f3 que confiaran m\u00e1s en el proceso electoral.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p>&nbsp;<\/p>\n<div class=\"mt-1 flex gap-3 empty:hidden -ml-2\">\n<div class=\"items-center justify-start rounded-xl p-1 flex\">\n<div class=\"flex items-center\">\n<div class=\"flex\"><\/div>\n<div class=\"flex items-center pb-0\">\n<div class=\"[&amp;_svg]:h-full [&amp;_svg]:w-full icon-md h-4 w-4\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<h5 style=\"text-align: center;\"><strong><a href=\"https:\/\/web.archive.org\/web\/20240602003516\/https:\/\/www.ine.mx\/#\/\" target=\"_blank\" rel=\"noopener\">&gt;&gt; Navega en la p\u00e1gina alterna dando click aqui &lt;&lt;<\/a><\/strong><\/h5>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Redise\u00f1o de la P\u00e1gina Alterna del Portal INE para las Elecciones 2024 &nbsp; Introducci\u00f3n al Problema de Dise\u00f1o Una de las encomiendas cuando estuve en el INE como Product Designer fue redise\u00f1ar la p\u00e1gina alterna. Esta p\u00e1gina es important\u00edsima porque se activa durante los periodos electorales para que los usuarios puedan tener acceso a informaci\u00f3n [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":2015,"menu_order":2,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"portfolio_category":[17,21,20],"portfolio_field":[],"class_list":["post-1747","portfolio","type-portfolio","status-publish","has-post-thumbnail","hentry","portfolio_category-proyecto","portfolio_category-study-case","portfolio_category-ux","grve-entry-item"],"_links":{"self":[{"href":"https:\/\/yaelalvizuri.com\/en\/wp-json\/wp\/v2\/portfolio\/1747","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/yaelalvizuri.com\/en\/wp-json\/wp\/v2\/portfolio"}],"about":[{"href":"https:\/\/yaelalvizuri.com\/en\/wp-json\/wp\/v2\/types\/portfolio"}],"author":[{"embeddable":true,"href":"https:\/\/yaelalvizuri.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/yaelalvizuri.com\/en\/wp-json\/wp\/v2\/comments?post=1747"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/yaelalvizuri.com\/en\/wp-json\/wp\/v2\/media\/2015"}],"wp:attachment":[{"href":"https:\/\/yaelalvizuri.com\/en\/wp-json\/wp\/v2\/media?parent=1747"}],"wp:term":[{"taxonomy":"portfolio_category","embeddable":true,"href":"https:\/\/yaelalvizuri.com\/en\/wp-json\/wp\/v2\/portfolio_category?post=1747"},{"taxonomy":"portfolio_field","embeddable":true,"href":"https:\/\/yaelalvizuri.com\/en\/wp-json\/wp\/v2\/portfolio_field?post=1747"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}