SAP Fiori UX / Brand Theming
Technology SAP Fiori SAP UI Theme Designer SAP UI5
How Mindset built a brand-aligned SAP Fiori theme for an HR software company
An HR Document Management Software Company Delivered 2020
Mindset delivered a production-ready SAP Fiori theme that matched the company's own brand standards, giving its users a consistent experience across SAP and the rest of the software suite.
By the numbers
-
1 theme
Brand-aligned Fiori theme delivered and importable
-
Brand and SAP UX standards compliance
Before
Default SAP look, mismatched experience
- SAP Fiori displayed in out-of-the-box SAP styling, breaking the company's consistent product design.
- No practical way to assess new design use cases or keep guidelines consistent over time.
- Dependence on outside help for any design or theming change.
After
Fiori aligned to the product's own brand
- A custom Fiori theme matching the company's style guide, ready to deploy.
- Styles tested and validated across apps so the experience holds up in production.
- A clear framework for the internal team to run future design work independently.
Why this matters
A software company with its own strong design aesthetic wanted SAP Fiori to feel like the rest of the product. Mindset built the brand-aligned theme and gave them a repeatable way to keep it consistent.
The challenge
This Munich-based HR software company had built a reputation on clean, modern product design. When users opened SAP Fiori inside its environment, the default SAP look broke that experience. The product team wanted Fiori to feel like the rest of their software, not like a bolt-on from a different era.
They also had a broader goal. Beyond the visual fix, they wanted a repeatable way to assess new use cases, deliver user-centered design, and keep design guidelines consistent as the product grew.
What we did
Mindset ran a fixed-price SAP UX Design and Theming engagement, working remotely with the company's team. A Senior UX Designer and a Senior SAP UX Architect built a new theme using both Quick and Expert theme properties in the UI Theme Designer, with code-level customization in scope where needed.
The team tested the theme across apps to confirm styles applied in the right places and validated every element against the company's own style guide and SAP UX standards. Alongside the theme delivery, Mindset identified practical ways the team could operationalize design assessments and keep their guidelines consistent going forward.
The outcomes
The engagement delivered a brand-aligned, importable Fiori theme that the company could deploy to its environment. Its users now get a visual experience that matches the product's own design language rather than the out-of-the-box SAP defaults.
Mindset also gave the team a clear picture of how to run future design work more independently, with a framework for assessing use cases and overseeing guidelines without requiring outside help for every change.
If we built this today
Concept · not delivered scopeBrand and Fiori, kept in sync.
This is a forward-looking concept, not the scope we delivered on this engagement. It is the build we would reach for now, grounded in SAP that ships today.
This HR software company wanted Fiori to feel like their own clean product instead of the default SAP look, and today that brand alignment can hold itself together as a living design system rather than a one-time theme file.
The data product
People Intelligence
An Intelligent Application on SAP Business Data Cloud that grounds the assistant in real HCM usage, so theme and UX decisions follow where employees actually spend time rather than guesswork. For an HR software world, that link between design and adoption is the useful part.
Intelligent Application on SAP Business Data Cloud
The Joule agent
Fiori Design System Steward
Reads your theme tokens, style guide, and the Fiori apps your users actually touch, then flags where a screen drifts from brand and proposes a corrected UI Theme Designer change set for a designer to approve. It keeps the brand and the SAP UX standards talking to each other instead of fighting.
SAP Fiori, SAP UI Theme Designer, SAPUI5, SAP Build Work Zone · PROPOSE · Share of Fiori apps rendering on-brand and passing WCAG contrast
The Fiori app
SAP Build Work Zone with embedded Joule
The launchpad and theming surface where Joule lives next to your apps, so brand themes, site design, and app catalogs get managed in one place with an assistant on hand. There is no S/4HANA Fiori app that does brand theming on its own, so this is the honest home for it.
Joule embedded in the Work Zone launchpad
We would still mine the real design and approval process in SAP Signavio first, map the app and theme estate in SAP LeanIX, and let MIND accelerators carry the old theme work into the new system.
What we built
-
Production-ready theme delivered for deployment
Brand-aligned Fiori theme
A custom theme built in SAP UI Theme Designer using Quick and Expert theme properties, matched to the company's style guide and ready to import into their Fiori environment.
-
Styles verified across the app portfolio
Cross-app style validation
The theme was tested across Fiori apps to confirm styles applied correctly in context, not just in the theme editor.
-
Dual compliance: brand standards and SAP UX guidelines
SAP UX and brand standards alignment
Every design decision was validated against both the company's own brand guidelines and SAP's UX design standards, so the theme holds up as the product evolves.
-
Repeatable design process defined for the internal team
Design operationalization guidance
Identified concrete ways the internal team could assess new use cases, deliver user-centered design, and oversee guidelines on an ongoing basis without depending on outside help.