Who is Semgrep?
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.
The Tech Stack
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:
- Storyblok helps engage modern audiences more efficiently and effectively by unleashing content operations at every stage of the content lifecycle.
- Storyblok’s Visual Editor speeds up content creation cycles and optimizes for both the developer and content editor experience.
- Composable Components gives teams greater control and flexibility across all projects.
- Achieving scalable content operations is a breeze with Storyblok’s central content hub, asset manager, and custom user roles and permissions.
Learn more about Webstacks' Storyblok services.
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
Learn more about scaling and managing dynamic web experiences with Netlify.
Product Pages
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:
- Static and animated product mockups
- Widgets, buttons, and sliders that alter the elements displayed
- Scrolling trust bars and customer testimonials
Demo Center
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.
Navigation Menu
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.
Pricing Page
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:
- Tooltips that add valuable context without cluttering the UI.
- Hover states on pricing cards and buttons that provide feedback.
- FAQs that clear up common pricing-related queries.
- Real-world social proof taken from X (Twitter).
Resource Hub
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. For modern B2B SaaS websites, they are becoming the standard in 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.
ROI Calculator
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.
Careers Page
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.
Marketing Collateral
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.
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.
