Improving Telenor’s open web experience for B2B
One of the projects I worked on during my Telenor Internship
Client
Telenor Sverige
Team
1 UX Designer
2 Developers
My Role
UX Researcher
UI Designer
Project Span
March - June
12 Weeks
Have five minutes?
Walkthrough the case study with me!
Summary of The Project
Telenor’s B2B platform current CMS and hosting system was shutting down, meaning they had to migrate all content to a new CMS. During this process, they decided to redesign their entire website for a more modern look as well as meeting the accessibility criteria.
The overview pages needed to be concise, scannable, and informative, with a strong focus on the Quick Links section, which became a critical entry point for exploring services. Product pages had to present a lot of information without overwhelming users, requiring a more structured approach to content cards and text blocks. The accessibility issues, outdated designs, and inconsistent content structure were also addressed in this design. Implementing the new design system meant working closely with developers, dealing with pre-existing tokens and variables, and adapting to documentation standards that were unfamiliar but necessary for ensuring consistency across the platform.
The Challenge
Telenor’s B2B sphere had recently encountered an issue with the CMS and hosting system they had their open platform on. The current system was closing which meant they needed to move all the content over to a new CMS-system. When doing this, they wanted to do a redesign of their components on their website to suit their new design system for the entire company. They wanted to create an entirely new component library, that would make building blocks to build the website itself rather than continuously code it.
This redesign was the company’s first stumbling steps into making the website more aimed towards self service, to stop making the companies contact sellers themselves and get more information on the website. The company wanted the redesign to focus on a more selling aspect, while also keeping the explaining and educating aspect of the original website, due to the very difficult nature of the services they provide. Telenor also wanted the focus to be on potential customers that were smaller companies, like startups and companies under 50 people.
Research on current design
The project came in two parts: creating the overview pages of a category of products, and the page for the products themselves.
Category Pages
These pages need to be short enough to be scannable, as well as present the products that are available in that category. As well as one of the exceptions being the page for broadband with 5G, which needs extra components and support.
The Quick links at the top of the page were also really important. It’s the first overview you see over all the services, since the top navigation most often only shows a portion of the services, and it was well used. Therefore it needed a redesign to be more visible.
Accessibility
Some pages are missing accessibility goals, the design is very outdated and hard to interact with. These need to be clear that they pass and are understandable
Other things that needs to be adressed
Component Creation
Components need to be flexible to fill many roles because there are a limited number of spots in the CMS-system, as well to give the web administrator creative freedom and ability to make changes quickly without involving developers.
Product Pages
The product pages needed to be trimmed down, and also be able to maintain a lot of information about the product or service while not being overwhelming with text. In many cases there were huge differences in how text was structured on different pages, making it feel unstructured and messy. However, there is a need to have descriptive blocks of text for certain products.
Matching design systems
Needs to make changes to match the B2C sphere’s design, yet keep it so the B2B needs are met, like the longer text block and ability to make quick changes.
Time to start!
Outdated content and design
Some pages have been left to collect dust due to priorities changing. These need extra amount of love.
I Didn’t Start from Nothing
Enter Previously Made Designs!
Since the redesign of the website has been in the talks for over a year, other UX designers on the team had already started to work on different components for the open web. The components that were previously created were good, but needed some changes to what I had in mind design wise.
Making changes, working with a new design system
The main changes I wanted to change were how text was used on most pages. As mentioned, the content cards are often full of text and too much information. I created more components to separate information into more manageable chunks. In this category are the small content cards, the large content cards and service overview.
Old designs of content cards
Adding lines to make article widgets not look like floating text, making the text the focus and easier to read.
Making light changes to the design system to make it more accessible, such as making buttons more visible with state. This took a long time since it affected more pages than the ones I was working on.
Old designs of content cards
My new designs
Working with developer and joining the component team
After working through the designs, I got put to work with creating my components in the design system. Having created a design system before from scratch, I felt confident going into this working with and changing already. However, this was wrong. Working with tokens, variables that already and existed and changing them was an experience that was time consuming.
First documentation attempts
Parallel to this I started working with a front developer that was developing the component. For this to work the best way, I had to learn a completely new way of documenting the components for the developers and future UX Designers. Under here you can see how my documentation process changed during this project!
Current documentation process, yes this is a singular component.
Attack of the stakeholder criteria
Parallel to me making changes to these pages, the B2B team was trying to create a new design system and component library that was going to be used, in the meantime I was working with the B2C design system. Some of my interactions got changed, due to the new design system having to (mostly) match with the already created website the B2C sector had developed, which means some changes I wanted didn’t make it through the refinement process.
The main concern with my redesign were the buttons at the top of the overview pages. Due to it being the concept from other pages, it didn’t fit, as well as the buttons not having the look and feel of buttons. After rigorous discussion multiple buttons were changed on multiple pages to more reflect buttons.
Buttons
Cards
First design
First design
Final design
The cards went through some work to fit the B2C design system. That meant I had to give up the border, which made it lose the ability to read larger blocks of text.
Final design
Final Design
Here is the final design I presented to the stakeholders.
Overview Pages
Product Pages
As mentioned, the new design system is a work in progress, so the design is still heavily reliant on the consumer sphere’s design system. This means my final design will go through at least one iteration of changes before launching the final website.
The changes will launch gradually until December 2025.
