Basket

How do you build a product quickly and allow it to scale?

Basket

basket.com

Basket empowers customers to comparison shop based on their entire grocery list, not just a single item. Basket calculates the total cost of a grocery list at multiple local stores based on real prices. Customers share data to keep prices up-to-date and put the spending power back into their shopping community.

Capabilities
  • Strategy & Process
  • Core Libraries
  • Component Design
  • Component Development
  • System Documentation

The Problem

Basket is a startup that presents consumers with a simple way to find the lowest price on groceries from nearby stores, and allows brands to monitor sales, price, and display of their products. We built the B2B product, Basket Insights, from the ground up, allowing brands to see this pertinent information. Not only would the product be presenting brands with very detailed data, it needed to be easy to navigate and pinpoint specific data points.

Basket Insights needed to be built quickly and it would need to be prepared to handle rapid expansion and change.

Guiding Principle

Creating a robust product or a design system is not a zero-sum game. Both can be done at once.

Solution

In order to allow for rapid scale, we built the design system in tandem with the product. The system would consist of methodologies we defined with our Ether base, reusable UI React components, documentation, and a simple way to view each component with examples and all available options for any front-end engineer to understand.

The Basket Insights product would then consume these components. Any core design changes would happen through the system itself, instead of creating one-off solutions in-app which would eventually lead to technical debt.

The system included the base libraries defined in Ether: color, spacing, and typography. From there, individual UI components were built such as Headings, Spacers, Buttons, and Icons. As the needs of the product became more complex, components such as Tables, Navigation Menus, Modals, Sliders, and even Charts were required. We used Storybook to display each available system component in isolation, along with code samples, documentation, and all possible configurations inside a live-editing environment. This tool would become indispensable to developers onboarding into the project.

The Basket design system was then made into a publishable NPM module, which could be a dependency consumed by any Basket application or project.

The Outcome

We were able to build a full-fledged design system while still rapidly iterating on the product itself and launching much needed features.