(This is part 2 of a series. For Part 1, see How Elevar Prototyped a Headless E-Commerce Store with Gatsby)

Make fewer decisions upfront. Move faster.

That was the lesson the Elevar team learned when they set out to migrate StriVectin from Magento to Gatsby + Shopify. They started with Storybook, a tool for developing UI components in isolation for React. Using Storybook with Gatsby enabled the team to focus on components and design, delay decisions about hosting and content management, and move faster.

Storybook Let The Team Focus First On Components And Design

Starting with Storybook freed them to focus entirely on the site and experience without worrying about integrating data sources or how it would all come together. 

Instead of going back and forth between the front-end and the integrations necessary to power it, they could focus purely on the front-end. They represented component properties with Storybook’s Knobs and Actions, and from the initial prototype they had enough validation that the high-level approach worked.

When they started with Gatsby and Storybook, a migration from Magento to Shopify was a foregone conclusion, but they hadn’t yet made a decision about the content management platform or the hosting. And being able to delay those decisions without risk was incredibly freeing for them in the early phases of the project.

“We were halfway through the project and we were still in Storybook without hardly anything done in Gatsby, let alone a CMS or hosting,” said Thomas Slade, Elevar’s VP of Engineering. “This was awesome because we basically pushed all those decisions away and just focused on the components.”

As a result, the team was able to confidently move forward without feeling like they had to make definitive selections for all of the other technologies upfront. They used Storybook to begin building out the React components that would serve as the building blocks for the new design all without knowing for sure what tool they’d use for content management or where the site would ultimately live. 

“Storybook and Gatsby let us break the dependencies between the systems, the data, all of that,” Slade said. “To me that was a mind blowing way of going about doing the things because it forced us to focus on the important pieces at the right time versus giving everything a little bit of attention and just juggling it.”

While Storybook and Shopify were locked in, the rest of the implementation was up in the air. Gatsby provided a way to be confident they didn’t need to worry about data sources until later.

Selling Clients on the Storybook Approach

While Storybook made things more predictable from a development standpoint, it did change the way the team communicating project state to the client.

The initial design mockups represented complete pages, but once Storybook broke those pages into individual components, it became difficult to visualize fully-assembled dynamic pages. In some cases like the header and navigation, they pulled together components in Storybook to illustrate how they would eventually come together.

In some ways, though, Storybook actually made things simpler. In a typical workflow data and features couple so closely together that it can be difficult to demo work-in-progress to clients without complete data.

“The client might look at a page and mention it doesn’t look right because there’s not enough products,” says Slade. “They can end up focusing on things that aren’t as important. But Storybook helped them focus on thinking through just interactions.”

Even though the project progressed in a bit different way than usual, having already established long-term trust from StriVectin, the Elevar team were able to get buy-in and continued onwards.

From Building Components to Building the Site

When it was time to transition to the rest of the project, the team found it fairly straightforward.

Once they were ready to start on the implementation with Gatsby, the library of components they built and tested in Storybook made the transition incredibly easy due to the use of React and TypeScript. The React components could go straight into Gatsby pages; meanwhile, strongly-typed properties and the associated knobs and actions, the site’s underlying content and catalog schema became clear making it much easier to set up Prismic.

“We just took the props from the components and mapped them to types and documents and Prismic,” said Slade. “Then with Gatsby it was really just laying out the pages using the components and then filling the state into the components.”

Using Storybook for the design process let them focus on a modular design system that was easy to share, preview, and test with clients. As a result, they were able to focus purely on designing all of the components necessary to support their business goals and know that they could fill in the content for those components using Gatsby’s approach to the Content Mesh.

And since Gatsby generated a static payload, they knew they would be able to deploy it almost anywhere. That flexibility and portability gave them the freedom to focus on building the site components in Storybook without being prematurely distracted by evaluating tools and infrastructure options early in the project.

Iterating Towards A Happy Outcome

Being able to choose their technology stack iteratively didn’t solve all of their problems. Later in the project, they did have to navigate some tricky challenges in creating a seamless user experience with a account management, cart, and checkout experience between Gatsby and Shopify (more detail on that in the next post!)

But what Gatsby and Storybook did do was give Elevar  the flexibility it needed to iteratively build complex e-commerce experiences without having to make significant decisions or commitments too early in the process. Elevar’s process enabled them to stay focused and deliver a higher quality product with less effort or conflict.

In the end, the StriVectin team was incredibly happy. While everything starts well at the beginning of any project, the true measure of success happens at the end. Is the client happy with the process and the end result? In StriVectin’s case, that answer is absolutely, yes.