Websites and ecommerce
Hestial — ecommerce and catalogue guide
A WordPress and WooCommerce store for a supplement brand, with product presentation, catalogue, product pages and a guided browsing journey.
Visit the project website (new tab)
From the brand story to choosing a formula
The official Hestial website brings together brand presentation, a catalogue and online purchasing in a WordPress and WooCommerce store. The homepage introduces nine products through a scene combining packaging and video, while the catalogue and product pages provide details of individual formulas and available options. An interactive guide supports exploration by ingredients and format. The project also includes adapting the composition for desktop and mobile, responsive images and changes to loaded resources. The structure connects the brand story, product selection and the ecommerce journey, alongside pages devoted to the brand’s history and contact information.
Design objective
The website connects the brand presentation with a more guided approach to product selection. The website shows a catalogue of formulas, explains the options and provides detail before purchase. Its homepage composition also keeps packaging and navigation clear on smaller screens, maintaining a connection between the opening scene and the shopping journey.
The work
The WordPress and WooCommerce store includes nine products, product pages with packaging options, an interactive guide, brand history and contact information. We developed a responsive hero composition, adjusted spacing between packs and introduced WebP images at different resolutions with deferred preview loading. The slider and guide connect catalogue exploration with product pages and purchase options.
Design rationale
The opening scene offers an overview of the products, while the catalogue and guide provide different ways to explore them. Spacing the packages within the composition makes their outlines distinct. Video brings movement to the presentation, while responsive images adapt resource dimensions to the screen on which they are viewed.
