Westeria is one of the world's leading machinery companies facilitating the circular economy. They develop innovative recycling & material handling solutions to help reduce the world's carbon footprint and have over 60 years of experience delivering top-of-the-line machinery.

Read more+

As a result of the current environmental challenges, Westeria's product portfolio has grown significantly, which resulted in the need for a new, modular digital marketing platform.

Westeria hired Naam Agency to revamp all digital marketing efforts and support the presentation of a wide range of new, high-quality machines across their platforms.

I subsequently led all Creative Digital Direction, Digital Design, and Client Contact for the primary digital touchpoint, the website.

UX/UI Design
Creative Direction
Homepage screenshot Westeria's website design
Westeria's homepage landing.
On the homepage we highlight Westeria's 4 main sections with 3d animations triggered by scroll.

4 Main's

Westeria's product assortment is divided into four main categories. We took these categories and made them the main focal point of the homepage with an impressive visual hero element.

On entry, a user will be introduced to a full-screen 3D visual that explains all four categories. As a result, complex operations are made easy to understand, and experienced users will have a fast-track route to the right products for them. Novice users will be introduced to the site's terminology and be visually guided through the next steps.

Westeria's marketing team can create highlights within the animation to further explain features that sets Westeria apart from its competitors.

Explore ↓
Four phones on a grey background showing the Westeria website design
Translated to a smaller breakpoint, the website keeps its character and ease of use.


During the process, we created a selection of leading questions to help structure our information while keeping user & business needs in mind.

How might we inspire and delight recycling facility operators to reach out to Westeria for possible solutions?
How might we inspire facility managers to optimize their production with a wide variety of modular machinery-line, WeKea?
How might we facilitate Westeria's continually growing product catalog?
How might we set Westeria apart from its competitors?
How might we create a design system that ensures future design consistency while giving the Westeria team, consisting of non-design savvy members, the flexibility to create new and edit pages regularly?
Explore ↓
A tablet on a grey background showing the Why Westeria section of the Westeria homepage
Highlight three unique selling points.
A tablet on a grey background showing 3 thumbnails on the screen of the Westeria website
Three thumbnails on the homepage.
Three tablets showing the full Westeria homepage, materials page, and request for service page
An overview of the Home Page, Material Page, and Service Page.
White box on a grey background showing the colors used in the Westeria website
Westeria's color scheme.
White box on a grey background showing the typography used in the Westeria website
Westeria's typography.
Multiple Westeria website design components on a grey background
A selection of Westeria's design components.

Product Highlights

Westeria is an innovative company, so it was crucial we'd create a machine overview page that would allow them to scale as they grow.

The page structure is based on the Atomic Design Principles system, where we start small to create reusable content blocks, also known as components. This method is perfect for designs that need to scale.

The 'Machine Detail' page is entirely modular. Westeria can edit, re-order, remove, or add various content blocks with different functionality. Westeria's marketing and sales teams now frequently come together to structure and compose new detail pages, something they could not do before.

Explore ↓
A tablet on a grey background shows Westeria's overview page.
Westeria's Machine Overview Page.
A full screenshot of the full Westeria Overview Page
A complete screenshot of Westeria's Machine Overview Page.
A tablet on a grey background showing a Westeria product detail page
Westeria's Machine Detail page.
A screenshot of all modular components of the Westeria detail pages
An overview of Westeria's modular detail page components.

User Journeys

At the beginning of this project, we specified multiple user flows, with one being crucial; the manager (with decision power).

We first explored their feelings, needs, pain points, and moments of delight, as we knew that the website was only one part of their journey. Westeria's goal for the manager is to sign up for an in-person meeting in their demo facility, allowing them to introduce the complete range of possibilities.

The manager is usually higher up in the chain of command and possesses purchasing power, and typically buys multiple (connected) machines to improve their material handling. In addition, they also love systems that connect well to their existing setup, as it's their responsibility to ensure the recycling facility runs smoothly and effectively. For Westeria, these are the type of customers they'd love to show the demo center. Therefore, creating an informational flow explaining all the primary benefits of Westeria's products was necessary to motivate them to sign up for a demo appointment.

Explore ↓
A tablet on a gray background showing Westeria's Material Page hero section.
Material Detail page hero.
A tablet on a grey background showing Westeria's related products section
Material page's related products section.
A tablet on a grey background presents Westeria's menu
Westeria's full-screen menu.

Modulair Design System

Each page and module is flexible and editable, which was an essential efficiency requirement, allowing Westeria to set up new pages and flows they can test, iterate and optimize without involving Naam.

As a result, we had to create a foolproof Design System that would give autonomy to Westeria's marketing team. At WDS's (Westeria Design System) core, you'll find sections consisting of molecules (such as Cards), which are, in turn, composed of atoms (such as Icons). Put together, these sections become a complete Page Template.

Westeria can now consistently push updates and naturally grow its main digital channel (the website) with the new Westeria Design System.

Explore ↓
A video of the many different components of Westeria's website.
Westeria's navigation components on a grey background
Navigational elements.
Westeria's form presented on a grey background
A form that thinks with you.

It's Getting Dark in Here

Westeria's new website contains numerous overview, detail, and macro pages, all consisting of various sections. To help create a clear visual hierarchy, we introduced a collection of dark components and pages to contrast the light product pages.

Conceptually, darker pages are used throughout the design to create contrast between sections. But, more specifically, pages consisting of only dark sections are used for landing pages. For example, the Materials pages — a unique collection of landing pages that present the various materials Westeria's machines can handle. The marketing team uses these landing pages to improve natural search results (SEO).

Explore ↓
Two tablet on a grey background showing Westeria' Materials page
Materials Overview page.
A tablet and phone showing Westeria's detail page elements
One of the many available detail page hero designs.

The Results

Westeria's main digital touch point, the website, has been online for a few months, and new pages are being created by the team frequently. Although I'm not allowed to comment on specific numbers or details, it's safe to say the new website has increased requests and, more importantly, demo facility visits, which was the ultimate goal for Westeria.

Westeria and Naam still work closely on adding new iterations and elements. I'm excited to see the WDS (Westeria Design System) come to life, and I can't wait to see what happens next.

Explore ↓
An overview of tablets presenting various screens of Westeria's webdesign
An overview showing the consistency of Westeria's web design.
Westeria GMBH
Digital design systems
Information architecture
User journey mapping
Web design
Timothy Maurer
Joris Spiertz
Lieneke Koenen
Jaoa Bairrada
Timothy Maurer
Joris Spiertz
Creative Direction
Timothy Maurer
View site