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.
- Introduction to UI and UX in Business Central
- Feature Design Process and Timeline
- Design Principles and User Understanding
- Fluent Design Language and Microsoft Standards
- Figma as a Design Tool
- Design tools and the gap between mockups and implementation
- User research and iteration in design process
- AI features and the prompt dialogue evolution
- Generative and evaluative user research methods
- Modern online research replacing physical lab settings
- Discoverability testing and user recruitment strategies
- Analysis mode mockup versus shipped implementation and company switcher evolution
- Aligning with Microsoft Product Patterns
- UI Design Complexity and Expert Decision-Making
- Red Lines in Design and Design Specifications
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.
Features
| Feature | Status | At |
|---|---|---|
| Fluent Design Language | status not stated | 8:16 |
| Figma for UI Design | status not stated | 10:38 |
| Company Switcher | status not stated, demoed | 4:12 |
| Onboarding Project | status not stated, demoed | 3:51 |
| Analysis mode | status not stated, demoed | 23:36 |
| Prompt dialogue for Copilot features | status not stated | 17:23 |
| Design Specification with Red Lines | status not stated, demoed | 33:11 |
| Component Flexibility for Localization | status not stated | 34:32 |
| Partner UI Limitations and Standardization | status not stated | 35:52 |
| Power Apps Integration for Customization | status not stated | 38:48 |
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
Quotes
- 1:52 “serving up the data and allowing users to work with business central but to have a good user experience”
- 8:36 “we are adhering to what is known as the fluent design language which is microsoft sort of official”
- 9:37 “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 “office is a huge inspiration for us in terms of how things should work and act”
- 12:19 “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 “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 “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 “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 “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 “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 “this is not actually a company switcher what users want here is an environment and Company switcher”
- 27:38 “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 “before this feature it was super hard for them actually to discover the other environments”
- 32:10 “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 “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 “we need to make sure that all the components we design are flexible in their sizing”
- 35:52 “as opposed maybe to other type of programming when when our partners develop their features they don’t have that level”
- 39:08 “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.