Published on October 8, 2025 | Reading Time: 3 mins
How is CX Different from UX and UI?
While CX, UX, and UI all influence how people interact with services, they operate at different levels and serve distinct purposes:
CX (Customer Experience)
Focus: The complete relationship a customer has with a government brand across all services and touchpoints (digital, in-person, communication, etc.).
Example: A citizen applying for a housing benefit feels confused about eligibility, faces delays in processing, and receives inconsistent information from staff. Even if the website is functional, the overall CX is poor because of unclear or poor tone of communication, lack of clarity of regulation, lack of support, poor perceptions of fairness or empathy.
UX (User Experience)
Focus: The end-to-end experience a user has while interacting with a specific service or product (often digital). It is a subset of CX.
Example: The online application form for housing benefits is logically structured and easy to navigate, but if the overall process is delayed or lacks human support, the UX may be good, while the CX remains poor. A well-designed service may have excellent UX—but if the broader system is confusing or slow, the overall CX will still suffer.
UX in Practice
What it is:
UX is about the structure, flow, and logic of the product. It ensures the product is usable, intuitive, and meets user needs.
In Figma, UX work includes:
- Wireframes (low or medium fidelity)
- User flows (how a user moves through screens)
- Information architecture (organizing menus, layouts, content)
- Prototyping connections (linking screens to simulate navigation)
Focus: How the product works.
Example:
Creating a simple black-and-white wireframe with boxes for buttons, placeholders for images, and arrows showing how clicking “Next” moves the user to the following screen.
UI (User Interface)
Focus: The design of interfaces—the look, feel, and functionality of buttons, menus, and visuals that users interact with, such as button styles, menu layout, color schemes, responsiveness. It is a subset of UX.
Examples: Button styles, menu layout, color schemes, mobile responsiveness, typography on a government website. Example: The button to submit the application is clearly visible, labelled well, and mobile-responsive. This is a UI success, but it doesn’t solve broader issues like requirements’ complexity or communication breakdowns in the overall service. Good UI supports good UX, but doesn’t guarantee it, and it certainly doesn’t cover the broader expectations and outcomes of CX.
UI in Practice
What it is:
UI focuses on visual design and interaction details. It ensures the product looks appealing, aligns with the brand, and guides the user visually.
In Figma, UI work includes:
- Applying color palettes, typography, and icons
- Using design systems and component libraries
- Pixel-perfect layouts with spacing, shadows, and imagery
- Micro-interactions and states (hover, active, disabled)
Focus: How the product looks and feels.
Example:
Designing a polished login screen with the exact brand font, button styles, background image, and hover effects on the “Log In” button.
