Website for a new Project Design Office

Dromig

Company name

General description

Design and development of a new website for a newly established Infrastructure Design Office.

I was fully responsible for the entire project, which included:
- Gathering requirements
- Conducting a competitive analysis
- Proposing copywriting along with unique selling points (USP) or brand value proposition (BVP)
- Creating wireframesBuilding mockupsDeveloping the website in Webflow

Explore the site

Main Challenge

At the beginning of our collaboration, the client informed me that the website would be hosted on their existing server with the company where their domain was registered. This meant that during the development process in Webflow, I had to ensure that the contact form on the website could seamlessly transfer collected leads to an external solution.

Defining the Client’s Key Needs

The client's needs and expectations were analyzed during a mini-workshop, where we developed a Business Model Canvas. As a young entrepreneur launching a new company, this process helped refine the firm's value propositions and provided key insights into the road design and construction industry, which I later incorporated into the website’s content.

Main Client’s needs and expectations

A website with an engaging, light, and modern layout

The layout should stand out from competing companies

The design, color scheme, and content should clearly communicate the expertise and experience of the firm's designers

The primary focus of the website is to present the client’s service offering

The site should include functionality for collecting contact information from potential clients

The website will be hosted on the client's own server, not directly within Webflowtail

Research

The research phase focused primarily on analyzing the websites of competing design and engineering firms. The key insights drawn from this analysis were as follows:

Most companies in this sector place little emphasis on the quality of their websites

Many of the websites are built using generic templates with minimal or no customization

The information provided is often limited to just three elements: the company name, the industry it operates in, and contact details

Content tends to be minimal and does not clearly communicate the company's service offering

Layouts are often outdated and frequently suffer from poor responsiveness, making them difficult to navigate on mobile and tablet devices.

There is a noticeable lack of branding or unique visual identity, making most websites feel indistinguishable from one another

Wireframes & Copywriting

Taking into account all the insights gathered during the competitor analysis and the client interview/workshop, I began by working on the website copy. The initial draft was shared with the client for feedback.

After finalizing the content together with the client, I created a wireframe that helped me structure the layout and plan all key content, as well as consider the visual elements for the site.

Mockups

The research phase focused primarily on analyzing the websites of competing design and engineering firms. The key insights drawn from this analysis were as follows:

#FC8F3C

#FFF8F2

#0F0F0F

Main color

Orange was chosen as the primary brand color for three main reasons:
1. It conveys a sense of energy and dynamism
2. It is strongly associated with the road construction industry in Poland
3. It stands out—none of the competitors used orange, favoring muted tones like gray, brown, and dark green.

Open sans

Font

Open Sans is a clean, modern, and highly legible font that works exceptionally well across all screen sizes. Its neutral yet friendly appearance makes it a versatile choice for professional websites, ensuring both clarity and approachability. Thanks to its wide availability and web-optimized performance, Open Sans helps maintain visual consistency and fast loading times.

Several visual elements on the website—especially in the hero section—were inspired by road signage, creating subtle but meaningful references to the industry. The layout of content across all sections was carefully designed to allow visitors to quickly understand the company’s offering without needing to read every word.The final mockups included both desktop and mobile versions to ensure full responsiveness and a consistent experience across devices.

Webflow development

The development phase in Webflow focused on translating the mockups into a fully responsive website, optimized for all screen sizes down to a minimum width of 350px.

The biggest challenge was related to a key requirement mentioned at the beginning of this case study—hosting the website on the client's server rather than directly in Webflow. This created complications with capturing and storing leads from the contact form.

I tested several automation tools such as Make and Zapier, using webhooks to send form data to a Google Sheet. However, this caused users to be redirected off-site after submitting the form, breaking the intended experience.

After further research, I implemented a custom redirect script and integrated the form with Formspark, which solved the issue and kept users on the client’s site after submission.

The final version included light motion design, such as a hiding navigation bar on scroll, animated section reveals, and element fade-ins on load and scroll. The last step was adding Google Analytics code directly into the published site files hosted on the client’s server.