The vwib

The association currently represents more than 1,000 manufacturing companies based in 14 districts of the Black Forest (in Germany), as well as in Bavaria, France, and Switzerland, with over 380,000 employees worldwide. The company celebrates next year its 75th anniversary and is planning to make a significant change, by launching a new website and positioning itself as a modern analog and digital network.

Goal

wvib Schwarzwald AG wants to convince its customers of the benefits of the network and to attract and win new customers. It aims to inform the public about the community values, its challenges, and performance of the mostly family-owned industrial companies, which are often located outside the metropolises, and to show what they do for the society.

Challenge

After discussing with stakeholders we settled on the following goals that we would target with this redesign:

  • a friendly and modern look for users to use
  • well-structured, making it easier for users to navigate within the website
  • easy adaptable and expandable design
  • an enjoyable and efficient experience for the community members

Identifying Pain Points

The association’s customers are the public, but above all, the people in the industrial manufacturing companies, specifically picked up, depending on which district the company belongs to, in which region they operate (counties) or which functions they hold in the company.

Knowing that we’ve done user research, and come up with three personas. These personas allowed both us and the client to constantly be reminded of the people that we are designing the product for, their needs and wants, as well as pain points.

Problems with the current website

  • the website looks outdated in visual design.
  • a major pain point was finding the relevant article as users had to browse through multiple navigation menu options, links, and articles to find the right information.
  • the search function was not effective in helping users locate the relevant article.

Process

Normally, I like to use pen and paper to brainstorm all the ideas that I have gathered from my research and then come up with multiple solutions for the problem. Once I am happy with my sketches I would make a mid-fidelity wireframe using Figma on how the structure would look like. However, in this case, the client already had in mind how the website should be structured, and provided us the Wireframes.

Execution: Visual Design

Homepage

During the design execution, I started with the top section first, since this is the part, which the users will see first after the page loaded, where I’ve made a few overall improvements that help the user focus and avoid distractions.

Menu

To allow users to easily locate and find the pages and information they need, I decided to place the navigation inside a burger menu.

Even if by hiding it, might first feel counterintuitive, many studies have shown that when given too many options, most users are likely to pick nothing at all.So by keeping the navigation simple, eliminating irrelevant options, and providing a clear objective, you’re minimizing the cognitive load on your user.

Slider

In the hero slider, I kept the two-column layout, however, I switched the order of the content.

I applied the F-pattern method, by placing the text group on the left side of the layout (this way the user can immediately connect mentally the main message with the visuals) followed by a picture.

To make the message (text) stand out more and avoid issues in picking the imagery, over the visual element I placed a white to transparent linear gradient overlay. The purpose of that is to ensure that there’s a proper contrast ratio between text and image so that the user can read the text that is presented over a background.


Middle Banners

Another requirement from the client, the three middle banners, which exemplarily display personalized content from a sector, a scene, or an area.

The content can thematize the experience of a scene as well as a seminar or a whitepaper for them. Everything can of course be determined by the user, using the toggle menu for each banner.

Word Cloud

Since the platform contains numerous categories and subcategories, I had to find a way of organizing content that helps users see what the most common topics are.

Similarly to tags, a “word cloud” typically contains words that are used to classify or categorize some information. Clicking on one of the hashtags in the cloud will take you to all of the content labeled with that word, which makes it easier for the user to access information on a topic.

Tiles

At the bottom of the homepage, also considered being a great place to catch the visitor's attention and guide them deeper into the information, we’ve placed the tiles section. These tiles (article blocks) combine scenes and their challenges (the topics).

To differentiate the importance of the tiles, I created a visual hierarchy for the layout. Through the use of typographic hierarchy, shape, and positioning, the most important tiles can be easily surfaced.

Hierarchy is an important principle that helps create a focal point, and ultimately gives the user an entry point to start consuming the page, and guides them to the most important information.

To improve the readability, an essential factor that I didn’t neglect, is the use of white space (also known as negative space), in the area between blocks.

Additionally, a sorting functionality for the order of the tiles has been implemented.

Design System

One of the main goals of the project was to deliver a flexible and modular design. Even though we’re not building here a design system, the pattern library is a subclass in the design system.

Organizing the library can be considered a real challenge. That’s why, to achieve this, I’ve applied the Atomic Design Methodology which talks about breaking down the final design to the smallest possible element and then build upon it. Much inspired from chemistry where atomic elements combine together to form a molecule, and even further to form a complex organism.

Diving deeper, here would be a quick overview of the components for wvib using the Atomic Design Methodology:

Atoms

Atoms are the foundational building blocks, that can’t be broken down without losing their functionality. In order to function aka. become useful, they need to pair-up like lego blocks or puzzle pieces. Examples are the most basic elements such as colors, typography, or icons.

Molecules

Molecules are groups of atoms (elements) that function together as a unit. In our case, molecules can be any number of elements from a button with an icon and image with a headline, to breadcrumb navigation (multiple links with icons and different colors).

Organisms

Organisms are groups of molecules and atoms united together to form a more sophisticated unit. For example, a header (menu, search, logo, member area) or a Quote Box (image & text).

Templates/Pages

And lastly, Templates, which are made up of Atoms, Molecules, and Organisms. It’s where something concrete like a layout or wireframe of the website structure becomes visible. Pages are the instances that replace the placeholder/dummy with the real content.

Why Design System?

Using this methodology to create and maintain a design system, it’ll help designers and developers work together more efficiently, but also communicate better. Not only it will speed up the process, but it will serve the people within the company. When the entire organization is on the same page, teams can communicate and move faster and be more efficient in releasing and updating products.

Most importantly, this design system isn’t a final product, with an end, but rather a living organism, that evolves over time and benefits other products within the company.

Behind the scenes

Redesigning their website was not a one-off exercise. Whatever I designed for the new website would also need to be flexible, easy to adjust, and reusable. My approach was to lay the foundation in Figma and define the design elements as components.

With the power of the Library, building pages is a piece of cake:

Handout

To go the extra mile, we’ve prepared a Mini-Design Book which was printed and brought to the Pitch. Inside some of the UI Elements were illustrated.

The result

Below is the final design of the homepage.

Homepage

Automotive Branche (Subpage)

Final thoughts

Redesigns are always interesting because you have a design that somehow is not performing optimally. But instead of starting from scratch, you have a head-start in such projects. For example, user feedback says they have a hard time finding something which points to UI or hierarchy issues. Often when you dig deeper you find insights that are far more interesting to solve.