--- id: video/ugHFHtSxTlw type: video title: "Business Central Under the Hood episode 7: Designing Business Central's UI, From Concept To Code" summary: Business Central UI design process, from concept and Figma mockups to shipped code, in episode 7 of Under the Hood. It uses examples (company switcher, onboarding, analysis mode, prompt dialogue) to show how research changed designs, and why partners have limited UI control. tier: official language: en tags: - ui design - user experience - ux - design process - fluent design language - figma - design tools - microsoft standards - design language - user research - mockups - discoverability system: development review: state: reviewed by: opus at: "2026-10-07T23:02:44.074Z" flags: [] generated: at: "2026-10-07T23:02:44.123Z" pipeline: 0.2.0 prompts: extract-video: 1 summarize-video: 2 input_hash: 20f85abed14c58792f43b31e6a94198f6338db4e8434d4d6147239001e693f76 evidence: - kind: video url: https://www.youtube.com/watch?v=ugHFHtSxTlw&t=112s title: "Business Central Under the Hood episode 7: Designing Business Central's UI, From Concept To Code" date: "2025-01-03T13:01:12.000Z" commit: null t: 112 quote: serving up the data and allowing users to work with business central but to have a good user experience - kind: video url: https://www.youtube.com/watch?v=ugHFHtSxTlw&t=516s title: "Business Central Under the Hood episode 7: Designing Business Central's UI, From Concept To Code" date: "2025-01-03T13:01:12.000Z" commit: null t: 516 quote: we are adhering to what is known as the fluent design language which is microsoft sort of official - kind: video url: https://www.youtube.com/watch?v=ugHFHtSxTlw&t=577s title: "Business Central Under the Hood episode 7: Designing Business Central's UI, From Concept To Code" date: "2025-01-03T13:01:12.000Z" commit: null t: 577 quote: it's important our user when they see the product they recognize it at business Central as well right they don't look when they don't - kind: video url: https://www.youtube.com/watch?v=ugHFHtSxTlw&t=638s title: "Business Central Under the Hood episode 7: Designing Business Central's UI, From Concept To Code" date: "2025-01-03T13:01:12.000Z" commit: null t: 638 quote: office is a huge inspiration for us in terms of how things should work and act - kind: video url: https://www.youtube.com/watch?v=ugHFHtSxTlw&t=739s title: "Business Central Under the Hood episode 7: Designing Business Central's UI, From Concept To Code" date: "2025-01-03T13:01:12.000Z" commit: null t: 739 quote: their killer feature if you will for why they got successful was that they handled multi-user editing very well from from day one - kind: video url: https://www.youtube.com/watch?v=ugHFHtSxTlw&t=881s title: "Business Central Under the Hood episode 7: Designing Business Central's UI, From Concept To Code" date: "2025-01-03T13:01:12.000Z" commit: null t: 881 quote: the initial idea about what this should do and then where it ends up after working with Engineers PMs uh doing use research uh - kind: video url: https://www.youtube.com/watch?v=ugHFHtSxTlw&t=982s title: "Business Central Under the Hood episode 7: Designing Business Central's UI, From Concept To Code" date: "2025-01-03T13:01:12.000Z" commit: null t: 982 quote: what we do for a living so to say we we are selling the vision of how great this could be and then um - kind: video url: https://www.youtube.com/watch?v=ugHFHtSxTlw&t=1043s title: "Business Central Under the Hood episode 7: Designing Business Central's UI, From Concept To Code" date: "2025-01-03T13:01:12.000Z" commit: null t: 1043 quote: our initial version V1 was very sort of limited but then we have continued building it out so today it's the I would say - kind: video url: https://www.youtube.com/watch?v=ugHFHtSxTlw&t=1194s title: "Business Central Under the Hood episode 7: Designing Business Central's UI, From Concept To Code" date: "2025-01-03T13:01:12.000Z" commit: null t: 1194 quote: it's much cheaper to change a PowerPoint than it is to to change something that you have coded so the more discoveries you can - kind: video url: https://www.youtube.com/watch?v=ugHFHtSxTlw&t=1557s title: "Business Central Under the Hood episode 7: Designing Business Central's UI, From Concept To Code" date: "2025-01-03T13:01:12.000Z" commit: null t: 1557 quote: we can't go forward with a feature where more than half of the test participants were not noticing these tabs here so so they - kind: video url: https://www.youtube.com/watch?v=ugHFHtSxTlw&t=1637s title: "Business Central Under the Hood episode 7: Designing Business Central's UI, From Concept To Code" date: "2025-01-03T13:01:12.000Z" commit: null t: 1637 quote: this is not actually a company switcher what users want here is an environment and Company switcher - kind: video url: https://www.youtube.com/watch?v=ugHFHtSxTlw&t=1658s title: "Business Central Under the Hood episode 7: Designing Business Central's UI, From Concept To Code" date: "2025-01-03T13:01:12.000Z" commit: null t: 1658 quote: this started as a relatively simple feature how difficult can it be to switch company to actually just a drop down of some kind - kind: video url: https://www.youtube.com/watch?v=ugHFHtSxTlw&t=1658s title: "Business Central Under the Hood episode 7: Designing Business Central's UI, From Concept To Code" date: "2025-01-03T13:01:12.000Z" commit: null t: 1658 quote: before this feature it was super hard for them actually to discover the other environments - kind: video url: https://www.youtube.com/watch?v=ugHFHtSxTlw&t=1930s title: "Business Central Under the Hood episode 7: Designing Business Central's UI, From Concept To Code" date: "2025-01-03T13:01:12.000Z" commit: null t: 1930 quote: this experience where we were sort of pretty much taking over the whole screen right off the bat when users came into business Central - kind: video url: https://www.youtube.com/watch?v=ugHFHtSxTlw&t=2011s title: "Business Central Under the Hood episode 7: Designing Business Central's UI, From Concept To Code" date: "2025-01-03T13:01:12.000Z" commit: null t: 2011 quote: documenting uh at a at a very precise uh level of detail that is needed to actually go and implement this so it's all - kind: video url: https://www.youtube.com/watch?v=ugHFHtSxTlw&t=2092s title: "Business Central Under the Hood episode 7: Designing Business Central's UI, From Concept To Code" date: "2025-01-03T13:01:12.000Z" commit: null t: 2092 quote: we need to make sure that all the components we design are flexible in their sizing - kind: video url: https://www.youtube.com/watch?v=ugHFHtSxTlw&t=2152s title: "Business Central Under the Hood episode 7: Designing Business Central's UI, From Concept To Code" date: "2025-01-03T13:01:12.000Z" commit: null t: 2152 quote: as opposed maybe to other type of programming when when our partners develop their features they don't have that level - kind: video url: https://www.youtube.com/watch?v=ugHFHtSxTlw&t=2348s title: "Business Central Under the Hood episode 7: Designing Business Central's UI, From Concept To Code" date: "2025-01-03T13:01:12.000Z" commit: null t: 2348 quote: the tradeoff when you're building for business Central is that you you trade off some flexibility uh but you get a lot of behaviors links: learn: [] objects: [] features: [] topics: [] localizations: [] videos: [] posts: [] guidelines: [] video_id: ugHFHtSxTlw channel: yt-microsoft source_name: Microsoft Dynamics 365 Business Central (YouTube) url: https://www.youtube.com/watch?v=ugHFHtSxTlw published_at: "2025-01-03T13:01:12.000Z" duration_s: 2426 captions: full audience: - developer - functional consultant - partner - administrator chapters: - t: 0 title: Introduction to UI and UX in Business Central - t: 193 title: Feature Design Process and Timeline - t: 354 title: Design Principles and User Understanding - t: 496 title: Fluent Design Language and Microsoft Standards - t: 638 title: Figma as a Design Tool - t: 780 title: Design tools and the gap between mockups and implementation - t: 861 title: User research and iteration in design process - t: 1022 title: AI features and the prompt dialogue evolution - t: 1113 title: Generative and evaluative user research methods - t: 1234 title: Modern online research replacing physical lab settings - t: 1355 title: Discoverability testing and user recruitment strategies - t: 1456 title: Analysis mode mockup versus shipped implementation and company switcher evolution - t: 1698 title: Aligning with Microsoft Product Patterns - t: 1789 title: UI Design Complexity and Expert Decision-Making - t: 1910 title: Red Lines in Design and Design Specifications features: - name: Fluent Design Language status: unclear t: 496 verified: false status_source: video - name: Figma for UI Design status: unclear t: 638 verified: false status_source: video - name: Company Switcher status: unclear t: 252 verified: false status_source: video - name: Onboarding Project status: unclear t: 231 verified: false status_source: video - name: Analysis mode status: unclear t: 1416 verified: false status_source: video - name: Prompt dialogue for Copilot features status: unclear t: 1043 verified: false status_source: video - name: Design Specification with Red Lines status: unclear t: 1991 verified: false status_source: video - name: Component Flexibility for Localization status: unclear t: 2072 verified: false status_source: video - name: Partner UI Limitations and Standardization status: unclear t: 2152 verified: false status_source: video - name: Power Apps Integration for Customization status: unclear t: 2328 verified: false status_source: video objects_mentioned: - other prompt dialogue quotes: - t: 112 text: serving up the data and allowing users to work with business central but to have a good user experience check: fuzzy - t: 516 text: we are adhering to what is known as the fluent design language which is microsoft sort of official check: fuzzy - t: 577 text: it's important our user when they see the product they recognize it at business Central as well right they don't look when they don't check: exact - t: 638 text: office is a huge inspiration for us in terms of how things should work and act check: fuzzy - t: 739 text: their killer feature if you will for why they got successful was that they handled multi-user editing very well from from day one check: snapped - t: 881 text: the initial idea about what this should do and then where it ends up after working with Engineers PMs uh doing use research uh check: snapped - t: 982 text: what we do for a living so to say we we are selling the vision of how great this could be and then um check: snapped - t: 1043 text: our initial version V1 was very sort of limited but then we have continued building it out so today it's the I would say check: exact - t: 1194 text: it's much cheaper to change a PowerPoint than it is to to change something that you have coded so the more discoveries you can check: exact - t: 1557 text: we can't go forward with a feature where more than half of the test participants were not noticing these tabs here so so they check: exact - t: 1637 text: this is not actually a company switcher what users want here is an environment and Company switcher check: exact - t: 1658 text: this started as a relatively simple feature how difficult can it be to switch company to actually just a drop down of some kind check: snapped - t: 1658 text: before this feature it was super hard for them actually to discover the other environments check: exact - t: 1930 text: this experience where we were sort of pretty much taking over the whole screen right off the bat when users came into business Central check: exact - t: 2011 text: documenting uh at a at a very precise uh level of detail that is needed to actually go and implement this so it's all check: exact - t: 2092 text: we need to make sure that all the components we design are flexible in their sizing check: fuzzy - t: 2152 text: as opposed maybe to other type of programming when when our partners develop their features they don't have that level check: fuzzy - t: 2348 text: the tradeoff when you're building for business Central is that you you trade off some flexibility uh but you get a lot of behaviors check: exact --- # Business Central Under the Hood episode 7: Designing Business Central's UI, From Concept To Code > Business Central UI design process, from concept and Figma mockups to shipped code, in episode 7 of Under the Hood. It uses examples (company switcher, onboarding, analysis mode, prompt dialogue) to show how research changed designs, and why partners have limited UI control. [Watch on YouTube](https://www.youtube.com/watch?v=ugHFHtSxTlw) · Microsoft Dynamics 365 Business Central (YouTube) · 2025-01-03 · 40:26 · tier official · reviewed (checked by Opus) ## Overview The Business Central design team explains how a feature moves from an initial idea to shipped UI. They cover adherence to the Fluent design language, Figma as the design tool, and how user research changes the first mockups. Examples include the company switcher, which grew into an environment and company switcher after feedback, and the onboarding project, where a full-screen modal was replaced by an optional banner checklist. Analysis mode tabs moved from the bottom to the top after testing. The video also covers red-line design specs, flexible components for localization, and why partners have limited UI control, with Power Apps as an alternative. ## Key points - Business Central follows the Fluent design language, with its own treatment and patterns. Not all Office paradigms apply to ERP tasks. - The design team uses Figma. Multi-user editing is a main strength, and CSS can be taken from Figma for developer handoff. - The company switcher began as a simple company dropdown. Feedback showed users needed to switch environments and companies across environments, so it became an environment and company switcher. - Onboarding took multiple releases. A full-screen modal that blocked exploration was rejected in favor of an optional banner-based checklist. - In analysis mode testing, more than half of participants did not notice the tabs at the bottom of the page, so the tabs moved to the top before shipping. - Design specs with red lines record font sizes, margins, spacing and component behavior. Components must scale for localized content length. - Partners cannot adjust pixels, button sizes or element placement. When needs go beyond the standard flexibility, Power Apps is an option but takes more development effort. ## Chapters - [0:00](https://www.youtube.com/watch?v=ugHFHtSxTlw&t=0s) Introduction to UI and UX in Business Central - [3:13](https://www.youtube.com/watch?v=ugHFHtSxTlw&t=193s) Feature Design Process and Timeline - [5:54](https://www.youtube.com/watch?v=ugHFHtSxTlw&t=354s) Design Principles and User Understanding - [8:16](https://www.youtube.com/watch?v=ugHFHtSxTlw&t=496s) Fluent Design Language and Microsoft Standards - [10:38](https://www.youtube.com/watch?v=ugHFHtSxTlw&t=638s) Figma as a Design Tool - [13:00](https://www.youtube.com/watch?v=ugHFHtSxTlw&t=780s) Design tools and the gap between mockups and implementation - [14:21](https://www.youtube.com/watch?v=ugHFHtSxTlw&t=861s) User research and iteration in design process - [17:02](https://www.youtube.com/watch?v=ugHFHtSxTlw&t=1022s) AI features and the prompt dialogue evolution - [18:33](https://www.youtube.com/watch?v=ugHFHtSxTlw&t=1113s) Generative and evaluative user research methods - [20:34](https://www.youtube.com/watch?v=ugHFHtSxTlw&t=1234s) Modern online research replacing physical lab settings - [22:35](https://www.youtube.com/watch?v=ugHFHtSxTlw&t=1355s) Discoverability testing and user recruitment strategies - [24:16](https://www.youtube.com/watch?v=ugHFHtSxTlw&t=1456s) Analysis mode mockup versus shipped implementation and company switcher evolution - [28:18](https://www.youtube.com/watch?v=ugHFHtSxTlw&t=1698s) Aligning with Microsoft Product Patterns - [29:49](https://www.youtube.com/watch?v=ugHFHtSxTlw&t=1789s) UI Design Complexity and Expert Decision-Making - [31:50](https://www.youtube.com/watch?v=ugHFHtSxTlw&t=1910s) Red Lines in Design and Design Specifications ## Features | Feature | Status | At | |---|---|---| | Fluent Design Language | status not stated | [8:16](https://www.youtube.com/watch?v=ugHFHtSxTlw&t=496s) | | Figma for UI Design | status not stated | [10:38](https://www.youtube.com/watch?v=ugHFHtSxTlw&t=638s) | | Company Switcher | status not stated, demoed | [4:12](https://www.youtube.com/watch?v=ugHFHtSxTlw&t=252s) | | Onboarding Project | status not stated, demoed | [3:51](https://www.youtube.com/watch?v=ugHFHtSxTlw&t=231s) | | Analysis mode | status not stated, demoed | [23:36](https://www.youtube.com/watch?v=ugHFHtSxTlw&t=1416s) | | Prompt dialogue for Copilot features | status not stated | [17:23](https://www.youtube.com/watch?v=ugHFHtSxTlw&t=1043s) | | Design Specification with Red Lines | status not stated, demoed | [33:11](https://www.youtube.com/watch?v=ugHFHtSxTlw&t=1991s) | | Component Flexibility for Localization | status not stated | [34:32](https://www.youtube.com/watch?v=ugHFHtSxTlw&t=2072s) | | Partner UI Limitations and Standardization | status not stated | [35:52](https://www.youtube.com/watch?v=ugHFHtSxTlw&t=2152s) | | Power Apps Integration for Customization | status not stated | [38:48](https://www.youtube.com/watch?v=ugHFHtSxTlw&t=2328s) | ## AL objects mentioned As heard in the captions. A name that matches one object page by exact type and name links to it; the others stay as named. - other "prompt dialogue" at [17:23](https://www.youtube.com/watch?v=ugHFHtSxTlw&t=1043s) ## Quotes - [1:52](https://www.youtube.com/watch?v=ugHFHtSxTlw&t=112s) "serving up the data and allowing users to work with business central but to have a good user experience" - [8:36](https://www.youtube.com/watch?v=ugHFHtSxTlw&t=516s) "we are adhering to what is known as the fluent design language which is microsoft sort of official" - [9:37](https://www.youtube.com/watch?v=ugHFHtSxTlw&t=577s) "it's important our user when they see the product they recognize it at business Central as well right they don't look when they don't" - [10:38](https://www.youtube.com/watch?v=ugHFHtSxTlw&t=638s) "office is a huge inspiration for us in terms of how things should work and act" - [12:19](https://www.youtube.com/watch?v=ugHFHtSxTlw&t=739s) "their killer feature if you will for why they got successful was that they handled multi-user editing very well from from day one" - [14:41](https://www.youtube.com/watch?v=ugHFHtSxTlw&t=881s) "the initial idea about what this should do and then where it ends up after working with Engineers PMs uh doing use research uh" - [16:22](https://www.youtube.com/watch?v=ugHFHtSxTlw&t=982s) "what we do for a living so to say we we are selling the vision of how great this could be and then um" - [17:23](https://www.youtube.com/watch?v=ugHFHtSxTlw&t=1043s) "our initial version V1 was very sort of limited but then we have continued building it out so today it's the I would say" - [19:54](https://www.youtube.com/watch?v=ugHFHtSxTlw&t=1194s) "it's much cheaper to change a PowerPoint than it is to to change something that you have coded so the more discoveries you can" - [25:57](https://www.youtube.com/watch?v=ugHFHtSxTlw&t=1557s) "we can't go forward with a feature where more than half of the test participants were not noticing these tabs here so so they" - [27:17](https://www.youtube.com/watch?v=ugHFHtSxTlw&t=1637s) "this is not actually a company switcher what users want here is an environment and Company switcher" - [27:38](https://www.youtube.com/watch?v=ugHFHtSxTlw&t=1658s) "this started as a relatively simple feature how difficult can it be to switch company to actually just a drop down of some kind" - [27:38](https://www.youtube.com/watch?v=ugHFHtSxTlw&t=1658s) "before this feature it was super hard for them actually to discover the other environments" - [32:10](https://www.youtube.com/watch?v=ugHFHtSxTlw&t=1930s) "this experience where we were sort of pretty much taking over the whole screen right off the bat when users came into business Central" - [33:31](https://www.youtube.com/watch?v=ugHFHtSxTlw&t=2011s) "documenting uh at a at a very precise uh level of detail that is needed to actually go and implement this so it's all" - [34:52](https://www.youtube.com/watch?v=ugHFHtSxTlw&t=2092s) "we need to make sure that all the components we design are flexible in their sizing" - [35:52](https://www.youtube.com/watch?v=ugHFHtSxTlw&t=2152s) "as opposed maybe to other type of programming when when our partners develop their features they don't have that level" - [39:08](https://www.youtube.com/watch?v=ugHFHtSxTlw&t=2348s) "the tradeoff when you're building for business Central is that you you trade off some flexibility uh but you get a lot of behaviors" Presenters (as heard): Vincent, Yinda, Yob.