A professional website for the steel industry – why steel processing can be sexy
Protech is an expert in the steel processing industry. For many years it has been supplying heating boilers as its main product. Several years ago the company made a conscious decision to focus on outsourcing, i.e. delivering complex steel products according to customers’ orders.
However, the previous website did not reflect their current offer. It was also outdated and did not express the nature of the PROTECH company at all. The basic idea was also to adapt it to the DACH countries [German-speaking countries, Germany – D (Deutschland), Austria – A (Österreich), Switzerland – CH (Schweiz).
Difficulties of Protech:
- switching the services offered from boiler production to products dedicated to B2B solutions, i.e. switching to outsourcing,
- increasing B2B sales by reaching customers from the sector they can provide outsourcing services to,
- presenting the Protech brand in a modern way, showing an innovative approach in the production process,
- creating language services for DACH countries.
Sprint 1: Analysis & Local Vision
Each project requires a deep understanding. That is why we started the whole website design with a local vision in the machine park in Zator.
Protech owns one of the most modern machine parks in Europe. Within the area of almost 15 thousand square meters there are 571 machines per 1000 employees. This is several dozen times more than an average plant of this type has.
Why was the visit to the client’s premises so significant? We wanted to explore and understand the processes and the way Protech works. We started our local vision from the first stage – the steel processing, i.e. the place where steel sheets are delivered from the steelworks.
Then we went through all the stations where the steel is processed. On a real example we found out:
- what the cutting process looks like and what is the difference between a turret and a laser punching,
- how the elements are prepared for bending,
- what the difference between hybrid, TIG, MAG and laser welding is,
- what metal cutting after the welding process is about,
- what is the shotblasting for,
- when spray painting and when powder coating is used,
- and last but not least, what the assembly of elements processed along with the electronics looks like.
Sounds like from outer space? It did so for us at the beginning. And that is why during the first phase of the website design we concentrate on full understanding of the business and the way the company operates. Only if we fully understand the way the company works, we can design a website tailored to the customer’s needs.
The visit itself has brought considerable advantages:
- we witnessed the process with our own eyes, so when creating the website we knew how the specific elements of the business interact with each other,
- the local vision made it possible to quickly complete the domain knowledge,
- getting to know each other (live, despite the pandemic), each other’ visions, assumptions, goals,
- becoming certain of a genuinely high specialty of Protech – the autonomous machine park is very impressive.
After the on-site visit, together with the Protech team, we conducted a kick-off workshop involving work based on Team Canvas and Business Model Canvas. We learned about the company’s relations with the unit and their strategy for the next few months.
The problems of Protech’s customers, what should be highlighted on the website during the design.
For B2C customers for whom boilers have been produced so far:
- they look for information about the maintenance of boilers,
- they don’t know how to keep them clean,
- the first start-up of the boiler is troublesome.
For B2B customers – service outsourcing. The customers are mainly from DACH countries, where the following problems have been observed:
- the production is no longer cost-effective,
- the availability of employees is limited,
- there’s a lack of expertise, such as that of a welder,
- they are willing to hire a manufacturer of their own products, who would be able to comprehensively handle all the events.
When it comes to products such as a rolling mill, namely professional tools used in machine parks:
- the people buy a Polish product,
- no machines in this category on the market,
- Protech brand stands for product reliability,
- the company has an open visit policy.
Sprint 2: UX Research and Information Architecture
After coming back to the office, we have carried out Desk Research, which is the analysis of the existing data. We spent a significant part on the analysis of the competition in categories – B2B, rolling mills and websites dedicated to boiler service.
The competition analysis helped us draw some basic conclusions:
- the competition does not have very attractive websites, so it is very easy to build a competitive advantage,
- for B2B partners, an important thing is to show real pictures of the machine park,
- the competitors within the partners’ category also strongly focus on describing the profile of the company itself,
- for alternative products such as rolling mills, the technical specification is crucial,
- further documentation for the products is available as downloadable PDF,
- all these websites are very consistent when it comes to graphics.
In this phase of the project we also deepened the information about the whole profile of the company. We have also expanded our expertise based on what we learned during the on-site visit.
At this stage we also contacted the SEO agency and developed strategies for SEO positioning of the website. For the needs of SEO we decided to create dedicated subpages for services. Thus, for example, we receive comprehensive information about MAG and TIG welding as well.
The result of this phase was an information architecture:
Sprint 3-4: UX Design & Copywriting
The moment we had the information architecture ready, so we knew what subpages were to be created, we moved on to the stage of creating content and arranging it on the target website.
Before organizing the content on the website we had a few assumptions:
- relationships play an important role in the sales process, so it is worth showing the person responsible for sales on the website,
- it is worth showing the “modernity of the plant”, so the whole website should be based mostly on interesting pictures,
- although services may be independent, Protech can handle production from A to Z, so it is important to create a system of redirections to subsequent subpages,
- the main Call To Action shall be encouraging to contact on each subpage,
- the website and subsidy subpage has been located in the “submenu”, it is required with subsidy regulations, but it is not crucial for the user.
As seen, the above mock-up of the website designed by us allows for discussing its structure. During this stage we had several iterations with the client, where we were moving screen by screen and discussing individual sections.
This allowed us to fill in the gaps and introduce necessary changes. Basing on the mock-ups of the website we are able to:
- develop the materials we need to complete the content,
- validate the missing pictures and elements,
- start copywriting, which has also been done by us on the basis of research and materials provided by Protech,
- verify how expensive and complicated it would be to implement the graphic design of the website.
At this point, the content for the entire website was produced simultaneously. Polish was chosen as the basic language. For the needs of the project, the texts were completed immediately in the Figma tool, where we also designed views, namely specific screens. Moreover, in order to have the texts translated into other languages (German, Austrian), we also prepared a text file containing all the content.
Sprint 5-6: UI Design of a professional website
At last, we were able to start creating the visual part of the website. We worked on the existing branding, which looks really good. So we used the theme displayed in the logo as well as on the current website.
We eventually decided on the square theme, which has been applied on a new, professional website. Due to the intense red and the desire to refer to the color of steel, we also introduced grey.
In order to show the expertise and experience, we used real diagrams from CAD programs, the basic tool used by the Protech team.
The whole website was also designed in mobile views.
At the end of the sprint we prepared a simple styleguide:
Deployment of the website:
The deployment was carried out in close cooperation with our fellow developer @Jerzy Kozieł. We chose WordPress platform to freely edit the content and sections.
Jerzy prepared a set of all the components he created for this professional website. By building a modular structure, further pages can be created very quickly, depending on the marketing demands of PROTECH.
The entire project was created using operating environment, with no indexation, thus it was possible to test multiple elements, and the changes were not visible to the public. It also means that the draft website was visible with a secure password, where stakeholders could comment on the changes in real time. In the meantime, the content was entered and responsive versions of the page were developed. The whole implementation took about 3 weeks.
The website of the production plant should reflect the nature of the particular machine park. Due to the in-depth research we managed to reflect the nature of work, which is visible at every step in PROTECH plants. The thorough understanding of the processes helped us create a modern and professional website presenting the information indispensable for a potential B2B partner.
people in the process
Case study isn't enough?
Would you like to learn about the whole process and how we could carry it out in your organization?