{"id":124,"date":"2026-03-11T11:22:20","date_gmt":"2026-03-11T11:22:20","guid":{"rendered":"https:\/\/thelittlebluedot.com\/portfolio\/?page_id=124"},"modified":"2026-03-21T16:16:13","modified_gmt":"2026-03-21T16:16:13","slug":"wirestudio-e-government-solution","status":"publish","type":"page","link":"https:\/\/thelittlebluedot.com\/portfolio\/wirestudio-e-government-solution\/","title":{"rendered":"wireStudio-e-government solution"},"content":{"rendered":"<div class=\"alignwide-wrap\" data-block=\"group\">\n<div class=\"wp-block-group alignwide\" id=\"top\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<div style=\"height:54px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<div class=\"alignwide-wrap\" data-block=\"columns\">\n<div class=\"wp-block-columns alignwide is-style-stacked-on-tablet\">\n<div class=\"wp-block-column\">\n<div class=\"wp-block-buttons is-horizontal is-content-justification-left is-layout-flex wp-container-core-buttons-is-layout-20be11b6 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-palette-1-background-color has-text-color has-background has-small-font-size has-custom-font-size wp-element-button\" href=\"https:\/\/thelittlebluedot.com\/portfolio\/\" style=\"color:#fefefe\">\u2190 Back<\/a><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n<div style=\"height:54px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<\/div>\n<\/div><\/div>\n\n<div class=\"alignwide-wrap\" data-block=\"columns\">\n<div class=\"wp-block-columns alignwide is-style-stacked-on-tablet\">\n<div class=\"wp-block-column\" style=\"flex-basis:60%\">\n<h1 class=\"wp-block-heading\">wireSTUDIO e-government solution<\/h1>\n\n\n\n<p class=\"has-large-font-size\"><strong>wireSTUDIO<\/strong> is an e-government platform and the leading content management system in Portugal, used by over 90 public sector organisations.<\/p>\n\n\n\n<p class=\"has-small-font-size\"><em>Due to confidentiality constraints, detailed product visuals cannot be shared. This case study focuses on my role in evolving the platform, with a strong emphasis on accessibility and scalable implementation.<\/em><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column\" style=\"flex-basis:15%\"><\/div>\n\n\n\n<div class=\"wp-block-column is-style-default has-very-light-gray-to-cyan-bluish-gray-gradient-background has-background\" style=\"flex-basis:25%\">\n<p><strong>Role<\/strong><br>Design Engineer<\/p>\n\n\n\n<p><strong>Focus<\/strong><br>Accessibility, responsive design, component-based architecture, and long-term product evolution<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-image alignfull size-full is-style-padding-right\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" src=\"https:\/\/thelittlebluedot.com\/portfolio\/wp-content\/uploads\/2026\/03\/wireStudio-final.jpg\" alt=\"Mockup showing websites created with wireStudio and wireStudio interface, a dashboard with editable categories, news, etc. All interface and websites are in Portuguese.\" class=\"wp-image-186\" srcset=\"https:\/\/thelittlebluedot.com\/portfolio\/wp-content\/uploads\/2026\/03\/wireStudio-final.jpg 1920w, https:\/\/thelittlebluedot.com\/portfolio\/wp-content\/uploads\/2026\/03\/wireStudio-final-300x169.jpg 300w, https:\/\/thelittlebluedot.com\/portfolio\/wp-content\/uploads\/2026\/03\/wireStudio-final-1024x576.jpg 1024w, https:\/\/thelittlebluedot.com\/portfolio\/wp-content\/uploads\/2026\/03\/wireStudio-final-768x432.jpg 768w, https:\/\/thelittlebluedot.com\/portfolio\/wp-content\/uploads\/2026\/03\/wireStudio-final-1536x864.jpg 1536w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/figure>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<div class=\"alignwide-wrap\" data-block=\"columns\">\n<div class=\"wp-block-columns alignwide\">\n<div class=\"wp-block-column\">\n<h2 class=\"wp-block-heading\" style=\"border-left-color:var(--wp--preset--color--palette-1);border-left-style:solid;border-left-width:5px;padding-top:0;padding-left:var(--wp--preset--spacing--20)\">CONTEXT<\/h2>\n<\/div>\n\n\n\n<div class=\"wp-block-column\">\n<p><strong>wireSTUDIO <\/strong>is one of the core <strong>SaaS products<\/strong> developed by Wiremaze, used by the majority of municipalities in Portugal.<\/p>\n\n\n\n<p>Given the complexity of public sector information architecture, alongside strict accessibility and data protection requirements, the platform needed to continuously evolve to meet growing demands.<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<div class=\"alignwide-wrap\" data-block=\"columns\">\n<div class=\"wp-block-columns alignwide\">\n<div class=\"wp-block-column\">\n<h2 class=\"wp-block-heading\" style=\"border-left-color:var(--wp--preset--color--palette-1);border-left-style:solid;border-left-width:5px;padding-top:0;padding-left:var(--wp--preset--spacing--20)\">PROBLEM<\/h2>\n<\/div>\n\n\n\n<div class=\"wp-block-column\">\n<p>When I joined in 2014, the product was still in its early stages, and responsive web design was just emerging.<\/p>\n\n\n\n<p>Over more than 8 years working on the platform, the key challenges were:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Scalability.<\/strong> How to speed up implementation, standardise the frontend, and support faster delivery across multiple clients.<\/li>\n\n\n\n<li><strong>Accessibility.<\/strong> Ensuring Web Content Accessibility Guidelines \u2013 WCAG 2.1 AA compliance across both the CMS and user-facing websites.<\/li>\n\n\n\n<li><strong>Team growth.<\/strong> Onboarding and mentoring junior UX and frontend designers within a complex product environment.<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<\/div>\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<div class=\"alignwide-wrap\" data-block=\"columns\">\n<div class=\"wp-block-columns alignwide\">\n<div class=\"wp-block-column\">\n<h2 class=\"wp-block-heading\" style=\"border-left-color:var(--wp--preset--color--palette-1);border-left-style:solid;border-left-width:5px;padding-top:0;padding-left:var(--wp--preset--spacing--20)\">SOLUTION<\/h2>\n<\/div>\n\n\n\n<div class=\"wp-block-column\">\n<h3 class=\"wp-block-heading\">Scalability<\/h3>\n\n\n\n<p>With the rise of mobile usage, the platform needed to quickly adapt to responsive design.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>I <strong>co-led the migration<\/strong> of the frontend from custom CSS to a component-based architecture using Foundation. This improved UI consistency, enabled reuse of modular components, and significantly increased development efficiency.<\/li>\n\n\n\n<li>I also contributed to the <strong>design and implementation of reusable UI components <\/strong>to support scalability across projects.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Accessibility improvements<\/h3>\n\n\n\n<p>Accessibility was a core requirement for public sector products.<\/p>\n\n\n\n<p>Websites built with wireSTUDIO consistently ranked in the top 10 of the Portuguese Municipalities Online Presence Index (IPIC). I contributed to this by:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Continuously <strong>improving accessibility<\/strong> of the user-facing platform.<\/li>\n\n\n\n<li>Improving the platform itself and <strong>making accessibility more achievable by content managers<\/strong>. For example:\n<ul class=\"wp-block-list\">\n<li>designing input fields for video titles and transcript uploads;<\/li>\n\n\n\n<li>enabling accessible drag-and-drop workflows with proper labels and WAI-ARIA guidance;<\/li>\n\n\n\n<li>introducing fields for alt text on images.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p>I also conducted accessibility and responsiveness testing to ensure compliance and quality.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Team growth<\/h3>\n\n\n\n<p>I <strong>mentored<\/strong> junior designers and frontend developers through design feedbacks, code reviews, and hands-on guidance, helping them adopt best practices in accessibility, component-based design, and frontend implementation.<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<div class=\"alignwide-wrap\" data-block=\"columns\">\n<div class=\"wp-block-columns alignwide\">\n<div class=\"wp-block-column\">\n<h2 class=\"wp-block-heading\" style=\"border-left-color:var(--wp--preset--color--palette-1);border-left-style:solid;border-left-width:5px;padding-top:0;padding-left:var(--wp--preset--spacing--20);text-transform:uppercase\">Role, Tools &amp; technical skills<\/h2>\n<\/div>\n\n\n\n<div class=\"wp-block-column\">\n<p>I worked at the <strong>intersection<\/strong> of <strong>design<\/strong> and <strong>engineering<\/strong>, translating UX decisions into scalable, production-ready frontend solutions.<\/p>\n\n\n\n<p>I worked as part of a <strong>cross-functional<\/strong> team, closely collaborating with the <strong>Lead Product Designer<\/strong> and <strong>backend engineers<\/strong>.<\/p>\n\n\n\n<p><strong>Tools and technical skills<\/strong>: Adobe Illustrator, HTML5, CSS3, SCSS, Foundation, JavaScript, Ruby on Rails, Git, GitLab, accessibility testing.<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n<div class=\"alignwide-wrap\" data-block=\"columns\">\n<div class=\"wp-block-columns alignwide\">\n<div class=\"wp-block-column\">\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"has-text-align-right is-style-uppercase has-palette-1-color has-text-color has-link-color wp-elements-1566d590796b49291b57800f843f116c\"><strong><a href=\"#top\">Back to top<\/a><\/strong><\/p>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<\/div>\n<\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"<div class=\"entry-summary\">\n<p>\n\t<a href=\"https:\/\/webmandesign.github.io\/docs\/michelle\/#posts-excerpt\">This is a page\/post excerpt text.<\/a><br \/>\n\tLorem dolor sit amet adipiscing elit gravida, enim curabitur sagittis magna molestie rutrum nostra viverra.\n<\/p>\n<\/div>\n<div class=\"link-more-container\"><a href=\"https:\/\/thelittlebluedot.com\/portfolio\/wirestudio-e-government-solution\/\" class=\"link-more\" aria-label=\"Continue reading wireStudio-e-government solution\">Continue reading&hellip;<\/a><\/div>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"templates\/no-intro-content-only.php","meta":{"inline_featured_image":false,"footnotes":""},"class_list":["post-124","page","type-page","status-publish","hentry","entry","entry-type-page"],"_links":{"self":[{"href":"https:\/\/thelittlebluedot.com\/portfolio\/wp-json\/wp\/v2\/pages\/124","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thelittlebluedot.com\/portfolio\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/thelittlebluedot.com\/portfolio\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/thelittlebluedot.com\/portfolio\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/thelittlebluedot.com\/portfolio\/wp-json\/wp\/v2\/comments?post=124"}],"version-history":[{"count":22,"href":"https:\/\/thelittlebluedot.com\/portfolio\/wp-json\/wp\/v2\/pages\/124\/revisions"}],"predecessor-version":[{"id":339,"href":"https:\/\/thelittlebluedot.com\/portfolio\/wp-json\/wp\/v2\/pages\/124\/revisions\/339"}],"wp:attachment":[{"href":"https:\/\/thelittlebluedot.com\/portfolio\/wp-json\/wp\/v2\/media?parent=124"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}