A Re-imagined Cisco design system
Redesigning the online experience for Cisco, a world-leading computer networking company.
Before
After
This is a before and after of the landing page for Cisco, one of the dozens of pages that have been redesigned using our design system.
My role
Worked as an interaction designer in tandem with three other interaction designers on our team
Conducted research and refined wireframes based on client feedback
Wrote and maintained content annotations
Time worked with client: 18 months
Challenge
Our client, Cisco, wanted to do a complete overhaul of their online experience. While this is a years-long effort that will continue into the forseeable future, I got to spend a year and a half working on this project and helping to create some new patterns (otherwise known as components) and content models for the design system. In addition, I was responsible for maintaining and writing many of the content annotations across the design system.
For this case study, I will be going through our designs for the design system’s new trials and offers form component and page template.
User Research
After receiving our initial requirements from the client for this page template, our team began our research with an audit of nearly every form page that existed on all of Cisco’s web pages. We gathered 30+ form pages from Cisco, as well as forms for trials and offers of products from competitors.
As this design system design was content lead and content heavy, we worked with our content team to decide which pieces of content that were used across all of the pages were truly necessary, which could be considered optional for a component (meaning that a Cisco content author could choose to turn a the section on or off depending on necessity), and which would not be needed.
Together, we decided upon these core needs:
A form with the minimum number of fields needed to complete the sign up
A list of benefits
A section for additional information and/or links
Components
Components are the building blocks to this design system. Each component potentially has several different variations and are meant to be flexible and to be able to solve many use cases.
Here are the final wireframes for one component I worked on with my team, which is meant to be used for trial and offer sign ups. When creating this component, some of the questions our team thought about were:
What use cases might this component be suited for outside of trial and offer sign ups?
Do our designs match up with the development team’s capabilities?
These are three different variations of the same component, all meant to allow flexibility to accommodate for the client’s varying content needs. One variation allows for an informational video in place of bullet points, another is for the post-form submission thank you page, and another is to accommodate for cases where a trial or offer does not require a form to sign up.
Final comps after visual design
During finalization of the “Thank you” section, we received a request from the client for the “Thank you” content to be contained in a new page that would load after submitting the form. In collaboration with the visual design team, we agreed on these final comps.
Page templates
Page templates are created from components and are used to create pages for a particular type of content, such as product detail pages, resources pages, and informational pages.
This is the final template that was created for trial and offer pages, prior to visual design. When designing each new template, it was important to try and reuse existing patterns where possible. We ended up creating three new components for this template as there were no suitable components that existed to satisfy those content needs.
Live Reimagined Pages
Creating all of the new pages is a long process that is still underway, but you can check out some of the live pages using our new components and page templates here!
Lessons learned
During this project, I wore multiple hats between the UX and content teams. One of the biggest lessons I learned from working with this client is how beneficial understanding content is when doing UX design work. Having a hybrid role on this project helped me to better understand the content needs of the client, which was extremely helpful when we conducted our research and had to determine what content was most necessary to keep for the reimagined site.
Another incredible part of this project was the team! This is a large project with several different teams all working remotely. While we definitely stretched Figma to it’s absolute limits (I can’t even tell you how many times a file ran out of memory) I was amazed at how well we were able to coordinate and work together just by using online tools.
As of 2024, this project is still well underway and will probably not be completed for another year or two, but I look forward to seeing this client’s entirely reimagined web experience in the future.