bg image

Telia
website
case study

Tomorrow is today

This is the story about re-branding Telia.ee and becoming a new-generation telco.

Original Image
Modified Image

Evolving from dull to playful

Telia has a brand new look and identity. Take a look, how we managed to breathe new life into the old website.

THE NEW IDENTITY BY WOLFF OLINS

All the general guidelines came from brilliant Wolff Olins. To work with that stuff was purely awesome!

Having sorted out the most important pieces, we started building the digital version of Telia on top of these.




NEW BRAND, NEW FOCUS
HOW IT ALL BEGAN

Starting from scratch, we began with
visualising few initial views.

  • 1
  • 2

Followed by experiments for most
popular products and services

  • 1
  • 2
  • 3
  • 4

creating the rules to
guide us forward

In order to unify the 160+ content pages together with 10+
different sub-portals, some rules had to be made.






Colors

Buttons

Forms

Alerts & Notifications

Tabs

Typography

Tables

Lists

Graphs

Process

Tooltips

bg image

GLOBAL DEV KIT FOR CREME DE LA CREME

All design rules and elements also go straight into developer base. To ensure the highest standards available, all code goes through 2-step code review.

MODULAR FRONT-END FRAMEWORK

We built our very own front-end framework from the ground up to support different back-end systems with a consistent implementation and UX. It is far more scalable, maintainable and much easier to work with, thanks to our use of BEM (Block-Element-Modifier) class naming structure.

Components

Components

1
Modules

Modules

2
Templates

Templates

3
Pages

Pages

4

AN UP-TO-DATE STYLE GUIDE

We also built over 40 different components that can be used on their own or in conjunction with others. All components have numerous options for many different use cases.


4x

Less CSS

-42%

Less site loading time

40x

Front-end components

2.5x

Front-end development speed with new framework

FULL RETINA SUPPORT

In order to show crystal clear images in high-density
screens, all images are in high-quality retina format. All
icons are in SVG vector format.




Regular

Retina display

Regular

Retina display

Core assets
for common use

Design and code assets are easily accessible by in-house marketing, partner agencies and Telia Group companies

In-house marketing

Agencies

Dev
partners

Digital
partners

Telia Group
companies

Developer
kit and
more

Banners'
and other
spec

Digital
design
guidelines

UX, colours & consistency

One website in many devices

Presenting intuitively understandable content in all devices was one of the key starting points when creating the responsive guides.


COLORFUL BUTTONS

Rules needed to be not only visually appealing but also understandable for actions – button and text colours and alerts. The goal was to keep it as simple as possible.


For distinguishable brand presence, we designed the main action buttons purple.

Green call-to-action buttons are reserved only for purchasing products and starting and continuing ordering services. And it also makes these type of CTAs stand out better from all other elements.

Withdrawal buttons. Those are being used scarcely and serve psychologically as a warning. By pressing this button user/client will lose something.

Special buttons created for customer service eyes only - as there was a need to clearly differentiate buttons and info fields that are only visible for customer service.


Text colours

   Hello World!

All main texts across the websites are defined as full black for matching the brand's overall high-contrast presence.

   Read more

Links within text blocks are core purple as default state. Keeping the same system across all our platforms.

   299€

Together with our e-shop all the prices are presented in blue colour to clearly distinguish the price from rest of the content.


Alerts

Information alerts are shown everywhere in light blue colour together with universal and easily understandable “i” symbol.

Warning links and error messages are coded into red together with “!” symbol.

Success notifications are presented in green colour together with a tick.

160+
content
pages

Many hours of crazy work, lots of views...and it was all set!

bg image

HOW DOES ONE
MAKE A PRODUCT PAGE?

There is a certain lifecycle of making a new product or service page.
Here's is how it all goes.

Make it yours


Your life, your way

We made our web content more personal for our customers – when logged into the website, you can see Telia logo with your name and personal icon as well. You can also see many special offers and good stuff. Personalised only for you.


... and the world around website

E-mails, campaign sites, self service, digitark and Online.ee – everything else also got a brand new touch.


Online.ee



Campaign sites


Direct
e-mails


Digitark.ee
technology blog



Self service desk