Redesigning the new generation of enterprise SaaS software for contact centers
Project Overview
U-Capture NG is a redesigned contact center compliance software product for large contact centers to store and review their agents' calls.
Timeline: September 2023 - Jan 2024 for MVP
Project goal: Redesigning a legacy product on a new platform
After a company acquisition, we needed to integrate and rebuild the legacy product onto our new platform. U-Capture NG would be the first product to leverage the Uniphore X platform.
My Role & Contributions
Restructured and defined the information architecture
Designed streamlined workflows to increase task efficiency
Established reusable design patterns that are applicable in multiple use cases
Created high fidelity designs and presenting design decisions to stakeholders
Closely collaborated with product and engineering teams to create requirements and understand feasibility
Small snippet of the old legacy product
Top Challenges
-
Because the business goal was unclear on how to bring the acquired product onto the platform, requirements were difficult to create.
Difficult to compromise on how to prioritize which features needed to be brought in across product and engineering teams.
Communication gaps ; product team did not have clear documentation on how existing functionality works. To discern how something worked, we primarily had to rely on using an outdated demo environment.
There was also a noticeable gap in product knowledge. It was a separate team designing and implementing the next generation from the legacy team.
-
Our company did not have a design system nor any established design patterns when this project started. This product redesign would be the way to build the foundations for the upcoming design system.
-
The project’s conception to delivery date was 5 months. With such a tight timeline, we had do our best to build a high performing, intuitive solution that would be an actual improvement compared to the legacy product.
Strategy and Execution
1) Triaged and prioritized requirements
Took initiative to be the point person to bring alignment between product management and engineering to strategize on how to phase certain features.
Created a consolidated document to align on expectations of what design deliverables are necessary because it was unclear from the product manager.
Daily stand ups with all stakeholders to address blockers in order to make it within the tight time constraints
Below are examples of work tracker and feature analysis
Sample of my confluence document I created to established alignment and communicate design progress and delivery dates
Mapping out the flow of policy creation based on types
2) Simplified complicated workflows
We tackled the most complicated and high priority functionality first and broke down the use cases one by one.
The main feature for this example was for defining policies. We uncovered several underlining dependencies on other parts of the product that were not obvious in the legacy system.
After outlining the conditions, I was able to map out the commonalities and the differences for each policy. Only then I was able to create a shared and consistent workflow that would work across all types of policies
Different policy creation flows that follow a similar wizard pattern. This was one of the features that was simplified and streamlined compared to the legacy product
3) Created Reusable Designs
Because of the tight timeline, we leveraged the Ant Design system, a decision by our design director, to give us a set of base components to use. This way, time was saved for both the design team and the development team. I could then focus on creating design patterns that were consistent and reusable.
The main use case we identified was the need to view high data density in an easy and digestible format. We decided to leverage a similar interaction pattern as in viewing emails in outlook where the user can see the of emails and have another panel to view its details.
Ours is enhanced because within the detail panel, we have additional left hand navigation that allows the user to traverse through the different attributes of the selected item. This allows for better organization of the data and potential growth if more information is to be added.
Examples of 3 different tables and their panels. Some have left hand navigation if it had other dimensions to the selected object.
General Design Process + Deliverables
Tasks to be done
To better understand the functionality of the old product, I first worked with the product manager to write out the different goals, tasks, and actions users need to do. It was only after this exercise when I was able to map out the information architecture of what this product would look like on the X platform.
Information Architecture
After understanding how the pieces fit together in the legacy product and what we wanted to move to the new product, I created the information architecture. This involved many iterations and rounds with product management because we wanted to make sure that highly used features were easily accessible and logically placed.
The diagram on the left was the information architecture for U-Capture as a standalone product on the platform.
The diagram on the right is the IA for how it would look when other Uniphore products would join the platform. Our final designs used the navigation from this IA.
Design iterations
Our design iterations did not always involve low fidelity mocks as we used already made Figma components from the Ant design system.
Here is an example of how I created multiple variations of how users can edit an annotation/comment on a conversation. With these variations, I was able to test within the design team as well as product team to gather evidence on which pattern would work best for our users. I also came up with these variations based on industry examples of editing such as JIRA.
High Fidelity Designs
Below were the final designs for the MVP product. This is showcasing the following pages:
Recorded conversations table + Viewing a conversation in detail
List of conversation exports
Audit log of different actions taken
Sample of of a policy configuration table + viewing the policy details
High Fidelity - Edit annotation flow
These are the high fidelity designs of the edit annotation flow that was described in the design iteration section.
Where the Project is Now
U-Capture was launched in early February 2024 and has now been demoed to several potential clients many of whom are highly interested in purchasing our solution. The product team is going through their feedback and making subsequent improvements.
The next goal after new customers buying the product will be to migrate existing customers that are on the old solution to this one.