Aurubis AG

A Design System connecting with Magnolia's CMS

Project Overview

CMS Development Company DEV5310 was assigned to develop a custom Content Management System for their client Aurubis AG. They reached out in need for a Design System that connects to the Magnolia CMS Environment - subtly relaunching the Aurubis brand and creating a fresh new responsive website experience to their international audience.

About the Brand

Aurubis AG processes metal concentrates, scrap metals, and metal-bearing recycling materials into metals of the highest purity. They are the largest copper producer in Europe and the largest copper recycler worldwide.
The group is represented worldwide in more than 20 countries on three continents and employ around 6,900 people.
Aurubis AG shares have been traded on the stock market since 1998 and are listed in the MDAX.

Wikipedia/Aurubis

The Mission

Redesign Aurubis brand
Relaunch global website [bilingual: german/english]
Provide UI Component Library to connect with Magnolia's CMS
Meet Web Content Accessibility Guidelines (WCAG 2.1) requirements

In this case, too, the budget defined the project approach. It allowed us to set up the project with the following sections:
↳ Market Analysis
‍↳ Problem Statement
‍↳ Ideation Sketching
‍↳ Design System

The Approach

aurubis.com

Market Analysis

So, who's reaching out to the brand and would potentially use the product?
A quick market analysis found that the audience might be easier to identify than expected - with a little surprise.
The average monthly organic page traffic comes to almost 50,000 from which 59.26% are male and 40.74% are female. The largest age group of visitors are 25 - 34 year olds, which is surprisingly young. Expected was a main age group in its 40s. [Source similarweb.com]
The top traffic source to aurubis.com is organic search traffic, driving 60% with informational intent. Meaning we're potentially dealing with shareholders searching for company updates, as well as investors willing to get a bigger picture of the company. And the slightly younger age group? Well, they're likely to be on a jobhunt. The top 3 visited subdomains are all job related.

Tool used: semrush.com

It is obvious that the main traffic source is located in Germany. Belgium sits on second place, very likely due to the acquisition of the Metallo Group in Beerse back in 2020 and taking over 91% of Cumerio, Belgium's largest copper producer.

Problem Statement

The actual problem occurred in the background.
The previous website was running on an old CMS. Module options were limited, not tailored to fit an editors need, causing them to 'manually' add html tags. Which clearly resulted in an inconsistent brand appearance and hiccups in the user journey.

Ideation Sketching

To frame the ideation process with the client, we agreed on 4 Pages to try demonstrate a selection of modules: Home, Navigation, Article Page, Stage Header

Sketching first module ideas for the 'Home'

First Layout ideas

Design System

Summary | The essential guidelines - created in Sketch and shared via Zeplin throughout all disciplines - provide a solid foundation for branding, a modular component library and combined component patterns.
It is set up to be maintained and grow constantly.

Base Structure

Base Structure | Responsive Grid System 8px base with 4 breakpoints
‍

Base Structure | Sectioning

Branding

Style Guide | Color Palette Accent primary & secondary brand, Neutral greys & Alerts + Tones in 10s/100

Style Guide | The Type System clear contrast to guarantee WCAG 2.1

Style Guide | Iconset based on Google's Material Outline Icons + custom shaped icons

Interactions

Mobile touch targets

Component Library

Components | Button variations & combos, Selection Controls, Modals

Components | Accordion

Components | Cards (Calendar), Filter, Tabs, Modal

Components | Table

Pattern Library

Patterns | Global header, Flyout menu

Patterns | Contact form

Patterns | Search form

Work Flow | Although Magnolia CMS is highly customisable - the integration of a (custom) UI component library such as Storybook brought Magnolia to its limits. In the end Zeplin served ok for handovers through every department.

Accessibility | Creating a website that everyone can access comfortably is quite a challenge for the whole team. There is a common lack in understanding and interpretation. And as always: lack of time.
Although W3C is doing a great job in providing relevant information - their website is horrendous to find topic specific information (beta not better).
For my tasks on this project the Stark Plug-in has been doing a phenomenal job. And yes, I've mainly used it for contrasting purposes, typography and touch targets. In the early stages the sketch plug-in proved to be a treat and in the QS phase the chrome plug-in was "easy as" to handle.
I wish there was more project-time given to develop a comprehensive functioning website accessible to everyone. The user demographics analysis on semrush.com showed there is a respectable number of users in possible need for an improved web accessibility.
‍

Motion Design | And this plays into the topic Accessibility as well. Too much and excessive animations are disrupting the user journey.
I learned that timing when to discuss this with the client is crucial. Although I advised them to go with a reduced interaction concept, we've pushed it out till later down the timeline. Consequently it wasn't defined.
I've simply done it way too early in the process. Because logically it sits right inside the component definitions. Instead, it would've rather helped to serve this topic to the client in the dev process.
Eventually a content editor chose to go with the default Magnolia page animations.
See yourself: aurubis.com