{"title":"Website UX\/UI","description":"\u003cp\u003eFoxar Athon Website UX\/UI services and optional add-ons from the Q4 2026 rate card.\u003c\/p\u003e","products":[{"product_id":"corporate-website-ux-ui-design","title":"Corporate Website UX\/UI Design","description":"\u003cp\u003e\u003cstrong\u003eService fee:\u003c\/strong\u003e RM12,000 per website; up to 5 unique page templates\u003c\/p\u003e\u003cp\u003eUX planning and responsive interface design for a conversion-focused corporate or B2B website\u003c\/p\u003e\u003ch3\u003eFinal deliverable\u003c\/h3\u003e\u003cul\u003e\n\u003cli\u003e\n\u003cstrong\u003eFinal output:\u003c\/strong\u003e Figma design + prototype + handoff\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eAllowance:\u003c\/strong\u003e Up to 5 unique page templates\u003c\/li\u003e\n\u003c\/ul\u003e\u003ch3\u003eDetailed scope of work\u003c\/h3\u003e\u003col\u003e\n\u003cli\u003e\u003cp\u003e\u003cstrong\u003eDiscovery Session\u003c\/strong\u003e\u003cbr\u003eReview the business objective, audience, services, website requirements, existing materials and intended conversion actions\u003cbr\u003e\u003cstrong\u003eOutput:\u003c\/strong\u003e Discovery notes\u003cbr\u003e\u003cstrong\u003eAllowance:\u003c\/strong\u003e 1 session, up to 90 minutes\u003c\/p\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cp\u003e\u003cstrong\u003eExisting Website Review\u003c\/strong\u003e\u003cbr\u003eReview the existing website’s structure, content hierarchy, navigation and visible usability issues\u003cbr\u003e\u003cstrong\u003eOutput:\u003c\/strong\u003e Current-state observations\u003cbr\u003e\u003cstrong\u003eAllowance:\u003c\/strong\u003e 1 website\u003c\/p\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cp\u003e\u003cstrong\u003eReference Review\u003c\/strong\u003e\u003cbr\u003eReview relevant competitor and reference websites to identify useful UX and design patterns\u003cbr\u003e\u003cstrong\u003eOutput:\u003c\/strong\u003e Reference observations\u003cbr\u003e\u003cstrong\u003eAllowance:\u003c\/strong\u003e Up to 5 websites\u003c\/p\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cp\u003e\u003cstrong\u003eWebsite Objective Definition\u003c\/strong\u003e\u003cbr\u003eDefine the website’s primary business purpose, user actions and conversion priorities\u003cbr\u003e\u003cstrong\u003eOutput:\u003c\/strong\u003e Website-objective statement\u003cbr\u003e\u003cstrong\u003eAllowance:\u003c\/strong\u003e 1 direction\u003c\/p\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cp\u003e\u003cstrong\u003eAudience Definition\u003c\/strong\u003e\u003cbr\u003eDefine the primary website audience, information needs and intended actions\u003cbr\u003e\u003cstrong\u003eOutput:\u003c\/strong\u003e Audience summary\u003cbr\u003e\u003cstrong\u003eAllowance:\u003c\/strong\u003e Up to 2 audiences\u003c\/p\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cp\u003e\u003cstrong\u003eSitemap Planning\u003c\/strong\u003e\u003cbr\u003eOrganise the website’s pages, navigation structure and page hierarchy\u003cbr\u003e\u003cstrong\u003eOutput:\u003c\/strong\u003e Visual sitemap\u003cbr\u003e\u003cstrong\u003eAllowance:\u003c\/strong\u003e Up to 15 URLs\u003c\/p\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cp\u003e\u003cstrong\u003ePage-Template Definition\u003c\/strong\u003e\u003cbr\u003eIdentify which website pages require unique layouts and which can reuse an approved template\u003cbr\u003e\u003cstrong\u003eOutput:\u003c\/strong\u003e Template matrix\u003cbr\u003e\u003cstrong\u003eAllowance:\u003c\/strong\u003e Up to 5 templates\u003c\/p\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cp\u003e\u003cstrong\u003eConversion-Path Planning\u003c\/strong\u003e\u003cbr\u003eDefine how users move from entry pages to enquiry, contact, registration or another primary CTA\u003cbr\u003e\u003cstrong\u003eOutput:\u003c\/strong\u003e Conversion-flow map\u003cbr\u003e\u003cstrong\u003eAllowance:\u003c\/strong\u003e 1 primary flow\u003c\/p\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cp\u003e\u003cstrong\u003eContent Hierarchy\u003c\/strong\u003e\u003cbr\u003eOrganise the supplied content into appropriate page sections and information priority\u003cbr\u003e\u003cstrong\u003eOutput:\u003c\/strong\u003e Page-content outlines\u003cbr\u003e\u003cstrong\u003eAllowance:\u003c\/strong\u003e Up to 5 templates\u003c\/p\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cp\u003e\u003cstrong\u003eLow-Fidelity Wireframes\u003c\/strong\u003e\u003cbr\u003eCreate structural page layouts showing sections, content order, functionality and CTA placement\u003cbr\u003e\u003cstrong\u003eOutput:\u003c\/strong\u003e Desktop wireframes\u003cbr\u003e\u003cstrong\u003eAllowance:\u003c\/strong\u003e Up to 5 templates\u003c\/p\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cp\u003e\u003cstrong\u003eWireframe Revisions\u003c\/strong\u003e\u003cbr\u003eRefine the structure and page flow based on consolidated client feedback\u003cbr\u003e\u003cstrong\u003eOutput:\u003c\/strong\u003e Approved wireframes\u003cbr\u003e\u003cstrong\u003eAllowance:\u003c\/strong\u003e 2 rounds\u003c\/p\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cp\u003e\u003cstrong\u003eVisual Design Direction\u003c\/strong\u003e\u003cbr\u003eEstablish the interface mood, typography, colour application, imagery treatment and digital design principles\u003cbr\u003e\u003cstrong\u003eOutput:\u003c\/strong\u003e UI direction board\u003cbr\u003e\u003cstrong\u003eAllowance:\u003c\/strong\u003e 1 direction\u003c\/p\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cp\u003e\u003cstrong\u003eHomepage UI Design\u003c\/strong\u003e\u003cbr\u003eDesign the primary homepage interface using the approved wireframe and visual direction\u003cbr\u003e\u003cstrong\u003eOutput:\u003c\/strong\u003e High-fidelity design\u003cbr\u003e\u003cstrong\u003eAllowance:\u003c\/strong\u003e 1 page template\u003c\/p\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cp\u003e\u003cstrong\u003eInner-Page UI Design\u003c\/strong\u003e\u003cbr\u003eDesign the approved internal page templates\u003cbr\u003e\u003cstrong\u003eOutput:\u003c\/strong\u003e High-fidelity designs\u003cbr\u003e\u003cstrong\u003eAllowance:\u003c\/strong\u003e Up to 4 templates\u003c\/p\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cp\u003e\u003cstrong\u003eMobile Responsive Design\u003c\/strong\u003e\u003cbr\u003eAdapt the approved desktop interface into mobile layouts with appropriate hierarchy and interaction changes\u003cbr\u003e\u003cstrong\u003eOutput:\u003c\/strong\u003e Mobile designs\u003cbr\u003e\u003cstrong\u003eAllowance:\u003c\/strong\u003e Up to 5 templates\u003c\/p\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cp\u003e\u003cstrong\u003eHeader \u0026amp; Navigation Design\u003c\/strong\u003e\u003cbr\u003eDesign the desktop and mobile header, main navigation and menu states\u003cbr\u003e\u003cstrong\u003eOutput:\u003c\/strong\u003e Navigation system\u003cbr\u003e\u003cstrong\u003eAllowance:\u003c\/strong\u003e 1 system\u003c\/p\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cp\u003e\u003cstrong\u003eFooter Design\u003c\/strong\u003e\u003cbr\u003eDesign the global footer, navigation links, contact information and CTA treatment\u003cbr\u003e\u003cstrong\u003eOutput:\u003c\/strong\u003e Footer system\u003cbr\u003e\u003cstrong\u003eAllowance:\u003c\/strong\u003e 1 system\u003c\/p\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cp\u003e\u003cstrong\u003eForm Design\u003c\/strong\u003e\u003cbr\u003eDesign one standard enquiry, contact or lead-generation form\u003cbr\u003e\u003cstrong\u003eOutput:\u003c\/strong\u003e Form interface\u003cbr\u003e\u003cstrong\u003eAllowance:\u003c\/strong\u003e 1 form\u003c\/p\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cp\u003e\u003cstrong\u003eReusable Component Design\u003c\/strong\u003e\u003cbr\u003eDesign reusable buttons, cards, content blocks, labels, tabs and other common interface elements\u003cbr\u003e\u003cstrong\u003eOutput:\u003c\/strong\u003e UI component set\u003cbr\u003e\u003cstrong\u003eAllowance:\u003c\/strong\u003e Standard set\u003c\/p\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cp\u003e\u003cstrong\u003eInteraction States\u003c\/strong\u003e\u003cbr\u003eDefine standard hover, active, selected, expanded and form states where applicable\u003cbr\u003e\u003cstrong\u003eOutput:\u003c\/strong\u003e Interaction guidance\u003cbr\u003e\u003cstrong\u003eAllowance:\u003c\/strong\u003e Standard states\u003c\/p\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cp\u003e\u003cstrong\u003eBasic Design System\u003c\/strong\u003e\u003cbr\u003eDocument the approved colours, typography, spacing, buttons, fields and reusable components\u003cbr\u003e\u003cstrong\u003eOutput:\u003c\/strong\u003e Figma style guide\u003cbr\u003e\u003cstrong\u003eAllowance:\u003c\/strong\u003e 1 system\u003c\/p\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cp\u003e\u003cstrong\u003eClickable Prototype\u003c\/strong\u003e\u003cbr\u003eConnect key screens to demonstrate navigation and the primary conversion flow\u003cbr\u003e\u003cstrong\u003eOutput:\u003c\/strong\u003e Figma prototype\u003cbr\u003e\u003cstrong\u003eAllowance:\u003c\/strong\u003e 1 primary flow\u003c\/p\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cp\u003e\u003cstrong\u003eUI Design Revisions\u003c\/strong\u003e\u003cbr\u003eRevise the interface based on consolidated client feedback without changing approved wireframes\u003cbr\u003e\u003cstrong\u003eOutput:\u003c\/strong\u003e Updated designs\u003cbr\u003e\u003cstrong\u003eAllowance:\u003c\/strong\u003e 2 rounds\u003c\/p\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cp\u003e\u003cstrong\u003eDeveloper Handoff\u003c\/strong\u003e\u003cbr\u003eOrganise Figma components, styles, measurements and implementation notes for development\u003cbr\u003e\u003cstrong\u003eOutput:\u003c\/strong\u003e Handoff-ready Figma file\u003cbr\u003e\u003cstrong\u003eAllowance:\u003c\/strong\u003e 1 package\u003c\/p\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cp\u003e\u003cstrong\u003eDesign QA\u003c\/strong\u003e\u003cbr\u003eCheck layout consistency, responsive behaviour, spacing, component usage and handoff readiness\u003cbr\u003e\u003cstrong\u003eOutput:\u003c\/strong\u003e QA-approved designs\u003cbr\u003e\u003cstrong\u003eAllowance:\u003c\/strong\u003e 1 check\u003c\/p\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cp\u003e\u003cstrong\u003eFinal Presentation\u003c\/strong\u003e\u003cbr\u003ePresent the final UX\/UI design, responsive behaviour and intended user journey\u003cbr\u003e\u003cstrong\u003eOutput:\u003c\/strong\u003e Online presentation\u003cbr\u003e\u003cstrong\u003eAllowance:\u003c\/strong\u003e Up to 60 minutes\u003c\/p\u003e\u003c\/li\u003e\n\u003c\/ol\u003e\u003ch3\u003eService boundary\u003c\/h3\u003e\u003cp\u003eWork outside the stated deliverables or allowances is quoted separately and added to the Sales Order only after approval.\u003c\/p\u003e","brand":"Foxar Athon","offers":[{"title":"Default Title","offer_id":47969976254642,"sku":"WEB001","price":12000.0,"currency_code":"MYR","in_stock":true}]},{"product_id":"seo-page-master-template-ux-ui-design","title":"SEO Page Master Template: UX\/UI Design","description":"\u003cp\u003e\u003cstrong\u003eService fee:\u003c\/strong\u003e RM3,500 per master template\u003c\/p\u003e\n\u003cp\u003eDesign of one reusable, responsive page template structured for scalable SEO-focused service, solution, location or content pages.\u003c\/p\u003e\n\u003ch3\u003eFinal deliverable\u003c\/h3\u003e\n\u003cul\u003e\n\u003cli\u003e\n\u003cstrong\u003eFinal output:\u003c\/strong\u003e Desktop and mobile Figma design with developer handoff\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eAllowance:\u003c\/strong\u003e 1 master template, 1 primary search intent and up to 6 reusable content modules\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003ch3\u003eDetailed scope of work\u003c\/h3\u003e\n\u003col\u003e\n\u003cli\u003e\u003cp\u003e\u003cstrong\u003eDiscovery \u0026amp; Requirements Review\u003c\/strong\u003e\u003cbr\u003eClarify the page objective, intended audience, target page type, available content and conversion action.\u003cbr\u003e\u003cstrong\u003eOutput:\u003c\/strong\u003e Discovery notes\u003cbr\u003e\u003cstrong\u003eAllowance:\u003c\/strong\u003e Up to 60 minutes\u003c\/p\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cp\u003e\u003cstrong\u003eSearch-Intent \u0026amp; Page-Purpose Review\u003c\/strong\u003e\u003cbr\u003eReview the supplied keyword or search theme and define what the page must help the visitor understand or do.\u003cbr\u003e\u003cstrong\u003eOutput:\u003c\/strong\u003e Page-purpose statement\u003cbr\u003e\u003cstrong\u003eAllowance:\u003c\/strong\u003e 1 primary search intent\u003c\/p\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cp\u003e\u003cstrong\u003eReference Review\u003c\/strong\u003e\u003cbr\u003eReview relevant page references for content hierarchy, UX patterns and reusable module opportunities.\u003cbr\u003e\u003cstrong\u003eOutput:\u003c\/strong\u003e Reference observations\u003cbr\u003e\u003cstrong\u003eAllowance:\u003c\/strong\u003e Up to 3 references\u003c\/p\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cp\u003e\u003cstrong\u003eSEO Content Hierarchy\u003c\/strong\u003e\u003cbr\u003eStructure the H1, supporting sections, proof, FAQs, internal-link zones and CTA placement.\u003cbr\u003e\u003cstrong\u003eOutput:\u003c\/strong\u003e Content hierarchy\u003cbr\u003e\u003cstrong\u003eAllowance:\u003c\/strong\u003e 1 master structure\u003c\/p\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cp\u003e\u003cstrong\u003eLow-Fidelity Wireframe\u003c\/strong\u003e\u003cbr\u003ePlan the desktop page structure, content order, reusable sections and conversion path.\u003cbr\u003e\u003cstrong\u003eOutput:\u003c\/strong\u003e Desktop wireframe\u003cbr\u003e\u003cstrong\u003eAllowance:\u003c\/strong\u003e 1 template\u003c\/p\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cp\u003e\u003cstrong\u003eResponsive UI Design\u003c\/strong\u003e\u003cbr\u003eDesign the approved template for desktop and mobile using the supplied brand identity.\u003cbr\u003e\u003cstrong\u003eOutput:\u003c\/strong\u003e High-fidelity designs\u003cbr\u003e\u003cstrong\u003eAllowance:\u003c\/strong\u003e 1 desktop + 1 mobile layout\u003c\/p\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cp\u003e\u003cstrong\u003eReusable Module Design\u003c\/strong\u003e\u003cbr\u003eDesign reusable content blocks that can accommodate future page content consistently.\u003cbr\u003e\u003cstrong\u003eOutput:\u003c\/strong\u003e Module set\u003cbr\u003e\u003cstrong\u003eAllowance:\u003c\/strong\u003e Up to 6 standard modules\u003c\/p\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cp\u003e\u003cstrong\u003eConsolidated Revisions\u003c\/strong\u003e\u003cbr\u003eRevise the wireframe and interface based on consolidated client feedback.\u003cbr\u003e\u003cstrong\u003eOutput:\u003c\/strong\u003e Approved template\u003cbr\u003e\u003cstrong\u003eAllowance:\u003c\/strong\u003e 2 rounds\u003c\/p\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cp\u003e\u003cstrong\u003eDeveloper Handoff\u003c\/strong\u003e\u003cbr\u003eOrganise the Figma file, styles, measurements and implementation notes.\u003cbr\u003e\u003cstrong\u003eOutput:\u003c\/strong\u003e Handoff-ready Figma file\u003cbr\u003e\u003cstrong\u003eAllowance:\u003c\/strong\u003e 1 package\u003c\/p\u003e\u003c\/li\u003e\n\u003c\/ol\u003e\n\u003ch3\u003eService boundary\u003c\/h3\u003e\n\u003cp\u003eKeyword research, SEO strategy, page copywriting, repeated-page population, development, CMS setup and schema implementation are not included.\u003c\/p\u003e","brand":"Foxar Athon","offers":[{"title":"Default Title","offer_id":47973797822642,"sku":"WEB002","price":3500.0,"currency_code":"MYR","in_stock":true}]},{"product_id":"web-portal-user-flow-ux-ui-design","title":"Web Portal User Flow: UX\/UI Design","description":"\u003cp\u003e\u003cstrong\u003eService fee:\u003c\/strong\u003e RM12,000 per user flow\u003c\/p\u003e\n\u003cp\u003eUX planning and responsive interface design for one defined end-to-end functional journey within a web portal.\u003c\/p\u003e\n\u003ch3\u003eFinal deliverable\u003c\/h3\u003e\n\u003cul\u003e\n\u003cli\u003e\n\u003cstrong\u003eFinal output:\u003c\/strong\u003e User-flow map, responsive Figma screens, clickable prototype and developer handoff\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eAllowance:\u003c\/strong\u003e 1 flow, 1 user type and up to 10 unique screens\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003ch3\u003eDetailed scope of work\u003c\/h3\u003e\n\u003col\u003e\n\u003cli\u003e\u003cp\u003e\u003cstrong\u003eFlow Discovery Workshop\u003c\/strong\u003e\u003cbr\u003eClarify the user, business objective, starting point, completion outcome, requirements and known constraints.\u003cbr\u003e\u003cstrong\u003eOutput:\u003c\/strong\u003e Discovery notes\u003cbr\u003e\u003cstrong\u003eAllowance:\u003c\/strong\u003e Up to 90 minutes\u003c\/p\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cp\u003e\u003cstrong\u003eUser \u0026amp; Objective Definition\u003c\/strong\u003e\u003cbr\u003eDefine the primary user, intended task and successful completion criteria.\u003cbr\u003e\u003cstrong\u003eOutput:\u003c\/strong\u003e Flow objective\u003cbr\u003e\u003cstrong\u003eAllowance:\u003c\/strong\u003e 1 user type + 1 objective\u003c\/p\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cp\u003e\u003cstrong\u003eRequirement Review\u003c\/strong\u003e\u003cbr\u003eReview client-supplied functional requirements, fields, business rules and technical constraints.\u003cbr\u003e\u003cstrong\u003eOutput:\u003c\/strong\u003e Requirement summary\u003cbr\u003e\u003cstrong\u003eAllowance:\u003c\/strong\u003e 1 flow\u003c\/p\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cp\u003e\u003cstrong\u003eUser-Flow Mapping\u003c\/strong\u003e\u003cbr\u003eMap the complete journey from entry to the primary completion outcome.\u003cbr\u003e\u003cstrong\u003eOutput:\u003c\/strong\u003e User-flow diagram\u003cbr\u003e\u003cstrong\u003eAllowance:\u003c\/strong\u003e 1 end-to-end journey\u003c\/p\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cp\u003e\u003cstrong\u003eDecision \u0026amp; Exception Mapping\u003c\/strong\u003e\u003cbr\u003eDefine standard decision points, validation, error, empty and success states.\u003cbr\u003e\u003cstrong\u003eOutput:\u003c\/strong\u003e State map\u003cbr\u003e\u003cstrong\u003eAllowance:\u003c\/strong\u003e Standard states\u003c\/p\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cp\u003e\u003cstrong\u003eLow-Fidelity Wireframes\u003c\/strong\u003e\u003cbr\u003eDesign the structure, information hierarchy and interactions for the approved flow.\u003cbr\u003e\u003cstrong\u003eOutput:\u003c\/strong\u003e Wireframes\u003cbr\u003e\u003cstrong\u003eAllowance:\u003c\/strong\u003e Up to 10 unique screens\u003c\/p\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cp\u003e\u003cstrong\u003eResponsive UI Design\u003c\/strong\u003e\u003cbr\u003eApply the approved visual system to desktop and mobile layouts.\u003cbr\u003e\u003cstrong\u003eOutput:\u003c\/strong\u003e High-fidelity screens\u003cbr\u003e\u003cstrong\u003eAllowance:\u003c\/strong\u003e Up to 10 unique screens\u003c\/p\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cp\u003e\u003cstrong\u003eClickable Prototype\u003c\/strong\u003e\u003cbr\u003eConnect the approved screens to demonstrate the primary journey and standard states.\u003cbr\u003e\u003cstrong\u003eOutput:\u003c\/strong\u003e Figma prototype\u003cbr\u003e\u003cstrong\u003eAllowance:\u003c\/strong\u003e 1 flow\u003c\/p\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cp\u003e\u003cstrong\u003eConsolidated Revisions\u003c\/strong\u003e\u003cbr\u003eApply consolidated client feedback without expanding the approved flow.\u003cbr\u003e\u003cstrong\u003eOutput:\u003c\/strong\u003e Updated design\u003cbr\u003e\u003cstrong\u003eAllowance:\u003c\/strong\u003e 2 wireframe rounds + 2 UI rounds\u003c\/p\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cp\u003e\u003cstrong\u003eDeveloper Handoff\u003c\/strong\u003e\u003cbr\u003ePrepare components, states, measurements and implementation notes.\u003cbr\u003e\u003cstrong\u003eOutput:\u003c\/strong\u003e Handoff-ready Figma file\u003cbr\u003e\u003cstrong\u003eAllowance:\u003c\/strong\u003e 1 package\u003c\/p\u003e\u003c\/li\u003e\n\u003c\/ol\u003e\n\u003ch3\u003eService boundary\u003c\/h3\u003e\n\u003cp\u003eOne flow has one defined starting point and one primary completion outcome. Additional journeys, roles, screens, research, development and backend logic are separately scoped.\u003c\/p\u003e","brand":"Foxar Athon","offers":[{"title":"Default Title","offer_id":47973798215858,"sku":"WEB003","price":12000.0,"currency_code":"MYR","in_stock":true}]},{"product_id":"user-portal-ux-ui-system-design","title":"User Portal UX\/UI System Design","description":"\u003cp\u003e\u003cstrong\u003eService fee:\u003c\/strong\u003e RM80,000 per portal project\u003c\/p\u003e\n\u003cp\u003eEnd-to-end UX\/UI system design for an authenticated user portal, including architecture, core flows, responsive screens, reusable components and developer handoff.\u003c\/p\u003e\n\u003ch3\u003eFinal deliverable\u003c\/h3\u003e\n\u003cul\u003e\n\u003cli\u003e\n\u003cstrong\u003eFinal output:\u003c\/strong\u003e Complete portal UX\/UI system, prototypes and handoff-ready Figma library\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eAllowance:\u003c\/strong\u003e Up to 3 user roles, 5 core flows and 30 unique screens\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003ch3\u003eDetailed scope of work\u003c\/h3\u003e\n\u003col\u003e\n\u003cli\u003e\u003cp\u003e\u003cstrong\u003eDiscovery Workshops\u003c\/strong\u003e\u003cbr\u003eAlign stakeholders on portal objectives, users, requirements, operational needs and technical constraints.\u003cbr\u003e\u003cstrong\u003eOutput:\u003c\/strong\u003e Discovery findings\u003cbr\u003e\u003cstrong\u003eAllowance:\u003c\/strong\u003e Up to 3 sessions\u003c\/p\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cp\u003e\u003cstrong\u003eStakeholder Input\u003c\/strong\u003e\u003cbr\u003eGather and synthesise requirements from priority business and operational stakeholders.\u003cbr\u003e\u003cstrong\u003eOutput:\u003c\/strong\u003e Requirement summary\u003cbr\u003e\u003cstrong\u003eAllowance:\u003c\/strong\u003e Up to 5 stakeholders\u003c\/p\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cp\u003e\u003cstrong\u003eUser-Role Definition\u003c\/strong\u003e\u003cbr\u003eDefine the responsibilities, permissions, information needs and priority actions of included portal users.\u003cbr\u003e\u003cstrong\u003eOutput:\u003c\/strong\u003e Role framework\u003cbr\u003e\u003cstrong\u003eAllowance:\u003c\/strong\u003e Up to 3 primary roles\u003c\/p\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cp\u003e\u003cstrong\u003eFeature \u0026amp; Requirement Mapping\u003c\/strong\u003e\u003cbr\u003eOrganise the approved feature set, functional requirements, dependencies and design priorities.\u003cbr\u003e\u003cstrong\u003eOutput:\u003c\/strong\u003e Feature map\u003cbr\u003e\u003cstrong\u003eAllowance:\u003c\/strong\u003e 1 portal\u003c\/p\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cp\u003e\u003cstrong\u003ePortal Information Architecture\u003c\/strong\u003e\u003cbr\u003eStructure the navigation, dashboard, modules and information hierarchy.\u003cbr\u003e\u003cstrong\u003eOutput:\u003c\/strong\u003e Portal architecture\u003cbr\u003e\u003cstrong\u003eAllowance:\u003c\/strong\u003e 1 system\u003c\/p\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cp\u003e\u003cstrong\u003eCore User-Flow Mapping\u003c\/strong\u003e\u003cbr\u003eMap the included priority journeys and their decision, validation and completion states.\u003cbr\u003e\u003cstrong\u003eOutput:\u003c\/strong\u003e User-flow set\u003cbr\u003e\u003cstrong\u003eAllowance:\u003c\/strong\u003e Up to 5 core flows\u003c\/p\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cp\u003e\u003cstrong\u003eLow-Fidelity Wireframes\u003c\/strong\u003e\u003cbr\u003eDesign the approved screen structures, interactions and responsive behaviour.\u003cbr\u003e\u003cstrong\u003eOutput:\u003c\/strong\u003e Wireframes\u003cbr\u003e\u003cstrong\u003eAllowance:\u003c\/strong\u003e Up to 30 unique screens\u003c\/p\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cp\u003e\u003cstrong\u003eHigh-Fidelity UI Design\u003c\/strong\u003e\u003cbr\u003eDesign the approved portal screens across desktop and mobile-responsive layouts.\u003cbr\u003e\u003cstrong\u003eOutput:\u003c\/strong\u003e Responsive UI screens\u003cbr\u003e\u003cstrong\u003eAllowance:\u003c\/strong\u003e Up to 30 unique screens\u003c\/p\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cp\u003e\u003cstrong\u003eDashboard \u0026amp; System-State Design\u003c\/strong\u003e\u003cbr\u003eDesign included dashboards plus empty, loading, validation, error and success states.\u003cbr\u003e\u003cstrong\u003eOutput:\u003c\/strong\u003e Dashboard and state set\u003cbr\u003e\u003cstrong\u003eAllowance:\u003c\/strong\u003e Standard states for approved screens\u003c\/p\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cp\u003e\u003cstrong\u003ePortal Design System\u003c\/strong\u003e\u003cbr\u003eDevelop reusable navigation, tables, cards, fields, controls, typography, colour and spacing components.\u003cbr\u003e\u003cstrong\u003eOutput:\u003c\/strong\u003e Figma component library\u003cbr\u003e\u003cstrong\u003eAllowance:\u003c\/strong\u003e 1 portal system\u003c\/p\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cp\u003e\u003cstrong\u003ePriority Prototypes\u003c\/strong\u003e\u003cbr\u003eConnect selected screens to demonstrate the most important portal journeys.\u003cbr\u003e\u003cstrong\u003eOutput:\u003c\/strong\u003e Clickable prototypes\u003cbr\u003e\u003cstrong\u003eAllowance:\u003c\/strong\u003e Up to 3 priority flows\u003c\/p\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cp\u003e\u003cstrong\u003eConsolidated Revisions\u003c\/strong\u003e\u003cbr\u003eApply consolidated feedback within the approved requirements and screen allowance.\u003cbr\u003e\u003cstrong\u003eOutput:\u003c\/strong\u003e Approved portal designs\u003cbr\u003e\u003cstrong\u003eAllowance:\u003c\/strong\u003e 2 wireframe rounds + 2 UI rounds\u003c\/p\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cp\u003e\u003cstrong\u003eDeveloper Handoff \u0026amp; Design QA\u003c\/strong\u003e\u003cbr\u003ePrepare the design library and review implementation against the approved interface.\u003cbr\u003e\u003cstrong\u003eOutput:\u003c\/strong\u003e Handoff package + QA log\u003cbr\u003e\u003cstrong\u003eAllowance:\u003c\/strong\u003e 1 handoff + 2 review rounds\u003c\/p\u003e\u003c\/li\u003e\n\u003c\/ol\u003e\n\u003ch3\u003eService boundary\u003c\/h3\u003e\n\u003cp\u003eDevelopment, backend logic, API and database architecture, technical specifications, copywriting, user testing and work beyond the included roles, flows or screens are separately scoped.\u003c\/p\u003e","brand":"Foxar Athon","offers":[{"title":"Default Title","offer_id":47973798609074,"sku":"WEB004","price":80000.0,"currency_code":"MYR","in_stock":true}]},{"product_id":"conversion-landing-page-ux-ui-design","title":"Conversion Landing Page: UX\/UI Design","description":"\u003cp\u003e\u003cstrong\u003eService fee:\u003c\/strong\u003e RM3,500 per landing page\u003c\/p\u003e\n\u003cp\u003eConversion-focused UX\/UI design for one standalone campaign, service, product or lead-generation landing page.\u003c\/p\u003e\n\u003ch3\u003eFinal deliverable\u003c\/h3\u003e\n\u003cul\u003e\n\u003cli\u003e\n\u003cstrong\u003eFinal output:\u003c\/strong\u003e Desktop and mobile Figma design with developer handoff\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eAllowance:\u003c\/strong\u003e 1 landing page, up to 10 sections and 1 standard lead form\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003ch3\u003eDetailed scope of work\u003c\/h3\u003e\n\u003col\u003e\n\u003cli\u003e\u003cp\u003e\u003cstrong\u003eDiscovery Meeting\u003c\/strong\u003e\u003cbr\u003eClarify the offer, audience, campaign objective, available content, proof and required CTA.\u003cbr\u003e\u003cstrong\u003eOutput:\u003c\/strong\u003e Discovery notes\u003cbr\u003e\u003cstrong\u003eAllowance:\u003c\/strong\u003e Up to 60 minutes\u003c\/p\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cp\u003e\u003cstrong\u003eObjective \u0026amp; Audience Definition\u003c\/strong\u003e\u003cbr\u003eDefine the primary offer, target visitor and intended conversion action.\u003cbr\u003e\u003cstrong\u003eOutput:\u003c\/strong\u003e Landing-page objective\u003cbr\u003e\u003cstrong\u003eAllowance:\u003c\/strong\u003e 1 offer + 1 primary audience\u003c\/p\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cp\u003e\u003cstrong\u003eReference Review\u003c\/strong\u003e\u003cbr\u003eReview relevant landing pages for hierarchy, persuasion and conversion patterns.\u003cbr\u003e\u003cstrong\u003eOutput:\u003c\/strong\u003e Reference observations\u003cbr\u003e\u003cstrong\u003eAllowance:\u003c\/strong\u003e Up to 3 references\u003c\/p\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cp\u003e\u003cstrong\u003eConversion-Path Planning\u003c\/strong\u003e\u003cbr\u003ePlan how the visitor moves from the lead message through proof to the primary CTA.\u003cbr\u003e\u003cstrong\u003eOutput:\u003c\/strong\u003e Conversion path\u003cbr\u003e\u003cstrong\u003eAllowance:\u003c\/strong\u003e 1 primary action\u003c\/p\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cp\u003e\u003cstrong\u003eContent Hierarchy\u003c\/strong\u003e\u003cbr\u003eOrganise client-supplied content into a clear, persuasive page sequence.\u003cbr\u003e\u003cstrong\u003eOutput:\u003c\/strong\u003e Page outline\u003cbr\u003e\u003cstrong\u003eAllowance:\u003c\/strong\u003e Up to 10 sections\u003c\/p\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cp\u003e\u003cstrong\u003eLow-Fidelity Wireframe\u003c\/strong\u003e\u003cbr\u003eDesign the desktop page structure, content order, CTA placement and form position.\u003cbr\u003e\u003cstrong\u003eOutput:\u003c\/strong\u003e Desktop wireframe\u003cbr\u003e\u003cstrong\u003eAllowance:\u003c\/strong\u003e 1 page\u003c\/p\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cp\u003e\u003cstrong\u003eResponsive UI Design\u003c\/strong\u003e\u003cbr\u003eDesign the approved page for desktop and mobile using supplied brand assets.\u003cbr\u003e\u003cstrong\u003eOutput:\u003c\/strong\u003e High-fidelity designs\u003cbr\u003e\u003cstrong\u003eAllowance:\u003c\/strong\u003e 1 desktop + 1 mobile layout\u003c\/p\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cp\u003e\u003cstrong\u003eLead-Form Design\u003c\/strong\u003e\u003cbr\u003eDesign one standard enquiry, registration or lead-generation form state.\u003cbr\u003e\u003cstrong\u003eOutput:\u003c\/strong\u003e Form interface\u003cbr\u003e\u003cstrong\u003eAllowance:\u003c\/strong\u003e 1 standard form\u003c\/p\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cp\u003e\u003cstrong\u003eConsolidated Revisions\u003c\/strong\u003e\u003cbr\u003eApply consolidated client feedback without changing the approved objective or page structure.\u003cbr\u003e\u003cstrong\u003eOutput:\u003c\/strong\u003e Approved landing page\u003cbr\u003e\u003cstrong\u003eAllowance:\u003c\/strong\u003e 2 rounds\u003c\/p\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cp\u003e\u003cstrong\u003eDeveloper Handoff\u003c\/strong\u003e\u003cbr\u003ePrepare the Figma file, styles, measurements and implementation notes.\u003cbr\u003e\u003cstrong\u003eOutput:\u003c\/strong\u003e Handoff-ready Figma file\u003cbr\u003e\u003cstrong\u003eAllowance:\u003c\/strong\u003e 1 package\u003c\/p\u003e\u003c\/li\u003e\n\u003c\/ol\u003e\n\u003ch3\u003eService boundary\u003c\/h3\u003e\n\u003cp\u003eCampaign strategy, copywriting, development, CRM integration, analytics setup, custom illustration, photography and A\/B-test variations are not included.\u003c\/p\u003e","brand":"Foxar Athon","offers":[{"title":"Default Title","offer_id":47973799002290,"sku":"WEB005","price":3500.0,"currency_code":"MYR","in_stock":true}]}],"url":"https:\/\/www.foxarathon.com\/collections\/website-ux-ui.oembed","provider":"Foxar Athon","version":"1.0","type":"link"}