Steeltiv

Solution

We divided the project into 4 stages:

Stage 1. Developing the website structure.

First we needed to layout and develop the content architecture of the website. Therefore, we started our cooperation by developing a mockup of the website. To make the website as useful and functional as possible first, the UX Designer developed a site structure that makes it easy for viewers to navigate and thus provide the best experience.

Creating the mock-up

We created a detailed UX mock-up, which included the information architecture, i.e. the content structure of all pages. On the site, we designed a clear contact form with an effective CTA. We paid special attention to the presentation of the offer, using the so-called “pillar page” with internal linking between subpages, which is a strategic point of site navigation. At the mockup stage, a user path, site map and internal linking scheme were created. We also planned the product structure. The entire UX process was created in close cooperation with the client, who fed our work with industry and product knowledge. As a result, we were able to suggest appropriate solutions already at this stage regarding how to categorize products, show images in their description and the information that the buyer persona needs in their buying process to make a decision about cooperation.

Stage 2. UI design

With a detailed mockup, we were able to move on to the next point, which is the UI design. As part of the UI design, we started working on the homepage, which, after client approval, was to serve as a design model for working on the rest of the site. At this stage, the client received two design proposals. After accepting one of the designs, based on the developed UX mockup, we prepared the design of the entire website. Visual work included such elements as video editing for selected hero sections, icon design and product photo processing. The final stage of design creation, was interaction design of individual elements of the website interface such as mega menus, sliders, buttons.

Layout tailored to the brand

Attractive design supports business goals and is memorable, so the layout we proposed was completely tailored to the client’s branding. The site features hexagonal patterning in many places, which refers to Steeltiv’s corporate identity. Colors also play an important role in the design. When designing the design layout for Steeltiv, we went from the palette of the client’s corporate identity – from a single color, which we expanded with additional shades and color accents, e.g. for buttons, indicators intended to distinguish the user path element on the site, we used a light blue color, which perfectly complements the contrast with the dark, navy blue branding color. We also used tonal transitions, especially in small text blocks and CTA sections, making the texts in them more readable and distinguished.

Visually inviting content

We have included many interactive sections in the design to enhance the user’s assimilation of content. For example, on the summary pages, in order to reconcile the readability of the page with the large amount of text, we use clear, expandable sections for each product group. This way, the user, as a recipient of content on the site, does not collide with a wall of text, but with an orderly structure of content that is easy to scan with the eye. Visually, the images and renderings provided from the client are also an important part of the entire project. These in the initial phase were not suitable for direct use in the project. Each photo was taken in different lighting conditions, and tonally they differed from the color scheme we adopted for the entire project. Therefore, we created a filter that allowed us to extract the best possible quality from these photos. With it, we adjusted the tonality of the photos to match the color palette on the website.

A site for real users and Google’s robots

In working on the site, we also focused on elements that improve the user experience such as page load speed. Mobile devices handle the majority of Internet traffic today. Therefore, if you are serious about doing business on the Internet, designing a site that complies with RWD (Responsive Web Design) standards is an absolute must. For this reason, we took care to make the website fully functional and transparent on mobile devices: smartphones and tablets.

Stage 3. Website implementation.

Technical implementation is the finalization of the project. As part of this stage, the Web Developer implemented the graphic design of the website with all the stipulated functionalities on the WordPress test server. Taking into account the need for easy and fast operation of the site, we recommended implementing the site on the WordPress CMS system and the use of the Elementor editor, which are easy to use and provide the opportunity to quickly and independently change the text, without the cost of hiring a programmer. The advantages of this solution include ease of customization and expansion of the site with new functionality in the future. WordPress also guarantees a high standard of security and regular updates.

Stage 4. Website launch.

In the final stage, we launched the new website on the client’s target server.

Results

• Development of a website based on a content management system (CMS WordPress), providing the client with self-administration.
• Design the site in accordance with the RWD (Responsive Web Design) standard.
• Development of a graphic layout for the site, consistent with the line of corporate identity.
• Developed a content architecture with an engaging CTA and a contact form to send inquiries.
• Design the footer of the page (footer) with the inclusion of the most important links (the so-called digest of the page content), linking to social media channels, contact information.
• Development of the site including language versions and using geolocation.
• Integration with Google Analytics, Google Search Console tools.
• Configure the necessary plugins, tools and launch the site.