Ana-a, paints, varnishes and accessories
Client: Ana-a Shop, paints, varnishes and accessories
Category: Construction, Car Repair
Technology: Corel Draw, WordPress, WooCommerce, PHP, HTML/CSS, JavaScript
About the client:
Ana-A Trgovina is a company from Karlovac with many years of experience in the distribution of professional paints, varnishes, coatings and construction materials. They operate through two branches in Karlovac and one in Sisak, and their range is extremely wide — from auto repair products and industrial coatings, through paints for interior walls, facades, floors, wood and metal, to tools, protective equipment, grinding and polishing and hardware. They distribute leading global and European brands, including Cartec Refinish, Primalex, Balakryl and many others. They are an established local retailer with a strong physical presence that has recognized the need to expand into the online sales channel.
Project description:
A physical store with such an assortment faces a clear limitation — customers who are not near the branch or do not have time to come in person have no way to view the offer and place an order. In addition, professionals such as craftsmen, painters and repairmen who regularly order the same products need a fast and practical online channel. The project included the construction of a complete web shop, which opens an online sales channel for Ana-A store, expands its reach beyond the physical locations in Karlovac and Sisak, and gives the client a tool that he can manage independently without constant reliance on technical support.
In addition to the web shop, the project also included the creation of a logo as the foundation of the company's visual identity in the digital space.
My role and process
I took over the project in its entirety — from logo design, setting up the WooCommerce architecture and initial product listing, to implementing digital accessibility and handing it over to the client with the ability to manage the catalog independently.
Logo design
The logo was created in CorelDRAW as the first step of the project. The design had to communicate the reliability and professionalism of an established retailer, while at the same time being clean and flexible enough to be used in the digital environment — on the web shop, social networks and business documentation. The logo was then applied consistently throughout the entire visual identity of the web shop.
WooCommerce web shop
The web shop is set up in WooCommerce with a catalog organized into clear categories by application type — auto repair, interior walls, facades, floors, industrial coatings, wood, metal, tools and accessories, protective equipment, grinding and polishing, construction and hardware. This structure allows users to quickly navigate, regardless of whether they come as professionals with a specific need or as private individuals exploring options.
The initial product entry was done in consultation with the client so that the shop would be functional and filled from day one. After laying the foundations of the catalog, the client took over the management and entry of new products independently — which was an explicit goal from the beginning of the project. The CMS was therefore set up with an emphasis on ease of management, with an intuitive interface for adding and editing products that does not require technical knowledge.
Standard e-commerce functionalities have also been implemented — wish list, user account, order management and free delivery for orders above the minimum amount. In addition to the web shop, the site clearly displays information about physical branches with working hours and contacts, which is important for customers who prefer personal contact or picking up goods on site.
Digital Accessibility (WCAG)
The project included implementing digital accessibility in accordance with WCAG guidelines. On an e-commerce site with such a large catalog, this is especially challenging — every interface element, from filters and categories to product cards, shopping cart and ordering process, must be technically correct and accessible to users of assistive technologies. The implementation included semantically correct HTML, appropriate color contrast, full keyboard navigability, ARIA tags for interactive elements, and text alternatives for all visual content, including product images.
Responsiveness
The site is fully responsive and optimized for mobile devices. Field professionals who need to quickly check item availability or place an order between jobs primarily use mobile — a scenario that is particularly relevant for this target group.
Remark
After the completion of the project, the web shop was handed over to the client for independent maintenance and management. The current state of the site reflects the client's subsequent changes and updates to the content, and does not necessarily correspond to the delivered state of the project.
Challenges
The biggest challenge was the extremely wide and diverse product catalog, which includes a dozen different categories with completely different product characteristics — from technical specifications of auto repair materials to building materials and hardware. The catalog structure had to be flexible enough to accommodate such diversity, while at the same time intuitive enough so that the user always knew where they were and how to find what they were looking for.
Additionally, one of the key goals was to enable the client to manage the catalog independently — meaning that the entire shop architecture and CMS had to be set up robustly enough to withstand regular updates by users without prior technical knowledge, without compromising consistency and display quality.
Result
A complete WooCommerce web shop with a logo was delivered, opening an online sales channel for Ana-A store and expanding its reach beyond physical locations. The site meets WCAG digital accessibility standards, is clear and intuitive for the end user, and the client successfully took over independent catalog and order management.