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.

Customer Insights

#1 Timeline are missing capabilities that are essential to customers' daily work

Since I joined, our UX Research team has initiated three rounds of benchmark studies. Through the interviews and testings, we learned that customers are looking for more capabilities in timeline.

#2 IT Admins were lost in the timeline settings page

We also received customer feedback that it was really hard to locate the timeline settings page and the user interfaces were confusing. No wonder customers said so. Dynamics 365 was leveraging a legacy configuration design that was implemented several years ago. For timeline control specifically, IT admins had to click through 7 pages and open up 4 browser tabs until landing on the right tool, which yet contained confusing instructions and overwhelming complexities.

Legacy timeline (activities tab) configurations tool

Roadmap

Tackled most of the requests throughout three release waves

Based on the research findings and customer feedback, the feature team decided to solve client-facing UI issues together with creating a brand new admin/maker experience. Due to the resource limitation, we prioritized the features and allocated the tasks for three release cycles. By December 2020, we finished most of the requests that will be launched for public on April 2021.

First step

Adding capabilities to timeline and solving accessibility issues

Since October 2019, I've been working with a dedicated feature team, to improve timeline usability and to solve accessibility issues. We explored different options for each request and synced as a team to move forward with the most feasible solution. As a result, the NSAT score of timeline has been improved by 50% in the most recent benchmark studies 🎉

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!

Timelinecontrol for enterprises