
F7 Redesign - Information architecture
The previous website consisted of significantly less content than the new one, so it was not necessary to use more than three navigation levels at that time. As there is a lot of content planned for the new site and we wanted to describe our services in more detail rather than just listing them on one page, we added an additional navigation level. This divides the content into smaller, easier to understand subpages and doesn't overwhelm users with endless scrolling of text.
In order to cater to the different user groups of the new website, we have conceptually divided the site into two areas, the blog and the agency area.
Agency area
In the agency section, it was particularly important to us to offer potential customers a comprehensive insight into our service portfolio and to highlight the quality of our work through references and case studies.
The other pages in this section provide information about how we work, the history of our company, our certifications and our close connection to the TYPO3 community.
- References: Potential clients can find an overview of our previous projects and learn more about our approach and successes in detailed case studies here.
- Agency: This section introduces us as a company and gives an impression of our expertise and engagement.
- Services: Here we present our wide range of services and show how we fulfil the individual requirements of our customers.
- Contact: The contact page serves as a central point of contact for enquiries and makes it easy to get in touch.
- Teams: Here we present our interdisciplinary teams and the structure of the agency.
- Jobs: Here you can find our current job adverts and inform yourself about open positions.
Blog Area
Our blog is more than just a source of information about our products and services. It opens a window into our corporate culture and provides insights into what makes us who we are. Articles such as Training at F7 - The first day provide an authentic look behind the scenes at F7 and convey our values. This allows interested parties to gain a comprehensive picture of us.
By making a clear distinction between information about our services and insights into our corporate culture, we specifically address different target groups and make it easier to navigate our website. Potential customers can find everything they need to know about our services and projects quickly and clearly, while the blog is a valuable resource for applicants in particular. Thanks to the new structure, users no longer have to fight their way through confusing deserts of text, but can find the content clearly organised on individual pages.
Visual Separation
In order to realise this conceptual separation of blog and agency visually and technically, we developed a concept that is reminiscent of a Single Page Application (SPA). The highlight: the blog can be opened and closed via a prominently placed sidebar, independently of the main navigation. Our aim was to make the new F7 website not only performant but also visually appealing. Our frontend developer Felix therefore scrutinised various technologies and ultimately opted for barba.js.
Barba.js is a JavaScript library that makes it possible to realise seamless transitions between page changes without having to re-render elements that remain the same on several pages. The result: when navigating through the pages, you get the feeling of using a native app. New content loads faster and more smoothly than with conventional websites. Animated interactions with the sidebar make it even more attractive to switch back and forth between the blog and agency area and discover new content.
Wireframes and Prototypes
The next step was to develop wireframes in order to visualise and plan the structure and information hierarchy of the content and individual pages. We first built the planned page from wireframes and then decided which modules (content elements) we wanted to implement technically and make available to the editors of our system after release.
This resulted in 18 different content elements, ranging from simple text elements to teaser walls and interactive galleries. In order to optimise the user experience, we tested these interactive components intensively with the help of prototypes. This allowed us to identify and minimise potential errors or difficulties, for example with navigation or the operation of the galleries, at an early stage. This iterative process allowed us to continuously improve the usability of the website and ensure that all elements functioned intuitively and smoothly.
How to proceed
Once the basic framework of pages and modules and the new corporate identity was in place, we set out to find a suitable design and UI style.
In the next article, we will give an insight into our decision-making process, as well as a picture of the current UI trends that run through the web.