Goals and challenges
When we started to redesign the corporate website for K.D. Feddersen Holding GmbH in May 2022, we were faced with many exciting challenges. The client had a clear vision: they wanted to break up the site's structure and give editorial responsibility to the various departments within the company. The challenge was to create a site that represented the group, contained relevant information about the international companies, and acted as a distribution page for the other divisions so that users could quickly find the company best suited to solve their problem. In addition, this site was to be launched in the fourth quarter of 2022, which meant a strict schedule.
About the Feddersen Group
The Feddersen Group is an international group of companies headquartered in Hamburg, Germany. For more than 70 years, the companies have stood for the highest quality and reliability. They cover a wide range of competencies in various industries, including the distribution of engineering plastics, specialty chemicals and technical products, plastics production and services, contract compounding, masterbatches and biodegradable and bio-based compounds, the manufacture of twin-screw extruders and stainless steel trading.
1100
employees
900
million euros in sales in 2021
NaN
group companies worldwide
The road to success
In order to meet all the different objectives and the tight timeline, a comprehensive set of requirements was developed in several workshops and applied to the first 3 business units.
The interaction of Storyblok with an e-commerce instance had to be taken into account in the visual and technical conception in order to create the impression of a seamless platform. The module development also had to take into account both instances and the different goals of the websites in order to best support each team in their project.
A project team was defined with fixed contacts from Feddersen and TOWA. The analysis phase began with a competition and benchmark analysis, a stakeholder survey, and a technical feasibility study. Together with K.D. Feddersen Holding GmbH, personas and target groups were then defined for the individual company pages. These were essential for the further course of the project and formed the basis for the conception and design process together with the client. The digital strategy and the new branding of the Feddersen Group were also taken into account. Due to the spatial situation, numerous concept workshops were held with MS Teams. FigJam was successfully used as a tool for these workshops.
Look & Feel as the basis for all further steps in the design process
It was important to involve the many different stakeholders in the company at an early stage to avoid later correction loops. Based on the look & feel, the visual direction of the new digital presence was developed and presented internally.
After approval, the design was developed iteratively with the client, and in parallel a digital design system was created that could be used for all further digital touchpoints. It had to take into account the different applications such as website, e-commerce, administration application and be aligned with the different brand guidelines of the companies using the same modules.
This was particularly important for the UI design of other business groups, as it allowed access to the work already done on the components and significantly accelerated the design process.
Advantages at a glance: Pure efficiency and unbeatable consistency.
By using predefined components and modules, we were able to save time and effort in creating new designs as the project progressed. It also allowed us to respond quickly and efficiently to customer requests.
We also made sure that the design system had a clear, scalable structure. Not only did this provide a consistent look and feel, but the design system enabled consistency across all digital touchpoints and business units. Changes to one component have an immediate impact, designs are always up to date, and quality levels are maintained.
A look at the system structure
Together with the client, we worked in workshops to develop the functionalities for the websites.
For this purpose, we created a design system concept via Figma, which included several libraries that greatly facilitated the design process when creating the templates:
Basics (brand guidelines): Colors, typography, icons, grid, images, UX wording, ...
Universal components: buttons, links, navigation, footer, form fields, dropdowns, ...
CMS Components: Hero module, teaser, image text, news slider/grid, lists, ...
E-commerce components: Product tiles, product sliders, complex tables, ...
5 important Key-Take-Aways
1.
Get Stakeholders on Board Early
To successfully build a design system, all relevant stakeholders should be involved from the beginning. This helps to create a common understanding of the project and the design system.
2.
Iterative UI Development with Continuous Feasibility Checks
Iterative UI development with ongoing feasibility checks by development ensures the feasibility of the design and helps avoid unnecessary costs. With feedback from the developer, necessary adjustments can be made in time.
3.
Coordinate Component Naming with Development
Consistent naming of components helps the entire team understand the system and ensures a consistently high standard of quality throughout the project. However, to avoid problems during integration, naming should be done in coordination with development.
4.
A Dedicated Figma-Space for the Client
Not always, but in this case it made a lot of sense to have a dedicated Figma space for the customer. Since we expected the design system to grow in size in the near future, separating the libraries was best from a collaboration standpoint. This allowed for efficient collaboration and feedback, and the customer will now be able to make adjustments and enhancements in the future.
5.
Make it your own
Design systems are as individual as a digital product and the team it belongs to. They are never "finished" and should be continually evolving.
Outlook
Starting with a pure UI/UX project, we are increasingly becoming a full-service digital partner for the Feddersen Group. In addition to the Storyblok implementation, we are currently very active in the content and SEO strategy, as well as the tracking concept for all instances.
In addition to planned animations to further enhance the site's user experience, we look forward to supporting the Feddersen Group in the upcoming relaunches of other companies.
If you want to learn more about the technical side of the project, check out our case study.
🔥 Projects, we have done
Here are some projects we have implemented successfully with different clients.