;

Refinement

Featured Image

Some organisations refer to this stage as “refinement,” but in practice it’s full design delivery. Where design shaping explores possibilities, design delivery translates those possibilities into production-ready detail.

This stage connects creative intent to technical execution. Designers shift from creative exploration to an engineering mindset - prioritising clarity, precision, and feasibility. The focus becomes preparing components, templates, scenarios, and specifications so development can move with minimal friction.

Design delivery often begins with templates built from containers, components, elements, and atoms. Refinement then breaks these templates down into discrete, reusable components that can be tokenised and consumed by engineering. Tokens (e.g., spacing, colour, typography) are exported as JSON and converted into CSS or platform-specific styles.

Behaviour-driven development (BDD) underpins the process. User stories are refined with explicit acceptance criteria, wireframes, prototypes, interaction notes, and data requirements. Every artefact aims to remove ambiguity and accelerate engineering delivery.

BOK — Refinement
BOK — Refinement

This phase is prioritised according to the delivery schedule. The team decides which components must be ready first, enabling development, testing, and code deployment to happen smoothly. This includes language variants, breakpoints, content limits, ratios, and spacing rules. The result is a refined, standardised design system that drives the final product.

Tools and techniques in this stage include:

— Detailed design planning
— Refined user stories
— Explicit acceptance criteria
— Integration of user analysis into stories
— Wireframes and prototypes
— Technical design approach
— Data model analysis
— Preparation for customer testing
— Testing script creation
— Alignment on testing strategy
— Completed design tasks
— Logged design decisions
— Operational model alignment with engineering

At the end of this stage, design and engineering align on final estimation. Product owners and Scrum masters size stories, define dependencies, and plan sprints. With design stabilised, engineering can focus on implementation rather than reacting to constant changes.

Each stage ends with a definition of ready review. At Design at Scale™, the Definition of Ready (DoR) is not a single-spec document - it’s instead a collaborative artefact that unites UX, UI, development, and content.

UI details and components live in Figma

Process notes and decisions in Confluence

Requirements, dependencies, and stories in Jira

Automation keeps these tools synchronised, avoiding duplication and reducing documentation overhead.

BOK — Refinement

After design sign-off, UX and business partners document functionality, behaviours, data needs, and acceptance criteria. Engineering receives everything necessary for development: specifications, interaction notes, viewport rules, and test requirements.

This alignment ensures the team starts development with confidence, clarity, and shared accountability.

Happy scaling through design!

Hey, I’m Jiri Mocicka.
London-based Product Design Director, Trusted Advisor and Author of Design at Scale™. The method that empowers individuals to shape the future organisation through design.
If you have a question, join our Community and reach out to like-minded individuals who scale design propositions. An online Academy can help you to define teams of 01, 10, and 100, and 1% is supported by Grid Magazine and Supply section, where we bring more insights weekly on how to become a design leader in your Agentic Organisation

Jiri Mocicka

AVATAR

inResearch

127

inWriting

12

Released

310
EMT

Related.

Featured Image
How long does it take before we designers realise that our work's ultimate destiny is to understand the scale?  Very recently, one of my …
January 1, 2021
 · 
4 min read
Featured Image
Welcome to every first article of the DaS™ Academy series that focuses on designers in the team of one. Let’s start with ambition – after …
January 8, 2021
 · 
6 min read
Featured Image
Welcome to the second article of this series that focuses on designers in the team of one.  Starting with ambition, I have received many …
January 15, 2021
 · 
4 min read
Featured Image
Welcome to the third article of this series that focuses on designers in the team of one. After defining our Ambition and our Design …
January 22, 2021
 · 
4 min read
Featured Image
Welcome to the fourth article of this series that focuses on designers in the team of one. After touching on Ambitions, Beliefs and Design …
January 25, 2021
 · 
5 min read
Featured Image
Welcome to the fifth article of this series that focuses on designers in the team of one. After discussing the thinking in great detail, …
January 29, 2021
 · 
5 min read
Featured Image
Welcome to the seventh article of this series that focuses on designers in the team of one. After diving deep into more internal ambition, …
February 12, 2021
 · 
6 min read
Featured Image
Welcome to the eighth article of this series that focuses on designers in the team of one. After opening up the networking, the natural …
February 19, 2021
 · 
6 min read
Featured Image
Welcome back to our Design at Scale – Academy series, focusing on the design practice in a team of ten. Before we step into …
March 5, 2021
 · 
6 min read

GRID Magazine

Explore OUR 
Articles

Every week we bring set of stories reflecting on communication, operation and technology.

Newsletter

Subscribe.

We share our 20 years of experience in creating, managing and scaling products and services that allow individuals to shape organisations through design.

Design at Scale™

LINE_MAGENTA_050_301

Categories

LINE_MAGENTA_050_301

Data

LINE_MAGENTA_050_301

Share

Internal

Collaborate

Resources

IBM PlexSan
Regular
Charcoal

Design at Scale™ is defined by three models, which form the Method. Each model operates in a different part of the business and collects and informs parties on design and engineering decisions that have a direct impact on the delivery.

All brands and trademarks presented on the Design at Scale™ website are owned by their relevant companies or agencies. The projects represent collaborations between designers, developers and product owners. Do not copy or publish any of the projects shown here without written approval from Design at Scale™ (alternatively GIVE™, 9V™) and/or relevant companies and agencies.

SOC_Twitter
SON_LinkedIn
SON_Instagram
SOC_-Medium
View