Branding in the digital age: There’s a better way to design your products.
Swisscom is one of Switzerland’s most recognisable companies, we are the country’s largest telco, operating across TV, mobile and fixed-line. We increasingly invest in digital products and solutions for our customers, ranging from websites to mobile apps.
Be agile
To be successful in this various and fast changing markets, we need to be agile and we need to be quick. This means standards, fast product development processes and despite this delivering a superior customer experience is key to our success.
How we cerated the Swisscom Digital Experience (SDX)
In a big enterprise, effective communication and sharing informations can be difficult considering the sheer size of teams, departments and projects. But a shared understanding of digital brand and design principles is vital to create unforgettable customer experiences.
In a big enterprise, effective communication and sharing informations
can be difficult.
Building the SDX design framework
Following the creation of our original digital style guide in 2008, different teams from around the business were tasked with developing websites, new products and new services. Over time, this meant that the Swisscom customer experience across the range of our digital products, had become inconsistent. It also led to inefficiencies across our design and development teams, as they were building every component from scratch every time.
At Swisscom, we foster a culture of design-led innovation. In a highly competitive marketplace, we recognised that the organisation needed to differentiate itself from its core business, in order to meet the needs of the new digital age.
The Swisscom Digital Experience SDX is a digital design framework for transforming human needs into thoughtfully made applications.
As the number of digital products and services we developed increased, we began to think about how we could create a solution that could assist our various product teams to communicate more efficiently. Creating new efficient ways for product development and delivering best in class customer experience with state of the art tools was one the primary motivations behind the Project.
Over the last couple of months, we built a new design framework alongside design and development teams on live projects. In each instance, each product’s required digital elements were identified, from form fields to buttons and toggle switches; we collaborated with several teams to design each one according to a set of high-level principles while Swisscom developers wrote the code. Once a product was finished and sent to market, we began working on the next.
In developing the product we adopted an agile process, testing the toolkit on live projects, holding multiple sessions each week with all of the teams involved to share detailed feedback and ideas.
The digital brand story
In the beginning of the Project it became also clear the teams of product managers, developers and designers had nothing to align on. This led often to frustration for the designers. We decided to write a digital brand promise and some principles to build up a shared design language.
Everything we do at Swisscom is based on our customer promise and its core three values of being trustworthy, simple and inspiring. We decided to write a digital brand promise and some principles to build up a shared design language. This is essential for the teams of product managers, developers and designers to design unique Swisscom products. We used the core company principles to create a digital brand identity.
We’re the digital companion that’s right for every user every moment.
t’s about trust
We use our users’ data responsibly, to deliver relevant experiences.
It’s about simplicity
We help people to achieve their goals as effortlessly as possible.
It’s about inspiration
We create dynamic interactions that are rewarding and delightful.
The experience principles
Based on the digital brand story we created several core user experience principles. These principles should help experience designers to make brand driven ux decisions.
Principle 1: Our design is light, crisp and understated
We use whitespace to create calm and uncluttered experiences. We only reveal complexity when necessary. Our designs are undisruptive, subtly nudging or notifying the user when needed.Principle 3: Our design is punctuated with inspiring moments —
We intentionally contrast the measured nature of our designs with more expressive moments. We use colour to enliven the content that is most meaningful to our users. Scale of type and imagery also help to create these moments of inspiration.
Principle 5: Our interactions are rewarding —
Every interaction a user has with Swisscom is rewarded, no matter how small. We use visual feedback and motion to indicate an interaction has been successful. We clearly explain the consequences of an action and let users go back or undo if they change their mind or need to correct a mistake.
Building a platform
After the visual realignment, we created a Swisscom digital experience platform, which provides information about the framework.
With SDX we developed a framework to create uniquely Swisscom digital experiences, unified with a coherent interaction, motion and visual language. It is our living toolkit with the principles, components, patterns and best practice to create exclusive digital applications for Swisscom.
Principles
Our digital experiences share a language that ensures our digital applications are coherent, high quality and unmistakably Swisscom.
Get inspired
Explore our showcase of digital applications designed in the spirit of the Swisscom Design Experience
Resources
In this section is everything we need to create engaging and inspiring digital applications. The basic elements of our visual language. Reusable building blocks styled using the basic elements and groups of components combined to form larger parts of an interface.
Code framework
Inside you’ll find high quality HTML, CSS, and JavaScript to make starting any project easier than ever.
To understand that Swisscom is a company driven by developers and not by designers was a simple but nevertheless one of the important insights. The difference of what it means to be a developer driven company was key for this project. Companies like IBM have gone from 1 designer : 72 engineers in 2012 to 1 designer : 8 developers in 2017. However ours is closer to 1 designer : 100 developers. It’s was important for us to build the design assets based on a code framework tailored on our developer needs.
The SDX Code Library is custom framework for building responsive, mobile-first sites and applications tailored to the Swisscom CI/CD. Inside you’ll find high quality HTML, CSS, and JavaScript to make starting any project easier than ever
SDX v1.3.6 is available for download using NPM or directly from GIT.
Developers have a finite time to spend on tools. The Git based framework for the developers is part of the digital guidelines. With our internal Git system we use a fast, flexible, and collaborative development process that lets developers work easy and convenient with the reusable code assets.
In our mind digital designers and developers represent two halves of the same coin. While it seems like designers and Developers speak two different languages, they’re both part of creative project work. They are using different tools, but it’s the same underlying framework in play. Designing user interfaces or designing the code used to build an application relies on principles and frameworks.
Having streamlined processes and standards can have a huge impact on a design and development team’s performance.
In our mind digital designers and developers represent two halves of the same coin. While it seems like designers and Developers speak two different languages, they’re both part of creative project work. They are using different tools, but it’s the same underlying framework in play. Designing user interfaces or designing the code used to build an application relies on principles and frameworks.
For the customer, SDX ensures that every interaction provides a relevant, smooth, and consistent Swisscom experience.
The Swisscom Digital Experience (SDX) is the result of our work. A new digital design and code repository that exists as a framework of principles, detailed product resources, and foundational styles. It is designed to grow over time, and remain iterative, forming a living styleguide which remains open to update and change.
Now, every designer, developer and agency working with Swisscom has access to both the code and the design for every digital component. Our product teams can now communicate and share information much more efficiently, enabling them to get things made, signed off and sent to market more quickly.
Creating a lifecycle
We soon realized that maintaining guidelines and toolkits is a constant effort. We started a design focused digital experience board involving designes from different creative departments. The board can support distributed projects by facilitating collaboration across teams and providing guideance to evolve the different design needs in the company.
This board helped break down silos and encourage collaboration.
If you’re a designer, product owner or manager, and face any of these challenges — Try to use some of this ideas and tools. :-)
If you enjoyed this, please hit the recommend button♡ and Follow me.
You can also reach out to me on LinkedIn
