The engagement began in the final week of March 2018. Initial handoff to developers was approximately 4 weeks later, with implementation starting in early May. Design work continued in parallel, with several iterative deliveries and updates.<\/p>\n
Team<\/h2>\n
I was the design owner and driver, working directly with my team’s content designer, my team’s researcher, and 1 key PM partner (who left and was replaced halfway through.) I also partnered with a shared design analyst who helped us look at past telemetry (scant as it was). My direct report designers and my PM partner’s peers and manager were reviewers on the ongoing work.<\/p>\n
Phase 1: Settings Spelunking<\/h2>\n
The project brief I received did not specify specific settings; only the pages those settings were on. This wasn’t a sufficient level of documentation, as some of those pages contained dozens of settings from vastly different features. I originally asked our product management partner to obtain documentation for individual settings, but after they declined I took it upon myself to do the work to ensure this new design would have a chance at improving upon the old model.<\/p>\n
What I found in the existing interface<\/h3>\n
![\"The](\"https:\/\/i0.wp.com\/portfolio.cherylplatz.com\/wp-content\/uploads\/2018\/10\/E2E_EntryPoint_DynamicsOrg_0.png?ssl=1\" "\\"E2E_EntryPoint_DynamicsOrg_0\\"")
<\/a> <\/a> <\/a> <\/a> <\/a> <\/a> <\/a> <\/a> <\/a> The output of my initial investigation<\/h3>\n![\"\"](\"https:\/\/i0.wp.com\/portfolio.cherylplatz.com\/wp-content\/uploads\/2018\/10\/D365Settings-Excel-March2018.png?resize=300%2C194&ssl=1\")
<\/a> Screenshot from my initial settings audit, which identified 113 settings in the Administration tab alone.<\/figure>\nOnce I’d completed this initial phase, I had an Excel spreadsheet of “documentation” upon which I could base my future design work. This document continues to inform the development team, even after my departure months later.<\/p>\n
While the primary focus of phase 1 was the Administration L1 group plus a few scattered pages from other L1 groups, I wanted to look at things holistically to ensure my design would solve for future expansions appropriately. Once I completed my look at Administration, I looked across all other L1 pages to determine how deep their tree went. This was critical in helping me later identify which Fabric UI affordances would be most appropriate, and how to group the broader Settings areas.<\/p>\n
Phase 2: Affinity and Grouping<\/h2>\n
Once I’d assessed the situation, I immersed myself in the possibilities. I ran two parallel explorations, working back and forth between them as needed:<\/p>\n
\n- A top-level exploration of potential new L1 and L2 groupings, trying to flatten the tree (Post-it and Sharpie)<\/li>\n
- A detailed affinity exercise for the individual settings, attempting to identify more useful L3 groupings (paper and post-it)<\/li>\n<\/ol>\n
The inputs were not only the list of settings, but previous proposals from our product management team about page-level groupings that did not necessarily take individual settings into account.<\/p>\n
My affinity exercises and reviews in progress<\/h3>\n
\n\t\t\t\n\t\t\t\t![\"\"](\"https:\/\/i0.wp.com\/portfolio.cherylplatz.com\/wp-content\/uploads\/2018\/10\/20180330_202413013_iOS.jpg?resize=150%2C150&ssl=1\")
<\/a>\n\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\tBig-picture affinity diagramming exercise in progress: how to regroup L2 and L3 pages to streamline the IA.\n\t\t\t\t<\/figcaption><\/figure>\n\t\t\t\n\t\t\t\t![\"\"](\"https:\/\/i0.wp.com\/portfolio.cherylplatz.com\/wp-content\/uploads\/2018\/10\/20180412_224707018_iOS.jpg?resize=150%2C150&ssl=1\")
<\/a>\n\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\tSettings-level affinity diagramming – L2\/L3\/L4 grouping for System Settings and other key areas\n\t\t\t\t<\/figcaption><\/figure>\n\t\t\t\n\t\t\t\t![\"\"](\"https:\/\/i0.wp.com\/portfolio.cherylplatz.com\/wp-content\/uploads\/2018\/10\/20180412_224723895_iOS.jpg?resize=150%2C150&ssl=1\")
<\/a>\n\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\tExamining the layout of Formats, which was originally 3 levels of popups\n\t\t\t\t<\/figcaption><\/figure>\n\t\t\t\n\t\t\t\t![\"\"](\"https:\/\/i0.wp.com\/portfolio.cherylplatz.com\/wp-content\/uploads\/2018\/10\/20180412_224728898_iOS.jpg?resize=150%2C150&ssl=1\")
<\/a>\n\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\tProposing a new settings grouping, tentatively titled Features\n\t\t\t\t<\/figcaption><\/figure>\n\t\t\t\n\t\t\t\t![\"\"](\"https:\/\/i0.wp.com\/portfolio.cherylplatz.com\/wp-content\/uploads\/2018\/10\/20180323_214144420_iOS.jpg?resize=150%2C150&ssl=1\")
<\/a>\n\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\tEstablishing open questions that will influence how we launch the Settings experience\n\t\t\t\t<\/figcaption><\/figure>\n\t\t\t\n\t\t\t\t![\"\"](\"https:\/\/i0.wp.com\/portfolio.cherylplatz.com\/wp-content\/uploads\/2018\/10\/20180323_214538072_iOS.jpg?resize=150%2C150&ssl=1\")
<\/a>\n\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\tDeveloping a design plan to decide how Settings fit into the bigger picture\n\t\t\t\t<\/figcaption><\/figure>\n\t\t<\/div>\nAs my ideas coalesced, I brought my team members in for second opinions, and to begin evaluating our options across the Fabric UI framework. We began to identify several models for how we might map these groupings into the UI patterns in common use across Microsoft on this UI stack, and explored how we might get to these settings in the first place.<\/p>\nThe output of this phase of exploration was twofold:<\/p>\n
\n- An updated Excel list of settings, with proposed groupings added<\/li>\n
- Two proposals for how to represent these groupings using Fabric design patterns.<\/li>\n<\/ol>\n
Phase 2 designs, option 1: Hub and Spoke<\/h3>\n
This exploration optimizes for quick scanning of key settings across multiple L3 groups. However, the hub page inserts an additional click level between an admin and the act of changing any individual setting. It also overloaded the pivot pattern, nearly breaking the Fabric patterns for complicated areas like Security and Duplicate Detection.<\/p>\n
\n\t\t\t\n\t\t\t\t![\"\"](\"https:\/\/i0.wp.com\/portfolio.cherylplatz.com\/wp-content\/uploads\/2018\/10\/OptionA_L1_HubTreatment.png?resize=150%2C150&ssl=1\")
<\/a>\n\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\tOption A: The L0 settings “hub”. Optimized for scanning key configuration details.\n\t\t\t\t<\/figcaption><\/figure>\n\t\t\t\n\t\t\t\t![\"\"](\"https:\/\/i0.wp.com\/portfolio.cherylplatz.com\/wp-content\/uploads\/2018\/10\/OptionA_L2-DuplicateDetection-A.png?resize=150%2C150&ssl=1\")
<\/a>\n\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\tOption A: An L1 “spoke” page. The pivots are needed to expose L2 links. This means we can’t use these pivots for complex L3 nodes like Security Roles.\n\t\t\t\t<\/figcaption><\/figure>\n\t\t\t\n\t\t\t\t![\"\"](\"https:\/\/i0.wp.com\/portfolio.cherylplatz.com\/wp-content\/uploads\/2018\/10\/OptionA_L2-SecurityRoles.png?resize=150%2C150&ssl=1\")
<\/a>\n\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\tOption A: An L1 “spoke” page for Security. The overload of pivots means that some deeper L3\/L4 areas like \n\t\t\t\t<\/figcaption><\/figure>\n\t\t<\/div>\nPhase 2 designs, option 2: Wall of Links<\/p>\nThe “wall of links” is cheaper to implement and far less attractive, but it optimizes for the act of changing a setting as opposed to auditing the state of settings. L1 groups become semantic only, and are used to increase the accessibility of the page for screen readers or mobile usage. Links go straight to L2 pages, rather than L1 pages with links to L2. This also freed up the use of the pivot control for filtering large lists. However, the L1 groups don’t appear in the breadcrumb, which may cause disorientation or loss of context.<\/p>\n
\n\t\t\t\n\t\t\t\t![\"\"](\"https:\/\/i0.wp.com\/portfolio.cherylplatz.com\/wp-content\/uploads\/2018\/10\/OptionB_L1-ListTreatment.png?resize=150%2C150&ssl=1\")
<\/a>\n\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\tOption B: The L0 “Wall of links”, where the L1 groupings are semantic only. Direct-linking to L2 pages drastically reduced the complexity of those pages and increases accessibility.\n\t\t\t\t<\/figcaption><\/figure>\n\t\t\t\n\t\t\t\t![\"\"](\"https:\/\/i0.wp.com\/portfolio.cherylplatz.com\/wp-content\/uploads\/2018\/10\/OptionB_L2-DuplicateDetection-A.png?resize=150%2C150&ssl=1\")
<\/a>\n\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\tOption B: Duplicate Detection as a direct-linked L2 page, and the pivots used for L3 groups of unlike items.\n\t\t\t\t<\/figcaption><\/figure>\n\t\t\t\n\t\t\t\t![\"\"](\"https:\/\/i0.wp.com\/portfolio.cherylplatz.com\/wp-content\/uploads\/2018\/10\/OptionB_L2_Grid_Role.png?resize=150%2C150&ssl=1\")
<\/a>\n\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\tOption B: Security Roles as a direct-linked L2 page\n\t\t\t\t<\/figcaption><\/figure>\n\t\t<\/div>\nPhase 3: Socialization and Buy-In<\/p>\nI took the output of phase 2 and rapidly pulled it into a presentation for our product management and development partners (and also to ensure the Design team was up to date.) My philosophy is that it’s important to bring our partners along on our journey, so I took specific care to document all of the inputs to the process and my reasoning behind the outputs and explorations.<\/p>\n
Click here to review the original proposal (PDF)<\/a><\/p>\nWe reviewed this presentation with our product management partners and came out with a clear path forward: the affectionately-titled Wall of Links.<\/p>\n
Phase 4: Design individual settings pages<\/h2>\n
Once the path forward was set, my task was clear: implement designs of each specific Settings page that would be required for Public Preview, slated to start implementation in just a few weeks. As our broader design studio was making the move into Figma, this became my first large-scale design effort in Figma – learning a new tool alongside the large-scale design operation.<\/p>\n
This work required quite a bit of cross-referencing with the Fabric UI guidelines and also page patterns like grids\/lists developed specifically by and for sister teams within the Business Applications Group. The Figma file was handed directly to developers for implementation, with a different page used for each UI milestone (the June release was v0.2). Immediately after initial handoff, I began work on v0.3, which incorporated further feedback from stakeholders.<\/p>\n
Example designs for the June release<\/h3>\n
\n\t\t\t\n\t\t\t\t![\"\"](\"https:\/\/i0.wp.com\/portfolio.cherylplatz.com\/wp-content\/uploads\/2018\/10\/L1_SettingsGroups%402x.png?resize=150%2C150&ssl=1\")
<\/a>\n\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\tPublic preview POR: The L0 “wall of links”, L1 groupings, and L2 links\n\t\t\t\t<\/figcaption><\/figure>\n\t\t\t\n\t\t\t\t![\"\"](\"https:\/\/i0.wp.com\/portfolio.cherylplatz.com\/wp-content\/uploads\/2018\/10\/L2_Behavior%402x.png?resize=150%2C150&ssl=1\")
<\/a>\n\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\tNew Behavior L2 page replaces part of System Settings\n\t\t\t\t<\/figcaption><\/figure>\n\t\t\t\n\t\t\t\t![\"\"](\"https:\/\/i0.wp.com\/portfolio.cherylplatz.com\/wp-content\/uploads\/2018\/10\/L2_Features%402x.png?resize=150%2C150&ssl=1\")
<\/a>\n\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\tNew Features L2 page replaces part of System Settings\n\t\t\t\t<\/figcaption><\/figure>\n\t\t\t\n\t\t\t\t![\"\"](\"https:\/\/i0.wp.com\/portfolio.cherylplatz.com\/wp-content\/uploads\/2018\/10\/L2_Languages_Selected%402x.png?resize=150%2C150&ssl=1\")
<\/a>\n\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\tNew non-popup approach to Languages that’s much more scalable and accessible, using standard patterns\n\t\t\t\t<\/figcaption><\/figure>\n\t\t\t\n\t\t\t\t![\"\"](\"https:\/\/i0.wp.com\/portfolio.cherylplatz.com\/wp-content\/uploads\/2018\/10\/L2_Privacy%402x.png?resize=150%2C150&ssl=1\")
<\/a>\n\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\tNew Privacy & Security L2 page represents parts of Privacy and parts of System Settings\n\t\t\t\t<\/figcaption><\/figure>\n\t\t\t\n\t\t\t\t![\"\"](\"https:\/\/i0.wp.com\/portfolio.cherylplatz.com\/wp-content\/uploads\/2018\/10\/L2_Biz_Closures%402x.png?resize=150%2C150&ssl=1\")
<\/a>\n\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\tBusiness Closures L2 listview\n\t\t\t\t<\/figcaption><\/figure>\n\t\t\t\n\t\t\t\t![\"\"](\"https:\/\/i0.wp.com\/portfolio.cherylplatz.com\/wp-content\/uploads\/2018\/10\/BizClosures_Panel_New_Full%402x.png?resize=150%2C150&ssl=1\")
<\/a>\n\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\tNew Business Closures create\/edit panel\n\t\t\t\t<\/figcaption><\/figure>\n\t\t\t\n\t\t\t\t![\"\"](\"https:\/\/i0.wp.com\/portfolio.cherylplatz.com\/wp-content\/uploads\/2018\/10\/L2_Calendar%402x.png?resize=150%2C150&ssl=1\")
<\/a>\n\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\tNew Calendar L2 page unifies Fiscal Year, Scheduling and other legacy settings\n\t\t\t\t<\/figcaption><\/figure>\n\t\t\t\n\t\t\t\t![\"\"](\"https:\/\/i0.wp.com\/portfolio.cherylplatz.com\/wp-content\/uploads\/2018\/10\/L2_Currencies%402x.png?resize=150%2C150&ssl=1\")
<\/a>\n\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\tCurrencies L2 listview using Fabric and pivots\n\t\t\t\t<\/figcaption><\/figure>\n\t\t\t\n\t\t\t\t![\"\"](\"https:\/\/i0.wp.com\/portfolio.cherylplatz.com\/wp-content\/uploads\/2018\/10\/Currencies_New%402x.png?resize=150%2C150&ssl=1\")
<\/a>\n\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\tNew Currencies create\/edit panel\n\t\t\t\t<\/figcaption><\/figure>\n\t\t\t\n\t\t\t\t![\"\"](\"https:\/\/i0.wp.com\/portfolio.cherylplatz.com\/wp-content\/uploads\/2018\/10\/L2_Regional_Selected%402x.png?resize=150%2C150&ssl=1\")
<\/a>\n\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\tNew Regional Formatting L2 page – formerly nested deep within System Settings. Note the links in the table – clicking the link directly opens that child panel without navigating through the parent edit panel.\n\t\t\t\t<\/figcaption><\/figure>\n\t\t\t\n\t\t\t\t![\"\"](\"https:\/\/i0.wp.com\/portfolio.cherylplatz.com\/wp-content\/uploads\/2018\/10\/Formats_Regional_Edit%402x.png?resize=150%2C150&ssl=1\")
<\/a>\n\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\t“Parent” panel for editing regional formatting: instead of nested popups, we introduced a navigation model within the standard panel\n\t\t\t\t<\/figcaption><\/figure>\n\t\t\t\n\t\t\t\t![\"\"](\"https:\/\/i0.wp.com\/portfolio.cherylplatz.com\/wp-content\/uploads\/2018\/10\/Formats_Regional_Date%402x.png?resize=150%2C150&ssl=1\")
<\/a>\n\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\t“Child” panel for editing regional time and date\n\t\t\t\t<\/figcaption><\/figure>\n\t\t\t\n\t\t\t\t![\"\"](\"https:\/\/i0.wp.com\/portfolio.cherylplatz.com\/wp-content\/uploads\/2018\/10\/Formats_Regional_Number%402x.png?resize=150%2C150&ssl=1\")
<\/a>\n\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\t“Child” panel for editing regional numbers\n\t\t\t\t<\/figcaption><\/figure>\n\t\t<\/div>\nInformation architecture v0.3<\/p>\n![\"\"](\"https:\/\/i0.wp.com\/portfolio.cherylplatz.com\/wp-content\/uploads\/2018\/10\/IA_EnvironmentsInfoArchitecture.png?resize=840%2C619&ssl=1\")
<\/a><\/p>\nPhase 5: Research and Iterate<\/h2>\n
While the implementation timeline was too aggressive to test our work prior to handoff, we still planned and launched a wayfinding study using the v0.3 handoff designs and Invision as a prototyping tool. My researcher took the lead (with my input) on launching an online study for 6 admin users without prior Dynamics experience. The study plan included 9 Settings tasks (2 for Behavior, 2 for Features, 2 for Privacy\/Security, and one for Currencies.<\/p>\n
Initial research findings<\/h3>\n
Success rates were solid, but there was considerable ambiguity related to the L2 pages \u201cBehavior\u201d and \u201cFeatures\u201d.<\/em>
\nWe decided to look for better semantic groupings, starting with an analysis of which settings were truly CDS-wide versus Dynamics-specific.<\/p>\nCustomers also encountered a surprising level of confusion due to the \u201cOffice integrations\u201d L2 page, which was proposed by a partner team.<\/em>
\nCustomers started there for all Office-related tasks. We resolved to provide alternate naming for that L2 page.<\/p>\nMoving forward with v0.4<\/h3>\n
Based on the results of that study, we decided to dig deeper for a new facet to differentiate features between Behavior and Features. We landed on a hypothesis that we might be able to distinguish environment-level settings (those not specific to Dynamics installations) versus Dynamics app settings (only valid if Dynamics is actually installed in an environment.)<\/p>\n
While documentation was light, we found some subject matter experts that could help us make enough educated guesses to take another pass at the proposed groupings. This also allowed us the opportunity to address some excellent stakeholder feedback from an earlier review: there were environment settings elsewhere in the portal, and they raised a valid concern that customers would be confused by multiple Settings entry points.<\/p>\n
Initial explorations for v0.4<\/h3>\n
This work has not yet been released. Images coming after the next major release.<\/em><\/p>\nDesign impact<\/h2>\n
As of the time of this writing, v0.4 has been handed off to my successors, and work continues. The Settings v0.2 and v0.3 work went into private preview in July 2018, and public preview was announced in September. While only a few weeks have elapsed, the buzz in the community has already started – and we’re even hearing success stories where our new Settings design is leading to the discovery of previously-overlooked configuration options!<\/p>\n
\nWhy the Power platform Admin center is the future destination for managing Microsoft Dynamics 365 administration tasks. https:\/\/t.co\/AG6Gp91Rch<\/a> #MSDyn365CE<\/a> #MSDyn365<\/a> #PowerPlatform<\/a> #PowerApps<\/a> #CRM<\/a> pic.twitter.com\/ixydoRALxz<\/a><\/p>\n\u2014 Preact CRM (@PreactCRM) October 2, 2018<\/a><\/p>\n<\/blockquote>\n
<\/a> Screenshot from my initial settings audit, which identified 113 settings in the Administration tab alone.<\/figure>\nOnce I’d completed this initial phase, I had an Excel spreadsheet of “documentation” upon which I could base my future design work. This document continues to inform the development team, even after my departure months later.<\/p>\n
While the primary focus of phase 1 was the Administration L1 group plus a few scattered pages from other L1 groups, I wanted to look at things holistically to ensure my design would solve for future expansions appropriately. Once I completed my look at Administration, I looked across all other L1 pages to determine how deep their tree went. This was critical in helping me later identify which Fabric UI affordances would be most appropriate, and how to group the broader Settings areas.<\/p>\n
Phase 2: Affinity and Grouping<\/h2>\n
Once I’d assessed the situation, I immersed myself in the possibilities. I ran two parallel explorations, working back and forth between them as needed:<\/p>\n
- \n
- A top-level exploration of potential new L1 and L2 groupings, trying to flatten the tree (Post-it and Sharpie)<\/li>\n
- A detailed affinity exercise for the individual settings, attempting to identify more useful L3 groupings (paper and post-it)<\/li>\n<\/ol>\n
The inputs were not only the list of settings, but previous proposals from our product management team about page-level groupings that did not necessarily take individual settings into account.<\/p>\n
My affinity exercises and reviews in progress<\/h3>\n
\n\t\t\t \n\t\t\t\t<\/a>\n\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\tBig-picture affinity diagramming exercise in progress: how to regroup L2 and L3 pages to streamline the IA.\n\t\t\t\t<\/figcaption><\/figure> \n\t\t\t \n\t\t\t\t<\/a>\n\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\tSettings-level affinity diagramming – L2\/L3\/L4 grouping for System Settings and other key areas\n\t\t\t\t<\/figcaption><\/figure> \n\t\t\t \n\t\t\t\t<\/a>\n\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\tExamining the layout of Formats, which was originally 3 levels of popups\n\t\t\t\t<\/figcaption><\/figure> \n\t\t\t \n\t\t\t\t<\/a>\n\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\tProposing a new settings grouping, tentatively titled Features\n\t\t\t\t<\/figcaption><\/figure> \n\t\t\t \n\t\t\t\t<\/a>\n\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\tEstablishing open questions that will influence how we launch the Settings experience\n\t\t\t\t<\/figcaption><\/figure> \n\t\t\t \n\t\t\t\t<\/a>\n\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\tDeveloping a design plan to decide how Settings fit into the bigger picture\n\t\t\t\t<\/figcaption><\/figure>\n\t\t<\/div>\nAs my ideas coalesced, I brought my team members in for second opinions, and to begin evaluating our options across the Fabric UI framework. We began to identify several models for how we might map these groupings into the UI patterns in common use across Microsoft on this UI stack, and explored how we might get to these settings in the first place.<\/p>\n The output of this phase of exploration was twofold:<\/p>\n
- \n
- An updated Excel list of settings, with proposed groupings added<\/li>\n
- Two proposals for how to represent these groupings using Fabric design patterns.<\/li>\n<\/ol>\n
Phase 2 designs, option 1: Hub and Spoke<\/h3>\n
This exploration optimizes for quick scanning of key settings across multiple L3 groups. However, the hub page inserts an additional click level between an admin and the act of changing any individual setting. It also overloaded the pivot pattern, nearly breaking the Fabric patterns for complicated areas like Security and Duplicate Detection.<\/p>\n
\n\t\t\t \n\t\t\t\t<\/a>\n\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\tOption A: The L0 settings “hub”. Optimized for scanning key configuration details.\n\t\t\t\t<\/figcaption><\/figure> \n\t\t\t \n\t\t\t\t<\/a>\n\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\tOption A: An L1 “spoke” page. The pivots are needed to expose L2 links. This means we can’t use these pivots for complex L3 nodes like Security Roles.\n\t\t\t\t<\/figcaption><\/figure> \n\t\t\t \n\t\t\t\t<\/a>\n\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\tOption A: An L1 “spoke” page for Security. The overload of pivots means that some deeper L3\/L4 areas like \n\t\t\t\t<\/figcaption><\/figure>\n\t\t<\/div>\nPhase 2 designs, option 2: Wall of Links<\/p>\n The “wall of links” is cheaper to implement and far less attractive, but it optimizes for the act of changing a setting as opposed to auditing the state of settings. L1 groups become semantic only, and are used to increase the accessibility of the page for screen readers or mobile usage. Links go straight to L2 pages, rather than L1 pages with links to L2. This also freed up the use of the pivot control for filtering large lists. However, the L1 groups don’t appear in the breadcrumb, which may cause disorientation or loss of context.<\/p>\n
\n\t\t\t \n\t\t\t\t<\/a>\n\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\tOption B: The L0 “Wall of links”, where the L1 groupings are semantic only. Direct-linking to L2 pages drastically reduced the complexity of those pages and increases accessibility.\n\t\t\t\t<\/figcaption><\/figure> \n\t\t\t \n\t\t\t\t<\/a>\n\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\tOption B: Duplicate Detection as a direct-linked L2 page, and the pivots used for L3 groups of unlike items.\n\t\t\t\t<\/figcaption><\/figure> \n\t\t\t \n\t\t\t\t<\/a>\n\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\tOption B: Security Roles as a direct-linked L2 page\n\t\t\t\t<\/figcaption><\/figure>\n\t\t<\/div>\nPhase 3: Socialization and Buy-In<\/p>\n I took the output of phase 2 and rapidly pulled it into a presentation for our product management and development partners (and also to ensure the Design team was up to date.) My philosophy is that it’s important to bring our partners along on our journey, so I took specific care to document all of the inputs to the process and my reasoning behind the outputs and explorations.<\/p>\n
Click here to review the original proposal (PDF)<\/a><\/p>\n
We reviewed this presentation with our product management partners and came out with a clear path forward: the affectionately-titled Wall of Links.<\/p>\n
Phase 4: Design individual settings pages<\/h2>\n
Once the path forward was set, my task was clear: implement designs of each specific Settings page that would be required for Public Preview, slated to start implementation in just a few weeks. As our broader design studio was making the move into Figma, this became my first large-scale design effort in Figma – learning a new tool alongside the large-scale design operation.<\/p>\n
This work required quite a bit of cross-referencing with the Fabric UI guidelines and also page patterns like grids\/lists developed specifically by and for sister teams within the Business Applications Group. The Figma file was handed directly to developers for implementation, with a different page used for each UI milestone (the June release was v0.2). Immediately after initial handoff, I began work on v0.3, which incorporated further feedback from stakeholders.<\/p>\n
Example designs for the June release<\/h3>\n
\n\t\t\t \n\t\t\t\t<\/a>\n\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\tPublic preview POR: The L0 “wall of links”, L1 groupings, and L2 links\n\t\t\t\t<\/figcaption><\/figure> \n\t\t\t \n\t\t\t\t<\/a>\n\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\tNew Behavior L2 page replaces part of System Settings\n\t\t\t\t<\/figcaption><\/figure> \n\t\t\t \n\t\t\t\t<\/a>\n\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\tNew Features L2 page replaces part of System Settings\n\t\t\t\t<\/figcaption><\/figure> \n\t\t\t \n\t\t\t\t<\/a>\n\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\tNew non-popup approach to Languages that’s much more scalable and accessible, using standard patterns\n\t\t\t\t<\/figcaption><\/figure> \n\t\t\t \n\t\t\t\t<\/a>\n\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\tNew Privacy & Security L2 page represents parts of Privacy and parts of System Settings\n\t\t\t\t<\/figcaption><\/figure> \n\t\t\t \n\t\t\t\t<\/a>\n\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\tBusiness Closures L2 listview\n\t\t\t\t<\/figcaption><\/figure> \n\t\t\t \n\t\t\t\t<\/a>\n\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\tNew Business Closures create\/edit panel\n\t\t\t\t<\/figcaption><\/figure> \n\t\t\t \n\t\t\t\t<\/a>\n\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\tNew Calendar L2 page unifies Fiscal Year, Scheduling and other legacy settings\n\t\t\t\t<\/figcaption><\/figure> \n\t\t\t \n\t\t\t\t<\/a>\n\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\tCurrencies L2 listview using Fabric and pivots\n\t\t\t\t<\/figcaption><\/figure> \n\t\t\t \n\t\t\t\t<\/a>\n\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\tNew Currencies create\/edit panel\n\t\t\t\t<\/figcaption><\/figure> \n\t\t\t \n\t\t\t\t<\/a>\n\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\tNew Regional Formatting L2 page – formerly nested deep within System Settings. Note the links in the table – clicking the link directly opens that child panel without navigating through the parent edit panel.\n\t\t\t\t<\/figcaption><\/figure> \n\t\t\t \n\t\t\t\t<\/a>\n\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\t“Parent” panel for editing regional formatting: instead of nested popups, we introduced a navigation model within the standard panel\n\t\t\t\t<\/figcaption><\/figure> \n\t\t\t \n\t\t\t\t<\/a>\n\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\t“Child” panel for editing regional time and date\n\t\t\t\t<\/figcaption><\/figure> \n\t\t\t \n\t\t\t\t<\/a>\n\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\t“Child” panel for editing regional numbers\n\t\t\t\t<\/figcaption><\/figure>\n\t\t<\/div>\nInformation architecture v0.3<\/p>\n <\/a><\/p>\nPhase 5: Research and Iterate<\/h2>\n
While the implementation timeline was too aggressive to test our work prior to handoff, we still planned and launched a wayfinding study using the v0.3 handoff designs and Invision as a prototyping tool. My researcher took the lead (with my input) on launching an online study for 6 admin users without prior Dynamics experience. The study plan included 9 Settings tasks (2 for Behavior, 2 for Features, 2 for Privacy\/Security, and one for Currencies.<\/p>\n
Initial research findings<\/h3>\n
Success rates were solid, but there was considerable ambiguity related to the L2 pages \u201cBehavior\u201d and \u201cFeatures\u201d.<\/em>
\nWe decided to look for better semantic groupings, starting with an analysis of which settings were truly CDS-wide versus Dynamics-specific.<\/p>\nCustomers also encountered a surprising level of confusion due to the \u201cOffice integrations\u201d L2 page, which was proposed by a partner team.<\/em>
\nCustomers started there for all Office-related tasks. We resolved to provide alternate naming for that L2 page.<\/p>\nMoving forward with v0.4<\/h3>\n
Based on the results of that study, we decided to dig deeper for a new facet to differentiate features between Behavior and Features. We landed on a hypothesis that we might be able to distinguish environment-level settings (those not specific to Dynamics installations) versus Dynamics app settings (only valid if Dynamics is actually installed in an environment.)<\/p>\n
While documentation was light, we found some subject matter experts that could help us make enough educated guesses to take another pass at the proposed groupings. This also allowed us the opportunity to address some excellent stakeholder feedback from an earlier review: there were environment settings elsewhere in the portal, and they raised a valid concern that customers would be confused by multiple Settings entry points.<\/p>\n
Initial explorations for v0.4<\/h3>\n
This work has not yet been released. Images coming after the next major release.<\/em><\/p>\n
Design impact<\/h2>\n
As of the time of this writing, v0.4 has been handed off to my successors, and work continues. The Settings v0.2 and v0.3 work went into private preview in July 2018, and public preview was announced in September. While only a few weeks have elapsed, the buzz in the community has already started – and we’re even hearing success stories where our new Settings design is leading to the discovery of previously-overlooked configuration options!<\/p>\n
\n
Why the Power platform Admin center is the future destination for managing Microsoft Dynamics 365 administration tasks. https:\/\/t.co\/AG6Gp91Rch<\/a> #MSDyn365CE<\/a> #MSDyn365<\/a> #PowerPlatform<\/a> #PowerApps<\/a> #CRM<\/a> pic.twitter.com\/ixydoRALxz<\/a><\/p>\n
\u2014 Preact CRM (@PreactCRM) October 2, 2018<\/a><\/p>\n<\/blockquote>\n