Go to main content Go to main navigation Go to footer
Back to overview

Why structured design processes make the difference for your organisation.

Powerful design starts with structure. Not just because it provides overview, but mainly because it helps organisations develop faster, build consistent interfaces and strengthen their brand. At Cube, this is not an empty promise, but a concrete process: from wireframe to pixel-perfect component within the entire project flow. In this interview with Joost Engelen, UX/UI designer with more than 12 years of experience, we dive into the world of a structured design process. What does such an approach deliver? What does it look like in practice - from the first sketches to the collaboration between design and development? And why is it a smart choice especially for organisations looking to grow?

Jenne Morsink - Digital Marketeer bij Cube - Oldenzaal
Author Digital Marketeer
Reading time
5 min
Cube Oldenzaal

UX/UI design is not a trick - it starts with the right questions.

"You can only design well if you understand what the problem is," says Joost. This is why every design process at Cube starts with getting the scope right, such as user stories. Because at Cube, we don't start a project without a good set of user stories that outline the desired functionalities of the digital product to be made.

We also ask questions: what style suits the product? And what corporate identity elements are already in place? Think of fonts, colours, icons, tone of voice and visual examples - all necessary to set the right tone from the start. Is something missing? Then we simply create it. With our multidisciplinary team, we complement where necessary, without losing focus on what we do best: designing strong, functional interfaces.

"Design is more than making something beautiful," Joost continues. "It's about making sure every element is functional and that users intuitively understand what to do." This is precisely why structure is so important. Think styleguides, boilerplates and applying our own variant of Atomic Design. Defining in advance what the visual and functional building blocks are creates a consistent and understandable design system. This ultimately contributes to a clear user experience, which is fully in line with the house style and goals of the organisation.

Werken met design systems binnen Cube

Faster and more consistent design with fixed building blocks.

Based on this input, the team creates a wireframe. At Cube, this is done with a Figma library, based on components from Relume. By working with fixed building blocks, a suitable wireframe is built faster and more consistently. This allows us to map the desired features as efficiently as possible and then proceed to prepare the design boilerplate. "Wherever possible, we use AI to automatically generate wireframes based on a sitemap and prompts. That saves a lot of time," Joost says.

Image without description
Image without description
Image without description

Working with a boilerplate.

This is followed by the boilerplate: an interactive base file that brings together all the components, styles and guidelines. "You work with one central source of truth," Joost explains. "If you modify something in the boilerplate, it is automatically implemented in all the places where it is used." So the update is automatically included in all designs that incorporate the component, which prevents errors and saves time.

Boilerplate in design systems

In practice: this is how Cube's design team works.

The boilerplate is at the heart of the design process at Cube. "It is our starting point on every project," Joost explains. "We fill it with the right brand colours, text styles, icons and spacing variables. Everything you need for a design that's right and scalable."

The design team works according to a modified variant of atomic design. Not with atoms and molecules, but with five clear layers that match clients' CMS:

Design elementen, atomic design

Styling - such as colours, spacing, fonts

Elements - basic shapes like buttons or input fields

Components - such as navigation, maps or forms

CMS page-parts – parts like footers, CTA’s or sliders

Pages - the final pages

Cooking and designing: both start with a clean workplace.

Versioning is also well organised at Cube. Designers do not work with separate copies, but with branches and one central master, also called Single Source of Truth. "Like a chef who keeps his worktop clean, we keep our files tidy and consistent."

Image without description

Another important component is the checklist. For every design project, the team works with an up-to-date checklist that checks whether the file is complete and correctly constructed. "That checklist helps not only designers, but also developers. Everything they need to convert a design into a functionally working software solution is in there."

Collaboration: designers and developers on the same page.

A structured approach does not stop at design. "We make sure developers can easily work with our designs," Joost explains. "Figma is carried through into Dev Mode, where front-end developers have direct access to all styling, components and CSS."

In doing so, we use Tailwind CSS variables. Think of fixed values for spacing, fonts, shadows and other style elements. Because we work with the same basis from the start, design and development are directly connected.

Do we deviate from this basis, because the customer has already included other values within the existing house style, for example? Then we adjust these values in the design system and, if necessary, add a comment to clearly communicate this to our front-end developers.

checklist design voor decelopment

There is also a clear delivery checklist. This is continuously updated and is designed to keep both designers and developers on the same page. Think about layer naming, variants and accessibility. We also ensure that the designs comply with relevant guidelines, such as the WCAG standards and the Privacy by Design principle.

This is how structured design helps your organisation grow.

Why should an organisation choose a design team that works with design systems? Because it is more than just beautiful design. "It speeds up development, makes ongoing development easier and creates a stronger brand experience," Joost explains.

A good design is not constructed randomly. It looks at the digital product down to the micro level. Everything has to be right - down to the smallest detail. That's what you want if you take quality seriously. In this way, design does not become an afterthought, but a strategic tool. Smart design systems allow you to make quick choices, without compromising on quality. It moves with the speed of your organisation and the expectations of your target group;

Moreover, well-organised design systems make you less dependent on separate specialists. New team members can join faster thanks to the clear structure. Everyone knows what is built, why it is set up that way and how to build on it.

Finally, design as a strategic tool.

Joost stresses that design is not separate from the rest of the organisation. "It has to fit your brand story, your target group and your digital strategy." A good design moves with your organisation, without having to keep starting from scratch. Design systems help with this: they provide structure, but remain a means - not an end in itself. This leaves room for creativity, within clear frameworks. At Cube, this is the standard approach for every project.

Design systems are more than a visual guide. They are a strategic tool that organisations use to take their digital product to the next level. Considering getting started with them? At Cube, working with design systems is woven into every step of the process: from initial sketches to final interfaces, they provide structure, reusability and recognition. This not only results in better products but also speeds up the process, increases quality and strengthens your brand.

Joost Engelen, UX/UI designers bij Cube

Ready for the next step? We are too.

Wondering how powerful designs can make a difference for your organisation? Let's meet!

Design projects we are proud of.

Self-service klantenportal: Klanten beheren apparaten, dienen serviceverzoeken in en bestellen eenvoudig producten via het portal.

Nou

Nou is strengthening its brand position with a customer portal, app, website, and online store.

  • Platform
  • Website
  • +4
Interactieve kaart met realtime data toont de energieproductie van wind- en zonneparken, zodat klanten de herkomst van hun energie zien.

Pure Energie

Pure Energie: From green ambition to pure results.

  • Website
  • Platform
  • +4