{"id":2496,"date":"2026-03-28T23:28:34","date_gmt":"2026-03-28T23:28:34","guid":{"rendered":"https:\/\/lightgreen-wombat-810778.hostingersite.com\/?page_id=2496"},"modified":"2026-04-27T15:55:25","modified_gmt":"2026-04-27T15:55:25","slug":"ux-ui-design","status":"publish","type":"page","link":"https:\/\/www.castelis.com\/en\/custom-development\/ux-ui-design\/","title":{"rendered":"UX &amp; UI design"},"content":{"rendered":"<section class=\"castelis-hero-banner\" >\n            <div class=\"hero-image-bg\">\n            <img decoding=\"async\" src=\"https:\/\/www.castelis.com\/wp-content\/uploads\/2026\/04\/Infra2-e1777224040971.webp\" alt=\"UX\/UI and product design for your digital projects\">\n        <\/div>\n    \n    <div class=\"container\">\n                        <div class=\"hero-content-wrapper\">\n            <div class=\"hero-content\">\n                                    <h1 class=\"hero-title\">UX\/UI and product design for your digital projects<\/h1>\n                \n                                    <div class=\"hero-description\">\n                        <p>We design user experiences and digital products aligned with your business and technical challenges. Our UX\/UI approach secures the adoption, performance and sustainability of your solutions.<\/p>\n\n                    <\/div>\n                \n                                    <div class=\"hero-cta-buttons\">\n                        <a href=\"#contact\" class=\"btn btn-primary\">\n                            <i class=\"fas fa-chevron-right\"><\/i>\n                            <span> Speak with an expert <\/span>\n                        <\/a>\n\n                                            <\/div>\n                \n                            <\/div>\n        <\/div>\n\n        \n            <\/div>\n<\/section>\n\n\n<nav class=\"castelis-toc \"  data-toc-id=\"toc-69f0ad2f0678b\">\n    <div class=\"container\">\n        <div class=\"toc-wrapper\">\n                            <ul class=\"toc-list\">\n                                                                        <li class=\"toc-item\">\n                                <a href=\"#expertise\" class=\"toc-link\">\n                                    Expertise\n                                <\/a>\n                            <\/li>\n                                                                                                <li class=\"toc-item\">\n                                <a href=\"#methodologie\" class=\"toc-link\">\n                                    Methodology\n                                <\/a>\n                            <\/li>\n                                                                                                <li class=\"toc-item\">\n                                <a href=\"#tech-stack\" class=\"toc-link\">\n                                    Tech stack\n                                <\/a>\n                            <\/li>\n                                                                                                <li class=\"toc-item\">\n                                <a href=\"#garanties\" class=\"toc-link\">\n                                    Guarantees\n                                <\/a>\n                            <\/li>\n                                                                                                <li class=\"toc-item\">\n                                <a href=\"#faq\" class=\"toc-link\">\n                                    FAQ\n                                <\/a>\n                            <\/li>\n                                                                                                <li class=\"toc-item\">\n                                <a href=\"#contact\" class=\"toc-link\">\n                                    Contact\n                                <\/a>\n                            <\/li>\n                                                            <\/ul>\n                    <\/div>\n    <\/div>\n<\/nav>\n\n<section class=\"castelis-cards-panel alignment-vertical bg-black heading-left\"  id=\"expertise\" >\n    <div class=\"container\">\n                    <div class=\"cards-panel-header\">\n                                    <div class=\"cards-panel-heading\">\n                        <span class=\"slash-prefix\">\/<\/span>\n                        <h2>Our UX\/UI &amp; Product expertise<\/h2>\n                    <\/div>\n                                \n                                    <div class=\"cards-panel-description\">\n                        <p>We design interfaces and journeys adapted to complex digital products, to improve usage efficiency and facilitate business adoption.<\/p>\n\n                    <\/div>\n                            <\/div>\n                \n                    <div class=\"cards-grid cards-grid-3\">\n                                    <div class=\"card-item\">\n                                                    \n                            <div class=\"card-icon\">\n                                                                    <img decoding=\"async\" src=\"https:\/\/www.castelis.com\/wp-content\/uploads\/2025\/12\/laptop_7267647_green.svg?ver=1776436860\" alt=\"UX Research\" \/>\n                                                            <\/div>\n                            \n                                                            <h3 class=\"card-title\">UX Research<\/h3>\n                                                        \n                                                            <p class=\"card-description\">Usage analysis, ergonomic audits and user research to identify real needs, friction points and improvement opportunities before design begins.<\/p>\n                                                        \n                                                        \n                                                                        <\/div>\n                                    <div class=\"card-item\">\n                                                    \n                            <div class=\"card-icon\">\n                                                                    <img decoding=\"async\" src=\"https:\/\/www.castelis.com\/wp-content\/uploads\/2025\/12\/laptop_7267647_green.svg?ver=1776436860\" alt=\"Product scoping\" \/>\n                                                            <\/div>\n                            \n                                                            <h3 class=\"card-title\">Product scoping<\/h3>\n                                                        \n                                                            <p class=\"card-description\">Definition of key journeys and functional priorities to align business vision, technical constraints and user expectations.<\/p>\n                                                        \n                                                        \n                                                                        <\/div>\n                                    <div class=\"card-item\">\n                                                    \n                            <div class=\"card-icon\">\n                                                                    <img decoding=\"async\" src=\"https:\/\/www.castelis.com\/wp-content\/uploads\/2025\/12\/laptop_7267647_green.svg?ver=1776436860\" alt=\"Wireframes &amp; UX\" \/>\n                                                            <\/div>\n                            \n                                                            <h3 class=\"card-title\">Wireframes &amp; UX<\/h3>\n                                                        \n                                                            <p class=\"card-description\">Design of structured user journeys to validate usage patterns and effectively prepare development phases.<\/p>\n                                                        \n                                                        \n                                                                        <\/div>\n                                    <div class=\"card-item\">\n                                                    \n                            <div class=\"card-icon\">\n                                                                    <img decoding=\"async\" src=\"https:\/\/www.castelis.com\/wp-content\/uploads\/2025\/12\/laptop_7267647_green.svg?ver=1776436860\" alt=\"UI Design\" \/>\n                                                            <\/div>\n                            \n                                                            <h3 class=\"card-title\">UI Design<\/h3>\n                                                        \n                                                            <p class=\"card-description\">Creation of clear, consistent interfaces aligned with your brand identity, in compliance with ergonomic and accessibility standards.<\/p>\n                                                        \n                                                        \n                                                                        <\/div>\n                                    <div class=\"card-item\">\n                                                    \n                            <div class=\"card-icon\">\n                                                                    <img decoding=\"async\" src=\"https:\/\/www.castelis.com\/wp-content\/uploads\/2025\/12\/laptop_7267647_green.svg?ver=1776436860\" alt=\"Design System\" \/>\n                                                            <\/div>\n                            \n                                                            <h3 class=\"card-title\">Design System<\/h3>\n                                                        \n                                                            <p class=\"card-description\">Building a library of reusable components to ensure consistency, maintainability and scalability of your interfaces.<\/p>\n                                                        \n                                                        \n                                                                        <\/div>\n                            <\/div>\n            <\/div>\n<\/section>\n\n\n<section class=\"castelis-methodology-timeline\"  id=\"methodologie\" >\n    <div class=\"container\">\n                    <h2 class=\"methodology-heading\">\n                <span class=\"slash-prefix\">\/<\/span>\n                Design methodology\n            <\/h2>\n        \n        <div class=\"methodology-content\">\n            \n            <div class=\"methodology-left \">   \n                                    <div class=\"methodology-subheading\">\n                        <p>Our UX\/UI methodology is structured and collaborative. It secures functional choices, facilitates development and guarantees products genuinely adapted to real usage.<\/p>\n\n                    <\/div>\n                                                    <div class=\"timeline-wrapper\">\n                        <div class=\"timeline-line\"><\/div>\n                        \n                                                    <div class=\"timeline-step\">\n                                <div class=\"timeline-step-number\">\n                                    <span>1<\/span>\n                                <\/div>\n                                \n                                <div class=\"timeline-step-content\">\n                                                                            <h3 class=\"timeline-step-title\">Analysis &amp; audit<\/h3>\n                                                                        \n                                                                            <p class=\"timeline-step-description\">Study of the context, users and existing tools to identify project challenges, constraints and opportunities.<\/p>\n                                                                        \n                                                                            <div class=\"timeline-step-tags\">\n                                                                                            <span class=\"timeline-tag\">UX audit<\/span>\n                                                                                            <span class=\"timeline-tag\">Analysis<\/span>\n                                                                                    <\/div>\n                                                                    <\/div>\n                            <\/div>\n                                                    <div class=\"timeline-step\">\n                                <div class=\"timeline-step-number\">\n                                    <span>2<\/span>\n                                <\/div>\n                                \n                                <div class=\"timeline-step-content\">\n                                                                            <h3 class=\"timeline-step-title\">UX scoping<\/h3>\n                                                                        \n                                                                            <p class=\"timeline-step-description\">Definition of user journeys, feature prioritisation and formalisation of functional requirements.<\/p>\n                                                                        \n                                                                            <div class=\"timeline-step-tags\">\n                                                                                            <span class=\"timeline-tag\">Journeys<\/span>\n                                                                                            <span class=\"timeline-tag\">Scoping<\/span>\n                                                                                    <\/div>\n                                                                    <\/div>\n                            <\/div>\n                                                    <div class=\"timeline-step\">\n                                <div class=\"timeline-step-number\">\n                                    <span>3<\/span>\n                                <\/div>\n                                \n                                <div class=\"timeline-step-content\">\n                                                                            <h3 class=\"timeline-step-title\">UX\/UI design<\/h3>\n                                                                        \n                                                                            <p class=\"timeline-step-description\">Creation of wireframes, prototypes and graphical interfaces to validate usage patterns before development.<\/p>\n                                                                        \n                                                                            <div class=\"timeline-step-tags\">\n                                                                                            <span class=\"timeline-tag\">Wireframes<\/span>\n                                                                                            <span class=\"timeline-tag\">UI<\/span>\n                                                                                    <\/div>\n                                                                    <\/div>\n                            <\/div>\n                                                    <div class=\"timeline-step\">\n                                <div class=\"timeline-step-number\">\n                                    <span>4<\/span>\n                                <\/div>\n                                \n                                <div class=\"timeline-step-content\">\n                                                                            <h3 class=\"timeline-step-title\">Validation &amp; testing<\/h3>\n                                                                        \n                                                                            <p class=\"timeline-step-description\">User testing and adjustments to ensure ergonomics, comprehension and interface effectiveness.<\/p>\n                                                                        \n                                                                            <div class=\"timeline-step-tags\">\n                                                                                            <span class=\"timeline-tag\">Testing<\/span>\n                                                                                            <span class=\"timeline-tag\">Adjustments<\/span>\n                                                                                    <\/div>\n                                                                    <\/div>\n                            <\/div>\n                                                    <div class=\"timeline-step\">\n                                <div class=\"timeline-step-number\">\n                                    <span>5<\/span>\n                                <\/div>\n                                \n                                <div class=\"timeline-step-content\">\n                                                                            <h3 class=\"timeline-step-title\">Dev support<\/h3>\n                                                                        \n                                                                            <p class=\"timeline-step-description\">Close collaboration with development teams to guarantee proper UX\/UI integration.<\/p>\n                                                                        \n                                                                            <div class=\"timeline-step-tags\">\n                                                                                            <span class=\"timeline-tag\">Project follow-up<\/span>\n                                                                                    <\/div>\n                                                                    <\/div>\n                            <\/div>\n                                            <\/div>\n                \n                            <\/div>\n\n            \n                    <\/div>\n    <\/div>\n<\/section>\n\n\n<section class=\"castelis-tech-stack\"  id=\"tech-stack\" >\n    <div class=\"container\">\n                    <h2 class=\"tech-stack-heading\">\n                <span class=\"slash-prefix\">\/<\/span>\n                Our UX\/UI design tools\n            <\/h2>\n        \n                    <div class=\"tech-stack-description\">\n                <p>We use recognised professional tools to design, prototype and test interfaces, while ensuring smooth collaboration with development teams and project stakeholders.<\/p>\n\n            <\/div>\n        \n                    <div class=\"tech-stack-tools\">\n                                                            <span class=\"tech-tool\">Figma<\/span>\n                                                                                <span class=\"tech-tool\">Miro<\/span>\n                                                                                <span class=\"tech-tool\">Hotjar<\/span>\n                                                <\/div>\n        \n                    <div class=\"tech-stack-info\">\n                                    <img decoding=\"async\" src=\"https:\/\/www.castelis.com\/wp-content\/uploads\/2025\/12\/Icon-6.svg\" alt=\"Icon\" class=\"info-icon\">\n                                <span class=\"info-text\">Collaborative tools to align design and development teams at every stage.<\/span>\n            <\/div>\n        \n            <\/div>\n<\/section>\n\n\n<section class=\"castelis-content-image frameless\" >\n    <div class=\"container align-items-center\"> \n        \n        <div class=\"order-2 content-wrapper \">\n            \n                        \n                        \n                    <\/div>\n        \n        \n        <div class=\"order-1 image-style-background \">\n                    <\/div>\n    <\/div>\n<\/section>\n\n\n<section class=\"castelis-faq\"  id=\"faq\" >\n    <div class=\"container\">\n        <h2 class=\"faq-title\">\n            <span class=\"slash-prefix\">\/<\/span>\n            <div>Frequently asked questions \u2014 UX\/UI<\/div>\n        <\/h2>\n    <\/div>\n        \n            <div class=\"faq-accordion\">\n                                            \n                <div class=\"faq-item active\">\n                    <div class=\"container\">\n                        <button \n                            class=\"faq-question\" \n                            type=\"button\"\n                            aria-expanded=\"true\"\n                            aria-controls=\"faq-faq-0\"\n                            onclick=\"this.closest('.faq-item').classList.toggle('active'); this.setAttribute('aria-expanded', this.getAttribute('aria-expanded') === 'true' ? 'false' : 'true');\"\n                        >\n                            <h3>What is the difference between UX, UI and product design?<\/h3>\n                            <i class=\"faq-icon\"><\/i>\n                        <\/button>\n                    <\/div>\n                    <div \n                        class=\"faq-answer\" \n                        id=\"faq-faq-0\"\n                        role=\"region\"\n                    >\n                        <div class=\"container\">\n                            <div class=\"faq-answer-content\">\n                                <p>UX concerns the overall experience and usage, UI focuses on the visual interface and interactions, while product design aims to align these dimensions with business, technical and user objectives in a logic of durable solutions.<\/p>\n\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n                                            \n                <div class=\"faq-item \">\n                    <div class=\"container\">\n                        <button \n                            class=\"faq-question\" \n                            type=\"button\"\n                            aria-expanded=\"false\"\n                            aria-controls=\"faq-faq-1\"\n                            onclick=\"this.closest('.faq-item').classList.toggle('active'); this.setAttribute('aria-expanded', this.getAttribute('aria-expanded') === 'true' ? 'false' : 'true');\"\n                        >\n                            <h3>When should UX\/UI be integrated into a digital project?<\/h3>\n                            <i class=\"faq-icon\"><\/i>\n                        <\/button>\n                    <\/div>\n                    <div \n                        class=\"faq-answer\" \n                        id=\"faq-faq-1\"\n                        role=\"region\"\n                    >\n                        <div class=\"container\">\n                            <div class=\"faq-answer-content\">\n                                <p>UX\/UI comes in from the scoping phase to structure journeys, secure functional choices and align the deliverable with real usage. On an existing platform, it helps identify friction points and optimise the experience.<\/p>\n\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n                                            \n                <div class=\"faq-item \">\n                    <div class=\"container\">\n                        <button \n                            class=\"faq-question\" \n                            type=\"button\"\n                            aria-expanded=\"false\"\n                            aria-controls=\"faq-faq-2\"\n                            onclick=\"this.closest('.faq-item').classList.toggle('active'); this.setAttribute('aria-expanded', this.getAttribute('aria-expanded') === 'true' ? 'false' : 'true');\"\n                        >\n                            <h3>Do you only work on website or software creation projects?<\/h3>\n                            <i class=\"faq-icon\"><\/i>\n                        <\/button>\n                    <\/div>\n                    <div \n                        class=\"faq-answer\" \n                        id=\"faq-faq-2\"\n                        role=\"region\"\n                    >\n                        <div class=\"container\">\n                            <div class=\"faq-answer-content\">\n                                <p>No. We work on both creation projects and existing platforms, to improve ergonomics, journey clarity or interface effectiveness.<\/p>\n\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n                                            \n                <div class=\"faq-item \">\n                    <div class=\"container\">\n                        <button \n                            class=\"faq-question\" \n                            type=\"button\"\n                            aria-expanded=\"false\"\n                            aria-controls=\"faq-faq-3\"\n                            onclick=\"this.closest('.faq-item').classList.toggle('active'); this.setAttribute('aria-expanded', this.getAttribute('aria-expanded') === 'true' ? 'false' : 'true');\"\n                        >\n                            <h3>Is UX\/UI useful for internal tools?<\/h3>\n                            <i class=\"faq-icon\"><\/i>\n                        <\/button>\n                    <\/div>\n                    <div \n                        class=\"faq-answer\" \n                        id=\"faq-faq-3\"\n                        role=\"region\"\n                    >\n                        <div class=\"container\">\n                            <div class=\"faq-answer-content\">\n                                <p>Yes. Internal tools benefit greatly from a UX\/UI approach, particularly to improve productivity, reduce errors and facilitate adoption by business users.<\/p>\n\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n                                            \n                <div class=\"faq-item \">\n                    <div class=\"container\">\n                        <button \n                            class=\"faq-question\" \n                            type=\"button\"\n                            aria-expanded=\"false\"\n                            aria-controls=\"faq-faq-4\"\n                            onclick=\"this.closest('.faq-item').classList.toggle('active'); this.setAttribute('aria-expanded', this.getAttribute('aria-expanded') === 'true' ? 'false' : 'true');\"\n                        >\n                            <h3>How does UX\/UI integrate with custom development?<\/h3>\n                            <i class=\"faq-icon\"><\/i>\n                        <\/button>\n                    <\/div>\n                    <div \n                        class=\"faq-answer\" \n                        id=\"faq-faq-4\"\n                        role=\"region\"\n                    >\n                        <div class=\"container\">\n                            <div class=\"faq-answer-content\">\n                                <p>Our designers collaborate continuously with development teams to test interface choices against technical constraints from the outset. This allows feasibility to be validated upstream and interfaces delivered that are directly usable in development.<\/p>\n\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n                    <\/div>\n    <\/section>\n\n\n<section class=\"castelis-contact-form\"  id=\"contact\" >\n    <div class=\"container\">   \n                    <div class=\"contact-tag hashtag-title\">CONTACT<\/div>\n        \n                    <h2 class=\"contact-heading\">Let&#039;s talk about your project<\/h2>\n        \n        \n        <div class=\"contact-wrapper\">\n            \n            <div class=\"contact-form-side\">\n                                    <div class=\"contact-form-container\">\n                        \n\t\t\t\t\t\t<script>\n\t\t\t\t\t\t\twindow.hsFormsOnReady = window.hsFormsOnReady || [];\n\t\t\t\t\t\t\twindow.hsFormsOnReady.push(()=>{\n\t\t\t\t\t\t\t\thbspt.forms.create({\n\t\t\t\t\t\t\t\t\tportalId: 9318812,\n\t\t\t\t\t\t\t\t\tformId: \"312183e0-8b6c-488d-ac79-af4a4fbc82fe\",\n\t\t\t\t\t\t\t\t\ttarget: \"#hbspt-form-1777380655000-5024581048\",\n\t\t\t\t\t\t\t\t\tregion: \"na1\",\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t})});\n\t\t\t\t\t\t<\/script>\n\t\t\t\t\t\t<div class=\"hbspt-form\" id=\"hbspt-form-1777380655000-5024581048\"><\/div>\n                    <\/div>\n                            <\/div>\n\n            \n            <div class=\"contact-sidebar\">\n                <div class=\"sidebar-content\">\n                                            <h3 class=\"sidebar-heading\">Why choose us?<\/h3>\n                    \n                                            <div class=\"reasons-list\">\n                                                            <div class=\"reason-item\">\n                                    <i class=\"green-icon-bg\"><\/i>\n                                    <div class=\"reason-content\">\n                                        <h4 class=\"reason-title\">Technical expertise<\/h4>\n                                        <div class=\"reason-description\">15+ years of experience, AWS\/Azure certifications, modern stack<\/div>\n                                    <\/div>\n                                <\/div>\n                                                            <div class=\"reason-item\">\n                                    <i class=\"green-icon-bg\"><\/i>\n                                    <div class=\"reason-content\">\n                                        <h4 class=\"reason-title\">Proven methodology<\/h4>\n                                        <div class=\"reason-description\">100+ projects delivered, 95% client satisfaction, on-time delivery<\/div>\n                                    <\/div>\n                                <\/div>\n                                                            <div class=\"reason-item\">\n                                    <i class=\"green-icon-bg\"><\/i>\n                                    <div class=\"reason-content\">\n                                        <h4 class=\"reason-title\">Ongoing support<\/h4>\n                                        <div class=\"reason-description\">TMA available, team training, 24\/7 monitoring<\/div>\n                                    <\/div>\n                                <\/div>\n                                                    <\/div>\n                    \n                                            <div class=\"satisfaction-rating\">\n                            <div class=\"rating-display\">\n                                <div class=\"rating-label\">Satisfaction score<\/div>\n                                <div class=\"rating-number\">4.8\/5<\/div>\n                            <\/div>\n                            <div class=\"rating-stars\">\n                                                                                                            <i class=\"fas fa-star\"><\/i>\n                                                                                                                                                <i class=\"fas fa-star\"><\/i>\n                                                                                                                                                <i class=\"fas fa-star\"><\/i>\n                                                                                                                                                <i class=\"fas fa-star\"><\/i>\n                                                                                                                                                <i class=\"fas fa-star-half-alt\"><\/i>\n                                                                                                <\/div>\n                                                    <\/div>\n                                    <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n            <div class=\"contact-form-image\">\n            <img decoding=\"async\" src=\"https:\/\/www.castelis.com\/wp-content\/uploads\/2025\/12\/designer-working-3d-model-2.png\" alt=\"\" \/>\n        <\/div>\n    <\/section>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":2,"featured_media":2412,"parent":2381,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"content-type":"","footnotes":""},"class_list":["post-2496","page","type-page","status-publish","has-post-thumbnail","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.castelis.com\/en\/wp-json\/wp\/v2\/pages\/2496","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.castelis.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.castelis.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.castelis.com\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.castelis.com\/en\/wp-json\/wp\/v2\/comments?post=2496"}],"version-history":[{"count":3,"href":"https:\/\/www.castelis.com\/en\/wp-json\/wp\/v2\/pages\/2496\/revisions"}],"predecessor-version":[{"id":2499,"href":"https:\/\/www.castelis.com\/en\/wp-json\/wp\/v2\/pages\/2496\/revisions\/2499"}],"up":[{"embeddable":true,"href":"https:\/\/www.castelis.com\/en\/wp-json\/wp\/v2\/pages\/2381"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.castelis.com\/en\/wp-json\/wp\/v2\/media\/2412"}],"wp:attachment":[{"href":"https:\/\/www.castelis.com\/en\/wp-json\/wp\/v2\/media?parent=2496"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}