For DR. GRANDEL Serbia, we developed a new eCommerce platform that combines the presentation of an internationally recognized beauty brand with a simple, reliable online purchasing process.
The project included complete UX/UI design, development of a custom WordPress and WooCommerce solution, card payment integration, and a dedicated system for automatic product stock synchronization.
A particular focus throughout the process was on the mobile experience, so browsing products, finding the right skincare treatment, and completing the purchase would be just as easy on a phone as on desktop devices.
After the site went live, the collaboration continued through hosting, technical maintenance, and ongoing development of new functionality.
About the client
DR. GRANDEL is a German family-owned company whose history began in 1947 in Augsburg. Starting with its first products based on wheat germ, the company grew into an international beauty brand focused on the development and production of professional cosmetics.
Today, the brand operates through partners and representatives in more than 50 countries, while production remains in Germany. Cosmetic ampoules have held a special place in the company’s history, with DR. GRANDEL having been producing them since 1957.
On the Serbian market, the products are available through the online store, as well as a network of pharmacies, beauty salons, and other retail outlets.
Challenge
In beauty eCommerce, the product itself is not the only factor in a purchase decision. Users often start with a specific skin concern or need, and only then look for the right product.
That is why we needed to create a structure that would function not just as a standard product catalog, but would allow users to explore the offer by product line, skincare type, and specific skin concerns.
At the same time, behind a simple user interface, it was necessary to connect the online store with the client’s existing business processes, ensure accurate stock levels, and implement a reliable online payment process.
UX/UI Design
The design process began with defining the content structure and the way users would reach the right products.
In addition to standard organization by product line, users were able to explore the offer based on specific skin needs—from hydration and anti-age care to hyperpigmentation, lifting, cleansing, and other categories.
The visual direction was developed so that the product remained in focus, while still leaving enough room for educational content to help users make a choice.
Mobile First
The mobile version was not treated as a reduced desktop version of the site.
Navigation, filters, product pages, cart, and checkout were all adapted specifically for smaller screens so the number of steps from finding a product to completing a purchase would be as low as possible.
Special attention was given to content readability, the size of interactive elements, the clarity of prices and promotions, and the ease of using filters and categories with one hand.
The result is a fully responsive store designed to deliver an equally high-quality experience regardless of the device used to access the site.
Custom solutions
In addition to standard WooCommerce functionality, the project required a range of custom solutions to align the online store with the client’s existing processes. From a fully custom theme to automated stock synchronization and card payments, every part of the system was developed with a focus on ease of use and reliable day-to-day operation.
The site was built from the ground up as a fully custom WordPress and WooCommerce theme, based on the previously defined UX/UI design. This allowed us to avoid the limitations of off-the-shelf templates and gave us complete control over the look, functionality, and future development of the platform.
We developed a dedicated plugin that automatically synchronizes stock levels with the WooCommerce store. This ensures that product availability on the website always matches the client’s system data, without the need for manual stock updates.
Secure card payments were implemented directly within the WooCommerce checkout process. The integration was adapted to the existing purchase flow so users could complete their order easily, without unnecessary extra steps.
QA testing
Before the site went live, we carried out detailed functional and responsive testing.
We tested the key user scenarios—from navigation and product filtering, through adding items to the cart and the checkout process, to card payment and order processing.
We also thoroughly checked layouts and functionality across different screen sizes, mobile devices, and web browsers, as well as the performance of the custom stock synchronization integration.
Maintenance
Our collaboration with the client did not end with the launch of the new online store.
DR. GRANDEL uses our ongoing maintenance package, which includes a dedicated pool of development hours for technical support, updates to existing functionality, and the development of new requirements.
This model makes it possible to continuously adapt the platform to changes in the offer, business processes, and user needs, without starting a separate project for every new change.
Result
The result of the project is a custom WooCommerce store that combines premium presentation of the DR. GRANDEL brand, product browsing by different skin needs, and a complete online shopping process.
Behind the user interface is a technical infrastructure that connects WooCommerce with stock levels, enables card payments, and gives the client simple administration of everyday content.
Ongoing maintenance and hosting round out the project as a long-term partnership in which the platform continues to evolve in line with business needs.
