Rebranding Tele2

Aligning digital design with a bold new brand platform across web and app.

Impact at a Glance

As Design Director, I was responsible for translating Tele2’s new brand identity into a cohesive and scalable product design language across all digital touchpoints. During this transformation, I:

• Led the UX and UI redesign of Tele2’s logged-in and logged-out web and app experiences

• Defined scope for documenting a brand-aligned UI library in Figma

• Introduced new design principles to guide tone, layout, and motion

• Ensured alignment between marketing, product and tech teams

• Created a scalable framework for future rollout across all business areas

Background

In 2020 a strategic decision were made to merge Tele2 and Com Hem into one premium brand. The marketing expression was fresh, bold and visually distinct—but the digital products were still using legacy components and design language.

Our challenge: bring the new brand to life in digital products—while ensuring usability, consistency and performance.

My Role

I was brought in to lead the digital design side of the rebrand. My responsibilities included:

• Translating brand guidelines into usable digital design principles

• Creating UI foundations that aligned with product goals and technical constraints

• Collaborating with developers and brand teams to ensure quality and consistency

• Coaching and aligning product designers across teams

IC designers in the team: Fredrik Suter, Lead Product Designer and Julius Andersson, Visual Designer from Commonground Design agency who produced concept work for visual blueprint.

Approach

1. Audit & Gap Analysis

2. Design Principles & Expression

3. UI Kit & Design Library

4. Component Delivery & Handoff

1. Audit & Gap Analysis – foundation for a visual blueprint

We began with a full audit of existing UI components across Tele2’s logged-out web, self-service portal, and native apps. This helped us map:

• Mismatches between the current UI and the new brand guidelines

• Opportunities to introduce clarity, simplicity and energy

• Areas where design could support brand intention

Concept A/ Reliable

This was the least innovative direction, that would be easiest to implement. The idea was to create a light and fresh style, based the Com Hem style but switch grey backgrounds to white, keep light drop shadows and reduce colors.

Concept B/ Neumorph

This direction felt interesting from a digital frontier and differentiate perspective. The idea was to explore the trend of going away from flat design and work with more shadows and bevels to create depth in the UI.

Concept C/ Dark mode

This direction felt interesting from many angles. The fifth element in the new brand was decided to be a dark blue gradient, also dark mode would separate the brand from other competitors in our business.

Sign off – aligning design with brand

We had a couple of sessions before we could decide on a direction that everyone felt good about. The final sign off identified 4 key areas that we wanted the visual expression to focus on: minimalistic airy UI, simplified navigation, image driven and a Mix of Dark vs light backgrounds.

The reasons for mixing were the conclusion of making the background color dark in as many touchpoints as possible. However in some areas the dark mode became to dark, with too big risks from a conversion perspective. So the principle were dark for branded areas such as start pages and campaigns. White backgrounds were used for mor functional purposes like news, articles and purchase flows. The mix could also be used, for example in the product pages with branded colors at the top and light background further down the page for functional reasons.

When it came to shapes we went for hard edges on buttons and cards to connect to the premium vibe. Another large visual change was the simplified top navigation and footer who used the darkblue color for brand connection. Other areas of brand alignment was the image driven top hero areas with uppercase headline texts. The top menu background is also flexible: transparent when there is a top hero image, otherwise it’s darkblue background color, which also serves as the brand element in very light pages such as checkout in a purchase flow.

2. Design Principles & Expression

We translated the new brand tone into product-level principles, including:

• Focus on quality

• Build trust

• Make it pleasant

• Digital frontiers

These guided decisions across typography, color, spacing, tone of voice, and motion.

3. Systemise – create UI kit in Figma

We built a UI library in Figma that included:

• Typography styles based on the new brand font

• A simplified, high-contrast color system

• Button states, cards, forms and input fields

• Spacing tokens and layout rules for grid and responsiveness

The result was a clean, accessible and modular design system tailored for product use—but still true to the brand’s expressive tone.

Test – verify on real users, tweak improvements

We used qualitative techniques to test different parts of the user experience to inform us on the best solutions.

• Remote tests, using tools like Teston, Lookback, Useberry and Optimal workshop.

• We tested navigation patterns, purchase flows and self-services

• Used to guide us to the next step the same week.

• Decisions made together with data analysts and product managers.

4. Component Delivery & Handoff

Working closely with developers, we ensured that:

• Components were documented clearly for implementation

• Edge cases were handled through real-world examples

• Figma files reflected both the ideal and the feasible

Reference screens were created for key user flows (login, dashboard, subscriptions) to demonstrate application in context.

Collaboration Across Functions

The rebrand was a cross-functional effort involving:

• Brand & Marketing – to ensure consistency with advertising

• Product Managers & Designers – to apply the new style in context

• Engineering – to manage technical constraints and implementation speed

• Customer Experience Teams – to validate clarity and usability

I worked as a bridge between these functions—keeping everyone aligned and translating abstract brand ideas into real, usable design.

Outcomes

• The new design language was successfully launched in key web and app surfaces 2021

• Designers across Tele2 adopted the new UI kit in ongoing product work

• The updated design helped communicate a more confident, modern, and user-focused Tele2

• The new foundation supports better speed, accessibility and maintainability going forward

What I Learned

• Rebranding in product isn’t just about visuals—it’s about interpretation and translation

• Getting teams on board early with principles, not just pixels, leads to better alignment

• Pairing branding and UX considerations from the start avoids rework and maintains integrity

• Good design systems are about what you leave out as much as what you include

Final Thoughts

This project showcased how strategic design leadership can turn a bold brand vision into tangible product value. It required not just taste, but structure, coordination and long-term thinking—qualities that helped align multiple teams toward a shared goal.