Timeline
control for enterprises

How to optimize the timeline efficiency with customizable components?

Project Context

Feature TeamYvonne Xiao(Content Designer), Craig Maas(PM), Daniel Leblond(Engineering Manager) + team of 8 developers
Project status🚀   Launched
Role
UX Designer
Date
October 2019
- December 2020
Since June 2019, I've been working on the Customer Service application of Microsoft Dynamics 365, which provides seamless, end-to-end customer service experiences within a single solution built on the Microsoft cloud to deliver consistent, connected support across channels.
Joining as the first US-based designer, I owned one of the most important features across the Dynamics 365 platform - timeline. Besides Customer Service app, Sales and Marketing apps also use timeline to track customers interactions, major events, to-do items, etc. When I first worked on timeline back in October 2019, the control was problematic, with usability issues and outdated interface.
Timeline UI in October 2019
Moreover, Dynamics 365 provides customizable features with which customers are able to change page layout and configure feature settings based on their unique business needs. In order to empower our customers with full capabilities of the product, we need to provide a user-friendly configuration solution, together with the out-of-box application.

Second step

Enabling no-code configurations with Power Apps

To unlock full capabilities of the timeline control, we introduced a brand new maker/admin experience leveraging Microsoft Power Apps, which is an app suite that helps customers quickly build custom business apps.

Achieving the north star through four phases

As a customizable tool, timeline control is flexible yet complicated. Besides learning how those underlying functionalities work, IT admins also need to easily change settings and visualize the updated UIs. With Power Apps, every configuration action triggers an immediate product preview on the canvas. We also redesigned the information architecture of the configurations, only surfacing the most important and frequently used settings. Working with Content Designer, we updated the instructions and added tooltips for more advanced settings. Within 14 months, we achieved our Northstar by designing with full picture in mind and incrementally adding features.

Phase 1 (October 2019 - February 2020)

Inheriting parity functionalities from the legacy configuration tool

Phase 2+3 (April - August 2020)

Adding activity settings and default filter configurations

Phase 4 (October - December 2020)

Adding profile picture, card form, and command buttons configurations

Highlights

#1 Improving information architecture and content design for the configuration tool

After analyzing the original control, we reorganized the information and deleted useless sections. We made the tool more interactive by hiding/showing respective sections upon user selection. We also practiced progressive disclosure with collapsing Advanced Settings by default.

#2 Creating new UX patterns based on the existing components

For product consistency, we need to leverage the design components provided by Power Apps. However, the available components could only address one level of the content hierarchy. We needed three levels so we introduced horizontal divider and pushed through the Power Apps design system team for approvals.

In addition, there was no UX element that could serve the multi-step configuration. In our use case, admins need to 1) select activity types to show on timeline and 2) configure each activity type. We were looking for a UX component that was able to both indicate the selection and popup an additional fly-out. To minimize the engineering effort, I explored several options based on the existing setting pills. The team voted on the direction of replacing the ellipses with a "check" icon.

#3 Designing with Northstar in mind

Knowing what we would like to achieve ultimately, we designed and implemented the configuration tool in a sustainable way. With UX patterns ready to reproduce and grow, we smoothly added features and launched each phase in sequence.

Impact

Both agent and admin experiences for timeline control have been implemented today. Microsoft customers who bought Dynamics 365 Sales, Marketing, and Service licenses are able to use them live. With these two products coming together, we successfully provided the end-to-end experience.
For more information, feel free to check out the feature post and documentations.

Next steps

Envisioning timeline
Timeline control has been improved a ton since 2019. However, the journey does not end. As a cross-platform component, timeline is expected to serve multi-function professionals for various business needs. In the future, I would like to rethink timeline component as a data visualization tool that enables customers to explore the chronological data and as a "smart assist" that suggests the event cadence and next-steps. The component should not be limited to a single list view, but a customized section with multiple views (Gantt chart, data vis, dashboard, etc.) for different use cases.

With the feature team, I'll keep working on this component and collect customer feedback. If you're interested in learning more about this project, reach out to me and let's chat!