Kolben is a distributor of Hydraulics Products. They describe themselves as the providers for packaged solutions and services for a range of applications.
They had a pretty outdated website which wasn’t responsive for various screen sizes and required a complete overhaul to appeal to their foreign clients.
When we were handed over the project to design and develop the website, we were really looking forward to this as this was an industry which wasn’t really digitized much and created a website for such a firm was challenging task. Their brief requirements were pretty much what we expected with some exceptions being • A personalised news portal ( Sort of like a blog ) • A product page with various product filters
The product page with various product filters might seem pretty basic but we’ll explain as to why that was a challenging task.
We’ll first focus on the personalised News portal. We could’ve just hosted a WordPress Blog at a sub-domain and be done with it to make our life easier but here at Boilerplate we aren’t fans of providing clients with quality of work that we wouldn’t personally approve for our projects. The WordPress Dashboard ( without any paid plugin ) couldn’t be made to have the same look and feel as the existing website and for us this was inconsistency that we couldn’t approve, we also felt it would make the simple process of adding a News article far more complex than required. Hence, we decided to build a basic News Portal ( Blog sort of application ) in MEAN Stack. The Client was provided with an Admin Login through which he could post content, update content and more. There was much more that we could’ve done with the News Portal which was proposed to the client but that would’ve stretched the deadline so we mutually decided against it. [[INSERT_IMAGE_HERE]]
The next challenging task was to add zoom on hover for the images on the applications [[page]]. This was quite a tough task as the image on click opened a slider and each of those images required a zoom on hover. For this task, we first thought that using the same image and scaling it up on mouse over (hover) would do the task but this wasn’t as pleasing as we wanted it to be. So, we decided to have 2 images – one that’s the displayed pre-zoom and once that’s displayed post-zoom. Zooming the whole image on mouse hover was just plain bad UI according to us and hence we decided to add a magnifying glass sort of lens on hover and only the area inside the lens would be zoomed in ( You obviously could move around the les by moving your cursor ) [[INSERT_IMAGE_HERE]]
Coming to the product filter, the client required a product page where he could add products and descriptions on the fly and remove them as and when required. Providing him a Dashboard just for the sake of this task didn’t make sense to us and moreover the client had an excel sheet ( With a fixed format ) that he always used for their product catalogue and a word document for their descriptions and more relevant information. But the problem was that the word file had different formatting and parsing this was difficult task to make sure all the product description has the same formatting. This was a challenging task where we first wanted to just convert the information for each product to pdf and then displaying that in the description. But we stuck to parsing the word document and retaining the formatting. This made it easier for the client to just upload the new excel sheet with the relevant word files.
The website can be found [[here]]