Updating a CRM to a new design system
Beginning in 2022, I led a team of three designers, working closely with our Product and Engineering partners, to meticulously update the Unified Client Interface (UCI) platform to the latest Fluent design system. This comprehensive update involved migrating components and pages, transforming our hard-coded styles and a legacy theming system into a modern, design token-based framework. As early adopters of Microsoft's new design system we worked closely with the Fluent team, providing feedback and surfacing technical bugs as well as difficulties in adoption.
Why shift to Fluent?
Alignment
The platform had recently moved to a new UI infrastructure built on an outdated design language, which was due for deprecation. Switching to Fluent aligned us with the latest design standards, enhancing consistency across Microsoft products.
Strategic Component Ownership
Adopting Fluent unlocked integration efficiencies via the Fluent v9 control set, which a dedicated dev team maintained. This freed our engineers to focus on core platform enhancements.
Improved Information Architecture (IA) and UX
The Fluent migration presented an opportunity to address long-standing UX issues, particularly around scannability and information clarity.
BEFORE
The CRM was released in 2018 and based on an outdated design system that Microsoft had already moved away from at the time of release.
aFTER
Creating the North Star Design
Our first step was to develop a North Star design, incorporating Fluent’s new elevation and field styles. Starting with fundamental elements, like background colors, we iteratively built up the design until we had high-fidelity mocks of all major page types. These designs were then validated through user testing, which confirmed strong preference towards the new UI across all primary user groups.
Early explorations of background colors, depths which needed to be determined first to ensure accessibility and dictate token assignment.
Implementing the Design, Component by Component
With the North Star design as our reference, we tackled each UI component across the platform. This involved replacing outdated, hardcoded styles with Fluent design tokens in collaboration with Engineers and PMs. Together, we ensured that each element in the UCI platform met the new design and theming standards.
An individual state of a compound control with tokens specified.
The full spec sheet for the new Grid control
Training Partner Teams on the New System
Given that our platform supports model-driven Power Apps and numerous Dynamics 365 applications, we needed partner teams to update their own custom controls and pages. Instead of handling these directly, I led workshops for Dynamics 365 designers, providing documentation, guidance files, and spec templates to enable them to modernize their products independently.
Some examples of the documentation created to educate partner design teams on how to implement the design system:
Pilot Launch and Feedback Monitoring
To manage risk and gather insights, we initially launched the new UI in preview, allowing select users to toggle on the “New Look.” We closely monitored user feedback and telemetry, paying particular attention to reversion rates. Our improved feedback system enabled us to log bugs quickly and address concerns, resulting in a decrease in reversion rates and a rise in NSAT among users who tried the new UI.
Addressing a Significant User Pain Point
A common theme in user feedback was discomfort with the new field style. Fluent’s primary design for input fields uses a grey background for fields, contrasting with the products previous grey background for disabled fields. This caused confusion among legacy users, so we conducted targeted research to understand the extent of the issue. We had actually anticipated this problem in our initial designs but decided to move forward due to a lack of better alternatives. Our findings showed that while users adapted over time, a gradual rollout of the new style eased the transition. To aid in adoption we brought back an icon displayed next to disabled fields that was present in the legacy design and had been removed to reduce clutter. We had to have some difficult conversations with leadership to bring them along and convince them that the reaction was due to change aversion and would not continue to be a problem after the initial introduction to the new design. Thankfully, those instincts and the research proved out and users quickly adjusted to the new UI.
A slide from a research read out highlighting the issue.
One potential alternative that was mocked up to demonstrate why we chose the ‘filled’ field style. The repetition of horizontal lines on with the ‘outline’ field style hurts readability and eye tracking.
Enterprise Adoption Challenges
One reality of large-scale enterprise design is the slower adoption rate due to the risks and adjustments needed across training, communication, and core workflows. Although the new design is available to all users, we are still in the adoption phase, seeing promising signals of increased satisfaction and improvements in performance, accessibility, and theme-ability.
Large scale changes can be SLOOOWWWWW…
Key Learnings and Takeaways
Strategic Alignment and Long-Term Planning
Aligning our update with Microsoft’s design ecosystem minimized future redesign needs, ensuring our platform remains consistent.
Cross-Functional Collaboration
Close cooperation between Design, Engineering, and Product teams was crucial for a seamless, consistent implementation.
Progressive User Testing and Feedback
Early testing validated our designs, and phased rollouts allowed for continuous user feedback and refinement.
Empowering Partner Teams
Workshops and documentation enabled partner teams to manage their own adaptations, accelerating adoption across products.
Balancing Design Intent and Practicality
Managing user adaptation challenges required balancing new design principles with practical usability needs.
Patience with Enterprise Adoption
Rolling out significant updates required time for training, stakeholder alignment, and risk management. A phased approach proved effective in supporting enterprise adoption.
