Stephen Widom
Color theme

A1 · Ordergroove

Groovy Design System

One component library for the merchant admin, where merchants configure their offers, subscription manager, shipping and emails. Adopted across the company, growing to 30 to 40 components.

Role
Led the project and built the first components
Company
Ordergroove
Stack
React, react-bootstrap, Storybook

Context

Ordergroove's merchant admin is where merchants run their subscription program: offer settings such as discounts and the default delivery frequency, the subscription manager their customers use, shipping settings, emails and more.

Before Groovy, its interface was inconsistent across the platform. The same styles were declared again in several stylesheets, so changing something like the header meant editing several files.

The work

  • Proposed and led the project to give the merchant admin one shared component library.
  • Built the first components: Button, ContentSection and Header.
  • Set the team up on Storybook, so every component could be previewed on its own.
  • Built the library on react-bootstrap.

How it fits together

  1. Groovy componentStyles defined once, with the component
  2. StorybookEvery component previewed on its own
  3. Admin screensOffers, subscription manager, shipping, emails

Try it

One component, every screen Change the shared Header or Button, and every admin screen that uses it updates at once. Recreated for this site with sample data. This is not Ordergroove's code or interface.
Header
Button

  • Offers

    Choose which products show a subscribe option.
    Save changes

  • Subscription manager

    Set the default pause length for customers.
    Save changes

  • Emails

    Edit the reminder sent before each order.
    Save changes

Result

Teams across the company adopted it quickly, because the value was clear to everyone.

By the time I left it had grown to roughly 30 to 40 components, including Avatar, Modal, ConfirmModal, MultiStepModal, TextInput, Select and Table.