Context

SCHULZ Systemtechnik is a leading industrial automation company in Germany and Europe, offering a wide range of mechanical, electrical, and informational solutions. The company is committed to delivering innovative, industrial automation solutions with the help of their over 1000 employees spread across numerous locations.

The client wanted to refresh their website, making sure it matched their positioning and values better, enhancing user experience and increase engagement and conversions. 

Process

We followed the Double Diamond as our basis of process, as well as use that to talk to our client about workflow, status quo, etc

Challenges

Common challenges included designing the website in an intuitive and user-friendly manner, making it scalable, easily maintainable and flexible (but not too flexible). Two distinct challenges arose during the Heuristic Evaluation we conducted:

Simple Navigation

The company is a large enterprise, offering many services in a multitude of industry sectors. They have a lot of interesting stories to share, because employees from different locations work on many exciting projects. But how can we make sure, we don’t overwhelm the users with this construct when visiting the website? So we needed to find a way of embracing the internal complexity, but making it seem simple externally.

Red Color

The one color that is associated with SCHULZ Systemtechnik is the color red, it’s the one brand color. How can we make sure that red brand color is not misinterpreted as an error or stop color? This question is especially significant due to the context the company is in.

Information Architecture

We wanted the information to be available intuitively and in a user-friendly manner. To get an overview of the complexity, one of the first things we did was create an overview of the types of content we would have to deal with. The process was similar to that Pepe Silvia meme.

We didn’t want the user to have to deal with the complexity and didn’t want them to have to make too many decisions, so decided for a main navigation solely based on industry sector. When the user was to enter one of these sectors, he would then be able go deeper if he wanted to, but was presented other content types like solutions, projects, articles, etc.

Wireframes

The wireframes were designed to clear questions about layout and functionality as well as user flow and experience.

Design System

The design system was created to ensure consistency and coherence throughout the website as well as to be used for other projects later on.

Colors

The color red must be used because it’s the brand color, but it is not used for any interactive elements.

Typography

Buttons

Text Inputs

Outcomes

The final design was created to be visually engaging, intuitive, modern, technological. The design included high-quality imagery and clear typography that helped to highlight the company’s services. The design was also responsive, ensuring that the website looked great on all devices, including desktops, tablets, and smartphones.

A navigation that folds away making space for the content and adapts to the background, layers of elements moving at different speeds (parallax) amplifying that feeling of three-dimensional space, simple animations as well as on-scroll interaction

Users are led into their industry sector of interest which features a whole own ‘world’ – backgrounds and buttons adapt to the cover image. The industry pages are created for discovery, offering sub pages, relevant projects and services, as well as articles.

Blurred elements can be found throughout the page, always opening up own ‘worlds’ within the page.

Conclusions

The project resulted in a user-friendly, accessible, modern, and visually engaging website. The new design helped to showcase the client’s services, products, as well as employees in a way that matched company values and made sure users weren’t left out of the equation. The new website is also scalable and easily maintainable, ensuring that the website can grow and adapt.