Responses by Tara Odorizzi, designer, Noise 13
Background: Sysdig started as a company that provided open source tools for monitoring and securing data containers. As it grew, it added new enterprise products, prompting a need for the company to address a broader audience. We wanted the site to connect with all users, regardless of their backgrounds. We also wanted to create a stronger hierarchy between Sysdig’s product offerings so users could make the most of their products.
Highlights: The illustrations, which communicated Sysdig’s offerings in a more abstract way, to reinforce marketing rather than explain the nitty gritty details of the technology. The color palette is another unique design element. We settled on a limited color palette for the site as a whole, focusing on the primary brand colors of teal, blue-black, and a spectrum of hand-adjusted tints of those two colors.
Challenges: The navigation for the site was a challenge due to the extensive content Sysdig offers. We wanted to focus the hierarchy on its enterprise products, while introducing users to the overall Sysdig platform, while still acknowledging its Open Source offerings.
Favorite details: When users hover over the “Get Started” CTA toward the bottom of the homepage, a series of consecutive teal frames bursts out from the box. My favorite hover state is on the resources page, where we brought in rays of lines that slide out from the icons. This reflects the joy that we sensed in Sysdig as a company. Redbridge, the developers, were also instrumental in executing these interactions.
Navigational structure: The primary navigation focuses on all of Sysdig’s products and the buying process, with support and resources in the secondary top navigation. We maintained that hierarchy in the hamburger menu, and also gave users the opportunity to easily access everything. We created three main categories and pulled out other important links that helped users find the information they need. We also created a sticky nav that is only visible when users scroll up, so that it wouldn’t interfere with the heavy content.