Ericsson Design System

By the end of 2017, in a climate of turmoil due to less than optimal financial results and significant layoffs, it was clear that Ericsson needed a facelift and a mindset shift to avoid missing the new opportunities with the arrival of 5G.

To kickstart what was seen internally as a transformational journey, a new brand was commissioned from Stockholm Design Lab. My team was involved as stakeholders, and we codenamed the project Brand TwoDotZero.

Ericsson's UX 2.0 concept shown on different devices
Ericsson's UX 2.0 concept shown on different devices

Crafting a new typeface —

One of my first tasks was to gather design requirements for a new custom Ericsson typeface meant to be the first building block of the brand rebuild effort. We quickly picked a couple of basic needs. One of our first consensuses was that it had to convey "swedishness", a mix of swiss design with tech modernity that was well illustrated by Sweden Sans.

From a technical standpoint, we were very adamant about having features like a monospace option, slashed zeros (to differentiate "o" from "0" easily), and tabular numerals (so that you can compare number greatness visually and for data visualization purposes). After plenty of ideation and iterations, Letters from Sweden delivered Hilda Sans, an homage to Lars Magnus Ericsson's wife.

A User Experience first brand —

If we wanted the new brand to have a real transformational and galvanizing effect, we needed to flip the Ericsson rule book around. We focused on creating design (not designer) principles that would be at the core of everything the company did to move forward into the future.

In the end, three brand principles were adopted as mantras that everyone could mentally recite. Focused simplicity, delight means performance, and coherence inside out.

Based on these, we generated specific UX principles to guide designers and developers. I called this the Ericsson UX 2.0 vision and presented it during the Ericsson Leadership Summit 2017, an event that packed Globen with the top worldwide managers.

Focused simplicity

We should make things as simple as possible, removing unnecessary details and decoration, which might get in the way of the experience.

Kinetic layers

Light and shadow are two important building blocks of reality and play a big role in the way we experience the world. The closer a layer is to the user, the lighter it gets. Layering is also a great way to convey hierarchy, clarifying the order of triggered events and other interface changes.

Actionable first

We live in a world where lightning fast decisions need to be made and decisive actions taken without second guessing. Our users should be able to know what they need to focus on first and prioritize their actions based on this knowledge.

Progressive disclosure

Even data should use the layering concept, turning huge pools of content, into digestible and digestible chunks of information. Information should be categorized and grouped, creating different levels of detail that can be dug into, allowing the user to get invaluable insights.

Iconic data visualization

Data visualization is an extremely powerful tool, allowing users to get actionable insights on their data. Our focus should be on delivering valuable information, following a graphically refined and character rich design language, that will be clearly perceived as Ericsson.

Motion as an enhancer

We use motion to make the outcome of user actions crystal clear and direct attention to important system changes. It should not be just an afterthought but a crucial component of the experience, taken into account from the start.

Contextual contrast —

Our software is experienced by many people in different contexts, with varying productivity, accessibility and health requirements. As such we designed two themes, that can either be chosen from user research findings or offered as a switchable user option.

A Dark Theme, that carries a bold, tech oriented and future proof brand message, while catering for our users health, improving productivity and ability to assimilate data. A Light Theme that can be selected for specific use cases, where high luminosity and better text readability are critical.

From low fidelity to simulated experience —

Principles like the word suggests (from the Latin word principium) are only the beginning, and they have to be tested and applied so that you can know their mettle. During several weeks, the entire team came together to bring one of the products we were responsible for into this new vision and design language.

Low fidelity prototyping

To better explain and get buy-in from management for the layers concept, I created a quick and dirty prototype using Principle. This enabled us to move the conversation from vision to practice, as some stakeholders did not fully grasp the concept until they saw it as moving pixels.

Sketch and Principle

With everyone on board with the majority of the new concepts, it was time to start refining the actual UI elements. It was also the perfect timing to transition from Adobe Illustrator, which was until then the official tool for mockups, towards Sketch, a much better tool for interface design that came with shared design libraries as much needed addition.

The other benefit was a tight integration with Principle, which made creating higher fidelity prototypes a breeze.

Sketch screenshot with the login flow
The login flow in Sketch
Sketch screenshot with the launcher flow
The launcher flow in Sketch

Creating an end-to-end user flow

The last step before the big reveal on the leadership summit, was to lift an end-to end flow from the Ericsson Security Manager (a product being designed in our team) and translate it into the new design language.

To achieve it, we created pixel-perfect mockups for all the screens and animated every little interaction in After Effects. Doing so allowed us, in the short time we had until the brand reveal, to produce a video that looked like a real functioning product would eventually look like after implemented.

Sketch screenshot with the ESM flow
The ESM flow in Sketch

An award-winning Design System

As a consultant, your stay on a company is always on a time limit, and by the Summer of 2017, Ericsson decided to start building up their in-house design team, to better prepare for a more design driven future.

By the end of the year, the Ericsson Design System that grew from the team's experience creating the tech stack agnostic Loki CSS/JS framework and the UX vision work we did for the new brand, was awarded a Red Dot Design Award and an IF Design Award.

—— More work

Efiricsson Security Manager VR

ROLE — Art Director

To test the boundaries and flexibility of the new design language concepts and user experience principles my team created for the Ericsson rebrand, we got challenged to reimagine one of our web-based interfaces as a virtual reality experience.

Read more

TriOptima Design System

ROLE — Product Designer

A story of how a small team of designers with almost no development resources created a thriving design system used on products that have helped compress thousands of trillions of dollars in gross notional in the OTC financial market.

Or how one motivated designer created 2 Sketch libraries and implemented and maintained a tech stack agnostic CSS/JS framework used in 5 products, where one critical bug could spell thousands of dollars in losses.

Read more