Hero image for Peabody

Peabody

a mobile-first SaaS storefront for Prismatext

Keywords
E-commerceSaaSCMSProduct designFrontend development
Tools used
FigmaSvelteKitJavaScriptDirectusAWSStripe

Goals

Peabody was created to replace Prismatext's legacy Shopify storefront, which had become a bottleneck for growth. While Shopify served its purpose early on, it offered little visibility into checkout workflows and couldn't accommodate our evolving SaaS business model.

Our goals were threefold:

  • Improve conversion rates through more flexible product presentation and rotating, seasonal collections.
  • Boost performance—our heavily customized Shopify site routinely scored around 30% on Google Lighthouse, creating friction and slow load times for users.
  • Introduce a subscription model, complete with monthly credits that users could redeem for books both on the web and in the mobile app.
Ultimately, we wanted finer control over the entire customer journey—from discovery to purchase to reading—while maintaining a cohesive experience across web and mobile platforms.

Screenshot of the prismatext.com home screen

Less is more. Here, we rely heavily on the typed animation of the highlighted words to alternate between languages.

Insights

We began by auditing analytics and customer behavior from our Shopify storefront. One major insight was how the absence of subscriptions limited both our customer engagement and our financial forecasting. Users had no recurring incentive to return, and each purchase required a new decision—introducing friction and unpredictability to our revenue model.

At the same time, feedback from our mobile app users made clear that we needed a better bridge between the storefront and the app. Because app stores take a 30% commission on in-app purchases, we wanted a system where users could buy credits on the web and seamlessly redeem them in the app. This design choice not only protected our margins but also gave users a consistent, unified purchasing experience.

Mobile-first design for the Prismatext storefront

A mobile-first approach to the storefront ensured that the most important content was front-and-center, regardless of device.

Screenshot of a book on the Prismatext bookshelf

Each book detail page has rich information about the book, the available language variants, and similar titles.

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

We constantly referred back to the phrase 'get out of the way' when designing the UI, as we didn't want to present any obstructions to the user browsing for books.

Constraints

The transition came with a number of logistical and technical challenges. We had to:

  • Migrate legacy customers while preserving their purchase histories and ensuring past books remained accessible through the new storefront.
  • Maintain seamless communication between Peabody (the web storefront) and Rocky (the mobile app) so that newly redeemed books appeared instantly in the user's library.
  • Rebuild under tight timelines while the SaaS rollout was in motion, ensuring minimal business interruption.
From a technical standpoint, we needed a future-proof, lightweight foundation that wouldn't lock us into a proprietary framework. Svelte and SvelteKit were ideal because of their simplicity, minimal abstractions, and interoperability with other frameworks like React and Vue.

Concepts

Our design principles centered on clarity, speed, and consistency:

  • A credit-based economy underpinned both the storefront and the app, with a clear redemption flow and transparent account balance.
  • Stripe-based checkout simplified the purchasing experience and allowed us to completely decouple payment logic from book access and credit management.
  • Mobile-first design ensured responsiveness and usability across devices while visually aligning the storefront with the mobile app through shared color systems, iconography, and type styles.
The result was a storefront that felt tightly integrated within the broader Prismatext ecosystem—distinctly faster, more intuitive, and unmistakably branded.

Tradeoffs

The biggest tradeoff was scope. While we had initially envisioned a web-based reader embedded within the user account area, timeline pressures required us to postpone it in favor of launching a stable, high-performance core experience.

We also chose not to introduce advanced personalization features at launch, focusing instead on reliability, speed, and subscription flow polish. These tradeoffs allowed the project to hit critical deadlines while maintaining a foundation that could easily evolve in later versions.

Impact

The impact of Peabody was immediate and measurable:

  • Performance skyrocketed—our Google Lighthouse scores jumped from the 30% range to as high as 90%, dramatically improving load times and engagement.
  • UX friction dropped—with Stripe's simplified checkout and integrated credit redemption, users could go from browsing to reading in seconds.
  • Recurring revenue stabilized—the introduction of subscriptions and credit tracking enabled us to monitor MRR and scale sustainably.
Peabody transformed Prismatext from a static e-commerce operation into a dynamic SaaS platform. More than a storefront, it became the connective tissue between every product surface—an example of how thoughtful product design, backed by the right technology, can drive both business growth and user delight.

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