Sakshat Goyal - Design Lead
Monika Zochowska - Product Owner
Shravan Chouti - Lead Developer
Dmitry - Product Owner
Patryk - Manager
I created a unified design system along with interface guidelines for the new Cisco Ready.
By mid-2021, Cisco Ready had 2.5x as many Cisco users as the same time the previous year. As we continued to grow and bring in more users, our team wanted to treat Cisco Ready as its own unique product within the Cisco Family.
While this is a large, ongoing project, this case study covers just a few aspects in brief.
Cisco Ready is essentially a library of different analytical tools used by Cisco's business team. Our biggest problem was that users could never find what they were looking for due to the way they were categorized.
In mid-2019, the team wanted to address this issue by introducing a smart search bar. However, a good search bar was not able to make up for inadequate navigation.
In the process, I created a series of new icons by adopting Cisco's visual accent. Our team now uses these icons as a means of building Cisco Ready's brand identity while talking to different stakeholders.
Cisco Ready has a number of branch products (Connected Experience, Next-Gen, CR for EMEAR, CR for Americas, etc.). Thanks to a massive effort by our development team, we are able to merge these platforms and curate collections based on employee security levels.
Cisco Ready had two distinct systems for filtering data:
Each type had its problems, while also trying to solve an existing problem. I redesigned the filters to get the best qualities of both experiences.
Filtering was one of the most critical aspects of the user experience, so we made sure to test our design with users across the globe based on the following criteria.
Due to data constraints, users had to pre-select data in order to visit an existing asset like Customer Insights, Account Manager View, CX Overview, etc.
Due to the speed and volume of our work, I realized we had to move away from traditional annotation for styling elements. As a result, I began defining elements based on their purpose.
Previously, our standard b1, b2, b3... elements had to be customized for every situation and scenario. By using classes with <p> tags, we were able to create typography that was standardized and could be modified through our global library without hunting for individual elements on each page.
This also made it easier for our team to use external libraries which often require our team to use custom classes.
The new look and feel of the interface always made our stakeholders and participants think that our design is fresh and innovative. In reality, I think I was always going back to traditional methods of interface design during the process.
From using the vernacular language of our users to having simplified UI elements, this process was all about taking a step back and re-evaluating every design decision made based on context and best practices.
This is not to say that we shouldn't innovate. Every problem is unique and deserves its unique approach and solution. But