Mockup

Screenshot of old CUCM with Navigation

Screenshot of old CUCM with Navigation

Screenshot of old CUCM with Navigation

Screenshot of old CUCM with Navigation

CONTEXT

CONTEXT

CONTEXT

CONTEXT

CONTEXT

Given Cisco's long operational history since the 1980s, the company has legacy products from decades ago that have typically outdated user interfaces compared to recently developed products. As part of an overall business strategy to migrate Cisco's legacy products into the cloud under one platform, my objective was to update Cisco's Unified Communications Manager (CUCM) with Momentum Design, the latest design system used in Cisco's products operating in the cloud.

Given Cisco's long operational history since the 1980s, the company has legacy products from decades ago that have typically outdated user interfaces compared to recently developed products. As part of an overall business strategy to migrate Cisco's legacy products into the cloud under one platform, my objective was to update Cisco's Unified Communications Manager (CUCM) with Momentum Design, the latest design system used in Cisco's products operating in the cloud.

Given Cisco's long operational history since the 1980s, the company has legacy products from decades ago that have typically outdated user interfaces compared to recently developed products. As part of an overall business strategy to migrate Cisco's legacy products into the cloud under one platform, my objective was to update Cisco's Unified Communications Manager (CUCM) with Momentum Design, the latest design system used in Cisco's products operating in the cloud.

Given Cisco's long operational history since the 1980s, the company has legacy products from decades ago that have typically outdated user interfaces compared to recently developed products. As part of an overall business strategy to migrate Cisco's legacy products into the cloud under one platform, my objective was to update Cisco's Unified Communications Manager (CUCM) with Momentum Design, the latest design system used in Cisco's products operating in the cloud.

Given Cisco's long operational history since the 1980s, the company has legacy products from decades ago that have typically outdated user interfaces compared to recently developed products.

As part of an overall business strategy to migrate Cisco's legacy products into the cloud under one platform, my objective was to update Cisco's Unified Communications Manager (CUCM) with Momentum Design, the latest design system used in Cisco's products operating in the cloud.

PROJECT ROLE

PROJECT ROLE

PROJECT ROLE

PROJECT ROLE

PROJECT ROLE

I was the lead designer for this project and had the support of a visual designer on the design system team. My task was to ensure that these new designs would be aligned with Cisco's design system and brand.

I was the lead designer for this project and had the support of a visual designer on the design system team. My task was to ensure that these new designs would be aligned with Cisco's design system and brand.

I was the lead designer for this project and had the support of a visual designer on the design system team. My task was to ensure that these new designs would be aligned with Cisco's design system and brand.

I was the lead designer for this project and had the support of a visual designer on the design system team. My task was to ensure that these new designs would be aligned with Cisco's design system and brand.

I was the lead designer for this project and had the support of a visual designer on the design system team. My task was to ensure that these new designs would be aligned with Cisco's design system and brand.

CHALLENGES

CHALLENGES

CHALLENGES

CHALLENGES

CHALLENGES

CUCM is a highly complex platform managed by different administrators with varying levels of access (RBAC). The platform requires specific types of certification and courses to learn all the ins and outs of the product.

The complexity of settings on this platform meant that it would be nearly impossible for one person to learn every function on the product without years of experience. Given how many different settings and pages there were on the platform, it would take countless hours to design for each individual page. 

There is also an extensive library of documentation and resources such as YouTube videos which provide information on how to use the platform. This meant that changing the user experience in any significant way could potentially render these resources obsolete, which is something I wanted to avoid. Therefore, any design treatments would have to be purely visual or heuristic rather than a deep dive into the user experience of each page and its various functions.

CUCM is a highly complex platform managed by different administrators with varying levels of access (RBAC). The platform requires specific types of certification and courses to learn all the ins and outs of the product.

The complexity of settings on this platform meant that it would be nearly impossible for one person to learn every function on the product without years of experience. Given how many different settings and pages there were on the platform, it would take countless hours to design for each individual page. 

There is also an extensive library of documentation and resources such as YouTube videos which provide information on how to use the platform. This meant that changing the user experience in any significant way could potentially render these resources obsolete, which is something I wanted to avoid. Therefore, any design treatments would have to be purely visual or heuristic rather than a deep dive into the user experience of each page and its various functions.

CUCM is a highly complex platform managed by different administrators with varying levels of access (RBAC). The platform requires specific types of certification and courses to learn all the ins and outs of the product.

The complexity of settings on this platform meant that it would be nearly impossible for one person to learn every function on the product without years of experience. Given how many different settings and pages there were on the platform, it would take countless hours to design for each individual page. 

There is also an extensive library of documentation and resources such as YouTube videos which provide information on how to use the platform. This meant that changing the user experience in any significant way could potentially render these resources obsolete, which is something I wanted to avoid. Therefore, any design treatments would have to be purely visual or heuristic rather than a deep dive into the user experience of each page and its various functions.

CUCM is a highly complex platform managed by different administrators with varying levels of access (RBAC). The platform requires specific types of certification and courses to learn all the ins and outs of the product.

The complexity of settings on this platform meant that it would be nearly impossible for one person to learn every function on the product without years of experience. Given how many different settings and pages there were on the platform, it would take countless hours to design for each individual page. 

There is also an extensive library of documentation and resources such as YouTube videos which provide information on how to use the platform. This meant that changing the user experience in any significant way could potentially render these resources obsolete, which is something I wanted to avoid. Therefore, any design treatments would have to be purely visual or heuristic rather than a deep dive into the user experience of each page and its various functions.

CUCM is a highly complex platform managed by different administrators with varying levels of access (RBAC). The platform requires specific types of certification and courses to learn all the ins and outs of the product.

The complexity of settings on this platform meant that it would be nearly impossible for one person to learn every function on the product without years of experience. Given how many different settings and pages there were on the platform, it would take countless hours to design for each individual page. 

There is also an extensive library of documentation and resources such as YouTube videos which provide information on how to use the platform. This meant that changing the user experience in any significant way could potentially render these resources obsolete, which is something I wanted to avoid.

Therefore, any design treatments would have to be purely visual or heuristic rather than a deep dive into the user experience of each page and its various functions.

Screenshot of old CUCM with Navigation

Screenshot of old CUCM with Navigation

Screenshot of old CUCM with Navigation

Screenshot of old CUCM with Navigation

Screenshot of old CUCM with Navigation

ANALYSIS

ANALYSIS

ANALYSIS

ANALYSIS

ANALYSIS

After understanding the challenges of this project, I began analyzing the product systematically. I glanced through each page as best as I could, identifying commonalities and categorizing them into distinct pages such as — Pre-login, Post-Login, Query, Post-Query, Wizards, Forms, Detailed Pages, and any exceptions within some of these categories. These exceptions included side panels, nested pages, or any special inputs for a particular function.

After understanding the challenges of this project, I began analyzing the product systematically. I glanced through each page as best as I could, identifying commonalities and categorizing them into distinct pages such as — Pre-login, Post-Login, Query, Post-Query, Wizards, Forms, Detailed Pages, and any exceptions within some of these categories. These exceptions included side panels, nested pages, or any special inputs for a particular function.

After understanding the challenges of this project, I began analyzing the product systematically. I glanced through each page as best as I could, identifying commonalities and categorizing them into distinct pages such as — Pre-login, Post-Login, Query, Post-Query, Wizards, Forms, Detailed Pages, and any exceptions within some of these categories. These exceptions included side panels, nested pages, or any special inputs for a particular function.

After understanding the challenges of this project, I began analyzing the product systematically. I glanced through each page as best as I could, identifying commonalities and categorizing them into distinct pages such as — Pre-login, Post-Login, Query, Post-Query, Wizards, Forms, Detailed Pages, and any exceptions within some of these categories. These exceptions included side panels, nested pages, or any special inputs for a particular function.

After understanding the challenges of this project, I began analyzing the product systematically. I glanced through each page as best as I could, identifying commonalities and categorizing them into distinct pages such as — Pre-login, Post-Login, Query, Post-Query, Wizards, Forms, Detailed Pages, and any exceptions within some of these categories.

These exceptions included side panels, nested pages, or any special inputs for a particular function.

COMPONENT ANALYSIS

COMPONENT ANALYSIS

COMPONENT ANALYSIS

COMPONENT ANALYSIS

COMPONENT ANALYSIS

After this initial breakdown, I started looking at each page on a component level through an atomic design lens. I identified different distinct elements such as— Logo, Header, Sub-header, Dropdowns, Input fields, Labels, Checkboxes, Lists, Menus, Typography, Containers, Icons and Buttons.

After this initial breakdown, I started looking at each page on a component level through an atomic design lens. I identified different distinct elements such as— Logo, Header, Sub-header, Dropdowns, Input fields, Labels, Checkboxes, Lists, Menus, Typography, Containers, Icons and Buttons.

After this initial breakdown, I started looking at each page on a component level through an atomic design lens. I identified different distinct elements such as— Logo, Header, Sub-header, Dropdowns, Input fields, Labels, Checkboxes, Lists, Menus, Typography, Containers, Icons and Buttons.

After this initial breakdown, I started looking at each page on a component level through an atomic design lens. I identified different distinct elements such as— Logo, Header, Sub-header, Dropdowns, Input fields, Labels, Checkboxes, Lists, Menus, Typography, Containers, Icons and Buttons.

After this initial breakdown, I started looking at each page on a component level through an atomic design lens. I identified different distinct elements such as— Logo, Header, Sub-header, Dropdowns, Input fields, Labels, Checkboxes, Lists, Menus, Typography, Containers, Icons and Buttons.

SYSTEM DESIGN

SYSTEM DESIGN

SYSTEM DESIGN

SYSTEM DESIGN

SYSTEM DESIGN

From these distinct elements, I started mapping out which ones had an equivalent in our design system. If there wasn't one, I proposed a solution and checked it over with the visual designer on the design system team I was working with. Together, we figured out if there was a need to create a brand new component or if we could retool existing ones to fit the product.

From these distinct elements, I started mapping out which ones had an equivalent in our design system. If there wasn't one, I proposed a solution and checked it over with the visual designer on the design system team I was working with. Together, we figured out if there was a need to create a brand new component or if we could retool existing ones to fit the product.

From these distinct elements, I started mapping out which ones had an equivalent in our design system. If there wasn't one, I proposed a solution and checked it over with the visual designer on the design system team I was working with. Together, we figured out if there was a need to create a brand new component or if we could retool existing ones to fit the product.

From these distinct elements, I started mapping out which ones had an equivalent in our design system. If there wasn't one, I proposed a solution and checked it over with the visual designer on the design system team I was working with. Together, we figured out if there was a need to create a brand new component or if we could retool existing ones to fit the product.

From these distinct elements, I started mapping out which ones had an equivalent in our design system. If there wasn't one, I proposed a solution and checked it over with the visual designer on the design system team I was working with.

Together, we figured out if there was a need to create a brand new component or if we could retool existing ones to fit the product.

DEALING WITH THE UNEXPECTED

DEALING WITH THE UNEXPECTED

DEALING WITH THE UNEXPECTED

DEALING WITH THE UNEXPECTED

DEALING WITH THE UNEXPECTED

The final design looked great and matched the aesthetic and visual consistency of the Cisco brand. I was able to break down the entire product into distinct categories for the engineering team to update. One unanticipated problem was how much additional size the updated page occupied. If we translated each page using the components in our library, a typical page would be almost double in vertical size. 

It wouldn't be a problem for a typical consumer site given modern web trends and spacing. However, given that the users of this product are expert admins, they typically need as much real estate as possible when configuring options and functions on their telephone systems. We had to rethink the current solution of mapping each page and element one-to-one with the design system.

The final design looked great and matched the aesthetic and visual consistency of the Cisco brand. I was able to break down the entire product into distinct categories for the engineering team to update. One unanticipated problem was how much additional size the updated page occupied. If we translated each page using the components in our library, a typical page would be almost double in vertical size. 

It wouldn't be a problem for a typical consumer site given modern web trends and spacing. However, given that the users of this product are expert admins, they typically need as much real estate as possible when configuring options and functions on their telephone systems. We had to rethink the current solution of mapping each page and element one-to-one with the design system.

The final design looked great and matched the aesthetic and visual consistency of the Cisco brand. I was able to break down the entire product into distinct categories for the engineering team to update. One unanticipated problem was how much additional size the updated page occupied. If we translated each page using the components in our library, a typical page would be almost double in vertical size. 

It wouldn't be a problem for a typical consumer site given modern web trends and spacing. However, given that the users of this product are expert admins, they typically need as much real estate as possible when configuring options and functions on their telephone systems. We had to rethink the current solution of mapping each page and element one-to-one with the design system.

The final design looked great and matched the aesthetic and visual consistency of the Cisco brand. I was able to break down the entire product into distinct categories for the engineering team to update. One unanticipated problem was how much additional size the updated page occupied. If we translated each page using the components in our library, a typical page would be almost double in vertical size. 

It wouldn't be a problem for a typical consumer site given modern web trends and spacing. However, given that the users of this product are expert admins, they typically need as much real estate as possible when configuring options and functions on their telephone systems. We had to rethink the current solution of mapping each page and element one-to-one with the design system.

The final design looked great and matched the aesthetic and visual consistency of the Cisco brand. I was able to break down the entire product into distinct categories for the engineering team to update.

One unanticipated problem was how much additional size the updated page occupied. If we translated each page using the components in our library, a typical page would be almost double in vertical size. 

It wouldn't be a problem for a typical consumer site given modern web trends and spacing. However, given that the users of this product are expert admins, they typically need as much real estate as possible when configuring options and functions on their telephone systems.

We had to rethink the current solution of mapping each page and element one-to-one with the design system.

SYSTEMATIC DESIGN

SYSTEMATIC DESIGN

SYSTEMATIC DESIGN

SYSTEMATIC DESIGN

SYSTEMATIC DESIGN

Given the size and spacing constraints, we sought out ways to reduce as much space as possible to reduce the vertical real estate on the screen. We looked into the padding and margins between each element on a few different types of pages on the CUCM product, as well as the design component and typography used for headers and body text for both the original pages, and the newly updated one.

Aftering analyzing the spacing in these pages, the component designer and I came up with a systematic way to approach it. Using spacing tokens and text scales for compact, default, and loose views. And variable sizes for our design components such as buttons, text or select inputs in small, medium and large sizes.

The idea behind our thinking was that the design system should become robust enough to support any product looking to use our design system. With the plethora of products owned by Cisco, there would probably be a need to support multiple sizes and views depending on the product. If a product needed more space and size, they could use the looser spacing scale and large sized components. Conversely, if they needed more efficient real estate like the CUCM product I was working on, they could choose small components and a more compact spacing scale. 

Given the size and spacing constraints, we sought out ways to reduce as much space as possible to reduce the vertical real estate on the screen. We looked into the padding and margins between each element on a few different types of pages on the CUCM product, as well as the design component and typography used for headers and body text for both the original pages, and the newly updated one.

Aftering analyzing the spacing in these pages, the component designer and I came up with a systematic way to approach it. Using spacing tokens and text scales for compact, default, and loose views. And variable sizes for our design components such as buttons, text or select inputs in small, medium and large sizes.

The idea behind our thinking was that the design system should become robust enough to support any product looking to use our design system. With the plethora of products owned by Cisco, there would probably be a need to support multiple sizes and views depending on the product. If a product needed more space and size, they could use the looser spacing scale and large sized components. Conversely, if they needed more efficient real estate like the CUCM product I was working on, they could choose small components and a more compact spacing scale. 

Given the size and spacing constraints, we sought out ways to reduce as much space as possible to reduce the vertical real estate on the screen. We looked into the padding and margins between each element on a few different types of pages on the CUCM product, as well as the design component and typography used for headers and body text for both the original pages, and the newly updated one.

Aftering analyzing the spacing in these pages, the component designer and I came up with a systematic way to approach it. Using spacing tokens and text scales for compact, default, and loose views. And variable sizes for our design components such as buttons, text or select inputs in small, medium and large sizes.

The idea behind our thinking was that the design system should become robust enough to support any product looking to use our design system. With the plethora of products owned by Cisco, there would probably be a need to support multiple sizes and views depending on the product. If a product needed more space and size, they could use the looser spacing scale and large sized components. Conversely, if they needed more efficient real estate like the CUCM product I was working on, they could choose small components and a more compact spacing scale. 

Given the size and spacing constraints, we sought out ways to reduce as much space as possible to reduce the vertical real estate on the screen. We looked into the padding and margins between each element on a few different types of pages on the CUCM product, as well as the design component and typography used for headers and body text for both the original pages, and the newly updated one.

Aftering analyzing the spacing in these pages, the component designer and I came up with a systematic way to approach it. Using spacing tokens and text scales for compact, default, and loose views. And variable sizes for our design components such as buttons, text or select inputs in small, medium and large sizes.

The idea behind our thinking was that the design system should become robust enough to support any product looking to use our design system. With the plethora of products owned by Cisco, there would probably be a need to support multiple sizes and views depending on the product. If a product needed more space and size, they could use the looser spacing scale and large sized components. Conversely, if they needed more efficient real estate like the CUCM product I was working on, they could choose small components and a more compact spacing scale. 

Given the size and spacing constraints, we sought out ways to reduce as much space as possible to reduce the vertical real estate on the screen. We looked into the padding and margins between each element on a few different types of pages on the CUCM product, as well as the design component and typography used for headers and body text for both the original pages, and the newly updated one.

Aftering analyzing the spacing in these pages, the component designer and I came up with a systematic way to approach it. Using spacing tokens and text scales for compact, default, and loose views. And variable sizes for our design components such as buttons, text or select inputs in small, medium and large sizes.

The idea behind our thinking was that the design system should become robust enough to support any product looking to use our design system. With the plethora of products owned by Cisco, there would probably be a need to support multiple sizes and views depending on the product. If a product needed more space and size, they could use the looser spacing scale and large sized components. Conversely, if they needed more efficient real estate like the CUCM product I was working on, they could choose small components and a more compact spacing scale. 

COMPACT MODE

COMPACT MODE

COMPACT MODE

COMPACT MODE

COMPACT MODE

Using the original CUCM product screens as reference, I started applying the spacing tokens to see how the page would look if it was translated 1:1 with our design system. We measured how much vertical space each screen occupied. Starting from the original screen, the updated screen with our default components, and finally testing various iterations of our new compact mode to see which size worked best.

The final result was a reduced vertical real estate of around 30% through our compact mode sizing when compared to our default spacing. We were able to create a size that didn't reduce our components too much to where it was unrecognizable, but which still provided significant size reductions compared to the default view.

Using the original CUCM product screens as reference, I started applying the spacing tokens to see how the page would look if it was translated 1:1 with our design system. We measured how much vertical space each screen occupied. Starting from the original screen, the updated screen with our default components, and finally testing various iterations of our new compact mode to see which size worked best.

The final result was a reduced vertical real estate of around 30% through our compact mode sizing when compared to our default spacing. We were able to create a size that didn't reduce our components too much to where it was unrecognizable, but which still provided significant size reductions compared to the default view.

Using the original CUCM product screens as reference, I started applying the spacing tokens to see how the page would look if it was translated 1:1 with our design system. We measured how much vertical space each screen occupied. Starting from the original screen, the updated screen with our default components, and finally testing various iterations of our new compact mode to see which size worked best.

The final result was a reduced vertical real estate of around 30% through our compact mode sizing when compared to our default spacing. We were able to create a size that didn't reduce our components too much to where it was unrecognizable, but which still provided significant size reductions compared to the default view.

Using the original CUCM product screens as reference, I started applying the spacing tokens to see how the page would look if it was translated 1:1 with our design system. We measured how much vertical space each screen occupied. Starting from the original screen, the updated screen with our default components, and finally testing various iterations of our new compact mode to see which size worked best.

The final result was a reduced vertical real estate of around 30% through our compact mode sizing when compared to our default spacing. We were able to create a size that didn't reduce our components too much to where it was unrecognizable, but which still provided significant size reductions compared to the default view.

Using the original CUCM product screens as reference, I started applying the spacing tokens to see how the page would look if it was translated 1:1 with our design system. We measured how much vertical space each screen occupied.

Starting from the original screen, the updated screen with our default components, and finally testing various iterations of our new compact mode to see which size worked best.

The final result was a reduced vertical real estate of around 30% through our compact mode sizing when compared to our default spacing. We were able to create a size that didn't reduce our components too much to where it was unrecognizable, but which still provided significant size reductions compared to the default view.

IMPACT

IMPACT

IMPACT

IMPACT

IMPACT

The final design solution was well received by management, but it was decided there were other priorities to tackle before implementing the compact mode on CUCM. The spacing tokens and scales created lives on in Momentum Design Space and is still being used by the design community at Cisco.

The final design solution was well received by management, but it was decided there were other priorities to tackle before implementing the compact mode on CUCM. The spacing tokens and scales created lives on in Momentum Design Space and is still being used by the design community at Cisco.

The final design solution was well received by management, but it was decided there were other priorities to tackle before implementing the compact mode on CUCM. The spacing tokens and scales created lives on in Momentum Design Space and is still being used by the design community at Cisco.

The final design solution was well received by management, but it was decided there were other priorities to tackle before implementing the compact mode on CUCM. The spacing tokens and scales created lives on in Momentum Design Space and is still being used by the design community at Cisco.

The final design solution was well received by management, but it was decided there were other priorities to tackle before implementing the compact mode on CUCM. The spacing tokens and scales created lives on in Momentum Design Space and is still being used by the design community at Cisco.

 © 2021 Andrew Lee Design

 © 2021 Andrew Lee Design

 © 2021Andrew Lee Design 

 © 2021 Andrew Lee Design

© 2021 Andrew Lee Design.