Headless Storefront solution
Landing page for the launch of Catalyst: BigCommerce headless starter
Web Design, UI + UX, Brand Strategy
Project Brief
BigCommerce launched Catalyst, their next-generation headless storefront starter in early February. Leading up to the launch, our team discovered key user touch-points for the launch, one of them being a marketing landing page that that would help introduce and educate the target audience about the product.The Catalyst launch was the first of its kind at BigCommerce, as a developer-first product that prioritized technical users and quick deployment as the primary conversion for the landing page.
The process
Catalyst is a complex product that is geared towards developers. Although the core of Catalyst is the GitHub repo that needs to be cloned, our team identified key user touch-points that would help define the journey of a developer as they discovered, learned and, ultimately, started using Catalyst for the first time.
There were a few key aspects of Catalyst that needed to be clearly communicated through the landing page design:
Catalyst, in very simple terms, is a headless website template optimized for Next.js
It’s made up of an opinionated tech stack, with the flexibility for developers to bring technologies that suit specific business needs
Highly performant, out-of-the-box storefront, ready to be styled for company branding
Figma UI Kit that’s easily cloned and customized using Figma variables
Out-of-the-box UI that’s optimized for SEO and seamless shopper experiences
Market analysis
I took design inspiration from a lot of the leading developer platforms/products in the market today. Landing pages, especially in the past couple of years have optimized for sleek and simple over more traditional marketing-heavy, call-to-action landing pages. I wanted the page to feel connected to the BigCommerce brand, but also diverge from it in a way that gave a clear indicator that we understand the audience is more technical users over business users.Some of the landing pages that influenced our final landing page design were:
Iterations
I ran a brief workshop with the team and used FigJam to understand and align on the biggest needs for the landing page. Because the launch of the landing page was scheduled for three weeks out, we needed to strike a balance between ambitious, yet do-able.After identifying the needs as a larger group, I then mapped out the general layout of the page: reusing components used in other areas of the dev center along with colors, type and icons. This helped speed up the ideation phase and got me wire framing quickly.
Screenshot fo the FigJam collaboration board we developed as a team to help organize the hierarchy of information for the landing page
Animations and Interactions
Initially we had discussed a traditional hero that had descriptive copy and a visual. As I got further into the design, it became clear that the “Integrations” section was the most captivating (and helpful) visual on the page. We decided it should be pushed above the fold to engage visitors.We streamlined other areas which freed-up development time to dedicate to the custom visual. I began by wire framing the visualization in Figma, and then we began building it in code once we were aligned on the general behavior.
Mocks of the type of progressive animation.
We added a soft parallax effect on the whole animation, made the integrations clickable and the background texture highlight where the user was on the page.
The Content
We had three primary goals that we wanted the landing page to accomplish:
What is Catalyst?
The market needed a clear, no BS introduction to what a “headless starter” was and why they should care.
Tech Stack
Catalyst at its core is a highly composable product. We used the visual, which sat above the fold, to showcase the flexibility of the product.
Key Features
Internationalization, fast deployment, popular technology frameworks, and performant out-of-the-box technology were key features we highlighted.