Hvyt - a shop with unique furniture handles
As part of the project, we completed a full redesign of the HVYT online store, focusing on strengthening the consistency of the brand image and improving the quality of user experience.
HVYT – is a designer store that offers more than just knobs and handles. The brand places great emphasis on the quality and aesthetics of its products.
Our task was to redesign the existing store. An important goal was not only to improve functionality, user experience and streamline shopping paths, but also to create a space that inspires and builds emotional connection with customers.
An important aspect of the project was to show the character, personality and individuality of the brand through design.
We have designed a product card that fully highlights the exclusivity and individuality of the offered handles.
Product purchase path
Wireframes
UX & UI
Design System
Context of the project
Our challenge was to design a design that showcases the exclusivity and individuality of the product, gives the feeling that every detail matters, and even small elements — such as handles — can completely change the character of a home. The key goal was to create a space that not only emphasizes the elegance and uniqueness of the products, but also provides simplicity and ease of use, creating a harmonious whole.
Objectives of the project
Supportive filtering— allow customers to easily search for products.Project user account— development of your own panel, which allows you to manage orders and customer preferences.
Simplify the purchasing process— develop an intuitive shopping path that will help customers navigate the store.Clear design- a design that combines elegance with simplicity, emphasizes attention to every detail and builds a sense of brand accessibility.
Design process
The scope of work included:
- Analysis of the existing information architecture and development of a new, more intuitive structure of the website,
- Design of UX mockups (wireframes), including product listing, categorization system, collection views, purchase path and customer account,
- Elaboration of the Look & Feel of the brand — with an emphasis on associations with a premium product that remains accessible to everyone,
- Creating a coherent system design.
Information Architecture and UX Design
In the first stage, we developed the information architecture and the initial flow of the product. The challenge was to design an intuitive navigation system and filters covering different product categories — such as handles, handles and hangers. Each required a different set of filters (e.g. material, technical parameters or additional specifications), which had to be presented in a clear and understandable way. The added difficulty was to ensure that the filtering system worked equally effectively on mobile and desktop devices.
The second major challenge was to designing a product card in such a way as to emphasize the exclusivity and value of the offer and the luxurious character of the brand, while maintaining its accessibility and friendly image.
We have also developed the entire purchasing process in which we have considered different scenarios:
- for B2B and B2C customers
- providing an address on the first purchase and managing multiple addresses
- user status (logged in or purchased as a guest)
Visual direction
Together with the client, during short workshops, we developed a look & feel for the new website. We created moodbaord and 3 different proposals based on the logo and branding of the [ation] center brand.
A product that aspires to a premium brandProfessional and serious style: clear, legible, with elegant typography.
Colors derived from id brandThe main accent is based on the cornflower color, derived from the customer's brand. Complementary colors are blue, gray, and black for texts.
Monochrome illustrationsWe avoid stock graphics, we use real photos provided by the customer. Photos are additionally distinguished by monochrome styling.
Visual Design
We have created a Design System, which is a collection of visual components from which the website is built. Thanks to this, we had collected in one place the standards and rules for composing subsequent views. This helped to ensure a consistent appearance of the product and became the basis of technical documentation for developers.
Listing, product categorization
Extensive filtering – Intuitive search and filtering that allows customers to quickly find products that meet their needs.
Product card
Our main task was to design a product card that would fully show product qualities, presenting it from the best side. On the left side we have placed a large photo and video gallery so that the user can carefully view the product. Next to it, on the right side, we placed a pinned box with complete information about the product and all possible configurations, which facilitated the purchase decision. Thanks to this solution, the user had easy access to key information and the opportunity to thoroughly familiarize himself with the product.
Shopping Cart and Checkout
We have developed an intuitive shopping path, providing different shopping scenarios.
Possibility of editing from the basket
One of the key elements was to allow users to edit the product configuration directly from the shopping cart. Thanks to this, the user could make changes without having to go back to the product card, which ensured Liquidity of the purchasing process.
It was important that the customer did not fall out of the shopping path and could make changes without leaving the cart — which minimized distraction and increased user comfort.
Ability to manage multiple addresses
This solution meets the needs of different users, especially those who carry out projects in many places, for example, in the renovation of various apartments. With the ability to manage multiple delivery addresses, they can order products directly to the facilities at the same time using one account in the store. This provides them with convenience and time savings, as well as allows them to use loyalty programs and discounts.
![[ation] center - design of a training platform for product manufacturers](https://cdn.prod.website-files.com/665f016b950e89499f580acc/66d0b2a68cfbb3453401f8f2_IMG8769.png)
![This is what you need to know to make your medtech business work [+UX examples]](https://cdn.prod.website-files.com/665f016b950e89499f580acc/671b831663a2597f47c963f3_Grafika-nr-1_-tytul_-Innowacja-termometra--scaled.webp)
