Website Relaunch: Climate Protection Frankfurt
Relaunch of the website Climate Protection Frankfurt with many exciting tips and suggestions to make Frankfurt a more climate-friendly city: New look, new structure, new programming
Redesign
Objective of the redesign:
- Upgrade the user experience: The website should be clearer and its intuitive accessibility be increased. The use of modern web design standards should improve the user journey.
- Ensure better orientation: Users can identify themselves with the topics and content and can delve into the issues in a target group-specific way – from sustainable nutrition to climate-friendly transport and renewable energies. This is supported, for example, by the new menu and the filter options.
- Prepare the content in an SEO-oriented way: Google evaluates the content of pages but has difficulty recognizing the hidden content. Therefore, the content must be restructured and processed. In addition, technical and editorial requirements of SEO must be taken into account.
- Program in WordPress: This allows the client to maintain the website themselves, expansion of the website is possible at any time and the SEO requirements can be well served. The website should also load quickly for a better user experience and be optimized for mobile devices.
The new climate protection website is intended to offer all target groups in Frankfurt am Main a first point of contact on the issue of climate protection, to get them excited about climate protection and to motivate them to get involved. It is an important building block for achieving the climate protection goals of the city of Frankfurt am Main.
Unfortunately, the climate protection website is only available in German. But the English website is already in planning.
Get a first impression here:
Design
Colors and font
The new website has a modern look with contemporary and theme-specific colors and a new font – but is still oriented on the appearance of the Team Frankfurt climate protection brand, which was already launched in 2017 by the Energiereferat (Energy Department) of the city of Frankfurt. Thus, the already existing brand is strengthened, but still presents itself in a new look.
The basic color blue already existed on the old website. We extended the color palette with other shades of blue and gray and green. Green is immediately associated with something positive and with the issue of sustainability. These new colors give us much more scope in the design.
The font is sans serif Roboto – a Google font that is particularly suitable for web design for two reasons: it is very legible, and it is also displayable on all browsers.
Illustrations and icons
With the new color palette, we also designed new illustrations and icons.
These have a high rating on the new website and are often used in web design, because they save space, which is especially important for mobile devices, and they are understood by the brain faster than text. Icons guide the eye and make it easier for users to find their way around the site.
On the climate protection website, access to the 8 main topics is now not only possible via text, but also via the visual language.
In addition to the homepage, new illustrations were also built for the newsletter subscription and unsubscription in order to make the newsletter subscription more attractive through a more visually appealing appearance. The subscription must be functional and visually stimulate the user.
More illustrations we created for newsletter subscription and unsubscription:
On the article level, too, we wanted to use illustrations to make reading more enjoyable and to present facts in a simpler and clearer way:
Photo tonality
For the newly selected images for the website, we made sure to choose authentic images that come from a friendly and natural color world. When designing posts, it was important that the images as a whole create an exciting composition.
Also of importance, of course: the reference to the city of Frankfurt.
Do you also want a new website? Feel free to contact us!
New structure for content and navigation
Preparation: Capture and sorting of all posts
The website had grown steadily over the last few years as more content was added, making it more and more confusing. Therefore, our first task was to capture and sort all the content on the site.
- Which topics are already covered?
- What content is already included?
- For which target group is the content?
The content consisted of various types of tip lists, interviews with people and initiatives from Frankfurt, articles with climate protection definitions, purely informational articles, target group-specific content and articles on the climate protection campaign in Frankfurt.
We have often separated articles that previously dealt with several topics and created two or three individual articles to be able to better focus thematically. Or we reassigned sections that fit better with existing articles. It also occurred that content was duplicated. This was archived by us.
We have recorded all this in a large Excel list:
Navigation: Topic-specific content
We worked out a structure for the website in advance, which we expanded in one or two places after sorting all the articles.
The new entry point to the page follows the question of a potential website visitor “What am I interested in?”. This has resulted in 8 newly defined main topics.
The entire topic-specific content is now collected under these 8 topics, which can also be sorted by filter options – both by target group and by area.
Local hero stories
In addition to the content that was purely there to provide information on specific sustainability topics, there were also emotional interviews with people and institutions that are committed to climate protection in Frankfurt. These contributions have been given a whole new category, namely “Local Heroes”. They are intended to make all citizens want to get involved in climate protection as well.
Glossary
A new addition is the glossary, which was previously summarized in a blog post. We now have a separate glossary for each term and a corresponding overview.
Projects and activities
Also new: Projects, activities and institutions in and around Frankfurt. Previously, projects and initiatives were hidden in articles, but they were not collected anywhere at a glance. We have improved this and created an overview page that collects all projects, activities and initiatives that have something to do with climate protection in Frankfurt – from the climate savings book to the vegetable box up to the cargo bike rental. Not only municipal, but also private associations and institutions are listed here.
Calendar
What events are taking place in Frankfurt on the topic of climate protection? Whether city tours, readings or workshops – here the user finds all dates at a glance and can get more information by clicking on the calendar entry.
Programming – Change from Drupal to WordPress
The old website was based on the CMS (Content Mangement System) Drupal. However, since the customer had expressed the wish to maintain and edit the website himself after the relaunch and to implement minor changes to the homepage himself, we programmed the new website with the CMS WordPress.
Through various individually selected plugins, we were able to implement special requests of the customer, such as the filter options, the Earth Hour gallery and the interface to the existing newsletter software cleverreach.
What’s more: The new website is fully mobile-optimized, which means it can be used on desktops, but just as well on various tablets and smartphones. There is no need to program a second mobile page for it and maintain it separately.
As far as accessibility is concerned, we have already implemented the menu with ARIA-markup so that it is fully keyboard controllable. Furthermore, placeholders for easy language and sign language have been created and will be added during the year.
After programming the website, we uploaded all content pieces, including images, texts, tables, sliders and graphics to WordPress and used them to fill the website.
Conclusion
From the initial pitch to the finished website, we offered the whole package for the climate protection website: Project management, concept, layout and design, editing, programming and filling.
To enable the client to maintain and further fill the website themselves after the relaunch, we held a WordPress workshop at the handover, including a guide for reference.
In the future, we will continue to support the Energiereferat (Energy Department) of the City of Frankfurt with technical website support.
To the new climate protection website
Contact for business
Are you planning a website relaunch or a similar online marketing project? We would be delighted to look into your individual project requirements. Regardless of the industry sector in which you operate, we will provide you with an individually tailored quotation.
Please contact us by e-mail or via the contact form. After this initial written contact, we will be able to advise you by phone.
