A product identity and responsive content platform designed to extend the Dermaexel ecosystem while communicating a technically complex dermocosmetic proposition with clarity, credibility and brand continuity.
Dermaexel Anti-Stretch Marks was developed for Exelderma as a new product within the company’s dermocosmetic portfolio. The project began with a high-fidelity packaging mockup and evolved into a complete digital experience supporting product education, scientific content, brand credibility and commercial conversion.
The core challenge was to introduce a distinct product proposition without weakening the recognition already built by Dermaexel Skin Repair. The new visual language therefore preserves the parent brand’s clinical authority, restrained presentation and Growth Factors positioning while creating a more specific identity for prevention and stretch-mark care.
The communication hierarchy centres on the product’s three-part formula — Growth Factor Complex, hyaluronic acid and vitamin C — and the five-growth-factor concept presented by the brand. This information had to remain technically credible while still being understandable to non-specialist users.
Identity continuity, packaging presentation, educational website, social assets and technical deployment were developed as one connected experience.
The interface needed to support users with different levels of familiarity, from early prevention research to product evaluation and purchase intent.
Scientific and product information were organised to build trust without overwhelming the user or disconnecting the website from the wider Dermaexel brand.
The design problem was not simply to create another product page. Exelderma needed a dedicated content environment capable of explaining causes, prevention, different stretch-mark contexts, supporting studies and product use while guiding interested visitors toward the existing online store.
From a UX perspective, this created three simultaneous requirements: preserve master-brand recognition, structure educational content for progressive discovery and maintain clear conversion pathways. The solution uses a familiar Dermaexel vocabulary but introduces a softer blue-to-white product system, a dedicated content architecture and product-specific visual cues.
Preserve the Dermaexel signature, clinical tone and Growth Factors credibility across the new product.
Turn a broad subject into structured pathways that support prevention, education and product evaluation.
Ensure dense educational material remains readable and usable across desktop, tablet and mobile.
Prepare the full production environment and connect it to the existing commercial ecosystem.
The project used the product mockup as the first alignment artefact. Once the visual direction and relationship with the parent brand were validated, the work progressed into content modelling, information architecture, mid-fidelity wireframes, reusable interface components and implementation.
Validating the product language before coding reduced rework and created a shared reference for packaging, website sections, social communication and future campaign assets.
The information architecture separates high-level product understanding from deeper educational content. The homepage introduces the value proposition and key formula components, while dedicated sections expand on causes, prevention, studies, different stretch-mark conditions and contact information.
This structure supports multiple user intents. A visitor can quickly understand the product, explore the subject in more depth, review supporting material, contact the company or continue to the existing online store without being forced through one linear path.
The homepage establishes what the product is, how it relates to the Dermaexel brand and which formula elements are central to its positioning.
Content is divided into causes, prevention, studies and relevant stretch-mark contexts so users can enter through the question most relevant to them.
Educational and study-related material is visually separated from promotional content, helping the interface retain a serious clinical tone.
Calls to action route users toward contact and the pre-existing Dermaexel online store without duplicating the e-commerce implementation.
The mid-fidelity stage documented the homepage, educational content, study presentation and contact flow. It focused on layout logic rather than decoration, allowing the team to assess content density, navigation visibility, image placement and component repetition before applying the final brand system.
Wireframes also helped identify which information should remain above the fold, which sections required dedicated pages and how the same modules could collapse on smaller screens without losing context or conversion visibility.
The layout introduces the proposition quickly while allowing deeper content to unfold without obscuring the route to contact or purchase.
Consistent structures improve authoring, maintenance and future expansion inside WordPress and Divi.
Content order, image scale and call-to-action placement were considered before the final desktop and mobile implementation.
The packaging mockup established the visual anchor for the project. The Dermaexel flower mark, restrained typography and scientific information hierarchy preserve familiarity, while the blue gradient, product descriptor and formula emphasis create clear differentiation from the Skin Repair line.
The website reuses these packaging signals as interface cues. Colour, spacing and iconography reinforce continuity between the physical product, educational pages, social communication and commercial touchpoints.
The identity remains visibly connected to the established Dermaexel system rather than behaving like an unrelated standalone brand.
A dedicated blue gradient and product-specific naming help customers distinguish the Anti-Stretch Marks proposition from other products.
The Growth Factor Complex, hyaluronic acid and vitamin C remain prominent across packaging, web and campaign materials.
The system supports future landing pages, educational content, promotions and partner communication without redesigning the brand each time.
The final website translates the approved product language into a responsive WordPress experience. It combines product presentation, causes and prevention, study-related material, different stretch-mark contexts and contact pathways within a consistent component system.
The interface uses clear section boundaries, generous reading widths and strong heading contrast to make long-form content easier to scan. Desktop compositions preserve breadth, while tablet and mobile layouts reflow text, images and calls to action into a more focused vertical sequence.
Reusable page sections were configured to adapt across desktop, tablet and mobile without compromising hierarchy.
Scientific and educational information was organised into manageable visual units rather than dense uninterrupted pages.
The site carries product colours and packaging signals into the digital experience while remaining part of the Dermaexel family.
Users can move from education to contact, social channels or the existing store without duplicating the commercial infrastructure.
The project did not create an isolated marketing site. The new platform was connected to the existing Dermaexel online store developed during the first project, preserving a single commercial destination while giving the Anti-Stretch Marks product its own educational and campaign environment.
Social communication extends the same visual language into launch announcements, promotional campaigns, webinars and product education. This creates continuity between the user’s first contact with a post, deeper research on the website and the final route to purchase.
The content platform supports discovery and education while the established store remains the commercial source of truth.
Reusable campaign assets support product awareness, education and time-sensitive commercial communication.
Repeated visual and content cues reduce friction as users move between channels.
The site was implemented in WordPress using Divi as the visual component framework, supported by semantic HTML5, responsive CSS and PHP within the WordPress runtime. MySQL stores the CMS content and configuration, while phpMyAdmin provides controlled database administration inside the hosting environment.
The production setup included hosting preparation, cPanel configuration, database and user creation, DNS routing, HTTPS activation and FTP-based deployment. The objective was to create an environment that the business could maintain and expand without compromising the consistency established during the UX/UI phase.
The gallery brings together the packaging mockup, mid-fidelity wireframes, completed website, social communication and the technical diagrams created to document the project workflow and production architecture.
The project moved beyond a standalone mockup and created a consistent relationship between product identity, scientific communication, responsive UX, commercial pathways and social content. The Anti-Stretch Marks product is now presented as a clear extension of Dermaexel rather than a disconnected launch.
The visual system retains Dermaexel recognition while giving the new product a distinctive colour, hierarchy and communication focus.
Users can move from introductory product information into causes, prevention, studies and relevant stretch-mark contexts without navigating one overloaded page.
WordPress, Divi, PHP, MySQL and the configured hosting environment support ongoing content, campaigns and future product evolution.
For product extensions, visual consistency alone is not enough. The strongest continuity came from aligning packaging cues, information hierarchy, content tone, conversion logic and technical maintainability across every touchpoint.