ENVI-PAK: reuse, reduce, and especially redesign

Presentation Websites Intranet/Portal Creatives

View:

You sort, and ENVI-PAK takes care of all the waste afterwards.

This Slovak company is the longest-running organization in the packaging and waste management sector. It needed to refresh the appearance of its website.

Delivered Services

Presentation Websites

Intranet/Portal

Creatives

Initial State

Confusing design.
Poor placement of information and insufficient formatting.
Poor website structure where visitors easily get lost.
UI design does not match the brand.
Inconsistent appearance of pages and sections.
Unintuitive design and behavior of interactive elements.

Our Solution

We adjusted the structure to be intuitive and easy for visitors to navigate.
Before the redesign, we created a wireframe to help the client visualize the new structure and incoming elements.
We clarified the entire website design.
We modified the areas for messaging and showed the client how to format them correctly.
The UI design finally aligns with the brand.
The appearance of pages and sections looks consistent.
Interactive elements and the overall design help visitors navigate more easily and feel comfortable on the website.

New Structure – The First Step Towards a Better Website

First and foremost, we focused on adjusting the website's structure and the hierarchy of individual pages.

“We are satisfied with the new design; it is fresh, modern, and timeless. We greatly appreciate that PUXdesign advised us not to use a slider but instead proposed a solution with text animation. I also appreciate the suggestion to use containers in the footer and their linking. We also like the clarification of the page structure and the use of the menu.”

Mgr. Michal Maťašovský

Manažér pre komunikáciu

ENVI - PAK, a.s.

Wireframe

With the new structure, we could move on to the wireframe. Whether you know it in Czech or English, it is always a simple graphic representation of individual elements on the website.

The wireframe helps us clarify and organize information so that everyone can find what they are looking for on the website. The visitor is simply the alpha and omega for us during the creation process.

Menu: desktop & responsive behavior

The original solution for the ENVI-PAK website used navigation in the form of a so-called hamburger menu. The main menu remained hidden under three vertical lines and expanded only when you clicked on these three lines (the hamburger). From our perspective, the hamburger menu is not entirely ideal: it requires an additional interaction that the visitor must perform. And believe me, every click counts.

We decided to change this element as well.

We uncovered the hidden menu from the original website in the desktop solution.

But what we didn't expect...

The navigation contained a really large number of items. That was the number one issue.

The second issue was the risk that due to the number of links, the menu would be tall – thus unnecessarily pushing the content down.

In addition to responsive behavior, we also had to consider the possibility of search or a member section. These were links that users must see immediately – regardless of the device they are on.

Footer

The footer is somewhat less important from the perspective of the wireframe, but we still organized it into 4 columns.

To ensure it wasn't just an ordinary footer, we came up with a creative solution that you won't overlook – an example can be found in the following chapter on UI design.

UI DESIGN

UX design addresses how the website functions, while UI focuses on how everything will look. UI, or user interface design, ensures that all elements appear as friendly as possible and are visually appealing to the website visitor.

Important goals that we adhered to in the ENVI-PAK project from a UI perspective were:

clarity,
originality,
differentiation from competitors,
alignment with the ENVI-PAK brand,
and overall simplification of the website for users.

3+1 goals for a better impression

Among other things, we set four additional goals with the client: to clarify and simplify the website, align its visual identity with the ENVI-PAK brand, and infuse it with a touch of originality.

Now, let's take a look at how we tackled these tasks one by one.

1st goal: clarify the communicated information

The use of space (whitespace) and the selection of appropriate typography play a crucial role in the clarity of information. However, it's not just about the font you choose.

It is also necessary to work with its settings:

line height,
letter spacing within words,
font weight
and its size.

Therefore, we designed the card visuals to be in harmony with the texts.

We utilized both whitespace (= working with empty space) and suitable typography, as well as the current trend known as glassmorphism. This essentially creates a glass effect, allowing everything behind the card to appear blurred. The card is slightly transparent to make this blurriness visible.

Can't quite picture it? No worries, we've prepared a sample for you:

2. Goal: Merge visual elements with the ENVI-PAK brand

We have unified interactive elements – buttons, links, widgets, tables, and forms – along with typography and color combinations. This has resulted in a style guide for the ENVI-PAK website.

3. Goal: Unconventional Footer for Originality

To give the website an extra touch of originality, we created a creative and unconventional footer.

4. Goal: Simplify the website for visitors

Whether you are viewing the website on a mobile phone, tablet, or traditional desktop computer, responsive design is something we focus on in every project at PUXdesign. Today, approximately two-thirds of all users over 16 access the internet via mobile phones. Therefore, we believe that adapting the website design according to the type of device is an absolute necessity.

Done. This is how we handed over our design to development. You will soon find the new web design on the ENVI-PAK website. Do you also want to work on the appearance of your website? Contact us, we would be happy to take it on.

View the Website More References