feco-feederle GmbH
What does feco-feederle GmbH do?
As a renowned fitter of office spaces and a leading manufacturer of room-forming system partition walls made of glass, wood and metal, the feco Group designs, plans and realizes sustainable working environments.
We have been working with feco-feederle since 2017. The aim of our cooperation is to strengthen and expand the online store and feco.de. The first step was an online store that sells high-quality office furniture. Together with feco-feederle, we developed the future strategy for the store and then implemented it.
As part of this, we also held workshops on marketing strategy and SEO and defined a content strategy based on key search terms. Our colleagues at Marketing Monsters took care of the performance marketing to complement this strategy.
Since then, our collaboration has continued to expand, we relaunched their website and continue to support feco-feederle as a sparring partner for the ongoing development of the website and store. This also includes areas such as tracking, user experience and SEO.
Website relaunch and online store
Before the relaunch, the feco group had two websites: one for business area dealing with office spaces, and one dealing with the feco partition wall system. As both websites had a similar structure, there was a lot of duplicate content, which caused problems not only from an SEO perspective. The interlinking of the two work areas, which already existed in practice, should thus also be reflected on the website. From a technical point of view, the previous solution also had some limitations and with the desire for an additional online store for office furniture, it was clear: everything had to be new!
Defining goals
So, we sat down together and talked about the different target groups in a detailed workshop, then defined the user and company goals for the new site.
Analysis
First, we analyzed the current sitemaps of the two existing websites “feco-feederle. Die BüroRäume.” and “feco. The partition wall.” In addition to the structure of the sitemap, the aim was to list and understand existing content, content types, metadata, and taxonomies.
Sitemap and navigation
We reorganized the content of both websites and defined the page structure and information architecture. Some menu terms were redefined in this step to ensure a clearly understandable taxonomy.
Conception with priority guides
The next step was to define the required page types. Here we worked with what are known as priority guides. We first defined goals for each page and then listed all the necessary content blocks hierarchically. In the next step, these blocks were then described in detail:
- What content do we need and in what form?
- Which modules are ideal for displaying them?
- What functionalities and technical requirements are there?
- Which elements are linked where?
Visual Design
We then developed the visual design based on the priority guides. In addition to a good user experience and visual hierarchy, the aim was to create a minimalist and uncluttered layout with restrained typography and plenty of white space in order to leave enough room for the high-quality products and references.
Full width video sequences
In order to present the impressions and effects of the room concepts as impressively as possible, we use full-width video sequences as heroes at the top of the page.
Partition walls detail page
The challenge for the pages showing partition wall systems was to present product features clearly and offer technical information to download. Images with relevant information such as “project”, “solid wall”, “glass wall” were also to be displayed in an appealing way. For this purpose, we designed an image gallery that follows a flexible grid and clearly displays information.
Concise project page
The project pages have become more detailed and very generously designed. It was important for the project information to be clearly listed and for links to the partition walls to be used.
We developed a hotspot module to show the products used in the context of the projects and to lead to the online store.
Room concepts
feco plans utilizes diverse room zones for working landscapes that fulfill various requirements for a pleasant working day. To illustrate these room situations, we proposed short video sequences of the rooms. For the video sequences, we designed an accordion module that allows access to all videos in one viewport.
"The digital future needs space: the future of work will be highly networked, creative, digital and complex. Our website and its functionalities should take this into account. With the creative team at netzstrategen, we experienced a target-oriented creative process: the relaunch offers our brand-strong office furniture partners a diverse space in the store & info blog and makes our services easy to understand. The idea of the film clips as web headers, realized by born2design, gives our portfolio additional transparency, which turns users into interested visitors to the feco-forum Karlsruhe."
The online store
We are pursuing several goals at the same time with the online store. On the one hand, the store is of course intended to promote direct sales, particularly with regard to individual and display items. These products are particularly attractive for design-savvy buyers of smaller quantities. On the other hand, the store is intended to present the extensive range online and thus be a source of inspiration for freelancers and decision-makers in larger companies who want to refurnish offices. The range shown and available online is therefore constantly being expanded and represents a digital supplement to the “feco-forum” showroom in Karlsruhe.
Technical implementation
In all our projects, we set ourselves the goal of intensifying the collaboration and exchange between design and development. This is exactly what we did for this project.
The design team use the “Zeplin” tool to export all the designs created from Sketch with the comments, required components (such as icons) and the associated components. This enables the development team to implement the relevant components sustainably, as they can understand the various use cases and their dependencies and ask questions directly if necessary. Bringing code-based thinking into the design process has proven to be much more valuable than simply building websites from PSD files.
Technically, the website is based on WordPress and WooCommerce, which supports the well-known component-based Flynt framework. Flynt is based on the Timber WordPress framework, which allowed us to build a stable yet modern PHP composer application on top of the very user-friendly WordPress interface.
Flynt allows us to create separate components each with their own Twig template, stylesheet, JS file and WordPress functions php file. This not only speeds up the initial and iterative code build, but also allows for regular feedback from the client during the process. This avoids huge feedback rounds and the developer has the opportunity to find the relevant code much faster without these changes having unintended consequences in the codebase.
