Skipper Otto CSF E-Commerce and Packing Platform

Community supported e-commerce

Skipper Otto Image

Our tech stack for this project:

Background

In our experiences building products on existing e-commerce platforms, we found that companies that weren’t ‘cookie-cutter’ e-commerce brands struggled to fit their businesses into rigid software operating models. We decided to build an API-first SaaS e-commerce platform that prioritized client flexibility and was architected for the inevitability of changing requirements and needs for customization.

We began discussions with Skipper Otto, a community supported fishery based in Vancouver, BC, but operating across Canada. They work with independent fishers, ensuring equitable pricing and payment for their catch, while focusing on sustainable fisheries and traceable supply chains. Their sales are direct to members, who buy season long memberships with pre-paid membership shares which are drawn down throughout the fishing season as purchases are made.

Based on their experience with their current software, Skipper Otto determined that they required a more flexible e-commerce solution that did not force changes on their unique business model due to platform constraints. We aligned on a shared desire to build an ethical e-commerce platform that accounts for the needs of producers and other stakeholders as well as platform shareholders.

Skipper Otto Image

Discovery

We embarked on discovery and user experience research with Skipper Otto, including long form introductory meetings which captured business complexity through documentation of pain points which were distilled into actionable feature requirements. We conducted user persona workshops, collaborative creation of distinct personas and scenarios to drive UI development and subsequent API requirements. We visited Fisherman’s Wharf, the beating heart of Skipper Otto’s business that contains their warehouse operation and the docks where their fish come in. This culminated in "c4 model" diagrams for the software systems in scope to be created (System landscape, system contexts, containers, components) and long-form supplementary specifications documentation.

Challenges

Skipper Otto’s business model presented numerous challenges which ‘out of the box’ software was unable to address functionally. A typical customer flow for Skipper Otto is:

  1. User signs up to be a member. They must pay for a membership and for a ‘member share’ which is at least $200.
  2. Once sign up is complete, the member can enter Skipper Otto’s e-commerce store. To get started browsing they must select a Pickup Location and Pick Up Session (a date range which they may pick up their order at their chosen location), or they can choose to have select items shipped directly to them (contingent on member’s region).
  3. The member can then browse the product selection, create a cart, and check out that cart to create an order.
  4. Once an order has been created, Skipper Otto warehouse employees must weigh each piece of fish and input the actual weight into the system (this varies piece by piece). Once they have packed the order, the member’s initial order total is adjusted to the packed total.
  5. The order is shipped out for delivery to the pick up location

This flow creates several wrinkles in the standard e-commerce flow:

  • Adjustments of product weight and/or quantity in the warehousing stage, which need to be reflected in store inventory and member order and balance totals
  • Product receivable and batch tracking
  • Accurate inventory counts
  • Multiple pickup sessions, locations, different available inventory with different delivery methods based on location
  • Membership model/fund draw down

Skipper Otto’s business to this point is also subject to traffic spikes surrounding marketing efforts and time of fishing season, which lends an extra layer of complexity to the build. On their old software platform this resulted in frequent downtime.

Additionally, Skipper Otto was interested in placing a heavier emphasis on traceability and to be able to track inventory from boat to customer, telling the story of ethical, locally sourced fish to their members.

Skipper Otto Image

Development

Architecting for Change

From the outset the systems that make up the Skipper Otto e-commerce platform were architected with the expectation that they will need to evolve as business requirements do.

We approached this is a number of ways:

  • Comprehensive and automated testing: unit, integration and functional.
  • Modular architecture. This ensured that we could swap out and integrate new components and services as needed over time.
  • OpenAPI REST architecture

Core API

The core API consists of

  • Fastify / Node.js http API server
  • Hosted on Heroku (both web and worker processes)
  • Protected with Oauth gateway worker authenticating against IdP
  • Postgres database
  • Redis instance

We utilized Fastify for its performant qualities relative to Express as well as its powerful plugin architecture. We created several in-house open-source plugins for Fastify during the project. We leveraged Cloudflare workers to front our UIs and API, addressing frequent traffic spikes.

Launch / Impact

In December 2022 we launched to production and added over 8000 users to the system. The platform has processed over $4 million in sales over the last 16 months, and in comparison to their past platform, has experienced almost zero downtime despite traffic spikes. We have a seamless product flow from warehouse receivables to batches of inventory to dynamic inventory in the storefront, to warehouse packing, and finally to the member. Members are able to see fisher information, fishing method, and catch location in the product detail pages, helping to tell the story of ethical fishing, traceability, and fair labour practices.

Jig shipped with a robust Admin interface which automated or made "self-serve" many pain points for Skipper Otto that they had to previously make requests to their old platform provider to enact manually each time they occurred.

Every project starts with a conversation

You talk, we listen. We learn about what you're trying to do, where your barriers are, and we figure out a solution. It's a refreshingly collaborative approach to digital projects and it all starts with a conversation.