Cisco Systems, Inc. is an American multinational corporation technology company headquartered in San Jose, California, that designs, manufactures and sells networking equipment worldwide.
Cisco is basically in charge of building the foundation for our ever expanding and demanding digital world. Turns out Cloud Storage is actually not made out of fluffy clouds…but large-scale servers.
The Cisco website has hundreds of products, thousands of pages with and millions of daily visitors. One of the biggest challenges with such vast website is how things connect with each other as a whole.
The Cisco site is built on several different platforms and a ton of content has been added over years – which is why their old site-wide navigation and footer became a cluster of links with a questionable structural hierarchy that made the navigation experience complicated and frustrating.
Our challenge, along with the Cisco Team, was to re-design the navigation to meet the new Cisco branding guidelines and offer users a clear way to find their way around the site.
A peek into our months of design exploration
Once we had our style direction down, we made our first UI interactive prototype
To better visualize interactions and identify usability issues we mocked an interactive prototype for the team to play with and for the developers to replicate in HTML/CSS.
We had a couple issues around text contrast ratio not meeting the accessibility requirements and the tabs styling were not clear to some users so we started exploring more options.
And about 50 iterations later..
With the Cisco team we were able to come up with a different tab design, different colors, improved icons and overall architecture that performed well with users in both desktop and mobile view.
Re-organizing the menu items took extensive communication with the various Cisco departments to make sure that we didn’t leave important content behind and were able strip away everything that is now obsolete.
Oh! And did we tell you that we love making 3D renders of Cisco Products? This mock was created to show the product team how much cleaner and more cohesive and controlled product pages could be if all items were to be 3D rasterizations.