Baugenossenschaft Letten – Well-performing,
SEO-optimized and fast website
built via Jamstack

About

Let’s meet Baugenossenschaft Letten

Baugenossenschaft Letten (BGL) is a Zurich housing cooperative. It comprises of 607 apartments, spread over 6 settlements in the city of Zurich. It was founded on February 16, 1922, as a building cooperative by state, city and private employees of Zurich and renamed in 1973. The current name refers to the district of Letten, where the first settlement of the cooperative was built.

The company plays a very important role in bringing the local community together and makes every effort to ensure that each tenant feels at home. The website serves not only as an image function, but also provides residents with the most important information about BGL, its mission, the residential development and the people behind the building cooperative.

Goal

What the client wanted to achieve

2022 is a very important year for BGL, as the company is celebrating its 100th anniversary. They decided to honor this with a new website, which will show that a company can be traditional and modern at the same time. BGL wanted it to be fresh, intuitive, easy-to-navigate and, most importantly, informative.

From the practical point of view, there was also a need to give the content team the ability to edit the website content and rearrange the layout on their own. BGL wanted to be independent from external providers and be able to make necessary updates whenever they want.

Since it’s 2021, SEO optimization was a must, alongside excellent user experience and memorable design.

The previous website was developed over 10 years ago. While part of the information was updated throughout this period, the UI itself has never received an update until now. This also goes for all other assets unrelated to the website. With the anniversary approaching, BGL aimed to improve their communication all-round. This included a brand new, state-of-the-art website, new film and photo content, and revised documents for print (brochures, etc.).

Challenge

What we had to face

Our first step was a detailed analysis of the Storyblok CMS. Storyblok presents a slightly different approach than other headless CMS providers. It offers more features for non-technical users, such as real-time visual editor or component-based website structure builder. This requires a little bit more discipline on the part of the developers, and this is why we had to know all of Storyblok's capabilities and unique characteristics.

As soon as we received all the necessary assets, such as the content, images, videos and documentation, we started the development process. We worked on a completely new website, so we could do all the steps by the book.

The only "challenge" we had to face was to complete the project on time. We estimated that the work would take approximately 200 working hours and that was exactly what it took to finish off the new BGL’ website. It was a one-man project and our Jamstack developer coped with this perfectly.

One of the most demanding tasks was to implement both an SSG (Static-Site Generator) and SSR (Server Side Rendering) scripting at the same time to reach different goals simultaneously.

Solution

How we chose the stack and strategy

There were no specific guidelines in terms of design or technology. BGL’s only request was that the site was light-weight, both visually and in terms of loading times, and that the technologies used are future proof. Knowing that, we suggested going with the state-of-the-art Jamstack approach.

It was also important for content specialists to be able to edit the content on the site without any requirements for coding. Storyblok (a headless CMS) was a perfect fit for many reasons, including the visual editor, which makes it easier for editors to make changes themselves. They can also organize the structure of the website flexibly, thanks to a drag & drop functionality, and plan their publication schedule easily.

To round off the Jamstack approach, we chose Next.js.

An open-source React front-end development web framework created by Vercel, it enables functionality such as server-side rendering and generating static websites for React-based web applications. This means we could freely choose from 3 types of fetching data for pages' pre-rendering: at a build time, on each request, and using dynamic routes.

The last element of the puzzle was the aforementioned Vercel, which enables hosting websites and web services that deploy instantly and scale automatically – all without any configuration. There is no need to rebuild the entire website when using Incremental Static Regeneration. It simply saves time, and guarantees easy updates of the already-built static pages at the same time.

NextJS
Vercel
Storyblok
(Headless CMS)
React

If you want to learn more about Storyblok and other headless CMS solutions – check one of the articles on our blog.

Check the details

Results

What we accomplished

BGL’s new website is light-weight, both visually and in terms of loading times, and technologically future-proof. All of the client’s goals have been reached!

It also has all the advantages of being implemented with the Jamstack approach, such as good performance, scalability, great user experience, high security, maintenance and flexibility.

Apart from developing the new website, we also prepared a clear and useful guide through Storyblok and conducted a special workshop with the team responsible for updating the content. Now they are ready to do it on their own – whenever they need.

Here are the most important metrics (on desktop):

93
Performance
95
Accessibility
93
Best practices
100
Search Engine Optimization

Testimonial

What our client says

I enjoyed working with Naturaily a lot.

I appreciated the clear communication and the great relations we had with the project manager, Tomasz, and the owner Marcin. I was especially happy with the work ethic of Marcin Antczak – including his dedication to the project and working night shifts in order to meet certain deadlines. Both agencies and the client are super happy with the work of Naturaily. We will definitely be back for future projects.