St1 Biogas: new website quickly with Webflow

St1 needed a website for its new biogas business in Sweden on a very tight schedule. Lamia’s design team carried out the project in a short timeframe from start to finish on the Webflow platform without a traditional development phase. Published in just four weeks, st1biogas.se is a quality website that will support and boost the St1 brand in the Swedish biogas market.

Lamia built a Webflow website for St1 Biogas in Sweden.

In the early summer of 2021, St1 started its biogas business in Sweden with the acquisition of E.ON Biofor Sverige AB. The acquired business now operates under the name St1 Biogas AB and is one of the leading players in the biogas sector with a market share of approximately 30% in the Swedish transport segment.

The principal aim of the project was to create a user-oriented website for the new business and to provide target groups with information about St1’s products, services and biogas operations in Sweden. Visually, the goal was to make the new brand familiar to both corporate and consumer customers and to associate it with the St1 Group.

The project was given a tight four-week deadline. In that time, the project team created the website in its entirety and gathered all the information to be published. An additional requirement set by the customer was that editing the site should be easy and not require any coding skills at all.

Setting up a website without coding - with Webflow

The content management and publishing system Webflow was chosen as the technology to base the project on, as it serves as a comprehensive “one-stop shop” and thus provides not only an easy-to-use interface for creating websites, but also tools for maintaining and updating them.

With Webflow, it was thus possible to set up a high-quality website without a traditional software development phase. This made Webflow a perfect solution for the challenge posed by the project’s tight schedule, as it allowed the website to be built by St1’s and Lamia’s marketing and design experts, skipping the development phase. As a technology, however, Webflow is a temporary solution for St1.

In addition to Webflow, the project team used Slickplan to design the structure of the site, as well as Sketch and Invision for the wireframing and concept validation.

Lamia built a Webflow website for St1 Biogas in Sweden.
Lamia built a Webflow website for St1 Biogas in Sweden.

Multiple steps in a short timeframe

Although the project schedule was tight, it was still carried out in line with the best practices of service development.

A kick-off meeting was held to specify the objectives, progress and schedule of the project. In addition, a proposal for the structure of the new site was reviewed and, on the basis of the proposal, priorities were set for the delivery content to be published and the various steps for implementation. “In addition, we gathered as much information as possible about the customer’s new business and the end users of the site on both the B2B and B2C side,” says Ruta Damanskis of Lamia’s design team.

After that, the project team started to design the user interface for the site and create the wireframes for the main pages. The basic logic of the user interface was reviewed together with the customer and when it was found to be sound, the visual design of the site was started.

The visual design leveraged the existing St1 design system. In other words, the visual look of the new site was pre-defined. “At this point, we worked closely with the customer’s marketing team on image selection and content production to ensure that the end result met all brand and content requirements. When we had pages that were ready to be published we would always review them together with the customer”, says Ruta, describing the collaboration with the St1 team.

The implementation phase involved ensuring an optimal user experience for the site, as well as responsiveness for different devices. At this stage, Lamia’s growth marketing team carried out search engine optimization, SEO definition for the new site in order to maximize search engine visibility.

In the quality assurance phase, the site as a whole was tested and any bugs found were fixed.

The new site st1biogas.se was published in three steps.

The publication was followed by a first phase of further development, where new functionalities were implemented, such as third-party forms for user identification, as well as search functions for biogas stations and site content.

Further development has now moved to the next phase, and the next step is to develop the website to better serve the intended target groups. Search engine visibility is another important development target. Simultaneously with the development of the website, the St1 Biogas App for mobile users is being developed as well.

Lamia built a Webflow website for St1 Biogas in Sweden.
Lamia built a Webflow website for St1 Biogas in Sweden.

"This was a successful project, and we received good feedback from St1. We reached our targets and the site was launched on schedule. A big achievement, considering it was done in just four weeks."

Designer perspective: what did we learn?

Ruta Damanskis, the main designer in the project, lists the three most important lessons from the project:

  1. “Of course, the various stakeholders have in impact on how a project succeeds. In this particular project, which had a tight schedule, the customer’s active role and flexibility in terms of workshops and material deliveries played an important part. Without St1’s commitment to the schedule, it would have been practically impossible to achieve the project’s targets. So, our thanks go to the entire St1 team!”
  2. “It was a great experience and challenge to get to build a website without a dev team. This enabled quick implementation of the MVP phase, flexible response, and agile development without extending the project schedule. Webflow is an interesting platform for projects of this type.”
  3. “The fact that I was responsible for the implementation of the design in this project increased my technical understanding of front-end programming and its tools, operating methods and different layout technologies. I had the opportunity to improve as a designer and gain valuable new insights into the development of design solutions. I am sure that this will be helpful in communicating with front-end developers, for example during project QA.”