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.
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.
We were able to build a full-fledged design system while still rapidly iterating on the product itself and launching much needed features.