Koko Black is a chocolate company in Melbourne where I worked as a packer. Over time, I developed an understanding of manufacture and became a production team manager. I proposed changes for workflow efficiency and a system for design operations on the side.
So far Koko Black’s brand design has been outsourced and the online store is built on a custom Shopify’s theme. However, production is expanding quickly and so should the design labor.
Based on the ITIL service lifecycle, I outlined a framework to manage a scalable design system from conception to maintenance, and I pitched it to design and retail stakeholders.
The goal of a design system for Koko Black is to preserve its DNA through documentation and ensure stakeholder alignment. The table below describes each role.
| DesignOps Head | Define strategy, manage backlog, streamline tooling, workflows and metrics |
|---|---|
| Front-End Engineers | Maintain code components, integrate system into codebases, identify gaps |
| Product Designers | Test components, propose patterns, promote design consistency |
| Engineering Leads | Align with platform standards, resolve infrastructure blockers |
| Marketing Leads | Ensure designs system reflects brand and tone consistency |
| Quality Assurance | Validate accessibility, legal compliance, measure design performance |
| Human Resources | Support hiring and onboarding of new designers and engineers |
The first step to start a design system was auditing and documenting existing assets. I started at Koko Black’s website, organizing components through reverse-engineering and writing foundational experience guidelines.
I used the web inspector to mock up the website in Figma, organized pages into a file, created variables for colors and text styles, and a library with atomic components.
Then I compiled the basics for the website’s user experience, including brand identity, design principles, taxonomy, and content guidelines (word choices, writing tips, etc.). I gave special attention to ethical and behavioral design because it’s where the balance between human-centered design and business goals lies. For example:
| Pattern | Examples | Guidelines |
|---|---|---|
| Nudges: Low-friction prompts to influence behavior | “Only 2 left in stock”, “Buy again”, “Free shipping over $50” | Use nudges sparingly, transparently, and avoid dark patterns |
| Defaults: Preselected choices to streamline decision-making | Default to the most popular shipping method | Set defaults based on user data or most beneficial user outcome |
| Progressive Disclosure: Reveal complex information in stages | Show delivery details only after selecting address | Prioritize task completion over full information upfront |
| Feedback Loops: Real-time feedback to confirm or guide user behavior | “Item added to cart” with visual confirmation | Make feedback immediate, noticeable, and non-disruptive |
| Commitment & Consistency: Encourage small commitments that build toward larger actions | “Add to favorites” as a precursor to purchase | Allow reversibility, maintain user control |
Koko Black’s storefront is built with Hydrogen, Shopify’s React-based framework, so I translated the Figma library into tokens and React-based components, and deployed them on a Storybook repository. This is as a source of truth for guidelines and smooths handoff to development.