{"id":1723,"date":"2024-08-25T23:32:21","date_gmt":"2024-08-26T05:32:21","guid":{"rendered":"https:\/\/yaelalvizuri.com\/?post_type=portfolio&#038;p=1723"},"modified":"2025-01-22T09:47:51","modified_gmt":"2025-01-22T15:47:51","slug":"centro-de-ayuda-ine","status":"publish","type":"portfolio","link":"https:\/\/yaelalvizuri.com\/en\/portfolio-item\/centro-de-ayuda-ine\/","title":{"rendered":"Case Study \u2013 Help Center"},"content":{"rendered":"<h3><strong>Development of the \"Help Center\" Platform at INE<\/strong><\/h3>\n<p>Otro de los proyectos en los que trabaj\u00e9 en el Instituto Nacional Electoral (INE), fue el redise\u00f1o del &#8220;Centro de Ayuda&#8221; del INE, una plataforma dise\u00f1ada para dar ayuda a los usuarios durante el proceso electoral. Aqui mi objetivo como <strong>Product Designer<\/strong> fu\u00e9 ayudar a los usuarios a comprender detalles y conceptos bastante complejos que se usaron en las elecciones.<\/p>\n<p>&nbsp;<\/p>\n<h4><strong>Objectives<\/strong><\/h4>\n<p>The idea behind creating the \"Help Center\" was to simplify all electoral information for people who needed to easily understand aspects such as elections, voting, regulations, PREP, and computations, among other similar terms. However, I also wanted to create a platform that went beyond just providing information but could also connect with people from a closer and friendlier approach; this was the main challenge.<\/p>\n<p>&nbsp;<\/p>\n<h4><strong>Phase 1: Research and Benchmarking<\/strong><\/h4>\n<p>To start, I conducted research on websites from both public organizations and private platforms. These sites included SAT, INFONAVIT, IPN, WhatsApp, Microsoft, and Twitter. I paid special attention to the menus, content, navigation, and how elements were distributed and navigated. This deep dive allowed me to identify adjustments that impacted user experience and, subsequently, consider how to apply them in creating the help center.<\/p>\n<p><img fetchpriority=\"high\" decoding=\"async\" class=\"wp-image-1761 alignnone\" src=\"https:\/\/yaelalvizuri.com\/wp-content\/uploads\/2024\/06\/ca1-1024x644.png\" alt=\"\" width=\"628\" height=\"395\" srcset=\"https:\/\/yaelalvizuri.com\/wp-content\/uploads\/2024\/06\/ca1-1024x644.png 1024w, https:\/\/yaelalvizuri.com\/wp-content\/uploads\/2024\/06\/ca1-300x189.png 300w, https:\/\/yaelalvizuri.com\/wp-content\/uploads\/2024\/06\/ca1-768x483.png 768w, https:\/\/yaelalvizuri.com\/wp-content\/uploads\/2024\/06\/ca1.png 1112w\" sizes=\"(max-width: 628px) 100vw, 628px\" \/><\/p>\n<p>&nbsp;<\/p>\n<h4><strong>Phase 2: Response Analysis and Card Sorting<\/strong><\/h4>\n<p>It was important to understand what users were wondering while navigating the PREP, so I conducted guerrilla testing to comprehend the main concerns and needs of users. From this, very interesting topics emerged, such as transparency in the electoral process, the dissemination of results, and the authenticity of the records.<\/p>\n<p>With the questions ready, I conducted a card sorting exercise to understand how users organize information. This exercise was extremely helpful, as it allowed me to create essential categories like Inform Yourself, Transparency, Voting Alternatives, Elections, Preliminary Results, and Final Results.<\/p>\n<p><img decoding=\"async\" class=\"wp-image-1764 alignnone\" src=\"https:\/\/yaelalvizuri.com\/wp-content\/uploads\/2024\/06\/1718007908888-1bf61658-369a-4fef-9b26-635b03fc6b05_1.jpg\" alt=\"\" width=\"361\" height=\"657\" srcset=\"https:\/\/yaelalvizuri.com\/wp-content\/uploads\/2024\/06\/1718007908888-1bf61658-369a-4fef-9b26-635b03fc6b05_1.jpg 563w, https:\/\/yaelalvizuri.com\/wp-content\/uploads\/2024\/06\/1718007908888-1bf61658-369a-4fef-9b26-635b03fc6b05_1-165x300.jpg 165w\" sizes=\"(max-width: 361px) 100vw, 361px\" \/><\/p>\n<p>&nbsp;<\/p>\n<h4><strong>Phase 3: Prototype Creation<\/strong><\/h4>\n<p>This is the sexiest part of the project: creating the prototypes for the new site.<\/p>\n<p>As I mentioned at the beginning, I wanted to move away from a traditional help platform and create something more approachable and friendly. A brainstorming session with the information architecture team later led me to think about designing the help site with a comic style, where everyday situations offer the opportunity to visually explain complex topics in an accessible language. That\u2019s how I met with the design team to create stories that would help users understand key concepts without feeling overwhelmed and then went on to create the prototypes.<\/p>\n<p><img decoding=\"async\" class=\"wp-image-1768 alignnone\" src=\"https:\/\/yaelalvizuri.com\/wp-content\/uploads\/2024\/06\/CA5.png\" alt=\"\" width=\"500\" height=\"281\" srcset=\"https:\/\/yaelalvizuri.com\/wp-content\/uploads\/2024\/06\/CA5.png 797w, https:\/\/yaelalvizuri.com\/wp-content\/uploads\/2024\/06\/CA5-300x169.png 300w, https:\/\/yaelalvizuri.com\/wp-content\/uploads\/2024\/06\/CA5-768x432.png 768w\" sizes=\"(max-width: 500px) 100vw, 500px\" \/><\/p>\n<p>&nbsp;<\/p>\n<h4><strong>Phase 4: Evaluation and Adjustments<\/strong><\/h4>\n<p>Once the prototypes were created, it was important to know if they were easy to navigate. For this, I conducted usability tests. The results of these tests showed that 75% of users found the navigation intuitive and 80% rated their experience as satisfactory, indicating that we are on the right track. The most interesting part of this was that some users shared improvement ideas for organizing the categories to clarify terms. With their feedback, I reorganized the site's architecture, reducing the number of categories.<\/p>\n<h3><strong><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1760 alignnone\" src=\"https:\/\/yaelalvizuri.com\/wp-content\/uploads\/2024\/06\/Flujo-del-Centro-de-Ayuda-2024-V-\u2013-6-1024x850.png\" alt=\"\" width=\"535\" height=\"444\" srcset=\"https:\/\/yaelalvizuri.com\/wp-content\/uploads\/2024\/06\/Flujo-del-Centro-de-Ayuda-2024-V-\u2013-6-1024x850.png 1024w, https:\/\/yaelalvizuri.com\/wp-content\/uploads\/2024\/06\/Flujo-del-Centro-de-Ayuda-2024-V-\u2013-6-300x249.png 300w, https:\/\/yaelalvizuri.com\/wp-content\/uploads\/2024\/06\/Flujo-del-Centro-de-Ayuda-2024-V-\u2013-6-768x637.png 768w, https:\/\/yaelalvizuri.com\/wp-content\/uploads\/2024\/06\/Flujo-del-Centro-de-Ayuda-2024-V-\u2013-6-1536x1274.png 1536w, https:\/\/yaelalvizuri.com\/wp-content\/uploads\/2024\/06\/Flujo-del-Centro-de-Ayuda-2024-V-\u2013-6-1920x1593.png 1920w\" sizes=\"(max-width: 535px) 100vw, 535px\" \/><\/strong><\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1766 alignnone\" src=\"https:\/\/yaelalvizuri.com\/wp-content\/uploads\/2024\/06\/ca4-1024x540.png\" alt=\"\" width=\"631\" height=\"333\" srcset=\"https:\/\/yaelalvizuri.com\/wp-content\/uploads\/2024\/06\/ca4-1024x540.png 1024w, https:\/\/yaelalvizuri.com\/wp-content\/uploads\/2024\/06\/ca4-300x158.png 300w, https:\/\/yaelalvizuri.com\/wp-content\/uploads\/2024\/06\/ca4-768x405.png 768w, https:\/\/yaelalvizuri.com\/wp-content\/uploads\/2024\/06\/ca4.png 1423w\" sizes=\"(max-width: 631px) 100vw, 631px\" \/><\/p>\n<p>&nbsp;<\/p>\n<h4><strong>Phase 5: Implementation of the Help Center<\/strong><\/h4>\n<p>After applying the necessary adjustments, the \"Help Center\" platform was launched in June 2024, helping thousands of users who were seeking information during the electoral process.<\/p>\n<h3><strong><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1770 alignnone\" src=\"https:\/\/yaelalvizuri.com\/wp-content\/uploads\/2024\/06\/CA9-1024x508.png\" alt=\"\" width=\"537\" height=\"266\" srcset=\"https:\/\/yaelalvizuri.com\/wp-content\/uploads\/2024\/06\/CA9-1024x508.png 1024w, https:\/\/yaelalvizuri.com\/wp-content\/uploads\/2024\/06\/CA9-300x149.png 300w, https:\/\/yaelalvizuri.com\/wp-content\/uploads\/2024\/06\/CA9-768x381.png 768w, https:\/\/yaelalvizuri.com\/wp-content\/uploads\/2024\/06\/CA9-1536x761.png 1536w, https:\/\/yaelalvizuri.com\/wp-content\/uploads\/2024\/06\/CA9.png 1884w\" sizes=\"(max-width: 537px) 100vw, 537px\" \/><\/strong><\/h3>\n<p>&nbsp;<\/p>\n<h4><strong>Phase 6: Feedback<\/strong><\/h4>\n<p>Key Data:<\/p>\n<ul>\n<li class=\"translation-block\"><strong>Loading Times<\/strong>: Less than 3 seconds in 95% of interactions.<\/li>\n<li><strong><strong>User Satisfaction<\/strong>:<\/strong>: El 85% calific\u00f3 su experiencia como &#8220;muy buena&#8221; o &#8220;excelente&#8221;.<\/li>\n<li class=\"translation-block\"><strong>Ease of Navigation<\/strong>: 80% of users found the navigation easy to use.<\/li>\n<li class=\"translation-block\"><strong>Recurring Comments<\/strong>: Suggestions for improved data visualization and greater customization of information.<\/li>\n<\/ul>\n<h4><strong>Suggestions Received:<\/strong><\/h4>\n<ol>\n<li class=\"translation-block\"><strong>Optimization of Data Visualization<\/strong>: Improve the clarity and accessibility of graphs and tables.<\/li>\n<li class=\"translation-block\"><strong>Personalization of Results<\/strong>: Allow users to customize how results are presented, based on their preferences and needs.<\/li>\n<li class=\"translation-block\"><strong>Increased Accessibility<\/strong>: Ensure the platform is fully accessible to users with disabilities.<\/li>\n<\/ol>\n<p>&nbsp;<\/p>\n<h4><strong>Conclusion<\/strong><\/h4>\n<p>Working on the INE's \"Help Center\" taught me that design goes beyond aesthetics; every decision must have a clear purpose and address real problems for users. I realized that simplifying complex concepts can make a difference in how users feel when using a platform. Seeing that users felt more secure and less lost while using the new version of the Help Center confirmed that we were on the right path.<\/p>\n<p>This project reaffirmed my commitment to always design with intention and empathy, putting users at the center of every decision. And the most valuable lesson I take away is that good design not only solves problems but can also transform complicated experiences into something clear and friendly.<\/p>\n<p>&nbsp;<\/p>\n<h5><a href=\"https:\/\/ayuda.ine.mx\/2024\/#\/inicio\" target=\"_blank\" rel=\"noopener\"><strong>&gt;&gt; Explore the PREP Help Center by clicking here &lt;&lt;\u00a0<\/strong><\/a><\/h5>\n<p>&nbsp;<\/p>","protected":false},"excerpt":{"rendered":"<p>Desarrollo de la Plataforma &#8220;Centro de Ayuda&#8221; en el INE Otro de los proyectos en los que trabaj\u00e9 en el Instituto Nacional Electoral (INE), fue el redise\u00f1o del &#8220;Centro de Ayuda&#8221; del INE, una plataforma dise\u00f1ada para dar ayuda a los usuarios durante el proceso electoral. Aqui mi objetivo como Product Designer fu\u00e9 ayudar a [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":2011,"menu_order":2,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"portfolio_category":[17,20],"portfolio_field":[],"class_list":["post-1723","portfolio","type-portfolio","status-publish","has-post-thumbnail","hentry","portfolio_category-proyecto","portfolio_category-ux","grve-entry-item"],"_links":{"self":[{"href":"https:\/\/yaelalvizuri.com\/en\/wp-json\/wp\/v2\/portfolio\/1723","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=1723"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/yaelalvizuri.com\/en\/wp-json\/wp\/v2\/media\/2011"}],"wp:attachment":[{"href":"https:\/\/yaelalvizuri.com\/en\/wp-json\/wp\/v2\/media?parent=1723"}],"wp:term":[{"taxonomy":"portfolio_category","embeddable":true,"href":"https:\/\/yaelalvizuri.com\/en\/wp-json\/wp\/v2\/portfolio_category?post=1723"},{"taxonomy":"portfolio_field","embeddable":true,"href":"https:\/\/yaelalvizuri.com\/en\/wp-json\/wp\/v2\/portfolio_field?post=1723"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}