Goodnature cover image
SectorFood
ScopeBack-End DevelopmentFront-End DevelopmentUI/UX Design

Goodnature

Goodnature is a family-run business that has been manufacturing commercial cold-press juice equipment since 1976. As Goodnature continued to grow, they realized their legacy website had been fully-squeezed of the functionality it could produce, thus a digital refresh was in store.

Goodnature tasked Monogram with designing and building a new commerce site, knowing our expertise in building composable commerce solutions would provide their users with a great experience.

We took Goodnature to the next level.

Visit Website
Case study image 0Case study image 1
Case study image 0

New look Grounded roots

Monogram carefully crafted a new site design, that stays true to the Goodnature brand and brings new life to their digital presence. From loading states that mimic the rotation of a juicer motor, to the nature-inspired color palette, you’d be hard-pressed to find a juicier looking site.

New Tech

We chose to build this project with SvelteKit because of it’s incredible developer experience, and ultra-fast results right out of the box. Svelte feels very bare-bones, without losing out on functionality. Both developers and users love the results.

Case study image 1
Case study image 0

API-First Commerce

We utilized Swell as our commerce platform because of their dedication to API first development and out of the box features. We easily set up a store, added products, and even turned on subscriptions, all from the dashboard. Swell makes interfacing with your commerce data seamless, therefore we hit the API, and we were off running, building out a custom commerce experience!

Syncing Data

While our Commerce and content data is hosted on separate services, this doesn’t mean they can’t interact. We utilized Swell’s webhooks, and Prismic’s Integration Fields functionality to sync product data from Swell into Prismic. This insures the marketing team will always have up to date product information without having to manually input it themselves.

Case study image 1
[@portabletext/react] Unknown block type "testimonial", specify a component for it in the `components.types` prop