Swisscom Website Refresh
A brand-aligned website refresh for Swisscom's B2B marketing presence. The goal was not a complete redesign, but a structured refresh — transforming the existing site into a modular platform that communicates products clearly while remaining emotionally engaging. Built on Atomic Design principles, the system provides product managers and content creators with approved building blocks to compose pages with consistency, clarity and commercial intent.
Challenge
The Swisscom B2B website had evolved over many years without a unified visual or structural system.
Product managers and designers added new components whenever needed, often without shared guidelines. While this allowed fast iteration, it gradually created a fragmented experience.
Layouts differed from page to page, visual hierarchy was inconsistent, and product communication became increasingly difficult.
The objective was not to redesign everything, but to introduce a structured design language that could scale across teams and use cases.
Design Approach
The solution was an Atomic Design framework — a structured library of reusable building blocks.
Instead of designing pages individually, teams can now assemble them using predefined components, similar to constructing with Lego bricks.
The system defines which components exist, how they should be used, and which combinations are allowed. This creates clarity without limiting creativity.
Teams can work faster while maintaining visual consistency, and every page remains part of the same design language.
While the framework currently lives primarily in Figma, the design system and style guide already provide the foundation for future implementation.
My Contribution
- Led the concept phase from initial exploration to a structured framework
- Defined the Atomic Design component inventory and usage principles
- Developed the visual concept for emotionally engaging product storytelling
- Created the style guide aligned with Swisscom's brand identity
- Delivered the final UI design for the refreshed website in Figma
- Integrated design psychology and conversion principles into product communication
Status & Next Steps
The project is currently evolving.
The Atomic Design framework, component rules and style guide are already defined and used as the foundation for new pages.
The next phase focuses on CMS integration, production implementation and validating conversion-oriented marketing patterns in real usage.
A website that can be maintained means little if it cannot first be felt.