I contributed to the design system for ROCKWOOL’s B2B e-commerce platform, ensuring a scalable and consistent experience across desktop, tablet, and mobile. I worked within an agile team, assisting with UI design, maintaining the design system, organizing files, and ensuring alignment among designers to keep the project structured and efficient.
ROCKWOOL Group is an international company based in Copenhagen that develops stone wool solutions for
insulation, fire protection, and noise reduction in buildings. Their products help improve energy efficiency
and safety in construction.
The company operates across five sub-brands, ROCKWOOL, Rockpanel, Rockfon, Grodan, and
Lapinus; each specializing in different applications of stone wool.
ROCKWOOL needed an e-commerce platform that would allow contractors, installers, project owners, and distributors to place orders seamlessly. The platform had to handle complex requirements, including multi-country, multi-currency, and multi-brand management, with plans to roll it out across 39 countries. We designed Rockcommerce, a B2B e-commerce solution, to simplify the ordering process, enabling users to manage purchases, track deliveries in real time, view and archive invoices, and more.
ROCKWOOL’s sales process were highly complex and varied from country to country. Much of it relied on
manual work from support and sales teams, leading to fragmented workflows. Customers often faced
long back-and-forth communication just to place orders, which made the process frustrating and
time-consuming.
Other challenges included a diverse product range, regional differences in delivery times and packaging, and
country-specific shipping logistics. To create a seamless experience, we needed a tailored solution that
could handle these complexities while improving efficiency for both customers and internal
teams.
As a designer at digital studio Vertic, I worked closely with senior designers to build, maintain, and organize the design system. I designed pages for desktop, tablet, and mobile, ensuring consistency, scalability, and clean file management to keep the project running smoothly. In the final stages, I took full responsibility for overseeing the website’s completion and meeting tight deadlines. Working in an agile setup taught me adaptability, teamwork, and the importance of iteration.
The project aimed to create a consistent experience across multiple brands, requiring a scalable and flexible design solution to accommodate each brand’s unique needs. Since this was the team's first time tackling such a complex project with over 500 components, we adopted the Atomic Design methodology (introduced by Brad Frost). This allowed us to build a shared library of templates, organisms, and molecules, ensuring a structured and reusable system.
Atoms are basic building blocks like colors, labels, and icons. Molecules combine atoms into functional components. Organisms group molecules to form distinct sections. Templates structure organisms into page layouts. Pages bring templates to life with real content.
Working on a project of this scale also pushed us to rethink our collaboration. We introduced new tools,
optimized folder structures, and established clear naming conventions to create a solid foundation
for teamwork. Since the project started in 2017, collaborative design tools like Figma didn’t exist yet, so we
worked in Sketch, which required a lot of manual effort. Designers had to copy and paste updates into a master
file to keep everything in sync, a tedious and time-consuming process.
To improve our workflow, I proposed using Abstract (often described as GitHub for designers). This version
control tool allowed us to track changes, collaborate more efficiently, and eliminate the need for
manual updates. It significantly streamlined our process, enabling us to iterate quickly and
meet deadlines. Our success with this approach led to it being adopted across other projects.
One of the key challenges in designing Rockcommerce was creating a seamless experience across multiple brands while maintaining their individual identities. We needed a solution that allowed users to navigate effortlessly between brands without feeling like they were switching to an entirely different platform.
To achieve this, we designed a unified yet flexible interface. Users can switch between brands directly
from the main header navigation, with the logo and header color updating dynamically to reflect the selected
brand. The overall e-commerce UI was intentionally kept neutral, ensuring consistency across
brands while allowing each to retain its unique identity.
To tie everything together, we introduced a unified CTA color, creating a cohesive shopping
experience regardless of the selected brand. This approach not only streamlined the user experience but also
enabled cross-brand promotion, making it easier for users to explore products across ROCKWOOL’s different
sub-brands without friction.
Products & solutions for residential and non-residential buildings.
Materials used in ventilated constructions, for facade cladding, roof detailing, etc.
Stone wool ceiling panels with suspension grid systems and accessories.
Stone wool substrate solutions for the professional horticultural.
Solutions that address noise and dust reduction and vibration insulation.
The checkout experience was designed to be seamless and adaptable across ROCKWOOL’s multiple brands and regions. We introduced a centralized shopping basket, allowing users to combine products from different brands into a single order. To accommodate the complexities of B2B transactions, checkout and shipping were tailored to specific product and regional requirements. Additionally, we integrated a truck and freight volume calculator directly into the checkout process, helping customers optimize their shipments and reduce logistical challenges.
Check out screen across different breakpoints
Additional checkout screens
We transformed ROCKWOOL’s large, multi-brand product catalog into a seamless browsing experience, making it easier for users to search, filter, and understand product details at a glance.
Product search
To speed up product discovery, we designed a smart search experience that returns relevant results in real
time. Users can search by keyword or category helping them quickly narrow down to what
they need.
Product listing & Filters
We designed the product listing to make it easy for users to navigate a technical catalog. Filters were
tailored to construction-specific attributes like application type, fire resistance,
thickness, and more. The layout remained consistent across brands while still supporting brand-specific
variations and product features.
Product details page
The product detail page presents all key specifications at a glance, with technical
information clearly structured for professionals. Users can also download product files,
certifications, and installation instructions, all from a single, accessible place.
The dashboard acts as the user's home screen, offering a quick overview of everything that matters.
From the moment users log in, they can see recent orders and their status, track spendings and
account balance, access invoices, and revisit recently purchased items.
We designed the layout to be clean and easy to scan, helping users stay on top of their activity without
feeling overwhelmed. Users can easily update settings or manage user permissions if their
organization has multiple team members.
While I don’t have access to post-launch data, this project was a valuable learning experience in building large-scale systems and collaborating across teams. After handing off the deliverables, the ROCKWOOL team continued development internally. Today, the platform is available to professional users by request. This project taught me the importance of structure, communication, and adaptability; skills I’ve carried with me into every project since.
I contributed to OK’s app visual design and user experience, building a scalable design system, and streamlining processes to enhance collaboration between designers and engineers.
From a school assignment to Suztain’s new visual identity, now showcased across their packaging, both online and in physical stores like the Danish variety chain Normal.
A comprehensive corporate identity for Whyser, a female-led tech startup. From defining brand voice to creating its visual identity, helping the brand connect with its audience.
