Imagine a Lego set with sorted, labeled boxes. In design systems, semantic naming is similar, categorising website or app elements like colours, fonts, and spacing. Tokenization assigns values to these names, like a unique code for each Lego box, allowing designers to easily use elements without memorising specific codes.

hero-image-12

Semantic naming and tokenization  in Digital Design Systems

### Improving communication
Semantic naming creates a common language for internal and external Vattenfall designers, developers, and other stakeholders working with the Vattenfall Digital Design System (DDS). By using meaningful and descriptive names for colour, typography, spacing, and other design tokens, teams can ensure a seamless transition from design to development. This in turn reduces misunderstandings and streamlines the collaborative process.
 
 
### Ensuring consistency
A design system with semantic naming promotes brand consistency across digital products. When every team member uses the same tokens, the user interface (UI) maintains a consistent look and feel, even when scaling across different platforms and devices. This uniformity is key to maintaining brand consistency and user recognition of the brand.
 
 
### Facilitating scalability
When digital design systems grow, managing them can become complex. Semantic naming makes it easier to scale because it acts as a modular system. Designers can add, remove, or modify tokens without affecting the entire system, making it adaptable and future-proof.
 
 
### Speeding up development
Semantic naming speeds up the development process. Developers no longer need to guess the purpose of a colour or type scale—they can use tokens to apply styles quickly and accurately. This efficiency not only saves time but also decreases the likelihood of errors.
 
 
### Improving maintainability
Maintaining a large digital design system can be daunting. Semantic naming simplifies this task by providing a structured and organised approach to design elements. When updates are necessary, a change to a token can propagate throughout the entire system, ensuring that updates are consistent and less prone to errors.
 
 
### Conclusion
Semantic naming is the backbone of a robust digital design system. As digital products continue to evolve, semantic naming will undoubtedly play a crucial role in shaping the future of digital design systems.
 
What does this mean for the Vattenfall DDS? At the time of writing the planning process of semantic naming and tokenisation for implementation into our UI-kit and code is in progress with the plan of having colours, typography and spacing implemented in 2025 to act as a central guideline available for all. We’ll keep you updated regarding the Launch date.
 
Also read on for a short interview on the subject with Hylke from the Netherlands team below.
 
 
 
 
![hylke_profiel_2019 1](/uploads/hylke_profiel_2019_1_378e4fa373.jpeg)
 
 
### Interview: Hylke van Maaren, Lead UX Design in the Netherlands
We asked Hylke van Maaren, in the Netherlands team, to share some insights and thoughts on the subject of semantic naming and tokenisation as this has been a priority within the team recently. 
 
 
 

#### Q: What made you start up the project of implementing tokenisation and semantic naming?
A: The smallest definition of a design system is that it is a unified language that can be used to build (digital) products together. In the Netherlands, we have experienced several transitions in recent years that contributed to design and development no longer being in sync. Their languages drifted further apart resulting in differences in how things looked and behaved.
 
 

#### Q: Any big eye openers you’ve come across so far during the project?
A: It’s not a revelation, but a confirmation: creating complexity is easy, but making something simple and understandable is challenging.  A good design system relies on simplicity and usability. The quicker users grasp how it works and how to apply it, the greater the likelihood of adoption and long-term relevance. A design system is ultimately a tool for the organisation. Design it with the organisation as the end user, focusing particularly on collaboration between disciplines. Sometimes, this means finding a balanced approach to bring these disciplines closer together. This principle is central to our DS essentials.
 
A real eye-opener for me was the "semantic naming" tool for tokens that Maarten (van Gent, Digital Designer within the same team) developed for both designers and developers. It’s easy to use and boosts consistency (currently in beta).
 
 

#### Q: What other roles within your team have been involved?
A: We had to do this with a small team: a designer and part-time front-end developer. More stakeholders were however involved.
 
 

#### Q: Any quick tips or ideas to share with others who would like to do the same work?
A: The essence of all this is to stimulate reuse, do that with this too. Don't reinvent the wheel and reuse what is already there and what works.
 
 
Also make sure you have enough buy-in from the teams. A design system touches the complete development process starting from the first idea and sketches to the final product that is shipped to production. So making sure people use the same checkpoints like a definition of ready and done or even linting software really helps in creating adoption and feedback loops to optimise the system.
 
 
A design system is the backbone of a digital product organisation, is never finished and will always need to be improved based on its use and feedback. Improvements can always be made to make the system work even better for the organisation.
 
 
 
 
 
 
At the Vattenfall DDS team we are very grateful to be able to take part of the great work – including learnings and the results – that Hylke and the Netherlands team have been doing within this area already, and the majority of updates that will be applied to the DDS UI-kit will come from this project.
 
 
This is also a great example of knowledge and assets sharing across teams within the organization which helps to take us forward as a whole.
 
 
If you have any great projects to share please reach out to us on branding@vattenfall.com

Imagine a Lego set with sorted, labeled boxes. In design systems, semantic naming is similar, categorising website or app elements like colours, fonts, and spacing. Tokenization assigns values to these names, like a unique code for each Lego box, allowing designers to easily use elements without memorising specific codes.

Semantic naming and tokenization simplify building and managing digital products, acting as an organisation system for digital design. This is particularly beneficial for large companies operating in different markets, like Vattenfall. 
Now looking more closely at the key benefits.

Over the past few years, as we've developed the DDS, we've observed a strong preference for Figma as the primary design software. Following Figma's recent conference, Config, we've examined the software updates to understand how these improvements and product developments can better serve Vattenfall's design teams.

vf_dds_article_hero

Figma Config 2024: Key Updates

### 1. UI3: Redesigned Interface
The new UI3 redesign provides a cleaner, more intuitive workspace. The editing menu has been shifted from the top to the sides, making tools more accessible and reducing unnecessary clicks.
 
 
![vf_dds_article_img_01](/uploads/vf_dds_article_img_01_26ee5e00a9.png)
 

The Updated Auto Layout now suggests settings based on your design, making your work faster. It also offers smoother object reordering, alignment previews on the canvas, and improved management of nested frames.
 

![vf_dds_article_img_02](/uploads/vf_dds_article_img_02_2a18ddb7d9.png)
 
 

### 2. Dev Mode: Streamlined Handoff
Dev Mode is designed to improve the handoff process between designers and developers. Specific new features like Status Updates allow designers and developers to track the progress of designs more effectively, while Ready for Dev View consolidates everything ready for development in one place. 
 
 
Code Connect, now officially out of beta, links design components directly to corresponding code snippets from design system, enhancing collaboration between design and development teams. Additionally, the Responsive View feature allows developers to see how designs will behave across different devices without leaving Figma, ensuring accurate implementation across platforms.
 
 
<iframe width="560" height="315" src="https://www.youtube.com/embed/IfrS_RNSrQM?si=CcRDyUcx59u7fNn8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
 
 
 
 

### 3. Figma AI: Smarter Design Tools
Figma AI introduces a suite of tools to automate and enhance your design process. The AI-powered Search function helps you find components and assets more efficiently by understanding the context of your search. 
Additionally, Layer Renaming automatically organizes layers based on their content, making your files easier to manage, particularly in large projects.
 
 
For additional insights to start this work semester, Config 2024 offered several interesting talks on topics like designing for code, data visualization, AI, and team collaboration. We've selected our three favorites from the lineup to explore further and inspire new ideas for your upcoming projects.
 
 

#### Pitching accessible design like a pro
 
<iframe width="560" height="315" src="https://www.youtube.com/embed/NoHIDWF0d6I?si=b3EJNmnMXpMNYEZt" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
 
 
 

#### Here's how Figma thinks about AI
 
<iframe width="560" height="315" src="https://www.youtube.com/embed/_JMmdM00048?si=bKK96dvDdurDX0HF" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
 
 
 

#### A look inside Teenage Engineering
 
<iframe width="560" height="315" src="https://www.youtube.com/embed/qCliqmX_TQ4?si=VjU8I-G8g_wYnfoe" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
 
 

Watch more talks from Config 2024 [here](https://www.youtube.com/playlist?list=PLXDU_eVOJTx402DljIPagaDKLibF-qfF0)
 
 


### To all external parties and agencies

![vf_dds_article_img_03](/uploads/vf_dds_article_img_03_28cf919343.png)

 

**Don´t miss out** on your access to Vattenfall’s Figma environment. We are currently reaching out to all external Vattenfall partners and agencies who work with digital design assets at Vattenfall, to provide access to the most up-to-date assets and components in Figma. If this applies to you or someone in your team, email the details below to branding@vattenfall.com.
 

·      Name, company, and email address
 
·      Digital Product, Site, and Project you work with
 
·      Market & Location
 
·      Your main contact at Vattenfall

 

Thanks for your cooperation!

Over the past few years, as we've developed the DDS, we've observed a strong preference for Figma as the primary design software. Following Figma's recent conference, Config, we've examined the software updates to understand how these improvements and product developments can better serve Vattenfall's design teams. 

In this article, we highlight several new features that we encourage you to explore and experiment with when you next access the assets in our Vattenfall Figma UI Kit.

It’s that time of the year when the DDS team share our curated list of new perspectives, ideas and inspiration. Our summer recommendations this year have been selected to broaden your thinking and offer both relaxation and reinvigoration this sunny season. 

vf_dds_summer_inspiration

Summer Inspiration & Ideas 2024

## Books
![Summer inspo 1](/uploads/Summer_inspo_1_4adaa8f551.png)


### UX Research for One - Leah Buley
If you're looking to expand your design skillset, we recommend this book covering valuable aspects of UX research. Its practical approach provides clear guidelines on how to effectively plan your UX research process and offers useful tools and tricks. This book is suitable for all roles in digital design as it covers key aspects of creating engaging digital designs. 
 
[UX Research for One](https://www.goodreads.com/book/show/18177290-the-user-experience-team-of-one)

### Graphic Design Playbook: An exploration of visual thinking  
For a more playful approach to design this beautiful book includes fun exercises and visual challenges to improve your graphic design skills. If you want to spend some time away from the keyboard and learn new things, make sure to grab this book. 
 
[Graphic Design Playbook](https://www.counter-print.co.uk/products/graphic-design-playbook )

### How to Travel - The School of Life  
This book offers travelers new perspectives and reflections on our travel behavior, motivations, and the meaning of travel for humans. It presents many interesting concepts to ponder on the purpose of travel and how you can make the most of your travel experiences in unexpected, creative ways. 
 
[How to Travel](https://www.theschooloflife.com/shop/tsol-press-how-to-travel/ )

 
 

## Podcasts
![Podcasts](/uploads/Podcasts_6d164d9b60.png)

### Beyond Barriers 
This insightful podcast explores the subject of accessibility, discussing its real-world implications for people with disabilities. It features a range of experts in accessibility—from developers and designers to business innovators—sharing their insights on designing for accessibility. 
 
[Beyond Barriers](https://open.spotify.com/show/4o2BvYCjRywLXsHkozohNq )

### Ted Tech  
This insightful podcast explores the intersection of technology, society, science, design, business, and innovation selected from tech-savvy TED Speakers hosted by Sherrell Dorsey. 
 
[Ted Tech](https://open.spotify.com/show/1iwcjlgreRD0nJxgtdwMLx )

### Creative Pep Talk  
A fun and light-hearted podcast hosted by illustrator Andy Pizza covering stories and insights into building your creative practice and develop ideas.  
 
[Creative Pep Talk](https://www.creativepeptalk.com )

### A Change of Brand  
This podcast uncovers some of the biggest brands and learnings from rebranding, and transforming the brand, including lots of knowledge and lessons learned from the transformative journey of reshaping a brand's identity, reputation, and market perception 
 
[A Change of Brand](https://open.spotify.com/show/5eyO9cVfvEypric8e5LaAe?si=eWBfhVGcTey5etdCfMCNlg&nd=1&dlsi=d95da3250d474b6a )

 

## Apps 
![Apps](/uploads/Apps_9b507be3a3.png)

### Blinkist  
The Blinkist app claims to offer “A world of knowledge in your pocket” and offers 15-minute audio versions of books on a range of topics, including business design, personal growth, classical literature, and wellness. It's an excellent app to explore new ideas without needing to spend a lot of time reading. 
 
[Blinkist](https://www.blinkist.com/en/home )

### Highlighted  
This amazing app provides an easy and helpful way to capture lines, words, and phrases from the books you are reading. Just scan the text from the book, and it will be saved within the app. This enhances your reading experience as it enables you to revisit your ideas and further develop them after finishing the book. 
 
[Highlighted](https://highlighted.app )

### Perplexity  
The DDS team has been exploring the research AI platform, Perplexity, and found unexpected ways to use it beyond work. It can assist with travel research this summer. For instance, it can help find local restaurants serving organic food, or best cafes for Sunday brunch. Try it out here: 
 
[Perplexity](https://www.perplexity.ai )

It’s that time of the year when the DDS team share our curated list of new perspectives, ideas and inspiration. Our summer recommendations this year have been selected to broaden your thinking and offer both relaxation and reinvigoration this sunny season. We hope that these resources will serve as stepping stones to new ideas and insights, helping you to recharge, grow, and make the most of this summer. 

In this article you can see a list of the latest DDS updates - assets, guidelines and code!

Woman writing on paper, located on table with pen

02_72 DPI-Vattenfall_Poland_Office_women_workshops

What's new

### Design website updates
**Published at 13/2 -24.**
 
<a class='vf-link--with-arrow' href='https://digitaldesign.vattenfall.com/articles/javascript-chart-library-audit' target='_blank'>Data Visualisation - Technical Aspects</a>
 
<a class='vf-link--with-arrow' href='https://digitaldesign.vattenfall.com/designers/data-visualisation' target='_blank'>Data Visualisation - Dos & Don´ts</a>
 
<a class='vf-link--with-arrow' href='https://digitaldesign.vattenfall.com/designers/data-visualisation' target='_blank'>Data Visualisation - Colour Values</a> 
 
**Published at 25/10 -23.**
 
<a class='vf-link--with-arrow' href='https://digitaldesign.vattenfall.com/designers/data-visualisation' target='_blank'>Data Visualisation Guidelines</a>
 
**Published at 20/9 -23.**
 
<a class='vf-link--with-arrow' href='https://digitaldesign.vattenfall.com/designers/components/campaign-assets/industrial-emissions-face-mist' target='_blank'>New campaign assets/Industrial Emissions Face Mist</a>
 

<SPLITTER>

**Published at 10/3 -23.**
 
<a class='vf-link--with-arrow' href='https://digitaldesign.vattenfall.com/designers/components/icons/icons-intro' target='_blank'>Updated downloadable icon folder</a>
 
**Published at 7/2 -23.**
 
<a class='vf-link--with-arrow' href='https://digitaldesign.vattenfall.com/overview' target='_blank'>Overview updated with new assets</a>
 
**Published at 17/1 -23.**
 
<a class='vf-link--with-arrow' href='https://digitaldesign.vattenfall.com/onboarding' target='_blank'>New onboarding section</a>
 
<a class='vf-link--with-arrow' href='https://www.figma.com/file/StZqbeCMLRadS4SGBwU3fD/VF-%2F-THE-EDIT?node-id=27%3A7599' target='_blank'>New campaign assets/The Edit in Figma</a>
 
**Published at 9/9 -22.**
 
<a class='vf-link--with-arrow' href='https://digitaldesign.vattenfall.com/articles/brand-consistency-and-the-impact-of-vattenfall-hall' target='_blank'>New article page layout</a>
 
<a class='vf-link--with-arrow' href='https://digitaldesign.vattenfall.com/articles' target='_blank'>New article feed layout</a>
 
<a class='vf-link--with-arrow' href='https://digitaldesign.vattenfall.com' target='_blank'>New start page layout</a>
 
**Published at 28/8 -22.**
 
<a class='vf-link--with-arrow' href='https://www.figma.com/file/sqasnyoR4LEnb5vmUSoINx/VF-%2F-Conversion?node-id=0%3A1' target='_blank'>New conversion assets in Figma</a>
 
**Published at 4/4 -22.**
 
<a class='vf-link--with-arrow' href='https://digitaldesign.vattenfall.com/search?q=' target='_blank'>The search bar now contains more keywords</a>
 
<a class='vf-link--with-arrow' href='https://digitaldesign.vattenfall.com/overview' target='_blank'>The overview of our assets is now more comprehensible and easy to use</a>
 
<a class='vf-link--with-arrow' href='https://digitaldesign.vattenfall.com/designers/get-started' target='_blank'>New onboarding video to install the Figma UI-kit</a>
 
<a class='vf-link--with-arrow' href='https://www.figma.com/file/vE0mDJSi4Xd2HowWrhuicW/Vattenfall-Design-Library?node-id=0%3A1' target='_blank'>Vattenfall Design Kit on Figma!</a>
 
<a class='vf-link--with-arrow' href='/developers/components/modules/expo-carousel' target='_blank'>New carousel component, with parallax effects, and multiple options!</a>
 
<a class='vf-link--with-arrow' href='/developers/components/dialogues/gdpr-consent' target='_blank'>Updated GDPR Consent with a reference</a>
 
 
 

</SPLITTER>

### Development website updates
**Published at 27/1 -23**
 
<a class='vf-link--with-arrow' href='https://digitaldesign.vattenfall.com/articles/initializing-javascript-with-dds-version-14' target='_blank'>Breaking change - A new way to initialize javascript, please read this article before making updates.</a>
 
**Published at 1/2 -23.**
 
<a class='vf-link--with-arrow' href='https://digitaldesign.vattenfall.com/designers/components/selection/slider' target='_blank'>Slider component</a>
 
<a class='vf-link--with-arrow' href='https://digitaldesign.vattenfall.com/designers/components/selection/value' target='_blank'>Value component</a>
 
<a class='vf-link--with-arrow' href='https://digitaldesign.vattenfall.com/designers/components/modules/people' target='_blank'>Testimonials component</a>
 
<a class='vf-link--with-arrow' href='https://digitaldesign.vattenfall.com/designers/components/modules/numbers' target='_blank'>Numbers component</a>
 
<details>
<summary>Show more updates</summary>
 
<a class='vf-link--with-arrow' href='https://digitaldesign.vattenfall.com/designers/components/modules/investors' target='_blank'>Investors component</a>
 
**Published at 4/4 -22.**
 
<a class='vf-link--with-arrow' href='https://digitaldesign.vattenfall.com/search?q=' target='_blank'>The search bar now contains more keywords</a>
 
<a class='vf-link--with-arrow' href='https://digitaldesign.vattenfall.com/overview' target='_blank'>The overview of our assets is now more comprehensible and easy to use</a>
 
<a class='vf-link--with-arrow' href='/developers/components/modules/expo-carousel' target='_blank'>New carousel component, with parallax effects, and multiple options!</a>
 
<a class='vf-link--with-arrow' href='/developers/components/dialogues/gdpr-consent' target='_blank'>Updated GDPR Consent with a reference</a> 
</details>

This article space is used to update you on all the latest changes and additions we are making on the DDS in terms of design assets, guidelines and code.

As we explore accessibility and develop our latest guidelines projects, we're interested in hearing from advocates within the Vattenfall organization. First up, we have an interview with Anna Lindberg, Web Content Coordinator at Vattenfall and Maria Sjögren, Business Developer at Comprend. 

Vattenfall_customer_teen_girl_woman_front_door_2021 2

Interview: Learnings from advocating accessibility.

![DDSaticle](/uploads/DDS_aticle_aa57525020.jpeg)

### Q: Tell me about what you do and why accessibility matters to you
 
ANNA: I work in the Media Relations team as Web Content Coordinator for our websites group.vattenfall.com, powerplants.vattenfall.com and history.vattenfall.com. Accessibility and equality are values that I hold dear and I’m passionate about ensuring that everyone, regardless of their abilities, can access and engage with our website content. 
 
MARIA: I work at the agency Comprend where my team and I support Anna with everything related to web management. I believe that accessibility is fundamental to our work, ensuring that the content on our platform is understandable by both humans and machines. 
 
### Q: Can you walk us through the process of conducting manual accessibility testing. Why did you choose this particular method? 
 
ANNA: Years ago, at the Internetdagarna conference, the Swedish accessibility agency [Funka](https://www.funka.com/) highlighted the struggles people with disabilities face when accessing websites. Inspired by this, and with new EU regulations in mind, I wanted to witness a live screen reader test to learn how easy or difficult it is for people with disabilities to use our website group.vattenfall.com.

MARIA: While we together with Vattenfall have been focusing on accessibility for years, we until recently primarily used automatic testing tools such as [Siteimprove](https://www.siteimprove.com/toolkit/accessibility-checker/) and [Lighthouse](https://chromewebstore.google.com/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk) for this. When Anna suggested that we reach out to Funka to get support to conduct an external audit, it was a natural choice given their expertise in this area. With the help of Funka we managed to get human testers evaluating certain pages and assess their compliance with accessibility standards and guidelines from a human point of view.  
 
### Q: What was your main takeaway and aha moment from this process? 
 
ANNA: Experiencing the live screen reader test with someone who cannot view websites conventionally was eye-opening. It emphasized the challenges they face and highlighted the importance of the work that we are currently undertaking. 

MARIA: The key takeaway on my part was how crucial it is to also incorporate [manual testing](https://www.w3.org/WAI/standards-guidelines/act/) into our protocols. It became clear that relying solely on automatic testing tools is insufficient to ensure accessibility. 
 
### Q: What were some of the key challenges you faced?
 
ANNA: One significant challenge is ensuring that all PDFs on our corporate sites are accessible. As these documents are most often created elsewhere in the organisation and sent to us “ready-to-publish”, educating our organisation on accessibility and providing guidelines for creating accessible documents is essential.

We are now addressing this topic together with Brand to ensure that Vattenfall PowerPoint and Word templates are accessible and providing guidelines on how to achieve best accessibility with the new templates.

MARIA: Getting everyone onboard and prioritising accessibility within the organisation is another challenge. Our collaboration with Brand and NORD DDB is vital in addressing this, as we are focusing on providing support, guidelines and sharing best practices with everyone at Vattenfall. 
 
### Q: Can you share any specific examples of accessibility improvements or changes that were implemented as a result of the testing?

MARIA: So far, we have provided accessibility training for editors, and we are currently working together with Brand with updating PowerPoint and Word document templates for accessibility. Additionally, manual testing is now integrated into our development process. Accessibility improvements that will be implemented on our platform shortly are reading and focus order improvements and allowing users to pause looping videos. 
 
### Q: What advice would you give to other organisations looking to improve the accessibility of their digital platforms based on your experience with this project?

ANNA: I strongly recommend witnessing a live screen reader test session to understand the importance of accessibility firsthand, regardless of your role within the organisation.

MARIA: Designate someone within the organisation to take ownership of accessibility, ensuring it's prioritised and paving the way for an accessible-first approach.

As we explore accessibility and develop our latest guidelines projects, we're interested in hearing from advocates within the Vattenfall organization. First up, we have an interview with Anna Lindberg, Web Content Coordinator at Vattenfall and Maria Sjögren, Business Developer at Comprend. In this interview they describe their process of manual testing for accessibility and share insights from their experiences of exploring this field.  

Accessibility Interview

Our Vattenfall digital design principles are the foundation and guiding lights for everything we create. In this article we explain in detail why they are important.


MicrosoftTeams-image (2)

What are design principles and why are they important?

#### "Design Principles are a set of guiding considerations, that help the team in decision making for any aspect of the brand. From tone of voice, look and feel and site navigation to landing pages, buttons and UX." – Linnéa Lofjord, Creative Director/Head of NORD ID at NORD DDB. ####
 
In other words, design principles can be described as the values that lay the foundation for which direction we are heading in as a brand. They are the core principles that we use as springboards moving forward, and they are what we look to when making sure that we are always on brand, as well as clearly communicating as one brand. 

## The Vattenfall design principles

"The Vattenfall Design Principles are derived from the Vattenfall brand position Leading with Conviction and are direct results of the full Vattenfall Brand Strategy. The Vattenfall brand position is a competent, balanced, confident, and focused leader position. A position that is to be reflected in all aspects of the brand. Vattenfall is clear and focused, and our brand expression is clean and uncluttered." – Linnéa Lofjord, Creative Director/Head of NORD ID at NORD DDB.


### Design principle 1: Focused
We are focused on the message we bring across and the goals that we strive for. We create straightforward and clear user interfaces.

How to implement:
– Create one focal point per screen
– The primary, secondary and tertiary messages must always be clear to the receiver
– Always provide focus when you require attention from the user


### Design principle 2: Competent
We are trustworthy and competent. We create open and proof driven user interfaces.

How to implement:
– Personalise the content based on the context of the users
– Provide the relevant content or data with as few interactions as possible 
– Make it clear to the user what their influence and impact is when it comes to creating a greener, clearer environment


### Design principle 3: Personal
We are relevant and personal. We create a personalised experience, based on meticulous attention to user interaction and data.

How to implement:
– Always substantiate statements with a burden of proof
– Use the minimal number of elements to convey the message
– Each interaction element on the page must contribute to the users’ goals

### Design principle 4: Conversational
To keep our focus on the customer needs we don't inform. Instead, we enable an ongoing conversation with our customers to engage with and activate them. 

How to implement:
– Always be available for users’ questions
– Communicate in a way you would in real life. Ask questions and provide information in a human way
– Give the user continuous feedback by using micro interactions

If you want to bookmark our guiding principles, they are available on the DDS [here](https://digitaldesign.vattenfall.com/designers/design-principles)

Our Vattenfall digital design principles are the foundation and guiding lights for everything we create. In this article we will go through them with you and explain why they are so important to our work.


What are design principles

Explore five key digital trends for 2024 that are shaping the world of digital design and UX. In this article we delve into each trend, discussing their impact on user experience and how they are transforming the digital landscape. 

Large Screen 72 DPI-Vattenfall_Break_Free_Proof_point_Aviation

Digital Trends 2024

The main takeaways from our trend review are that we will continue to see more creative ways to engage users and attract their attention, using guiding elements, creative animations, and interactive design. 

## 1. Micro Interactions 
Micro interactions are small but impactful elements that enhance the overall user experience and help guide users through the things you want them to accomplish. To comply with our design principle, conversational, using micro interactions could be an efficient way to give the user continuous feedback and increase engagement. Here’s an example from Google’s suggested search are great micro interactions helping users to explore the options and use the functionality.
![google_gif (1) (1)](/uploads/google_gif_1_1_573b07c6ab.gif)
 
Source: [UX Bootcamp](https://bootcamp.uxdesign.cc/8-huge-ui-design-trends-to-watch-out-for-in-2024-2026-9f5bd243de2f)
## 2. AI Personalization
In line with our design principle, personal, AI technology is revolutionizing personalized consumer experiences. A recent YouGov survey found that 40% of US consumers anticipate AI being used to deliver personalize online shopping. Fashion site SSEENSE utilizes an AI-driven chatbot to provide tailored shopping recommendations.
![sssense-ai_personalization](/uploads/sssense_ai_personalization_4fcc08b102.jpeg)
Source: [Business of Fashion ](https://www.businessoffashion.com/news/technology/ssense-launches-an-ai-based-personal-styling-chatbot/)
## 3. Calming Design
With the fast-paced digital consumer world the demand for relaxation is increasing. Recently, many companies and creatives have been emphasizing themes that promote mental and emotional well-being. This can include the use of abstract, colorful backgrounds, slow animations, and soothing ASMR sounds. This example from the the non-profit organization Blue Marine Foundation shows how slowness can be worked into the digital design
![calmingdesign](/uploads/calmingdesign_369175d323.mp4)
Source: [Adobe](https://www.adobe.com/content/dam/cct/creativecloud/creative-trends-lp/2024_creativetrends/FY23Q4_CC_Stock_Stock_XY_EN_2024CreativeTrendsGuide_Reduced.pdf)
## 4. Eco Nature Design
As environmental consciousness continues to rise there has been an increase in nature-inspired websites and websites designed with sustainability in mind. For example, earthy color palettes, animations and photos that are more organic, real and authentic. A way to explore this in relation to our the Needscope blue brand could be using authentic elements and transparency to reinforce our competent position.
![econature_design](/uploads/econature_design_91c79861d2.qt)
Source: [Brave People](https://medium.com/brave-people/designing-tomorrow-graphic-design-trends-to-watch-in-2024-562173319097)
## 5. Hyper Realism 
A design style that bridges the divide between physical and digital has been seen in apps, software, and website designs, particularly with 3D elements. Traditionally known as skeuomorphic design, it utilizes drop shadows, rounded corners, and subtle gradients to create a new tactile experience and gives clickable elements a softer and more engaging appearance. While it is not entirely consistent with the Vattenfall brand, it is interesting to observe current trends and gain valuable knowledge from the experiences and practices of others in the industry.
![hyperrealism_apple](/uploads/hyperrealism_apple_35e52f3c7b.jpeg)
Source: [Webflow](https://webflow.com/blog/web-design-trends-2024)

In this article, the colleagues at NORD DDB, our creative agency, share in detail how they use AI to enhance their creative process, streamline their workflows, and develop innovative and groundbreaking creative ideas.

large

AI Tips & Tools

"During the prototyping phase of designing UX experiences, I have tested a remarkable new AI tool called [Dora AI](https://protect-eu.mimecast.com/s/pHGHCDY5kH396kprFL7whp?domain=newslettertogo.com). Dora AI allows me to visualize ideas and features by creating prototypes. One impressive feature of Dora AI is it’s 3D generation tool, which transforms simple text prompts into immersive experiences. This tool has been valuable in exploring new design possibilities, develop more creative concepts and a better understanding how 3D can enhance UX design."
 
**- Gunnur, Head of Digital Strategy**

"As a developer I have been playing around with [GitHub Copilot](https://protect-eu.mimecast.com/s/oZ4cCEZ5RSp7ANyosLsxvt?domain=newslettertogo.com) ,an AI-powered code completion tool developed by GitHub in collaboration with OpenAI. It’s designed to assist programmers by suggesting whole lines or blocks of code as they type. It’s helpful to leverage open-source code and the Codex AI model to predict and generate code snippets. The AI integration has helped my team reducing repetitive coding tasks and providing code examples that help us work faster."
 
**- Jessamine, Full-Stack Developer**

"The past months, I've been using [ChatGPT](https://protect-eu.mimecast.com/s/lId1CGYj6HA7yQnZFLYc4g?domain=newslettertogo.com) to deepen my research process and explore behavioral patterns and different perspectives to craft better UX insights. ChatGPT has also played a key role in writing copy to spark my creativity, develop angles, and unblock writer's block when that kicks in. faster."
 
**- Lydia, Service Design and Strategy Lead**

"In my role as Project Manager, I've started using [Notion](https://protect-eu.mimecast.com/s/YGXvCJYm6HKJ4DOLhW8eKI?domain=newslettertogo.com) to summarise and structure notes taken from meetings, presentations, or courses into shorter and more digestible copy, highlighting the relevant parts and identifying actions. I find that it greatly speeds up the process of being able to prepare material for the team and help me get more organised, especially when time is short."
 
**-Hillevi, Head of Digital Operations and Project Manager**

For guidance on how to use AI tools in your work, take a look at [Vattenfall's user policy for generative AI](https://protect-eu.mimecast.com/s/sRDtCKYnrH4oAGKxSVc1J5?domain=newslettertogo.com). Another valuable resource is to familiarize yourself with the [EU's new regulation for AI](https://protect-eu.mimecast.com/s/sMZyCLYo9HQWoZqMIygi8C?domain=newslettertogo.com) and how it may impact our work.

In this article, the colleagues at NORD DDB, our creative agency, share in detail how they use AI to enhance their creative process, streamline their workflows, and develop innovative and groundbreaking creative ideas. We hope that these recommendations and examples of usage will not only inspire you, but also provide you with a deeper understanding of the potential AI tools have in transforming productivity and unleashing your team’s creativity. 

As part of the new Data Visualisation guidelines an audit of suitable Javascript libraries (both Open Source and licensed), was completed. Below is a summary of how each tool scored in each category as well as a separate section for each with pros and cons. 

article_javascript-chart-library_audit_v2

Javascript Chart Library audit

When selecting a tool to implement it is important to ensure it can cater for the customisation required to give the charts the needed look and feel of the Vattenfall brand assets as well as meeting recommendations from a service design perspective, i.e. giving the user a high quality user experience.
### Chart Library Comparison
![Skärmavbild 2024-02-01 kl. 13.47 1](/uploads/Skaermavbild_2024_02_01_kl_13_47_1_eddb8853fc.png)
#### Grading
3 - Highest score (Built-in feature), 2 - Possible, 1 - Possible but needs a lot of configuration, 0 - Not possible at all
### Summary
All tools reviewed received quite a high overall score but there are some differences in pricing and customisation or certain UI-elements to consider when selecting the final tool.

Chart.js, Google Chart and eCharts came out top because of their ease of usage when it comes to customisation and pricing, however the other tools could also be considered if they better meet your local requirements.

For further details about each tool, see the section for each below.

## Library audit details: Pros & Cons:
<details>
 <summary>eCharts</summary>

### Pros
#### Versatility
ECharts supports a variety of chart types, including line charts, bar charts, scatter plots, pie charts, and more. This versatility makes it suitable for a broad range of data visualisation needs.

#### Rich Features
ECharts comes with a rich set of features, including zooming, data sorting, data filtering, and real-time updates. These features enhance the interactivity and usability of the charts.

#### Beautiful Visualisations
ECharts is known for producing visually appealing and aesthetically pleasing charts, making it suitable for applications where the aesthetic presentation of data is crucial.

#### Responsive Design
The library supports responsive design, ensuring that charts adapt well to different screen sizes and devices.

#### Animation Support
ECharts provides built-in animation support, allowing developers to create dynamic and engaging chart visualisations.

#### Large Community and Documentation
ECharts has a growing community of users and contributors, and its documentation is comprehensive. The community support ensures that developers can find assistance and resources easily.

#### Open Source
ECharts is an open-source library, making it freely available for use, modification, and distribution. This open nature encourages collaboration and adoption.


### Cons

#### Learning Curve
While ECharts is well-documented, it has a steeper learning curve for beginners, especially those new to data visualisation libraries. This learning curve is generally less steep than libraries like D3.js but may still be a consideration.

#### Customizsation Complexity
Achieving highly customised visualisations may require a deep understanding of ECharts and it’s configuration options. Customisation can be complex for users who are not familiar with the library.

#### Smaller Ecosystem
Compared to some other chart libraries, ECharts has a smaller ecosystem of plugins and extensions. This may limit the availability of specific functionalities or features.

#### Documentation Updates
Some users have reported that documentation updates may not always keep pace with new features or changes in the library. This could potentially lead to confusion for developers relying heavily on the documentation.

<a class='vf-link--with-arrow' href='https://echarts.apache.org/en/index.html' target='_blank'>eCharts</a>

</details>
<details>
 <summary>Google Charts</summary>

### Pros

#### Ease of Use
Google Charts is known for its simplicity and ease of use. The library is designed to be beginner-friendly, making it accessible for developers who may not have extensive experience with data visualisation.

#### Wide Range of Chart Types
Google Charts supports a variety of chart types, including line charts, bar charts, pie charts, area charts, and more. This versatility allows developers to choose the most suitable chart type for their data.

#### Integration with Google Services
Google Charts seamlessly integrates with other Google services, such as Google Sheets and Google Drive. This makes it easy to import data directly from these services and keep visualisations up-to-date.

#### Automatic Visualization Recommendations
Google Charts can automatically recommend chart types based on the data, making it helpful for users who may not be familiar with the best chart type for their specific dataset.

#### Responsive Design
Charts created with Google Charts are responsive by default, ensuring a good user experience on different devices and screen sizes.

#### Community and Documentation
While the community might not be as extensive as some other libraries, Google Charts has sufficient documentation and support resources. The library is widely used, and there are forums where developers can seek help.

#### Hosted Library
Google Charts is hosted by Google, which means users can include it in their projects by referencing the library directly from Google's servers. This reduces the need for local file storage and improves loading times.


### Cons

#### Limited Customisation
While Google Charts is easy to use, it may not offer the same level of customisation as some other libraries like D3.js or Highcharts. If your project requires highly specialised or unique visualisations, this could be a limitation.

#### Styling Challenges
Achieving specific styling or design choices in Google Charts may be challenging, especially for users who want precise control over the appearance of every chart element.

#### Dependence on External Servers
Google Charts relies on external servers hosted by Google. In some cases, this may be a disadvantage for projects with strict security or privacy requirements.

#### Limited Advanced Features
For complex and advanced visualisations, Google Charts may lack some of the advanced features provided by other libraries. It is more suitable for simpler user cases.

#### Dependency on updates
The library's features and updates depend on Google's development schedule. Users have limited control over when new features or bug fixes are implemented.

<a class='vf-link--with-arrow' href='https://developers-dot-devsite-v2-prod.appspot.com/chart/interactive/docs/gallery/' target='_blank'>Google Charts</a>
</details>
<details>
 <summary>Chart.js</summary>

### Pros

#### Ease of Use
Chart.js is known for its simplicity and ease of use. It has a relatively low learning curve, making it accessible for developers, especially those new to data visualisation.

#### Responsive Design
Similar to Highcharts, Chart.js charts are responsive by default, ensuring that they adapt well to different screen sizes and devices.

#### Lightweight
Chart.js is a lightweight library, making it a good choice for projects where minimizing file size is a priority.

#### Versatility
It supports a variety of chart types, including line, bar, radar, doughnut, and more. This versatility allows developers to choose the most appropriate chart type for their data.

#### Community and Support
Chart.js has an active and growing community. The library is well-documented, and there are numerous tutorials and examples available online, making it easier for developers to find help and resources.

#### Animated Transitions
Chart.js provides built-in animations for chart transitions, enhancing the visual appeal of charts and improving the overall user experience.

#### Integration with Other Libraries
Chart.js can be easily integrated with other JavaScript libraries or frameworks, making it versatile for different development environments.


### Cons

#### Limited Chart Types
While Chart.js supports a variety of chart types, it currently doesn’t have the same extensive range as some other libraries like Highcharts or D3.js. If your project requires highly specialized charts, this may therefore be a limitation.

#### Customisation Complexity
While Chart.js is easy to use for basic charts, achieving complex or highly customised visualisations may require more effort and understanding of the library's options.

#### Limited 3D Support
Similar to Highcharts, Chart.js does not provide extensive support for advanced 3D charts. If your project requires complex 3D visualisations, other libraries may be more suitable.

#### Performance for Large Datasets
Chart.js may face performance issues when dealing with extremely large datasets or when rendering complex charts. This could be a consideration for projects with specific performance requirements.

<a class='vf-link--with-arrow' href='https://prototypes-charts.vercel.app/' target='_blank'>Chart.js</a>
</details>
<details>
 <summary>Highcharts</summary>

### Pros

#### Rich and Interactive Charts
Highcharts provides a wide variety of chart types and options, allowing you to create highly interactive and visually appealing charts for better data visualisation.

#### Cross-Browser Compatibility
Highcharts is designed to work seamlessly across different browsers, ensuring a consistent user experience for your audience.

#### Responsive Design
The charts created with Highcharts are responsive by default, making them adapt well to different screen sizes and devices.

#### Wide Browser and Device Support
Highcharts supports a wide range of browsers and devices, making it versatile for web development.

#### API Documentation
Highcharts has comprehensive and well-documented APIs, making it easier for developers to understand and use the library effectively..

#### Community and Support
Highcharts has a large and active community, which means you can find plenty of resources, tutorials, and forums for support and problem-solving.

#### Plugin Support
Highcharts supports various plugins and extensions, allowing developers to extend the functionality of the library as needed.

#### Exporting Options
Highcharts provides built-in functionality for exporting charts in various formats, such as PNG, JPEG, PDF, or SVG.


### Cons

#### License Costs
While Highcharts is free for non-commercial use, a commercial license is required for most business applications. This can be a drawback for small businesses or projects with budget constraints.

#### Learning Curve
Despite having comprehensive documentation, Highcharts may have a steeper learning curve for beginners, especially those new to JavaScript or data visualisation.

#### Customization Complexity
While Highcharts offers extensive customisation options, achieving highly customised charts may require a deep understanding of the library, and some advanced configurations can be complex.

#### Limited 3D Support
Highcharts offers some 3D chart options, but the library may not be the best choice if you require advanced 3D chart visualisations.

#### Performance for large Datasets
While Highcharts generally performs well for most user cases, extremely large datasets or complex charts might experience some performance issues.

<a class='vf-link--with-arrow' href='www.highcharts.com' target='_blank'>Highcharts</a>
</details>
<details>
 <summary>D3.js</summary>

### Pros

#### Flexibility and Customisation
D3.js provides a high level of flexibility, allowing users to create a wide range of custom and complex visualisations. It’s possible to have fine-grained control over the appearance and behavior of every element in the visualisation.

#### Wide Range of Chart Types
D3.js does not limit you to a specific set of chart types. It’s possible to create virtually any type of visualisation, including bar charts, line charts, scatter plots, hierarchical visualisations, and more.

#### Data-Driven Approach
D3.js follows a data-driven approach, meaning the visual representation of data is directly tied to the underlying dataset. This makes it easier to update and synchronise the visualisation with changes in the data.

#### Community and Documentation
D3.js has a large and active community. The documentation is comprehensive, and there are many examples and tutorials available, making it easier for developers to learn and implement.

#### Integration with Other Libraries
D3.js can be integrated with other JavaScript libraries and frameworks, allowing users to combine its powerful data visualisation capabilities with other functionalities.

#### Open Source
D3.js is open source, which means it's free to use, modify, and contribute to. This openness encourages collaboration and sharing within the development community.


### Cons

#### Learning Curve
D3.js has a steeper learning curve compared to some other chart libraries. It requires a good understanding of JavaScript, SVG, and the Document Object Model (DOM). This may make it less suitable for beginners or projects with tight deadlines.

#### Verbose Syntax
The syntax of D3.js can be verbose, especially for beginners. While this allows for a high level of customisation, it may result in longer and more complex code.

#### Performance for Large Datasets
While D3.js is powerful, it may not be as performant as some other libraries for certain use cases, especially when dealing with large datasets. Proper optimisation practices are necessary to ensure good performance.

#### Limited Built-In Interactivity
D3.js provides building blocks for interactivity, but implementing complex interactive features may require more effort compared to libraries that come with built-in interactive functionalities.

#### Chart Building Time
Creating a basic chart in D3.js may take more time and lines of code compared to other chart libraries, especially for simple visualisations.

<a class='vf-link--with-arrow' href='https://d3js.org/' target='_blank'>Highcharts</a>
</details>

As part of the new Data Visualisation guidelines an audit of suitable Javascript libraries (both Open Source and licensed), was completed. Below is a summary of how each tool scored in each category as well as a separate section for each with pros and cons.

To help improve your design processes and implement more efficient ways of working, we have compiled the latest features from Figma launched at their conference, Config 2023, just before summer. These updates are built to help design and developer teams save time and have more organized workflows.

Artikelbild

Back to Work: New Figma Features

## 1. Dev Mode (see header image for visual reference)
Figma has recently launched a new feature called Dev Mode, which aims to make developers more comfortable using Figma. Dev Mode provides a workspace where developers can quickly translate designs into code. It also allows developers to connect to plug-ins such as Jira, GitHub, and Storybook, and track what is needed to go to production more easily. Dev Mode is currently in beta and is free for everyone to use until 2023.

## 2. Improved File Browser 
For those using Figma through the file browser you can now more easily share files tabs and project tabs to make it easier to navigate between your different projects. You don’t need to switch spaces anymore as you can search and see recent notifications within the whole space.

## 3. New Auto Layout
With the latest auto layout updates, users can save a lot of time designing by wrapping content in components. Try defining minimum and maximum widths and heights for auto layout containers to ensure consistent component sizes that meet your design requirements.


![Gifme](/uploads/Gifme_a1ad7a2ee7.gif)
Watch how auto layout is used in practice, with the button components in our Figma kit.

<a href="https://www.figma.com/file/vE0mDJSi4Xd2HowWrhuicW/Vattenfall-Design-Kit?type=design&node-id=0-1&mode=design&t=NtPTelHfJsR4H9im-0" class="vf-button vf-button__outline--secondary back-button">Try out the features in our Figma Kit</a>

A popular topic at the conference was tokenized design systems and how they contribute to better team efficiency and design consistency. The emphasis sheds light on the direction Figma is taking, and it helped us consider how we can remain relevant and grow the Vattenfall Digital Design System. 
Right now, our Figma UI kit isn't set up for a tokenized design system, but after learning more about it we will look into how we can improve our design system and which developments will be relevant for the teams at Vattenfall. <a href="mailto:dds@se.nordddb.com">We would love to hear your thoughts</a>. 
 
 
If you want to deep dive into tokens and the future of design systems, make sure to read this long-read article written by Figma.
 
 
<a href="https://www.figma.com/blog/the-future-of-design-systems-is-semantic/" class="vf-button vf-button__outline--secondary back-button">Read The Future of Design Systems</a>
 
Not only did the Config 2023 conference launch several new features, but the conference also shared talks covering everything from accessibility, content design to AI and prototyping.
Watch and learn from these forward-thinking speakers:


#### Figma like the pros
 

<iframe width="560" height="315" src="https://www.youtube.com/embed/AL8L9SCgx9M?si=WvtNP3g38OC0kzpz" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
 
 
 

#### Putting accessibility at the heart of design and code
 

<iframe width="560" height="315" src="https://www.youtube.com/embed/1coh6DZrfyw?si=XQMfSOcFQ39GAGDK" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

Get new ideas and inspiration on UX design, creativity, innovation and design with our hand-picked selection of articles, books, and podcasts for the summer.

01_Herobild

Summer Ideas & Inspiration

Before we wrap up our work and take a well-deserved summer break, the DDS team would like to share this year's carefully curated list of summer inspiration.
We have compiled a collection of podcasts, articles, and books that are guaranteed to spark fresh ideas, provide unique perspectives, and encourage a renewed mindset during your summer break.

Summer article 2023

With our newly released DDS version 14 we have introduced a new way to initialize javascript to better accommodate new and modern code frameworks

Woman working in office

Initializing JavaScript with DDS version 0.14

With our newly released DDS version 14 we have introduced a new way to initialize JavaScript to better accommodate new and modern code frameworks.

Version 0.14 Dev Article

Siri Wallentén share here insights on how UX design support a strong brand experience and her valuable learnings from working in cross-functional projects at Vattenfall.

Siri

Interview: Vattenfall UX designer Siri Wallentén

# Tell me about your role and what you do:
I'm a UX designer and UX researcher at Vattenfall. My job is to improve the customer experience for each project I work on. This involves analyzing customer insights, conducting interviews, and working on UI design and the design system. I also help build new modules and flows that contribute to a better customer experience.
 
# What drove you to choose UX design as your career?
I value the opportunity to collaborate closely with end users and gain a deep understanding of their challenges and needs. I approach design with a visual mindset to solve problems and challenges. It's a creative and social role, which suits me perfectly!
 
# In your opinion, how can UX design help support a strong brand experience for Vattenfall online?
Currently, we tend to be more "feature-driven", with teams working independently on their respective projects, rather than considering the entire customer experience. As the energy market continues to rapidly evolve, it's important that those closest to the customers drive strategic work and participate in decision-making. While the desire to improve is there, we could benefit from a centralized UX strategy to unify the customer experience across several digital touchpoints. Let's work together to create a better digital brand experience for our valued customers!
 
# Have you collaborated with other teams on any projects while working at Vattenfall?
Recently, I've been working on Project Nord - a cross-functional digital project that aims to update the common pages of the corporate website such as customer service and our services. It has been a great opportunity for developers, UX designers, and editors to collaborate more closely. Whatever the outcome of this collaboration, I think it's really positive that we're starting to work more across different teams. This will help ensure that the customer experience is consistent and cohesive throughout the digital channels and touchpoints. 
 
# What have you learned from working on that project?
This has been a great learning experience. I now have a better understanding of the challenges Vattenfall faces organizationally and how they impact our design processes. I also realize the importance of making design choices based on strategy and doing a good job from the start, rather than just fixing the most immediate problem.
 
# Do you have any exciting projects coming up that you're looking forward to?
Yes. By 2025, the EU will have a new regulation about accessibility that Vattenfall must follow. My hope is that we will be able to run a project in good time to review Vattenfall's web accessibility. There is currently no overall strategy or guidelines for developers, designers, testers or editors for how we work with accessibility at Vattenfall. Since Vattenfall is a big company, many people with different needs will use our website. I believe this presents a great opportunity for Vattenfall to be at the forefront of web accessibility.
 
 
Thanks for sharing Siri! Accessibility is already on our agenda for DDS developments and we are looking forward to exploring this approach further later this year.

In this interview, DDS editor Lydia Kellam speaks with Siri Wallenten, UX designer at Web & Digital Solutions Vattenfall IT about her insights on how UX design can support a strong brand experience for Vattenfall and her valuable learnings from working in cross-functional projects to create consistent customer experiences.

Here is our first tutorial angled at Developers at the DDS!

A_Angular_article_image_light_16_9

Using the DDS in an Angular app

Are you a developer working in Angular or interested in learning more how to implement our assets in this code framework? In that case this article is for you and should hopefully help you to quickly being able to implement the DDS components specifically in this framework. If you have any comments when you’re done reading please reach out to us [here](https://digitaldesign.vattenfall.com/contact)

Using the DDS in an Angular App

We have gathered current UX and UI trends to bring new perspectives and inspiration to help you create digital experiences that engage and entertain. 

MicrosoftTeams-image (59)

Outlook: UX & UI Trends 2023 

# Animated Scroll 
This interactive feature has been popping up lately, used among websites in different industries to engage and create a dynamic flow for the users. An animated scroll activates the user and evokes curiosity and engagement as the user browses the site. It’s an effective and creative way to grab attention, keep the user engaged, and guide them to complete a specific task. See the live [example](https://www.ju.st/learn).
 
![dfgsdfgf_1](/uploads/dfgsdfgf_1_915a5806f0.qt)
# Micro Interactions 
The goal of micro-interaction is to delight the user and create moments throughout the user experiences that are surprising, entertaining, and sometimes unexpected. Micro-interactions guide users through what you want them to accomplish and help them complete a task. See the live [example](https://alef-estate.com/en/).
 
![micro](/uploads/micro_42bb1e8ee0.gif)
# Conversational 
When it comes to enhancing digital customer experiences, personalization plays a significant role. More and more brands are adding a human touch to their digital touchpoints by making the UX more warm and welcoming to boost interactions and customer satisfaction. 
 
![Skärmavbild 2023-02-15 kl. 15.46.44](/uploads/Skaermavbild_2023_02_15_kl_15_46_44_c834c44e56.png)
# Data Storytelling 
Data storytelling is about making data more user-centric and turning complex ideas into easy understand format that your audience can understand and relate to. Using data to tell a story provides an opportunity to be an educational storyteller and communicate and build trust differently. See the live [example](https://ridecake.com/en-SE/p/aik-work).
 
![cake_short_large](/uploads/cake_short_large_9011b1fa93.gif)
# Sustainable Web 
There are ways we can impact the environment in how we design and code. Optimizing images to reduce file size and improve site navigation to make it easy to find information will impact how much time users spend on your site and use electricity. Offering dark mode options can also be a clever way to reduce energy consumption online. For more resources on the sustainable web, find out more [here](https://the-sustainable.dev/).

Keeping track of trends is not just about getting fresh perspectives; it’s about exploring new ways of working and designing digital experiences that engage and entertain.  
In this article we are sharing current UX and UI trends that follow best practices, introduce new directions and meet customer expectations.

Outlook: UX & UI Trends 2023

Research shows that consistency within typeface and font usage make an impact when creating an engaging digital brand experience.    


Typo2

Brand consistency and the impact of Vattenfall Hall

Research shows that consistency within typeface and font usage make an impact when creating an engaging digital brand experience. 

Brand consistency

As summer vacation draws near, we have searched the internet to help keep you inspired and energized during the summer months.


header-01

Summer Content: Ideas & Inspiration

Our curated list includes fun games, communities, video talks, podcasts, and digital initiatives deep diving in UI design, NFTs, UX, team building, design systems, tech development and more. 
 
 
## DailyUi
![image 1](/uploads/image_1_c12c27f900.png)

A fun way to improve your design skills is exploring DailyUi - A free newsletter course sharing design challenges to practice your skills. 
Click [here](https://www.dailyui.co/) to sign up for the course 
 
 
## Figma Ninja
![image 3](/uploads/image_3_6fad3ec955.png)

Are you looking for a fun way to learn Figma? Try Figma Ninja - a fun interactive game to navigate design software and learn the shortcuts to make Figma even smarter. Click [here](https://www.figma.com/community/file/769694576496801916?preview=fullscreen) to try it out
 
 
## Config22
![image 2](/uploads/image_2_73ae5a67ca.png)

The design tool Figma organized a virtual tech conference earlier this year sharing new perspectives and ideas in a variety of interesting topics such as user research, team building, UX copy and product innovation. All talks from the conference are available 
[here](https://www.youtube.com/playlist?list=PLXDU_eVOJTx4EuiHlITE44wngcErxom6S)
 
 
## NFTs Explained
![Skärmavbild 2022-06-20 kl. 16.53.46](/uploads/Skaermavbild_2022_06_20_kl_16_53_46_df114dec22.jpeg)

NFT has been on everyones lips this year, are you still unsure what NFTs are and how they are made? This great TED Talk covers the basics of NFT and offers introduction to the world of meta verse. [Watch it here](https://www.ted.com/talks/elizabeth_strickler_nfts_the_metaverse_and_the_future_of_digital_art)
 
 
## Can’t Unsee
![image 4](/uploads/image_4_1248afa9f2.png)

If you’re passionate about details, Can’t Unsee is going to be something for you. This interactive digital game challenges you to spot pixel perfect design and improve your skills as a designer. Click on the [link](https://cantunsee.space/ ) to try it out
 
 
## DesignSlack
![image 5](/uploads/image_5_9a9606a50f.png)

Summer is not just about relaxing, it’s also about meeting new people and connections. If you are looking for a new designer friend, consider joining a designer community on Slack. This site lists a wide selection of designer communities worldwide where you can meet, learn and connect with fellow designers, developers, project managers and strategists. Click [here](https://www.designerslack.community/) to join a designer community
 
 
## How I built this
![Call center](/uploads/Call_center_18fafb7498.png)

Curious about innovation, product strategy and entrepreneurship? How I build this is an inspiring podcast following the footsteps of some of the most talented entrepreneurs and innovators to learn about the mistakes and learnings they made in their journey. The podcast is perfect for learning about which ideas get stuck and what makes businesses grow. Listen [here](https://open.spotify.com/show/6E709HRH7XaiZrMfgtNCun)
 
 
## By The Books
![Books magazines](/uploads/Books_magazines_79fa00a776.png)

Is your goal to escape the screens this summer and read more books? MailChimps beautifully designed site offers a delightful way to explore new books to add to your must read lists. 
Explore it [here](https://mailchimp.com/presents/by-the-books/)
 
 
## This Too Shall Grow
![Doing good](/uploads/Doing_good_8ade4e561f.png)

When you are done with your digital detox or tired of books this site offers ways to use tech more mindfully and explore the worlds of digital wellness and how it impacts our work. Lots of interesting perspectives [here](https://thistooshallgrow.com/ )!

As summer vacation draws near, we have searched the internet to help keep you inspired and energized during the summer months.  


Summer content

Emma Crépin and Linnea Lofjord share behind the scenes of creating a new site concept that offers a whole new customer journey for Vattenfall. 

VF_FutureVision_sketch

Behind the scenes: Meet Linnéa and Emma

### Hi Emma and Linnéa, tell us a bit about yourselves. What do you do and what were your roles during this project?

**Emma:** I work at Vattenfall Sales as Market manager for our product positioning communication. That includes our electricity contracts for Private and Small and to some extent, solar panels.
The mission for our team is to be the link between the brand, brand activities on a Group level all the way down to Sales and Marketing level for Sweden and Finland. 

**Linnéa:** I work at NORD ID, NORD DDB’s branding studio, and I was the Creative Director during this project. It means that my role was to lead this project creatively, strategically and creatively. 

![Emma2](/uploads/Emma2_81c2809350.png)

**Emma Crépin, Market manager at Vattenfall Sales**

### Tell us about the background for this project.

**Emma:** The background for this project is that while we did something of a refresh of the site when we launched the new brand in 2018, it was mainly an update of the design. Now we needed to create an update where we really explored how we could utilise the brand in a much larger degree online. To create a better and more pleasant brand experience for our customers – throughout the entire customer journey. 

### What was your work process for this project?

**Linnéa:** We decided to approach this project in a different way than one usually does. We didn’t want to begin by looking at the technical prerequisites and potential roadblocks such as technical aspects. Instead, we put the brand perspective first. 

We asked ourselves what should the site look like? What should the visitor journey look like? How do we make sure that Fossil free living within one generation is with us, every step of the way? Through the language, the tone and through every part of the site. So that the visitor is continuously validated when it comes to recognizing the brand.  

With this in mind, we restructured the entire customer journey. Both the presentation of offers and products needed to be clearer and more customized so that the potential customers got a clear, inspiring and easy choice to make. 

![Linnea2](/uploads/Linnea2_94641f37a9.png)

**Linnéa Lofjord, Creative director/Head of NORD ID at NORD DDB**

### How did the teams collaborate on a cross functional level?

**Emma:** Our team consists of people from many different disciplines. From digital development, to CX, web development and brand positioning. This meant that there was a need for a cross functional process very early on. It worked really well and we learned some good lessons and insights along the way. 

**Linnéa:** It has worked great. I must say that from my perspective, working cross functionally has been ultimate in every way. I believe the reason for it working as well as it has is that it has been an open process throughout. That we have all worked towards a shared vision, where we have had the final idea of “this is the amazing final result that we could end up with” to inspire our way forward. 

### How do you address brand consistency when designing digital products?

**Emma:** Good question! First and foremost, we all need to be in agreeance of what brand consistency means. What does it really mean in our case? And not just when it comes to for example, what should an icon look like, but what are our guiding principles? 

Having had guiding principles that have shaped the processes is something that we are continuing to work with. The fact that we do not just have a lead, a person, but working with a guiding design principle. This has helped our entire process. 

**Linnéa:** To me, brand consistency in the digital world is the same as in the physical world. One needs to be reaffirmed and validated when it comes to brand experience, through the entire journey and process. This needs to be done through user journey, the visual, the tonality, everything connected to the brand. We have to make sure that look and brand is consistent in all channels, or else that validation is lost. 

### In your opinion, why is brand consistency so important?

**Emma:** It simplifies everything. If you think about it purely from a pragmatic perspective, then knowing how we should speak simplifies our work. We always have new ideas and new ways to communicate to our customers, but if we know in which way to do it, it helps tremendously. So, knowing what we are and what we are not makes our process easier. 

**Linnéa:** For the simple reason that there are so many channels in which brands are seen today. That means a brand needs to be extremely clear when it comes to tonality, the visual and the offer because if not, your investment in media purchases will go to waste. The reason for that? You will not have a clear sender. 

Having good brand consistency is like being a great social butterfly. You know how to adapt to different scenes and settings, but you never forget who you are at the core so that always shines through. To be clear with who you are as a brand wherever you are, even when you need to adapt to a new setting. 

### Thank you!


If you have visited Vattenfall.se recently, you have probably noticed some changes. For almost a year, a team of designers, developers and content producers, have worked at creating a new site concept that offers a whole new customer journey where we make sure visitors get the best possible experience. We spoke to two key members from the team behind the new site about their work and the process behind the update.

Behind the scenes

For our DDS community, we have gathered a list of free tools for UX designers, digital designers, developers and product owners.


Large Screen 72 DPI-Vattenfall_ski_team_pitztal_training_slope_photo_klas_rockberg_2020 1

Digital tools to improve design work

For our DDS community, we have gathered a list of free tools for UX designers, digital designers, developers and product owners to explore new ways of working, get inspired, and boost productivity. We hope you find a new favorite to add to your toolbox.


It’s the time of the year when industry experts and trend analytics worldwide put their heads together to scope the patterns and implications of our industry. 

trend 4 image

Digital & Design Trends 2022

By looking into the innovations, cultural shifts and behaviours of people and businesses, we can get a better outlook to help uncover new ideas and new thinking.

A quick stop on Google will show you that the trend reports and insights are many. To help you navigate all the information, we’ve done the work for you and gathered a couple of our favourite trends that we think will impact the design and digital industry this year.

## Trend #1: Hybrid Worlds
![WR glasses on table](/uploads/bild_0_faba733607.jpeg)

It’s almost impossible to read a trend report today and not stumble upon the Metaverse. But what is it exactly? Let’s try to put in a simple context. Metaverse is the enablement of tech elements such as VR, AR, social shopping, and cryptocurrency in the digital and physical world. This means that we can explore a virtual reality world where users can interact, game and experience things as they would in the real world. The Metaverse offers a way to blur the line between your interactions online and in real life. In the past months we have seen brands within fashion, entertainment and gaming exploring new and innovative ways to connect with consumers. Expect to see a lot more of this in 2022.

[Learn more about the Metaverse in Wired.](https://www.wired.com/story/what-is-the-metaverse/)

## Trend #2:  The Darker Side
![Led lights on wall; red, green, blue, purple](/uploads/bild_1_485f8a8262.jpeg)

One thing we expect to see more of this year is the digital experience going dark. According to Hubspot 8 in 10 users prefer dark mode when available, a quite significant number of people. The reason why many choose dark mode is that it creates a more soothing experience for the eyes. It also saves battery life and makes content more legible. If you are thinking about how to create more user-friendly digital experiences, consider dark mode features and design for your site. We believe that this is a trend to keep our eyes on and consider its relevance for Vattenfall.

[Here are some tips to get started.](https://email.uplers.com/infographics/dark-mode-in-emails/)

## Trend #3: Playfulness
![Circle on corner of wall and floor](/uploads/bild_2_951102fe1a.jpeg)

In a world with a lot of uncertainty and crisis designers turn to playfulness to bring light to their work. With less focus on photography-centered designs experts predict that we will see visual effects like gradient, grain and lines, more innovative animation and typography used in unexpected ways. As Vattenfall is a blue brand, it’s good to remember that not all trends are necessarily relevant to us, but nonetheless, it’s important to stay on top of the latest when it comes to design.

[Explore how here.](https://webflow.com/blog/web-design-trends-2022)

## Trend #4: Retro Love
![Computer on table](/uploads/trend_4_image_06153fc3d0.jpeg)

If you have scrolled through Instagram in the past year, you have most likely seen 90s inspired designs and styles. The rise of retro has been seen in various digital outlets and social media channels, and trend experts predict it to influence the design world even more this year. Why the fascination for nostalgia? Trend experts say that during crisis we tend to look back and long for simpler times.

[Spotted in article “7 Design Trends for 2022” by Newsaktuell.](https://www.newsaktuell.com/blog/7-design-trends-for-2022/) 

## Trend #5: Universal Design
![Yellow Lego figures standing side by side](/uploads/bild_4_fe5cf94d74.jpeg)

Not so much a trend but more of a necessity, but since we still have a long way to go, the subject of inclusive design has been brought up in several recent trend reports. Industry articles and teams have predicted that more efforts will be invested in inclusive design during 2022. For designers and developers, this means designing for human diversity, regardless of needs, limitations, gender, or culture.

[Read more in this article by Mailchimp & Courier Magazine.](https://mailchimp.com/courier/article/universal-design/ )


It’s the time of the year when industry experts and trend analytics worldwide put their heads (and viewpoints) together to scope the patterns and implications of our industry.

Digital Trends 2022

The 2021 Q3 Design software, code framework and CMS audit results are in! Read our full report and findings.   

Vattenfall_Customer_Coworkers_Computor

2021 Q3 Tech Audit results

To read the full report of the audit background, approach and findings download the file now.

 [Download here](https://sendfiles-eu.omnicomgroup.com/link/zA0FM7zTFkeGaenhvSdtzH) 

The 2021 Q3 Design software, code framework and CMS audit results are in!

Tech Audit 2021

To set the DDS up for long-term success and create a helpful resource, we want to involve you as well as other users and stakeholders as much as possible in the workflow.

article_05_large

Bring your expertise to the table!

We’re happy to have you here! Please let anyone who can benefit from Digital Design News know that they can get on the list by e-mailing [branding@vattenfall.com](mailto:branding@vattenfall.com).

**While global brand** consistency is important, it’s also important to acknowledge your local needs in different markets. To set the DDS up for long-term success and create a helpful resource, we want to involve you as well as other users and stakeholders as much as possible in the workflow. The goal is to achieve a living toolbox where we take varying needs into account, support collaboration, and engage in shared activities. Therefore, we would love your feedback, requirements and/or questions on what would help you most. Please take a couple of minutes to complete our short survey. Thanks!

Bring your expertise

Learn how to optimize conversion through motion and social media is an effective way to make your marketing more fruitful without raising marketing spend.

article_03_large

Conversion rate optimisation in action

## Social Media
Our social media platforms are amongst our most important communication channels, and a consistent brand expression through all of them is key to gaining instant brand recognition. Within Vattenfall, there are many owners and publishers in social media, equally many external partners who contribute. In social media, we are never more than a scroll away from seeing multiple posts and messages from our brand and we want them to look and feel the same. To avoid a potential risk of inconsistent executions, we should all use the right templates.

## Video & Motion
A lot of Vattenfall’s storytelling is done through video with the support of other motion elements. Motion ID is how we translate the Vattenfall identity into everything that is moving – imagery, icons, infographics, film footage, and how these are blended, mixed, and edited together with other assets to create a singular feel for the brand. This ensures that we emphasise the same emotional response around who we want to be.

As you know, the Vattenfall Brand Toolbox is the place to go to for brand guidance. Here are some interesting reads, great examples, visual specifications and formats, ready-made downloads, and more.

[More on Social Media](https://brandtoolbox.vattenfall.com/Styleguide/brandtwo/#page/74426E96-DCEB-484C-9FDA18F9E4147D0B)

[Latest templates for Social Media](https://brandtoolbox.vattenfall.com/Styleguide/brandfour/#page/5BEEE934-E9EB-4BFF-99D544AA243F46D4)

[More on Video & Motion](https://brandtoolbox.vattenfall.com/Styleguide/brandtwo/#page/70DBC29E-9802-4DDD-9937424FDCB53C25)

### Spread the word
We’re happy to have you here! Please let anyone who can benefit from Digital Design News know that they can get on the list by e-mailing [branding@vattenfall.com](mailto:branding@vattenfall.com).




**Optimising conversion through** motion and social media is an effective way to make your marketing more fruitful without raising marketing spend. Being a fast-moving medium with very little patience or viewing time, we need to balance and prioritise between message (clarity) and sender (identification).

Conversion rate

The decision to build our own digital design system was based on the realization that meeting specific organizational needs is required to achieve economies of scale.

article_01_small

Boosting returns through brand consistency

### Onwards and upwards in phases

Enhancements and new features to the DDS are conducted in a systematic phased approach and updates are released continuously in batches. The new design system will be taken beyond Sketch and Abstract to work for everyone.

### A collaborative approach
While global brand consistency is important, it’s also important to acknowledge local needs in different markets. We’re working on a list of requirements and would love feedback and/or questions from all users on what would help them most to make this a truly collaborative Design System. Thank you for your input!


## Accordion below:
<details>
 <summary>Scelerisque cras ut aliquam facilisis et sed?</summary>

## h2
### h3
#### h4
 Suscipit justo libero aliquam amet consequat consequat duis fames interdum. Sollicitudin sed sagittis sagittis pharetra nibh accumsan in. At amet egestas nunc arcu fusce consectetur tincidunt sit pellentesque. Mollis dui eget id non. Neque cursus dui.
</details>
<details>
 <summary>Scelerisque cras ut aliquam facilisis et sed?</summary>

 Suscipit justo libero aliquam amet consequat consequat duis fames interdum. Sollicitudin sed sagittis sagittis pharetra nibh accumsan in. At amet egestas nunc arcu fusce consectetur tincidunt sit pellentesque. Mollis dui eget id non. Neque cursus dui.
</details>

The decision to build our own DDS was based on the realization that meeting specific organizational needs is required to achieve economies of scale. Our internal review and the very valuable user feedback we've received so far form the basis for our mission to create a better system and user experience going forward. Furthermore, building our own DDS enables us to support regional initiatives whilst retaining control over the development roadmap. All in all, this means building for the future and being able to excel in creating high return on marketing efforts.

Boosting returns

The most obvious benefit of brand consistency is immediate brand recognition; building a strong association between Vattenfall’s core messages and the visual elements of the brand. 

article_01_large

On a mission to keep our brand consistent

## Immediate brand recognition
The most obvious benefit of brand consistency is immediate brand recognition; building a strong association between Vattenfall’s core messages and the visual elements of the brand. And, ultimately getting the most impact and best results from our work – no matter if you’re in sales, brand or another business area. Today, most of the Fortune 500 companies’ stock value is largely constituted by brand equity wherein consistency is one of the key factors for a strong brand. For high-involvement-utilitarian global brands like Vattenfall, brand consistency is an integral aspect of building relationships with current and future customers.

## Increased effectiveness and returns
Done right, brand consistency on a global level increases perceived quality, which in turn increases sales likelihood. In fact, brand consistency muffles price sensitivity and increases marketing effectiveness – [brand consistency throughout the customer journey is proved to have the potential to lift revenue by 15% and save costs for serving customers with 20%](https://www.mckinsey.com/industries/retail/our-insights/the-three-cs-of-customer-satisfaction-consistency-consistency-consistency) (McKinsey, 2014). In Vattenfall’s business, it basically comes down to this: Economies of scale. Using the assets that are produced centrally will mean increased brand consistency globally and therefore sales, while also requiring less cost of producing those same assets locally.

### Spread the word
We’re happy to have you here! Please let anyone who can benefit from Digital Design News know that they can get on the list by e-mailing [branding@vattenfall.com](mailto:branding@vattenfall.com).




**The Digital Design System (DDS)** exists to help us create user-focused digital experiences that are recognisably Vattenfall. The goal is to ensure we present a cohesive and consistent experience of Vattenfall to the world through all digital channels.

On a mission

Over the past months the valuable user feedback we have formed the basis for our mission to create a better design system and UX going forward.

article_02_large

Creating a more consistent UI/UX for the future

## It’s faster to design and build when we’re not reinventing the wheel
Enhancements and new features to the DDS will be released continuously in batches. We know that there is potential for improvement in several areas and the priorities at this point are to add some highly requested components, updates and more clearly defined rules and style guidelines, as well as concrete examples of applications. The DDS will also be taken beyond Sketch and Abstract to also work for users of Adobe XD and Figma. More specifically, the first phase is planned to include an update to the UI Kit templates across colour, white space, grids, typography, buttons and input fields. We have also recently implemented a few design and code updates for “Cookie-policy”, B2b newsletter for France and B2b newsletter for Sweden. These are now available in the DDS.

## Roadmap with milestones
### Release 1
First update of the UI Kit – first set of rules regarding colour, white space, grid, typography, buttons and input fields – End of June

### Release 2
Second update of UI Kit – modules, motion, graphics, illustrations, icons (only functional ones) – End of August

### Release 3
Third update of UI Kit – Extend files for other software versions (Adobe XD and Figma) – End of September

### Spread the word
We’re happy to have you here! Please let anyone who can benefit from Digital Design News know that they can get on the list by e-mailing [mailto:branding@vattenfall.com](branding@vattenfall.com).




**The DDS is built on the overarching** goal of achieving brand consistency while meeting specific organisational and regional needs for design elements and code. Over time, we generate a growing library of cost-saving solutions. A win-win-win type of set up that benefits the brand, serves our users, and has a positive impact on finances. Over the past months, an internal review and the very valuable user feedback we've received so far have formed the basis for our mission to create a better system and user experience going forward.