Cisco RTMT
Cisco RTMT
Cisco RTMT
End to End Product Design Process
End to End Product Design Process
End to End Product Design Process
To comply with NDA's and PIIAA's, I have omitted and redacted confidential information in my project showcase. All information in this case study is my own and does not necessarily reflect the views of Cisco
To comply with NDA's and PIIAA's, I have omitted and redacted confidential information in my project showcase. All information in this case study is my own and does not necessarily reflect the views of Cisco
To comply with NDA's and PIAA's, I have omitted and redacted confidential information in my project showcase. All information in this case study is my own and does not necessarily reflect the views of Cisco
CONTEXT
CONTEXT
CONTEXT
CONTEXT
CONTEXT
Given Cisco's operational history since the 1980s, the company has legacy products that typically have outdated user interfaces compared to its recently developed products. As part of an overall business strategy to migrate Cisco's legacy products into the cloud, my team’s objective was to update the Real-Time Monitoring Tool (RTMT) with Momentum Design, the latest design system used for all products operating in the cloud.
RTMT is a Windows only application that monitors system performance, device status, and device discovery, and troubleshoots system problems.
Given Cisco's operational history since the 1980s, the company has legacy products that typically have outdated user interfaces compared to its recently developed products. As part of an overall business strategy to migrate Cisco's legacy products into the cloud, my team’s objective was to update the Real-Time Monitoring Tool (RTMT) with Momentum Design, the latest design system used for all products operating in the cloud.
RTMT is a Windows only application that monitors system performance, device status, and device discovery, and troubleshoots system problems.
Given Cisco's operational history since the 1980s, the company has legacy products that typically have outdated user interfaces compared to its recently developed products. As part of an overall business strategy to migrate Cisco's legacy products into the cloud, my team’s objective was to update the Real-Time Monitoring Tool (RTMT) with Momentum Design, the latest design system used for all products operating in the cloud.
RTMT is a Windows only application that monitors system performance, device status, and device discovery, and troubleshoots system problems.
Given Cisco's operational history since the 1980s, the company has legacy products that typically have outdated user interfaces compared to its recently developed products. As part of an overall business strategy to migrate Cisco's legacy products into the cloud, my team’s objective was to update the Real-Time Monitoring Tool (RTMT) with Momentum Design, the latest design system used for all products operating in the cloud.
RTMT is a Windows only application that monitors system performance, device status, and device discovery, and troubleshoots system problems.
Given Cisco's operational history since the 1980s, the company has legacy products that typically have outdated user interfaces compared to its recently developed products. As part of an overall business strategy to migrate Cisco's legacy products into the cloud, my team’s objective was to update the Real-Time Monitoring Tool (RTMT) with Momentum Design, the latest design system used for all products operating in the cloud.
RTMT is a Windows only application that monitors system performance, device status, and device discovery, and troubleshoots system problems.
PROJECT ROLE
PROJECT ROLE
PROJECT ROLE
PROJECT ROLE
PROJECT ROLE
I was assigned to this project as a product designer with a focus on visual design and worked together with product managers, an engineering team, a UX researcher, and another product designer with a focus on interaction design.
I was assigned to this project as a product designer with a focus on visual design and worked together with product managers, an engineering team, a UX researcher, and another product designer with a focus on interaction design.
I was assigned to this project as a product designer with a focus on visual design and worked together with product managers, an engineering team, a UX researcher, and another product designer with a focus on interaction design.
I was assigned to this project as a product designer with a focus on visual design and worked together with product managers, an engineering team, a UX researcher, and another product designer with a focus on interaction design.
I was assigned to this project as a product designer with a focus on visual design and worked together with product managers, an engineering team, a UX researcher, and another product designer with a focus on interaction design.
CHALLENGES
CHALLENGES
CHALLENGES
CHALLENGES
CHALLENGES
RTMT is a legacy product with a lot of idiosyncracies. The challenge was to figure out what was most important to the admins using the product and to slowly build the product out in phases as part of the overall product roadmap. In the first phase, we wanted to address the key needs of the admins who currently use the tool and map out what could be added later on in phases.
My team utilized an end-to-end design process which is outlined below, starting from research and understanding our users’ needs.
RTMT is a legacy product with a lot of idiosyncracies. The challenge was to figure out what was most important to the admins using the product and to slowly build the product out in phases as part of the overall product roadmap. In the first phase, we wanted to address the key needs of the admins who currently use the tool and map out what could be added later on in phases.
My team utilized an end-to-end design process which is outlined below, starting from research and understanding our users’ needs.
RTMT is a legacy product with a lot of idiosyncracies. The challenge was to figure out what was most important to the admins using the product and to slowly build the product out in phases as part of the overall product roadmap. In the first phase, we wanted to address the key needs of the admins who currently use the tool and map out what could be added later on in phases.
My team utilized an end-to-end design process which is outlined below, starting from research and understanding our users’ needs.
RTMT is a legacy product with a lot of idiosyncracies. The challenge was to figure out what was most important to the admins using the product and to slowly build the product out in phases as part of the overall product roadmap. In the first phase, we wanted to address the key needs of the admins who currently use the tool and map out what could be added later on in phases.
My team utilized an end-to-end design process which is outlined below, starting from research and understanding our users’ needs.
RTMT is a legacy product with a lot of idiosyncracies. The challenge was to figure out what was most important to the admins using the product and to slowly build the product out in phases as part of the overall product roadmap. In the first phase, we wanted to address the key needs of the admins who currently use the tool and map out what could be added later on in phases.
My team utilized an end-to-end design process which is outlined below, starting from research and understanding our users’ needs.
Screenshot of current RTMT
Screenshot of current RTMT
Screenshot of current RTMT
Screenshot of current RTMT
Screenshot of current RTMT
RESEARCH
RESEARCH
RESEARCH
RESEARCH
RESEARCH
First, we had to understand what the product did and what its main use-cases were.We learned that there were three main use cases to the product:
- Getting an alert-email
- Checking the tool and grabbing the error logs
- Analyzing the error logs and troubleshooting the device
The alert emails could range from informational to critical, and understanding how the system was doing was of utmost importance.
First, we had to understand what the product did and what its main use-cases were.We learned that there were three main use cases to the product:
- Getting an alert-email
- Checking the tool and grabbing the error logs
- Analyzing the error logs and troubleshooting the device
The alert emails could range from informational to critical, and understanding how the system was doing was of utmost importance.
First, we had to understand what the product did and what its main use-cases were.We learned that there were three main use cases to the product:
- Getting an alert-email
- Checking the tool and grabbing the error logs
- Analyzing the error logs and troubleshooting the device
The alert emails could range from informational to critical, and understanding how the system was doing was of utmost importance.
First, we had to understand what the product did and what its main use-cases were.We learned that there were three main use cases to the product:
- Getting an alert-email
- Checking the tool and grabbing the error logs
- Analyzing the error logs and troubleshooting the device
The alert emails could range from informational to critical, and understanding how the system was doing was of utmost importance.
First, we had to understand what the product did and what its main use-cases were.We learned that there were three main use cases to the product:
- Getting an alert-email
- Checking the tool and grabbing the error logs
- Analyzing the error logs and troubleshooting the device
The alert emails could range from informational to critical, and understanding how the system was doing was of utmost importance.
Use Case Flow
Use Case Flow
Use Case Flow
Use Case Flow
Use Case Flow
FINDINGS
FINDINGS
FINDINGS
FINDINGS
FINDINGS
The UX researcher I worked with sent out surveys to various internal stakeholders and gathered feedback about the current application. Questions on the survey included their job function, how many times they used the application, their likes and dislikes, experience with the tool, complementary products they use in addition to the tool, improvements they would like to see, and any other general feedback they would like to share.
The UX researcher I worked with sent out surveys to various internal stakeholders and gathered feedback about the current application. Questions on the survey included their job function, how many times they used the application, their likes and dislikes, experience with the tool, complementary products they use in addition to the tool, improvements they would like to see, and any other general feedback they would like to share.
The UX researcher I worked with sent out surveys to various internal stakeholders and gathered feedback about the current application. Questions on the survey included their job function, how many times they used the application, their likes and dislikes, experience with the tool, complementary products they use in addition to the tool, improvements they would like to see, and any other general feedback they would like to share.
The UX researcher I worked with sent out surveys to various internal stakeholders and gathered feedback about the current application. Questions on the survey included their job function, how many times they used the application, their likes and dislikes, experience with the tool, complementary products they use in addition to the tool, improvements they would like to see, and any other general feedback they would like to share.
The UX researcher I worked with sent out surveys to various internal stakeholders and gathered feedback about the current application.
Questions on the survey included their job function, how many times they used the application, their likes and dislikes, experience with the tool, complementary products they use in addition to the tool, improvements they would like to see, and any other general feedback they would like to share.
Spreadsheet of Survey Questions + Answers
Spreadsheet of Survey Questions + Answers
Spreadsheet of Survey Questions + Answers
Spreadsheet of Survey Questions + Answers
Spreadsheet of Survey Questions + Answers
DESIGN
DESIGN
DESIGN
DESIGN
DESIGN
Based on these findings, I worked with the other product designer and product manager to figure out what features and functions were needed for a first phase design. We sketched wireframes, created and creating interaction flows, and eventually created a working visual prototype.
Based on these findings, I worked with the other product designer and product manager to figure out what features and functions were needed for a first phase design. We sketched wireframes, created and creating interaction flows, and eventually created a working visual prototype.
Based on these findings, I worked with the other product designer and product manager to figure out what features and functions were needed for a first phase design. We sketched wireframes, created and creating interaction flows, and eventually created a working visual prototype.
Based on these findings, I worked with the other product designer and product manager to figure out what features and functions were needed for a first phase design. We sketched wireframes, created and creating interaction flows, and eventually created a working visual prototype.
Based on these findings, I worked with the other product designer and product manager to figure out what features and functions were needed for a first phase design. We sketched wireframes, created and creating interaction flows, and eventually created a working visual prototype.
Fully Interactive Prototype in Figma
Fully Interactive Prototype in Figma
Fully Interactive Prototype in Figma
Fully Interactive Prototype in Figma
Fully Interactive Prototype in Figma
IMPLEMENTATION AND FINAL DESIGNS
IMPLEMENTATION AND FINAL DESIGNS
IMPLEMENTATION AND FINAL DESIGNS
IMPLEMENTATION AND FINAL DESIGNS
IMPLEMENTATION AND FINAL DESIGNS
With the working prototype on hand, we conducted a second round of interviews including external users such as paying customers who use the tool. We asked them to go through a typical day and outline their usual workflows. We took this feedback and tinkered with the designs a bit more, replacing certain workflows from the existing product.
Examples include removing tedious multi step wizards that an expert user was familiar with, and using full page forms where they could select all the options they desired. Other interesting feedback included adding a dark mode in addition to the base UI, since a lot of admins use the tool during the night if there are critical alerts.
After the final design iterations were complete, we handed off the designs to engineering and I performed QA alongside the other product designer to make sure our designs were developed correctly. I also addressed and updated any edge use cases that our interaction and visual design specs did not cover.
With the working prototype on hand, we conducted a second round of interviews including external users such as paying customers who use the tool. We asked them to go through a typical day and outline their usual workflows. We took this feedback and tinkered with the designs a bit more, replacing certain workflows from the existing product.
Examples include removing tedious multi step wizards that an expert user was familiar with, and using full page forms where they could select all the options they desired. Other interesting feedback included adding a dark mode in addition to the base UI, since a lot of admins use the tool during the night if there are critical alerts.
After the final design iterations were complete, we handed off the designs to engineering and I performed QA alongside the other product designer to make sure our designs were developed correctly. I also addressed and updated any edge use cases that our interaction and visual design specs did not cover.
With the working prototype on hand, we conducted a second round of interviews including external users such as paying customers who use the tool. We asked them to go through a typical day and outline their usual workflows. We took this feedback and tinkered with the designs a bit more, replacing certain workflows from the existing product.
Examples include removing tedious multi step wizards that an expert user was familiar with, and using full page forms where they could select all the options they desired. Other interesting feedback included adding a dark mode in addition to the base UI, since a lot of admins use the tool during the night if there are critical alerts.
After the final design iterations were complete, we handed off the designs to engineering and I performed QA alongside the other product designer to make sure our designs were developed correctly. I also addressed and updated any edge use cases that our interaction and visual design specs did not cover.
With the working prototype on hand, we conducted a second round of interviews including external users such as paying customers who use the tool. We asked them to go through a typical day and outline their usual workflows. We took this feedback and tinkered with the designs a bit more, replacing certain workflows from the existing product.
Examples include removing tedious multi step wizards that an expert user was familiar with, and using full page forms where they could select all the options they desired. Other interesting feedback included adding a dark mode in addition to the base UI, since a lot of admins use the tool during the night if there are critical alerts.
After the final design iterations were complete, we handed off the designs to engineering and I performed QA alongside the other product designer to make sure our designs were developed correctly. I also addressed and updated any edge use cases that our interaction and visual design specs did not cover.
With the working prototype on hand, we conducted a second round of interviews including external users such as paying customers who use the tool. We asked them to go through a typical day and outline their usual workflows. We took this feedback and tinkered with the designs a bit more, replacing certain workflows from the existing product.
Examples include removing tedious multi step wizards that an expert user was familiar with, and using full page forms where they could select all the options they desired. Other interesting feedback included adding a dark mode in addition to the base UI, since a lot of admins use the tool during the night if there are critical alerts.
After the final design iterations were complete, we handed off the designs to engineering and I performed QA alongside the other product designer to make sure our designs were developed correctly. I also addressed and updated any edge use cases that our interaction and visual design specs did not cover.
Final Design Mockups for Engineering
Final Design Mockups for Engineering
Final Design Mockups for Engineering
Final Design Mockups for Engineering
IMPACT
IMPACT
IMPACT
IMPACT
IMPACT
To measure the success of our design, we used the System Usability Scale (SUS). We first asked the participants to score the existing baseline application, and asked them to score it again after using our redesigned application.
The final results for our SUS score were markedly improved. While the original tool measured around 60 out of a 100 on the SUS, the final redesign measured at 86 out of 100 — a huge improvement.
To measure the success of our design, we used the System Usability Scale (SUS). We first asked the participants to score the existing baseline application, and asked them to score it again after using our redesigned application.
The final results for our SUS score were markedly improved. While the original tool measured around 60 out of a 100 on the SUS, the final redesign measured at 86 out of 100 — a huge improvement.
To measure the success of our design, we used the System Usability Scale (SUS). We first asked the participants to score the existing baseline application, and asked them to score it again after using our redesigned application.
The final results for our SUS score were markedly improved. While the original tool measured around 60 out of a 100 on the SUS, the final redesign measured at 86 out of 100 — a huge improvement.
To measure the success of our design, we used the System Usability Scale (SUS). We first asked the participants to score the existing baseline application, and asked them to score it again after using our redesigned application.
The final results for our SUS score were markedly improved. While the original tool measured around 60 out of a 100 on the SUS, the final redesign measured at 86 out of 100 — a huge improvement.
To measure the success of our design, we used the System Usability Scale (SUS). We first asked the participants to score the existing baseline application, and asked them to score it again after using our redesigned application.
The final results for our SUS score were markedly improved. While the original tool measured around 60 out of a 100 on the SUS, the final redesign measured at 86 out of 100 — a huge improvement.
Final SUS score roundups
Final SUS score roundups
Final SUS score roundups
Final SUS score roundups