Caixa Mágica Software

UX/UI Design Hub

Design that
ships as designed

We design interfaces for web, mobile, and automotive platforms. The work is grounded in user research, built to accessibility standards and specified in enough detail that the engineering team can build it without interpretation.

Caixa Mágica UX/UI Design Hub
Platforms

What we design

From citizen-scale portals to automotive HMI

Our UX/UI work spans public sector platforms used by millions of citizens, mobile applications for field workers, enterprise back-office tools and in-vehicle human-machine interfaces. In each case, the design constraints are specific to the context. As a result, we design for the platform from the start rather than adapting a generic approach.

01

Web Platforms

From marketing sites to complex enterprise portals with role-based access, multi-language support, and high-volume transactional flows. We have designed interfaces for public sector platforms used by millions of citizens, environments where accessibility compliance is mandatory and the cost of a confusing interface shows up in support calls.

02

Mobile Applications

Native and cross-platform interfaces for Android and iOS. We design for the constraints of mobile: limited screen space, touch interactions, variable connectivity. Good mobile design is not a compressed desktop design. It is an experience built for how people actually use a device, often distracted, often on the move.

03

Enterprise Software

Back-office tools, operational dashboards, data management systems, and workflow interfaces. These are environments where users spend eight hours a day. The priority is efficiency and clarity: reducing cognitive load, minimising error rates and making complex data readable without requiring training.

04

Automotive HMI

Human-machine interface design for in-vehicle systems, a specialised discipline with its own safety constraints and interaction patterns. We have worked with glance time standards, distraction reduction, the integration of touch and physical controls and the challenge of designing for users who cannot look at the screen for more than a moment.

Design Systems

For clients building at scale, we create component libraries and design systems that give development teams a consistent, reusable set of building blocks. A well-built design system reduces the design-to-development gap, keeps the product visually consistent as it grows and means new screens can be built without requiring a designer to review every decision. We build these in Figma with full component documentation and work with engineering to ensure the system maps cleanly to their chosen framework.

Process

How we design

Why testing early matters

A usability problem found at the wireframe stage takes a designer an hour to fix. The same problem found after development takes weeks to address and risks destabilising components that were already working. In practice, this means we run usability sessions at every stage — not just at the end when fixing things is expensive.

01

User Research

We talk to the people who will use the product. For enterprise software, that means sessions with operations teams, customer service agents, or field workers who will live in the interface every day. For consumer products, structured testing with target users before a single high-fidelity frame is produced. Research scope adapts to the project timeline, but we never skip it.

02

Information Architecture

Before worrying about how anything looks, we map how content and functionality should be organised. Getting the structure right is what separates a product people can navigate from one that requires training. Tree testing and card sorting with real users validate the IA before we commit to it.

03

Wireframes and Prototyping

Interactive prototypes that can be tested before development starts. Usability sessions at the wireframe stage catch structural and flow problems while they are still cheap to fix. The prototype is close enough to the real product that users get confused in useful, revealing ways.

04

High-Fidelity Design and Specification

Visual design, component specifications, interaction notes for non-standard behaviours, and a style guide. Accessibility is designed in at this stage: colour contrast to WCAG 2.1 AA, keyboard navigation, screen reader compatibility, touch target sizes. It is not a checklist we run at the end.

05

Implementation QA

We review the built interface before launch to verify that the implementation matches the design intent. This is standard in every engagement. Designs don't ship as designed without this step, because the gap between a Figma file and a rendered interface is where most visual inconsistencies live.

Why it matters

Designers who work with the engineers who build

Designers who only design, without working alongside engineers in production, develop habits that make implementation harder. Interaction states go unaccounted for. Animations get specified that are expensive to build. Components are created without thinking about how they scale across different data lengths and screen sizes.

Our designers know what is being built, by whom, and in what framework. The result is handoff without friction and interfaces that actually ship the way they were designed.

For clients working with their own development team, we provide Figma deliverables with the level of specification that removes the need to guess.

Framework-aware design

We design to the component model of Angular, React, or Vue. Components are realistic to implement, not aspirational sketches that need re-engineering before they can ship.

WCAG 2.1 AA as standard

Accessibility is built into every specification: colour contrast, keyboard navigation, screen reader compatibility, touch targets. Not a post-launch checklist.

Incremental improvement available

We audit the existing interface, identify the highest-impact problems, and redesign specific flows without requiring a full rebuild. Measurable improvements with lower risk and cost.

Post-build QA included

We review the built interface before launch. This is how designs actually ship as designed, and it is standard in every engagement.

FAQ

Frequently asked questions

What clients typically ask before starting a design engagement.

What is the difference between UX design and UI design?

UX design is about how a product works: the structure of information, the flow of tasks, and whether users can accomplish their goals efficiently. UI design is about how it looks: the visual language, components, and aesthetic consistency. Good product design requires both. UX without UI produces functional but unattractive software. UI without UX produces attractive software that is frustrating to use.

How do you approach accessibility?

We design to WCAG 2.1 AA as a standard baseline. For public sector projects in Portugal and the EU, we design to the higher accessibility requirements mandated by European legislation. Accessibility is designed in from the start: colour contrast ratios, keyboard navigation paths, screen reader labels, and touch target sizes are part of every specification.

Do you conduct user research before designing?

Yes, always. For a large enterprise platform, that might mean structured interviews with 15 to 20 users, card sorting, tree testing, and multiple rounds of usability testing. For a focused redesign, it might be five moderated usability sessions with existing users. The approach adapts to the project, but user research is never skipped. Design decisions made without user input are guesses.

Working process and deliverables

Can you improve an existing product without rebuilding from scratch?

Yes, and this is one of the most common engagements we run. We audit the existing interface, identify the highest-impact problems, and redesign specific components or flows. This delivers measurable improvements without the risk and cost of a full rebuild.

How do you work with our development team?

We deliver Figma files with full component specifications, interaction notes for non-standard behaviours, a style guide, and a component inventory. If your team uses React, Angular, or Vue, we design to that framework's component model. A QA review of the built interface before launch is included in every engagement.

What does a design engagement cost and how long does it take?

A UX audit and redesign of a specific product area typically takes 4 to 8 weeks. A full product design engagement, from user research through to a complete design system, takes 3 to 6 months depending on product complexity. We scope each engagement individually after an initial call.

Have a product to design?

Tell us what you are building and who will use it. We respond within one business day.

Let's talk