Hero image for Peabody

Peabody

A SaaS storefront for Prismatext

Keywords
E-commerceSaaSCMS
Tools used
FigmaSvelteKitJavaScriptDirectusAWSStripe

Background

Prior to the launch of the SaaS business model, Prismatext was an e-commerce bookstore hosted on Shopify. While Shopify was a fantastic solution early on, we quickly came up against its limitations—namely, the checkout workflow was a "black box" to the store owners. We needed a way to tie together the storefront and mobile app experiences, while being able to have finer control over the entire customer journey.

Process

Thankfully, having an existing storefront that we were more-or-less satisfied with gave us a significant head start when creating the wireframes for the self-hosted storefront. However, we had to be careful not to miss some critical details. Since we were transitioning to a SaaS model, we had to re-work how the users interacted with the credits they received with their subscription. With the checkout process completely decoupled from the credit redemption, we created new paradigms to reduce the friction in adding books to the user's bookshelf.

Screenshot of a book on the Prismatext bookshelf
Screenshot of Prismatext subscription plans

One of my favorite visual cues was the skewed buttons/containers peppered throughout the interface

Screenshot of the Prismatext bookshelf, filtered by genre

Takeaway

Peabody was my first deep dive of the Svelte/SvelteKit ecosystem. I was impressed that Svelte didn't lock the developer into weird abstractions and syntax unique to the framework—something I'd struggled with in React and Vue. It was also a great way to exercise integrating all of the disparate APIs that underpin the platform. Svelte is the opposite of verbose, and it's a joy to write in. I find myself reaching for it more and more in both work and personal projects.

© 2024 Zak Erving
built with ❤️ from scratch👨‍🍳