{"id":131,"date":"2025-10-22T09:14:03","date_gmt":"2025-10-22T07:14:03","guid":{"rendered":"http:\/\/localhost:8888\/portfolio\/?page_id=131"},"modified":"2025-11-07T00:12:46","modified_gmt":"2025-11-06T23:12:46","slug":"rediseno-app-web-caixa-guissona","status":"publish","type":"page","link":"https:\/\/coraciuraneta.com\/index.php\/rediseno-app-web-caixa-guissona\/","title":{"rendered":"REDISE\u00d1O APP &amp; WEB &#8211; CAIXA GUISSONA"},"content":{"rendered":"<style>\nul.wp-block-list {\n    list-style-type: none;\n    padding-left: 1em;\n  }\n\n  ul.wp-block-list li::before {\n    content: \"- \";\n    color: inherit;\n  }\n*{\nmargin: 0.18rem;\n}\n.figma-wrapper {\n  position: relative;\n  width: 100%;\n  padding-top: 40%;\n  overflow: hidden;\n}\n.figma-wrapper iframe {\n  position: absolute;\n  top: 0; left: 0;\n  width: 100%; height: 100%;\n  border: none;\n}\n.p-web{\ndisplay:block;\n}\n@media (max-width: 768px) {\n.figma-wrapper, .p-web{\n display: none !important;\n}\n.wp-site-blocks .img-movil,\n  .wp-site-blocks .img-movil img,\n.wp-site-blocks .p-movil{\ndisplay:block !important;\nvisibility: visible !important;\nopacity: 1 !important;\nheight: 80% !important;\n}\n}\n.img-movil, .p-movil{\ndisplay:none !important;\n}\n<\/style>\n\n\n<p class=\"has-medium-font-size\">Dentro de la asignatura <em>Disseny de la Interacci\u00f3<\/em>, se nos propuso trabajar sobre el caso real de Caixa Guissona, con el objetivo de analizar y redise\u00f1ar su aplicaci\u00f3n m\u00f3vil y su p\u00e1gina web, aplicando metodolg\u00edas y herramientas de dise\u00f1o centrado en el usuario.<\/p>\n\n\n\n<p class=\"has-medium-font-size\">El primer proyecto consisti\u00f3 en un redise\u00f1o de la app, desarrollado en grupo con tres compa\u00f1eras. Posteriormente, realic\u00e9 de forma individual el redise\u00f1o de la web para otra actividad, manteniendo la misma l\u00ednea visual y conceptual para lograr una identidad coherente entre ambas plataformas.<\/p>\n\n\n\n<h2 class=\"wp-block-heading has-x-large-font-size\" style=\"margin-top:var(--wp--preset--spacing--40);margin-bottom:var(--wp--preset--spacing--40)\"><strong>REDISE\u00d1O APP CAIXA GUISSONA <\/strong><\/h2>\n\n\n<div class=\"figma-wrapper\">\n  <iframe src=\"https:\/\/embed.figma.com\/proto\/OspMks0qsSyLGDLMsw2vt6\/Prototipat?node-id=2-5114&#038;p=f&#038;scaling=scale-down&#038;content-scaling=fixed&#038;page-id=0%3A1&#038;starting-point-node-id=2%3A5114&#038;embed-host=shar\" allowfullscreen><\/iframe>\n<\/div>\n\n\n<p class=\"p-web has-medium-font-size\">Prototipado interactivo del redise\u00f1o de la app de Caixa Guissona. Se puede interactuar con todo el prototipado.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large is-resized img-movil\"><a href=\"https:\/\/www.figma.com\/proto\/5uBtaEu8xz5977viayLAox\/APLICACI%C3%93-S%C3%9CDECK?node-id=1-2&amp;starting-point-node-id=1%3A2&amp;t=iHNOigYvYPcnxOrB-1\" target=\"_blank\" rel=\" noreferrer noopener\"><img decoding=\"async\" src=\"https:\/\/coraciuraneta.com\/wp-content\/uploads\/2025\/10\/Mock-Up-Caixa-Guissona-App.png\" alt=\"\" class=\"wp-image-348 img-movil\" style=\"width:auto;height:500px\"\/><\/a><\/figure>\n\n\n\n<p class=\"p-movil has-medium-font-size\">Prototipado interactivo del redise\u00f1o de la app de Caixa Guissona. Se puede interactuar con todo el prototipado si se clica en la imagen.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" style=\"margin-top:var(--wp--preset--spacing--40);margin-bottom:var(--wp--preset--spacing--40)\"><strong>PROCESO CREATIVO <\/strong><\/h3>\n\n\n\n<p class=\"has-medium-font-size\">Durante le desarrollo del proyecto seguimos un proceso completo de dise\u00f1o: <\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"has-medium-font-size\"><strong>An\u00e1lisis heur\u00edstico:<\/strong> Identificamos los principales problemas de usabilidad y navegaci\u00f3n en la app existente.<\/li>\n\n\n\n<li class=\"has-medium-font-size\"><strong>An\u00e1lisis de la competencia:<\/strong> Comparamos diferentes aplicaciones bancarias para detectar buenas pr\u00e1cticas de dise\u00f1o y funcionalidad.<\/li>\n\n\n\n<li class=\"has-medium-font-size\"><strong>Test de guerrilla:<\/strong> Realizamos pruebas r\u00e1pidas de usabilidad sobre un prototipo espec\u00edfico de la app mGol, lo que permit\u00f3 recoger impresiones reales de los usuarios.<\/li>\n\n\n\n<li class=\"has-medium-font-size\"><strong><a href=\"https:\/\/www.figma.com\/design\/rpcpYJMgXLczrpxZyhzjqg\/USER-FLOW?t=zYhBUgGeidrE2yxb-1\" target=\"_blank\" rel=\"noreferrer noopener\">Sketching &amp; User Flow: <\/a><\/strong>Elaboramos los flujos de navegaci\u00f3n y los primeros bocetos para estructurar las pantallas.<\/li>\n\n\n\n<li class=\"has-medium-font-size\"><strong><a href=\"https:\/\/www.figma.com\/design\/aKgdoVZDd9ygVzBapfBiud\/Wireframe-Interactiu?t=x3mzYGRGZIj41zXd-1\" target=\"_blank\" rel=\"noreferrer noopener\">Wireframing:<\/a> <\/strong>Construimos una versi\u00f3n esquem\u00e1tica de la app, definiendo la jerarquia visual y funcionalidad.<\/li>\n\n\n\n<li class=\"has-medium-font-size\"><strong><a href=\"https:\/\/www.figma.com\/design\/qlJ2UFngNi0C69vcrS0Uf6\/Mock-Up?t=x3mzYGRGZIj41zXd-1\" target=\"_blank\" rel=\"noreferrer noopener\">Style Guide &amp; Mockup: <\/a><\/strong>Creamos una gu\u00eda de estilo con la paleta crom\u00e1tica, tipograf\u00eda e iconograf\u00eda, y desarrollamos el dise\u00f1o visual final.<\/li>\n\n\n\n<li class=\"has-medium-font-size\"><strong><a href=\"https:\/\/www.figma.com\/design\/OspMks0qsSyLGDLMsw2vt6\/Prototipat?node-id=0-1&amp;t=2Pb3k9HyFVkiF2J2-1\" target=\"_blank\" rel=\"noreferrer noopener\">Prototipado interactivo:<\/a><\/strong> Generamos un prototipo navegable que permit\u00eda simular la experiencia de uso y validar las mejores propuestas.<\/li>\n<\/ul>\n\n\n\n<p class=\"has-medium-font-size\">El resultado fue una applicaci\u00f3n visualmente m\u00e1s limpia, coherente, m\u00e1s actual y centrada en las necesidades del usuario. <\/p>\n\n\n\n<h2 class=\"wp-block-heading has-x-large-font-size\" style=\"margin-top:var(--wp--preset--spacing--40);margin-bottom:var(--wp--preset--spacing--40)\"><strong>REDISE\u00d1O WEB CAIXA GUISSONA <\/strong><\/h2>\n\n\n<div class=\"figma-wrapper\">\n  <iframe src=\"https:\/\/embed.figma.com\/proto\/RkFpatr3AnOJSvks9RJxjr\/PROTOTIPAT-CAIXAGUISSONA-WEB?node-id=1-5&#038;p=f&#038;scaling=scale-down&#038;content-scaling=fixed&#038;page-id=0%3A1&#038;starting-point-node-id=1%3A5&#038;embed-host=share\" allowfullscreen><\/iframe>\n<\/div>\n\n\n<p class=\"p-web has-medium-font-size\">Prototipado interactivo del redise\u00f1o de la web de Caixa Guissona. Se puede interactuar con todo el prototipado.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large img-movil\"><a href=\"https:\/\/www.figma.com\/proto\/RkFpatr3AnOJSvks9RJxjr\/PROTOTIPAT-CAIXAGUISSONA-WEB?node-id=1-5&amp;starting-point-node-id=1%3A5&amp;t=rTKOY7JIcJ3YOZCF-1\" target=\"_blank\" rel=\" noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"1024\" src=\"https:\/\/coraciuraneta.com\/wp-content\/uploads\/2025\/11\/Mock-Up-Caixa-Guissona-1024x1024.png\" alt=\"\" class=\"wp-image-494 img-movil\" srcset=\"https:\/\/coraciuraneta.com\/wp-content\/uploads\/2025\/11\/Mock-Up-Caixa-Guissona-1024x1024.png 1024w, https:\/\/coraciuraneta.com\/wp-content\/uploads\/2025\/11\/Mock-Up-Caixa-Guissona-300x300.png 300w, https:\/\/coraciuraneta.com\/wp-content\/uploads\/2025\/11\/Mock-Up-Caixa-Guissona-150x150.png 150w, https:\/\/coraciuraneta.com\/wp-content\/uploads\/2025\/11\/Mock-Up-Caixa-Guissona-768x768.png 768w, https:\/\/coraciuraneta.com\/wp-content\/uploads\/2025\/11\/Mock-Up-Caixa-Guissona-1536x1536.png 1536w, https:\/\/coraciuraneta.com\/wp-content\/uploads\/2025\/11\/Mock-Up-Caixa-Guissona-2048x2048.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p class=\"p-movil has-medium-font-size\">Prototipado interactivo del redise\u00f1o de la web de Caixa Guissona. Se puede interactuar con todo el prototipado si se clica en la imagen.<\/p>\n\n\n\n<h3 class=\"wp-block-heading has-large-font-size\" style=\"margin-top:var(--wp--preset--spacing--40);margin-bottom:var(--wp--preset--spacing--40)\"><strong>PROCESO CREATIVO <\/strong><\/h3>\n\n\n\n<p class=\"has-medium-font-size\">Para el desarrollo del prototipado web, segu\u00ed los siguientes pasos: <\/p>\n\n\n\n<ul class=\"wp-block-list has-medium-font-size\">\n<li><strong>An\u00e1lisis heur\u00edstico:<\/strong> Se evalu\u00f3 la web actual para detectar problemas de arquitectura de la informaci\u00f3n y navegaci\u00f3n. <\/li>\n\n\n\n<li><strong><a href=\"https:\/\/www.figma.com\/design\/ulsXtM3Rs0CCfKlVPiYNhy\/WIREFRAME-CAIXAGUISSONA-WEB?node-id=0-1&amp;t=i8n4tF9fNPjxySS7-1\" target=\"_blank\" rel=\"noreferrer noopener\">Wireframe:<\/a><\/strong> Se estableci\u00f3 una nueva jerarqu\u00eda visual, reorganizando los contenidos y simplificando la estructura.<\/li>\n\n\n\n<li><strong><a href=\"https:\/\/www.figma.com\/design\/3BUz0fvWKYNqgMxM7WDrtC\/MOCK-UP-CAIXAGUISSONA-WEB?t=i8n4tF9fNPjxySS7-1\">Mockup:<\/a><\/strong> Se aplic\u00f3 el sisetema visual desarrollado en el proyecto de la app, adapt\u00e1ndolo a formato web para mantener una identidad coherente.<\/li>\n\n\n\n<li><strong><a href=\"https:\/\/www.figma.com\/design\/ULlVJBXWFv6OgvJdrTmOy9\/PROTOTIPAT-CAIXAGUISSONA-WEB?t=i8n4tF9fNPjxySS7-1\" target=\"_blank\" rel=\"noreferrer noopener\">Prototipo interactivo:<\/a><\/strong> Se cre\u00f3 una versi\u00f3n navagable del nuevo dise\u00f1o, validando la experiencia del usuario en distintos dispositivos.<\/li>\n<\/ul>\n\n\n\n<p class=\"has-medium-font-size\">El resultado fue una propuesta digital consistente, moderna y alineada con la identidad de marca, que conecta visualmente la versi\u00f3n m\u00f3vil y la web de Caixa Guissona.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Dentro de la asignatura Disseny de la Interacci\u00f3, se nos propuso trabajar sobre el caso real de Caixa Guissona, con el objetivo de analizar y redise\u00f1ar su aplicaci\u00f3n m\u00f3vil y su p\u00e1gina web, aplicando metodolg\u00edas y herramientas de dise\u00f1o centrado en el usuario. El primer proyecto consisti\u00f3 en un redise\u00f1o de la app, desarrollado en [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-131","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/coraciuraneta.com\/index.php\/wp-json\/wp\/v2\/pages\/131","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/coraciuraneta.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/coraciuraneta.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/coraciuraneta.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/coraciuraneta.com\/index.php\/wp-json\/wp\/v2\/comments?post=131"}],"version-history":[{"count":51,"href":"https:\/\/coraciuraneta.com\/index.php\/wp-json\/wp\/v2\/pages\/131\/revisions"}],"predecessor-version":[{"id":521,"href":"https:\/\/coraciuraneta.com\/index.php\/wp-json\/wp\/v2\/pages\/131\/revisions\/521"}],"wp:attachment":[{"href":"https:\/\/coraciuraneta.com\/index.php\/wp-json\/wp\/v2\/media?parent=131"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}