UX & UI Design, Product Development
TRATON Website Relaunch
Turning a complex modular structure into a refined digital experience
At TRATON—a global leader in commercial vehicles —the existing website was overly modular, technically limited, and outdated. Together with an agency in Berlin, we re-imagined the site within the constraints of the legacy CMS while translating a fresh brand identity created by a Scandinavian agency into an elevated, digital-first experience.
Challenge
We needed to define a clear, efficient workflow with an external team we hadn’t collaborated with before. Alongside multiple technical and design hurdles—and a tight timeline—we had to quickly establish the simplest, most effective way to work together. All this while staying true to the new brand guidelines, created by another agency.
Solution
We began with a deep dive into the current setup and its limitations. Building on personas and user journeys, we developed a selection of needs-based modules and created a modular system that was easy for editors to use, while being intuitive and engaging for users. At the same time, we ensured the new brand identity was fully represented on the site. To support future scalability, we built a design system from scratch in Figma.
Impact
We streamlined the system from 95 to 35 modules—creating a consistent design language that reduced cognitive load for users. For editors, content creation became faster and less error-prone: with fewer, more purposeful modules, they could focus on meaningful content instead of navigating design complexity. The result: a smoother user experience and a more efficient editorial workflow.
Collaboration
I was actively involved in every stage of the project: from preparing and facilitating the client kick-off workshop, through design and design system creation, to collaborating with development, handoff, and testing.
Navigation was a central focus of the relaunch. We needed to ensure that the site’s overall structure provided a seamless experience for users. This example illustrates the level of depth required when refining certain modules.
This is a direct comparison between the old and new design of selected modules. The updated design stayed true to the brand’s core while fully reflecting the newly developed identity. In addition, the modules were technically optimized to ensure a seamless user experience and to simplify editing for content creators and contributors.
A solid design system is essential for any project—especially one of this scale. I translated TRATON’s new branding into a completely new design system. What you see here is just a snapshot of the structure behind the UI design. I created an overview page capturing the core foundations, ensuring consistency throughout our collaboration with both development and stakeholders.
A solid design system is essential for any project—especially one of this scale. I translated TRATON’s new branding into a completely new design system. What you see here is just a snapshot of the structure behind the UI design. I created an overview page capturing the core foundations, ensuring consistency throughout our collaboration with both development and stakeholders.
Navigation was a central focus of the relaunch. We needed to ensure that the site’s overall structure provided a seamless experience for users. This example illustrates the level of depth required when refining certain modules.
This is a direct comparison between the old and new design of selected modules. The updated design stayed true to the brand’s core while fully reflecting the newly developed identity. In addition, the modules were technically optimized to ensure a seamless user experience and to simplify editing for content creators and contributors.
A solid design system is essential for any project—especially one of this scale. I translated TRATON’s new branding into a completely new design system. What you see here is just a snapshot of the structure behind the UI design. I created an overview page capturing the core foundations, ensuring consistency throughout our collaboration with both development and stakeholders.
Navigation was a central focus of the relaunch. We needed to ensure that the site’s overall structure provided a seamless experience for users. This example illustrates the level of depth required when refining certain modules.
This is a direct comparison between the old and new design of selected modules. The updated design stayed true to the brand’s core while fully reflecting the newly developed identity. In addition, the modules were technically optimized to ensure a seamless user experience and to simplify editing for content creators and contributors.
Our story unfolded in clearly defined stages
1. Research & strategy as our compass:
Together with the digital marketing team, we conducted a full UX and UI audit, SEO review, and analytics deep dive. This phase grounded our decisions in real data and user behavior.
2. Co-creation workshop, where visions align:
We sat down with stakeholders and the client to define what success looked like. We clarified qualitative and quantitative goals, requirements, and scope. Together, we sketched out personas and user journeys, recognizing UI as the greatest leverage point. Key insight: the structure worked, so our focus shifted to usability improvements. Moodboards and visual explorations then guided our design direction.
3. Module deep dive:
We carried out a meticulous audit of every CMS module: which to keep, which to discard, and which to completely rebuild.
4. Bringing Scandinavian branding to life, digitally:
Our design challenge was to translate the new branding into scalable, maintenance-friendly modules that reduced editorial effort while ensuring visual clarity and cohesion across all digital touchpoints.
5. Seamless workflow planning:
Project rhythm was crucial. We set up weekly or bi-weekly check-ins via Teams and used Jira for ticketing and tracking, ensuring alignment and flexibility across teams.
6. Crafting UX through structure:
We designed a sitemap, mapped the content tree, refined personas and journeys, and developed wireframes for cornerstone pages turning strategy into tangible design foundations.
7. UI design with functionality in mind:
We refined existing modules, designed new ones in sync with development workflows, and ensured consistency with the overall visual language. This was achieved through close collaboration with developers. Also build a brand new design system from scratch, in order to ensure consistency throughout the whole experience.
8. Handoff with clarity and context:
Implementation was smoother thanks to a comprehensive Storybook. Every module was documented, catalogued, and prepared for development.
9. Iterative testing for confidence:
Using Jira, we tested, validated, and refined interactions. Every bug, edge case, and behavior was addressed to guarantee consistency and quality.
