Read on to learn how Webstacks collaborates with Semgrep to build immersive web experiences to elevate its product and content marketing.
Read on to learn how Webstacks collaborates with Semgrep to build immersive web experiences to elevate its product and content marketing.
Semgrep is a cutting-edge static analysis tool designed to streamline code security and quality by identifying bugs, vulnerabilities, and enforcing code standards swiftly and effectively.
With a unique approach, Semgrep blends the convenience of grep with the depth of semantic analysis to understand code's nuances. Semgrep supports a wide range of programming languages and integrates seamlessly into development workflows, offering real-time feedback without hindering productivity.
Its open-source engine, complemented by a comprehensive rule library and continuous integration services, makes it accessible for both individual developers and teams, ensuring code security without the complexity often associated with similar tools.
In our collaboration with Semgrep, a pivotal moment was its strategic rebranding from its original iteration under r2c, signifying not just a change in name but a substantial leap in its capabilities and mission.
This evolution marked a transition towards a more sophisticated, comprehensive tool for static code analysis, deeply aligning with our commitment to enhancing security and efficiency in software development
Semgrep came to Webstacks at this pivotal change in their organization. We were tasked with delivering a fresh, scalable marketing website that fit the organizational rebrand and the product line additions.
Gatsby
The front-end framework, Gatsby.js, was chosen for its exceptional performance. With Gatsby, Semgrep could leverage site generation, which delivers content and loads pages nearly instantaneously.
Additionally, it offers a seamless developer experience with a rich ecosystem of plugins and integrations, making it highly customizable and efficient for building dynamic, SEO-friendly websites
Storyblok
Storyblok was selected as the CMS of choice for Semgrep for several reasons:
Netlify
For hosting, our team employed Netlify for its seamless continuous deployment process, directly linking with your Git repositories to streamline updates and changes.
It offers unparalleled speed and reliability, leveraging global CDN distribution to ensure your website loads quickly and reliably for users worldwide, enhancing user experience and satisfaction.
Netlify's serverless functions simplify back-end operations, allowing for scalable, efficient handling of dynamic content and interactions without the need for managing servers. Additionally, its integrated suite of developer tools and automatic HTTPS provides enhanced security and compliance
One of Semgrep’s primary initiatives following the website redesign was to build out pages for their growing product suite. Webstacks’ designers worked closely with the Semgrep product marketing team to gain a deeper understanding of each product’s capabilities and define how they should be presented.
Our goal was to create immersive experiences that gave website visitors a captivating view of the actual product.
Key design aspects that elevated product pages’ UX:
Webstacks also designed and developed a page that hosted interactive demos, giving users a step-by-step walkthrough of Semgrep’s “Code” and “Supply Chain” products.
These self-guided product tours allow prospects to get an inside look at Semgrep’s offerings without having to book a meeting. Overall, these demos are highly effective at educating both the decision-makers and developers in target organizations.
The growth of the Semgrep site also required us to work with their team to develop a new structure for the navbar and its subcategories.
The updated design is better fit for Semgrep’s growing product line, as well as the expansion of content. The menu contains subtle slide-in animations, as well as icons and descriptions for each subpage.
Expansion of Semgrep’s products required significant changes to the pricing page design. The new pricing model was split into 3 tiers.
The “Team” and “Enterprise” offerings feature checkboxes, which users can toggle between to add or remove Semgrep products to their pricing plan.
This approach allowed Semgrep to preserve a minimalistic view, making their pricing more intuitive for users and increasing their likelihood of converting.
Webstacks also designed product feature tables to cleanly showcase the capabilities included in each tier.
Pricing Page Callouts:
As website content began to take on varying formats, a resource hub was developed to serve as a centralized repository for blogs, webinars, events, and more.
Resource hubs provide comprehensive insights, guides, and solutions that cater to the needs of both existing customers and prospects. In today’s modern B2B/SaaS website landscape, they are becoming the standard of professional content marketing.
As Semgrep continues investing in content, the resource hub serves as a scalable foundation for adding new experiences that seamlessly integrate with the rest of the website.
This interconnected approach enhances user journeys, enabling visitors to effortlessly explore and discover more relevant content.
A powerful way to entice prospective buyers is by giving them a quantifiable view of how your product can save them money. This is where an ROI calculator comes in handy.
Our recommendation to Semgrep was to build an interactive ROI calculator to showcase the amount of savings Semgrep could generate in terms of coding bugs, working hours, and costs. The calculator utilizes toggles, a slider, and input fields, allowing users to generate their custom result.
Another major overhaul was done to the Semrep Careers page, which included many net-new components. An exceptional feature our devs added was embedding Semgrep’s open job positions via the Greenhouse API.
In addition to shipping website designs, Webstacks also crafted visual assets for several marketing materials, including social media posts, paid media ads, event posters, webinar thumbnails, and t-shirts.
To further enable the Semgrep marketing team, our designers provided templates for social media, webinar, and event design assets. This way, Semgrep could edit and repurpose themselves and significantly increase their production time.
Webstacks’ design impact extended far beyond the website. Our team even got the opportunity to design a digital billboard that announced Semgrep’s Series C funding, which was featured on the NASDAQ Tower in Times Square!
Scaling content marketing
Our efforts have enabled Semgrep to grow brand awareness and thought leadership through its marketing website. Now, their marketing team has the ability to autonomously produce content in a variety of formats.
Enablement for the Semgrep marketing team
Webstacks was able to bring autonomy to Semgrep through reusable components and a content editor-friendly CMS in Storyblok. This also laid the foundation for scaling content production. Our team provided workshops and in-depth tutorials to enable Semgrep to make content edits in Storyblok, as well as create new designs from templates.
Trust in our recommendations
Semgrep has welcomed Webstacks’ input when it comes to important design, development, and website strategy decisions. Their faith in our expertise allows for seamless coordination and communication. As a result, we’ve been able to provide task recommendations, and complete projects quicker.
Looking to start a website project? Talk to our website experts today!
Semgrep is a static analysis tool designed to streamline code security and quality by identifying bugs, vulnerabilities, and enforcing code standards swiftly and effectively.
San Francisco, CA
Software-as-a-Service
Enterprise (200+ employees)
