FEATURE DESIGN | VERSIONING FOR NUANCE MIX

Project Details

Background

Client: Nuance Communications
Feature: Branching and merging completed in two phases: versioning, then workstreams
Role: UX Design Lead

Customers needed the Mix platform to be a more collaborative product. To address this, we aimed to better serve larger teams requiring multiple conversational designers by providing the ability for each to have their own workstream. This would facilitate branching and merging on a project level, giving each workstream autonomy to design without affecting the rest of the project. Additionally, it would introduce a level of oversight, as workstreams could be reviewed before merging.

Under the hood, we utilized GitHub for branching and merging code. Consequently, the Mix platform needed to reflect this functionality, ensuring the user experience was intuitive and aligned with GitHub's established practices.

This endeavor was divided into two key features: versioning, which would be implemented first, followed by workstreams (branching and merging) as a subsequent feature. The versioning feature would lay the foundation by enabling the platform to track and manage changes over time. Building on this, the workstreams feature would empower teams to collaborate more effectively by allowing parallel development and controlled integration of their work.

Design Process: Versioning

Design Process: Workstreams

To begin the design process, I needed a comprehensive understanding of how we would handle both versioning and, eventually, branching and merging from a technical perspective. Although versioning was the first step, it was to act as the foundation on which workstreams would be built, ensuring future scalability and seamless integration.

Inspired by GitHub, we decided to create save points, referred to as "snapshots." These snapshots would allow users to attach versions when necessary. Key functionalities included rollbacks, project downloads at specific commit points, and customizable notes and version labeling. This approach would enhance team collaboration by providing clear, accessible records of project changes, facilitating coordination among multiple designers.

After studying existing patterns and aligning with the product manager and engineering team, I designed a robust timeline feature. This timeline would enable users to view commits and versions in chronological order, complete with customized content and existing metadata. This design was not only intended to meet immediate needs but also to be adaptable for future expansion when branching and merging were introduced. The timeline would present a clear, organized view of the project's history, making it easier for teams to track progress and collaborate effectively.

The timeline design included detailed views of snapshots and versions, along with loading animations for improved user experience. The initial state of the timeline would display the first snapshot prior to assigning any versions, setting a clear starting point for project versioning. By incorporating these elements, we aimed to create an intuitive and user-friendly interface that catered to both technical and non-technical users.

Once the versioning feature was designed and handed off to the frontend development team, I continued to lead the design efforts for versioning while simultaneously beginning the designs for the addition of workstreams. The ultimate goal was to map the versioning timeline to the branching and merging tree graph typically seen in code repositories. This would include added functionalities, a less technical and more approachable UI for non-developers, and the ability to expose more information at each point, ensuring a seamless transition and integration of both features.

With the introduction of workstreams, we needed to transform a single, linear timeline into a system that could support multiple branching timelines, each with its own committing and versioning capabilities. Additionally, these branches needed to merge back into the parent timeline with a review process to handle any conflicts.

As the lead UX designer for this feature, I focused on ensuring that the UI remained intuitive and accessible for non-technical users. I decided that the most effective way to represent conflicts during the merging process was to visually indicate the deltas in the UI, rather than displaying code differences. This approach required close collaboration with the engineering and development teams to understand the technical constraints and possibilities. Through this partnership, we determined that it was feasible to isolate sets of UI components based on their location, allowing us to group and visually highlight conflicts.

For instance, when a conflict occurred, a panel could display a read-only side-by-side comparison, showing the user all conflicts within that panel. The user could then accept changes from either the parent or the child workstream for each specific conflict or group of conflicts. After a selection was made, the system would recalculate and resolve any downstream conflicts automatically. This method provided a visual, non-technical solution for users unfamiliar with code branching, enhancing usability and reducing the learning curve.

Throughout the design process, I communicated regularly with my team and manager, ensuring that all user experience needs were addressed. I also served as the primary point of contact for the development team and other stakeholders, answering questions and providing clarity on user experience aspects of the feature. My goal was to ensure that the final design met both user needs and technical requirements, while facilitating effective collaboration and communication.

The result was a feature that significantly improved collaboration, communication, governance, and lifecycle management. By enabling users to visually manage conflicts and branch timelines, we created a more robust and user-friendly platform that catered to the needs of larger teams working on complex projects. This enhancement not only aligned with our initial goals but also set the stage for future improvements and scalability within the Mix platform.

Note: The versioning and workstream endeavor was put on hold when Nuance was acquired by Microsoft and thus has not been made available in production.