AMK-Electro

Website for electric equipment company

Goal:  Lightly redesign website while keeping it recognizable

Back Story

AMK-Electro company builds electrical equipment by both standardized and individual designs. For many years, the Company had a website which was essentially an interactive product catalog. However, since the initial launch of the first Company website, technology made quite a huge leap forward, and the Company realized the need to keep their website in touch with our day and age.

Our studio supported the old website, which previous developer left to us as a legacy. Eventually it became apparent that website needs complete redesign both in frontend and backend side, thus we took the opportunity and started developing new, with responsive features and mobile platform support.

About mobile traffic

Nowadays, when launching a website, it's almost impossible to ignore mobile platforms. According to StatCounter, mobile and tablet traffic exceeded desktop traffic in 2016, and this shift towards mobile platforms continues to this day. On top of that, many search engines give preference to websites adapted to smartphones and tablets. This is why we make all our web projects responsive and pay a lot of attention to full multi-platform support.

However, while analyzing web analytics for AMK-electro, we noticed an interesting trend. The stats have clearly shown that the vast majority of users prefer to visit website from desktops, and mobile traffic was almost absent. This could be explained with market specifics for electrical equipment in Russia. In most cases, the people searching for AMK-Electro products are engineers, who usually make product research with the comfort of their desktop office compute. Doing this kind of work on a tablet or a cell phone is simply inconvenient, hence visits from these platforms are very rare.

And still, it would we wrong to ignore mobile platforms. If you register a mobile-unfriendly website in Google Search Console, you will soon get a warning, that your site is inconvenient for mobile users. 

You could probably ask, "Ok, I got that kind of warning from Search Console or a similar service, so why should I care"? The problem is, search engines penalize your search ranking if your website is not mobile friendly. Even if you have absolutely no mobile traffic, make your responsive from the very beginning. Then search engines won't be holding grudge on you, and your occasional mobile visitors will be happy you made their life easier.

We brought this point to discussion with AMK-Electro representatives, and got full approval from them to build a website according to our vision.

Requirements

The main requirement from the Company was to make website responsive, yet keep it recognizable on desktop platforms. Most of the website users are returning visitors, and nobody wants to lose them, hence we should make sure that transition from the old to the new website is as smooth as possible for them, to prevent them from learning how to work with website catalog once again.

This means that hierarchical structure and general layout should be preserved. Realizing how important this requirements is, we began working on the website.

Header

We started from something that was obvious from the very beginning - we got rid of visual noise on the website.

The old developers left many elements which didn't play any functional role - the most prominent example is the header itself. We removed all the pseudo-decorative elements which were stealing users' attention. They didn't have any value to the customer, and keeping them "as is" on mobile platform proved to be unnecessarily hard.

We also removed a photo which was right in the center of the header. We thus solved two problems at once - we freed the user from all the visual clutter while making website look much cleaner and more impressive on mobile platforms. Any kind of imagery in the header takes a lot of space on cell phones, and also devours quite a lot of traffic (always save traffic for your users!). Just imagine: you open some page, and the first (and only) thing you see is a single huge image, and there's a lot of scrolling to be done just to get to the informative part. That definitely won't do, so we image had to go away.

Navigation

The old website had two side panels - left one and right one. The left panel contained product catalog; this menu played an important navigational role, we will come back it later. Both panels contain photos of products and scans of company certificates, but having these on every page is very distracting for the users. Fitting both side panels on mobile platforms is practically impossible, hence we got rid of the right panel and moved certificates to a dedicated page, they definitely deserved this.

The website featured an photo album page with product photos, but we suggested to remove it. We think that a page dedicated entirely to picture galleries is an atavism from the past. If you have some media content which you want to share with your users, place it on the page where it will be relevant and where it will bring value to the user. In particular, every product page from AMK-Electro catalog is supplied with photos, so duplicating them in yet another place would be pointless, hence we got rid of dedicated photo albums page.

These improvements alone made website much easier to grasp. The toughest part was to keep the double menu system, one of the most recognizable elements of the website.

Magic of the double menu

The original website had two menus: horizontal main menu (leading to informational pages) and vertical side menu (linking to product categories). Both these menus are the most recognizable elements of the websites, and getting rid of them was not an option. On desktops, they should be kept "as is", and on mobile platforms these menus need to be at least usable.

The solution to this problem is not as obvious as it may seem. The old website was designed as nested HTML-tables - this is the simplest rock-solid solution from the 90s and early 2000s, but this kind of design doesn't look nice on mobile platforms. Bringing the old solution "as is" wasn't a good idea.

We made this website responsive with bootstrap 3. This framework doesn't have an "out of the box" solution for this problem, and the 3rd-party solutions didn't satisfy us in terms of reliability, so we wrote our own logic for side menu. As a result, website layout on desktops has a striking resemblance to the original layout, and on mobile platforms these menus are automatically collapsed to horizontal menus; when browsing from a cell phone, you just need to open the menu that you're interested in.

Thankfully, double menu was the toughest part to make both responsible and recognizable.

Styling

We picked easy-to-read fonts for the website to make it readable on any kind of device. Company colors were preserved, and only some hue alterations were made. We made sure that all pages of the website are neatly rendered on mobile platforms.

Search engines approved our effort and flagged our website as mobile friendly - mission complete!

Admin page

The old developers didn't provide an admin page that would allow administrators to edit website content, thus all content alterations required programmer's participation.

We like to make life easier for our clients, so we designed a lovely admin page which allows to edit any information on the website so that AMK-Electro doesn't have to call for web development experts every time they need to update content. Website became much simpler both not only for its clients, but for the Company itself!

To demonstrate viability of the admin panel to AMK-Electro, we reconstructed the original website structure (and filled it with content) using only the admin panel. AMK-Electro appreciated our effort, and now they use all the new features to improve their website (and their business along with it).