HAKRO
Website for fashion retailer
For almost 50 years HAKRO has successfully produced long-lasting garments. We are proud to on behalf of House Of Wonders have developed their online presence! A major update to the HAKRO brand and company communication, establishing the company’s brand core and brand values.
The website caters a wide audience, ranging from potential buyers, existing buyers, product users, resellers, to HAKRO employees. It features a product catalogue, wishlist, dealer locator, supports multiple languages/markets and much more.
Functionalities
The primary features of the website as well as the Content Management System (CMS) we developed are as followed.
Website
language
Multilingual
view_module
Product Catalogue
favorite
Wishlist
store
Dealer Locator
subject
Blog
assignment_ind
Job Board
search
Search
share
Sharing
trending_up
Event Tracking
more_horiz
Etc.
Content Management System
mode_edit
Content Editor
view_module
Product Management
store
Dealer Management
group
User Management
User Experience
HAKRO offers their customers a professional quality unique in their product category. By creating a fast and refined user experience, we aimed to have this quality also be reflected in the website.
Seamless color previews
Users can quickly preview a product in all colors within the overview page.
The video below shows how users can quickly preview a product its color variations. By re-creating all product colors in post-production, we were able to create smooth transitions when navigating between colors.
Product in close-up
Zoom-in on the product to view it up close.
From mobile, tablet to desktop
To give users on a mobile phone or a laptop the best possible experience, we tailored the user interface to fit each of these devices best.
Filtering products on mobile
For mobile phones we e.g. developed an 'offscreen menu' for easy and fast product filtering, which is optimal for smaller screens.
Giving the same user experience of a native application for mobile devices was a great solution to get the users exploring the large range of products. Not just intuitive, but it also showcases all possible combinations each product item could have.
alt trext
Engaging content
The animated illustrations created by Illustrator Michael Young invite users to dive further into the values of Hakro.
Component Library
By using a modern set of technologies and by building the platform with scalability in mind, we enabled HAKRO to work faster and evolve the website for years to come.
One way we achieved this is by setting up a design system and creating a component library. The component library (often also called pattern library or styleguide) is a deeply integrated and living part of the website that consists of all the designed parts which are used to construct pages. This has yielded the following benefits.
  • A consistent and coherent user experience
  • Efficiency through reusability
  • Scalable and adaptable to future business needs
alt trext
Form components
A list of all form related components that are used to construct every form in the website.
alt trext
Form
Two examples of forms constructured using the components listed above.
Reliability and performance
The multi-language CMS schema was crafted to provide the front-end with a final data structure, which are reflected not only immediate page loading for the users but also less resource requirements from the servers. Another magic trick is how the data is loaded on page changes: In general, the content on the top of each page is already preloaded, while the rest of the specific data is hydrated asynchronously and unnoticeable.
A reliable and high performing
infrastructure HAKRO can rely on
In order to improve the development flow, a setup combining continuous delivery with Docker was the decision for our infrastructure featuring tested automated builds and safe image versioning for production releases. A dedicated load-balancer is also present to manage A/B deployments with zero downtime.
Result
We are proud to work for HAKRO. A company that does not only stand out with their high quality products, but also with their company values and social responsibilities. In our opinion a role-model for many.
With the new website gone live, we are working on the next phase in order to elevate the online brand experience to the next level. Please stay tuned as there is more to come.
Stay in touch
Next project
Google Impact Challenge