 Okay, let's give her a warm welcome to the floor. Well, thank you. First, I need to turn on my computer. Sorry. Okay, great. Now we can begin. We're in 1995, and this is what we did when we had to turn on our computers, of course. Took a long while, right? This is, I mean, now we can just open up our laptop. When I see this, I get very nostalgic. I get very happy, and it takes me back to the wonderful early days of the web. Let me introduce myself. My name is Lise Bet-Smith, and I make science sexy. You can find me on all the social media channels with this tagline. I have a background, as I already said, in nutritional science. I studied in Wageningen University, close by, as a nutrition scientist. I went to Harvard School of Public Health to do research into molecules and heart disease. Interesting. And I started my PhD through University of Amsterdam. But on the side, I was making websites, because I saw how boring and how, like, cringe-worthy all these presentations and all these websites were that there were scientists around me made. So I went out of academia, over 10 years ago. And I started doing more science communication myself and creating websites. This is my best-selling book, Eat Like an Expert in Dutch. It's actually a Dutch book. And that's what I do today. So 10 years ago, I founded the online scientist together with Stave van Honden, my partner. And we've been helping scientists all over the world with their websites, science communication strategy, infographic animation videos. We do it all. And we give workshops on how to give good presentations. So in those years, I've created over 150 websites. I created those. And so that's a lot. And I really don't want them to be boring, because we have enough boring websites around the world, right? So I'm not going to do this. So we had a client last year. A client came to us and they said, we want to create something that's not boring. That's fun. That's interactive. Our client was the Greens. It's a member of the European Parliament in Dutch de Groene. And they were working on the Digital Services Act. The Digital Services Act is this really complex legislation about how to protect the European consumer from all the manipulation that is on the web. You might have heard terms like manipulation, filter bubbles in YouTube, you know, where you get this algorithm showing you more and more extreme content or censorship online. You don't see something that maybe someone else does see, profiling, fingerprinting. You're being tracked around the internet. There's cookies. Your computer is filling up with cookies. There's surveillance-based advertising. I'll talk a little bit more about that later. So there's all this bad stuff on the web. And they were talking about this really, really complex law. And they wanted me to turn that into something really interesting and engaging. They wanted to end the collection of personal data to show micro-targeting and behavioral advertising, because it harms us all. They want to stop the manipulation of human behavior to dark patterns and manipulative designs. So don't be guilty of that when you're creating a website. And they want to help you inform you of your choice online. Challenge Big Tech, like the Facebook, the Instagrams, the same. YouTube, Google. And create more transparency online. Like, who doesn't want that? Who wants more choice, more transparency and less manipulation? Yay! Right? That's what we all want. So they asked me, this was their briefing. We want to create a website to raise awareness on all these manipulative practices and surveillance-based advertising. Because the voting was coming up on this line. They wanted everyone to be aware of what was going on. But it's complex. So how do you do it? So the challenge was I had six weeks to create an entire website, campaign, concept, everything. Because they really had this deadline for when they wanted to start raising awareness. Otherwise, there wouldn't be enough time for people to know about this before they voted. So I was a little bit scared for that, but I was like, okay, we'll take this on. I'll push all my other clients aside. I did every single thing in this project. I came up with the concept. I did the storytelling. I did the writing. I did the design. I did the development and built the whole social media campaign. That's what I love. I'm not going to write a concept. I'm not going to write text that I'm not going to create a good design with. I'm not going to design something that I cannot develop. So it's really, really efficient. And I hate meetings. So no meetings for me. This was their briefing. This is the literal PDF that I got. You know, the campaign manager is a 28-year-old girl, a girl woman. So, like, young. And I was really excited to see that she included gifts in her briefing. Who has ever gotten a gift as a client briefing? I'm creating a gift. Yeah. Yay, gifts. And these gifts specifically, she had more gifts like gifts of Joey and friends and stuff like that. But this was like, yes, I love it. I really want to create something with this type of feel and look and feel. So they wanted me to create something funny, colorful, interactive, and the audience was between 35 and 60 years old. So, of course, when I saw this, I thought, Windows 95. Yeah. That's what I'm going to work with, some of the elements using Windows 95. This is me in 1995. So pretty. It all went downhill from that point. Who was not even born in 1995? Hands. Ah, some people. Yay. Who was less than 10 years old in 1995? Okay. Okay. Who was between 10 and 20? Ah, nice. So you really, you know, you got it. Who was older than 20 in 1995? Great. So it's a whole range of people. So you've all experienced not all of you. So if you haven't seen it before, you're going to see how it looks now. So I wanted to create a campaign that has a positive. So manipulation is very, very negative. So I wanted to create a campaign with a positive title and a positive idea. So what does the future without manipulation look like? We're going towards this future where there are no dark patterns in manipulation. No cookies, no tracking, no fingerprinting. So this is the title and this is kind of like the feel. I wanted it to be retro, funny. It has the colors of my client embedded in it. And I wanted to create a scrolly telling website. Who knows what scrolly telling is? Right? It's like, oh, what is it? It's kind of like a weird word. So it's basically storytelling. Everyone is storytelling. Even if you don't say you do storytelling, everyone's business is storytelling. But scrolly telling is basically if you tell the story while scrolling down on a website. I've did this before. Bits of Freedom is a privacy protection agency in the Netherlands. And they already created a campaign about manipulation for them in Dutch. It's called Cortekers is manipulatie. And this is what a scrolly telling website looks like. So you scroll down, you have big texts. Animations, really a combination of text and stuff going on. So I had a bit of experience with this already. So on the screen you see like big text popping up. Animation, eyes moving, hands coming, going in and out of old Mac computers. You see I have like old Mac here and I'm doing Windows. You might see a trend here. So we all see dark patterns every single day when we are online. This is Cool Blue, a very popular website in the Netherlands. And they have this cookie banner. It's really big and it only has a huge green button that says, OK, I want to accept cookies. But the refuse button is like hidden in the text. It's like hidden here. It's like this word, refuse, weigeren. So this is a dark pattern. They're kind of forcing you to behave in a way they want you to behave and gather your personal place cookies on the web. So you might be trapped. Same for the telegraph. Here it's even weirder. Like they have an accept button. Yes, I accept everything. And then like manage. What does that mean? I always click there. I never click any accept button. I will spend 10 minutes undoing all of that. I'm never going to accept cookies. So if you click manage, you have to manually go through all of it. And then another dark pattern. Then you can save and exit. Yay, I unselected everything. But if accidentally you click the big button, accept all, then you're back and you're accepting all cookies anyway. These are dark patterns and it is not OK to do. I get really angry and say, we care about your privacy. Because they don't. I get really frustrated when you say, we offer you a better experience. No, you have a cookie banner that takes me like five minutes to click through. That is not a good experience. Like when you do this, you get like all these pop-ups, things you have to click. And then you're kind of like looking over the edge of those pop-ups saying, no, no, I don't want that. How is this a good experience? It isn't. Who likes pop-ups and cookie banners? Two people. And you're probably making them. So look them up. Look them up. So I wanted these pop-up windows, right? They have this feel that you're kind of being maybe the pop-ups in these old Microsoft Windows 95 pop-ups. They get the same feeling. So I wanted to use the pop-ups to create this feeling of, hey, we're being annoyed and manipulated. So I wanted to recreate them as good as I can. I found a guide on how Windows 95 was built. In 95, I found this online. I was really happy. This really old guide from somewhere in an old library somewhere. And it contained all these really cool things about all the decisions they made, about the design, like all these message windows and all these icons they use and how they use and how it should be used, not great. So they all had these really good images of all the pop-up windows. So I started zooming in into these pop-up windows to really look at how they were built. If you zoom even further, you see that the edges are really clunky. Like really, internet, we were all trying to create smooth experiences. But I had to go back and create really clunky ones. So, of course, I needed to look at CSS to recreate this as good as I could. But standard CSS borders are smooth. They have diagonal lines. They look really good. So this is the standard CSS border, so like inset, outset. So I couldn't use these. So we had to get rid of those. So I fiddled around a little bit. And I started building up this component. We had this gray box. Basically, a whole Windows 95 is like this gray and this blue U-color. And then some variations of that. So we have this Windows pop-up. So it's basically gray block. Of course, we need a little bit of a header there that needs to be in there so we can recognize it. So the borders didn't work, so I had to use box shadow. So I had to use box shadow. So it became really nice and clunky. Clunky borders instead of those nice diagonal ones. I also created another class, like an inner border, because there's like several border layers. You can see on the side here. This is the original design. It's like a weird clunky border layer. So in this way, I created these two things. So if you look at my version, which is the one on top and the one below, this looks pretty accurate. One thing you might notice, the fonts. Typography. So I looked it up and the original typography is this Windows 95 font. And this is not really readable. No one likes to read. So I think it's more important that we have something that we can easily read and it's not as clunky. So I decided to use Tahoma. Also like an old school standard installed Windows font instead because it's easier to read. I don't really want to make it less accessible. So let's see how this looks when you start scrolling down and see these pop-up windows. Scrolling down some animations there. It's a nice internet explorer surfing thing. And then you have these, just these really, these Windows 95 buttons that you can click on and you get some like multiple, sometimes multiple pop-up windows as well. Another example, this is our cookie page. We have like five concepts and pages. Cookie, you scroll down. All of a sudden you get a pop-up, right? And this big button saying, click here. Click me. Yeah, you accept. But then if you look behind it, you're giving away all your data. So if you try it again, let's try it again. And you say, let's manage all my things. Oh, show me my other options. And you have to uncheck everything. And then again, there's this big button. So it's really like we're doing the same exercise that we do every day with all these other cookie buttons. So this is the interactive part of the campaign. So I built all this in WordPress. I mean, obviously not in Gutenberg blogs. I use Gutenberg blogs. Hey, though. But not here. So what did I use? I really, for this, I needed a page builder. I'm building stuff on the page in random place, and you need to really be able to play stuff. So I used Oxygen Builder. Who knows Oxygen Builder? Have you ever heard of it? Oh, some people. This was a really good tool because it allowed me to stay really close on my CSS and on my code and make sure that it's globally available. Sometimes it's very hidden in these page builds. They're kind of made for the non-technical WordPress builder, but I want it to be a little bit closer. So I really like this. So this is how it looks on the back end. You can really build something and then see the immediate result there on the right. And you can even do cool stuff. For example, you can create your whole Flexbox layout by just clicking it. I make a lot of typos when I write CSS. So this kind of helps me like, oh, really quickly, see what it's doing. So for this project, I really like this builder. I also use the Scroll Magic JavaScript library. It creates these really nice scroll effects where you suddenly, for example, like the horizon slowly fades out. Let me show you what I do. So here I wanted to have this hand grabbing the data away from you and get that idea of like, hey, it's taking something away. And these big things going up. Here you see again all the data that's collected. So some interactive Microsoft style design click boxes with all the data they can collect. Yes, they even know if you have an STD. Really, they do. And here I use opacity. So all this is done invisibly. But on the hover effect, I changed the opacity from like 0.1 to 1. So you can look for all the data on the screen as someone who's visiting this website. Here as well, scrolling effects to show you're being drowned in tech. This hand is kind of drowning in a sea of manipulative tech. And you're scrolling on YouTube. It's getting later. It's getting late. And getting darker. And you see more extreme content, which is like the classic YouTube filter bubble. And this is not OK. This looks fun, right? But it's not OK. You see, I'm always smiling when I bring good news. Bad news. I'm always smiling to kind of, you know, listen to impact. This is basically what we did with this campaign as well. So one other thing I wanted. I really, really wanted to create the Windows desktop. Such good memories from the Windows desktop. But, you know, this is what it looked like. Remember? And this is the computer screen. I actually, my father had a computer like that. I worked with Floppy disk. And, yeah, I wanted to create this. It looks basically like this. You see all the icons. Here you have still the same Windows now. We also still have like a desktop like this. And this bar below. But the thing is back in the day, they worked with ICO files. I found this incredible library online where someone collected all the icons that were used in Windows 95. There's this 30 pixels, 32 pixels times 32 pixel files. I tried to work with them, but in the end, I resorted to, I made them into PNGs anyway because they're easier to work with. You cannot put an opacity on an ICO file, for example. So we have all these chapters. The campaign only has like a few chapters on different types of forms of manipulation. So I had to find an icon that represented all the different ones. So start. Yeah, it's a mouse. Yeah, let's start. Let's click on something. Data collection, obviously file. Surveillance-based ads. How do you find an icon for surveillance-based ads? So basically, I found this is like a mail icon where you have like searching through your inbox or something. But it's basically, oh, you get mail and you're being searched online. And so this is the icon I chose for that. And we have incognito mode, something like that. That is dark patterns because it's like kind of scary. We have a game console. Like, we're being trapped and addicted. We're addicted to like the gaming of the internet. Societal costs like an Earth with an X around it and act for the future, like this future where everything is great and nature is thriving. So it was fun to work with these icons there. Let's do a little exercise. Does anyone know what this icon stood for in Windows 95? You can call it out. Not Internet Explorer. Close. Not a link. It's a web page. Because we talked about like, they didn't have, I mean there weren't websites all the time, right? So they're everything a folder. Who has folders nowadays at home? No one. So they have icons that are related to physical things. So a web page is actually a document, a piece of paper with like a world icon on it because we're browsing the world wide web, right? Cool. Okay, next one. What is this? I didn't really notice. What could this be? Screen saver. Yay, screen saver. Perfect. Who has a screen saver nowadays? Ah, some people. Some people still. Great. Great. This one? I'll give you a hint. Dial up internet. Exactly. Let me see. I have a sound of dial up internet there. It just says like a memory. Yeah, exactly. Oh, yeah, yeah. Perfect. So this is a desktop I created. It has everything and I wanted it to be as functional as possible. So what my client wanted, there's all these journalists who wrote all these articles, like recent articles, that are now online about manipulation. Articles from all over the world talking about this. So they wanted to incorporate all these articles into the website and I thought it would be a fun idea to insert them into the desktop as if they lived on your computer. So let me show you what it looked like. We have Clippy, of course. You've got mail. So you click on you've got mail. This opens your image. All these unread messages from all these articles. And then we have your Windows Explorer with all the categories. So based on WordPress. And you can really click through it and everything's functional. I tried to make it as functional as possible. Saved articles. I also recreated Internet Explorer. So I also dove into how it's made and everything. And what I also wanted to do is you could customize your desktop, right? For example, the Sonic desktop you have. So I have a button there. You can change the background of your desktop as well. So you can play around with it. So for example, like this inbox, you can really click through and it's really based on it. Yeah, I tried to make it as look as original as possible. Here we have the Internet Explorer. And here you can see the three categories. Societal cost, privacy cost, and cost to society. These are just WordPress categories. And Internet Explorer. So what you're seeing here is a featured image inserted into a post. Let me show you in the back end. It's just a WordPress post. Really simple. So I just created a title. The title of the actual article that lives online. Create some custom fields. I use pods for this. I love pods with a website link and the publisher. So you can have like a wired and then the article. I have a featured image and then I assign a category. So I have one regret. I didn't animate Clippy in my final desktop. I love Clippy. Look at him. So cute. Always so helpful with tips on how to save something or how to use Microsoft paints. Lovely. There is, I found out, there is this online library where you can have this whole thing implemented in any site. So please go ahead and use this guys. You can animate it on click. So you can say like, oh, someone does that. Clippy does this. Merlin. You can choose to have Clippy. Merlin. I love this guy. Look at him. And we also have Bower. If you're not a doc person, we also have, look at him. Aw. We also have a cat for people who are cat persons. So there's this whole library online that you can use. Challenges. I already showed you what our desktops looked like. But it was not responsive. It was not responsive. And I had to build something that was responsive. People had to be able to see it on big screens and small screens. This was 14 inch, but it was really square. It was 800 times 600 pixels. So my challenge was to kind of stretch that and make sure it still worked. At home I have this huge 21.9 ratio monitor. I had to make it work on that. But also mobile phones. So how do you put the entire windows desktop on one mobile phone screen? And how do you scale all the Microsoft pop-up windows and make sure it's still functional on mobile? It works. In the end, I also created the social media campaign. Kind of in the same style so they can show this to the world and to other people. And this is one of the reports that they made. So some of the experts wrote an actual report on surface-based advertising. And this was a very boring report, but I made a fun cover, of course, in the same style again with some gifts attached to it. And remember this gift? This was an inspiration for me as well. So I recreated something that shows if you're surfing the web, you create all this data, all these files, all these websites that you visit, and they're being captured by Big Tech and people tracking you all around the internet. Also for social media, also different sizes, of course, an Instagram story and for LinkedIn and Twitter. Just a gift because none of... I have a lot of friends who are not in tech. They have no idea. They think you have to accept cookies from the website, which is not the case. It's actually illegal. So I wanted to make sure that they knew that they can just click do not accept and they can still browse the web. I got a really cool response. Dr. Go tweeted about this. So I was really happy. And I got a lot of great response from other campaign builders that I thought it was really well designed. So I was really, really happy. And this was the official thank you. Like, oh, great. Enabled us to build a website that reflects our visual identity. Perfect. But this was her unofficial response. Which I like better. Wow. Which is kind of hard to use on LinkedIn or something. So client was really happy. We had a lot of fun working with each other and bouncing ideas off each other. And what about the Digital Services Act? What happens? It's been a year. And in June this year, it was actually approved. So I'm really happy. I mean, it's complex. I mean, you can, it's more nuanced than I'm telling you here today. But it was approved. And I hope at least my campaign helped a little bit to create a little bit more awareness about all these bad practices. This all looks fun. But actually, Surveying Space, we're going to go serious now. So no smiling at these bad. Surveying Space ads is actually really, really, really bad practice. It can lead to discrimination and for people to not have the same chances in life as other people. Let me show you an example. This is one of the pages that we made. So basically, it's showing you ads based on fingerprinting and knowing who you are as a person online. So if you scroll down, there you go. If you scroll down, you see the world differently, depending on who you are. Two people might see a whole different world online. And this is bad. For example, teen girls with eating disorders, it makes seeing that worse. So let's look at a timeline of Jenny. She has an eating disorder and Instagram knows this. She knows she's vulnerable to it. And the algorithm might show her more triggering images. Or Ali. He's actually an engineer, but he's looking for jobs online. And because of where he lives, his IP address, he lives in a low-income neighborhood, he only gets LinkedIn cleaner ads. That is not okay. So this is Surveying Space advertising and it's still legal and they're working on to make this illegal to make sure that everyone sees the same web and that everyone has the same chances. So there's a serious part to all the fun things with Clippy. But that's what I do. I try to create really complex stuff and create it into something fun that people actually want to play with. And in the meantime, accidentally learn something that can change their lives and it can help to make the world a better place. So I want to end with some tips on how to protect yourself because the European Commission is slow and actions and making sure that these become laws takes a long time. We don't know how long it's going to last. Maybe one year, two year, four years, maybe. So in the meantime, you can protect yourself. Always use protection, guys. You can use DuckDuckGo as your preferred search engine or browser. They don't track like, like you shouldn't, they don't track anything. They don't store your data. Stop using WhatsApp. They use all this metadata. I just deleted it already and then I reinstalled it and I read what they do with your data and connection to all your contacts. It made me a little bit nauseous, to be honest. Use Signal instead. Let's hope we have a new protocol that allows us to text us between different platforms. You can use Ninja Cookie. It's a browser extension. I really love this one. I never see a cookie banner anymore because it kind of, you know, always says, no, I don't want to accept any cookies. So this browser extension does all the clicking for you. So you're less annoyed. You have some more time enjoying the web. You block origin. Probably a lot of you already use advertisement blockers, but this also makes the web, I mean, for me, a better place. And for Dutch people, bits of freedom also created an online guide to fix your privacy, fixyourprivacy.nl and there's even more tips and ways to protect yourself online. So this was it. I need to close my computer now. Yes, I think I want to shut down. Okay. Great. Thank you. Thank you. We still have some time for questions. Are there any questions? Do we have a slide room? What's your name? Maria? Is it on? Hi. My name is Lika. It was really nice to hear your story. I was just wondering how you should charge yourself with the campaign, with the Facebook campaign. What audience did you choose? What do you mean, oh, with the campaign? Oh, I was not in charge of the actual campaigning. Of the actual, like, yeah. So no, I created the campaign, but they got it out on their channels. So basically what they always say, like, you also need to, you cannot only tell it on signal. Everyone who already has signal, like, oh, yay, just manipulation. You need to use these manipulative tools to show people where they are and what's happening behind the scenes. So I don't know a lot about that and those decisions. Yeah. Yeah. Yeah. I don't think they ever put on a campaign where they're saying, like, oh, let's select all these vulnerable, like, they don't do that. That's not a thing that they did with this, at least. Yeah. Thank you, Aya. Total access. I have a question. What do you think, when will the humanity use that goal as only browser and not Google it, and people are all using Google it? Yeah. When it's... How will that happen? When it's better, when it's easier to use, when it's user-friendly, when it's fun, when everyone else uses it, and when it gets great results. I still, I only use that goal. I never use Google anymore, but a lot of people tell me, like, oh, it doesn't get as good results as Google, so I'm not using it. But actually, I don't notice anything anymore. I think it's totally fine. So you also, you know, sometimes you just, you know, need to do a little bit, and then you get used to it. Okay. Are there any more questions? Anyone else building, like, campaigns? One question myself. To which extent were accessibility guidelines taken into consideration with this project? Very good. I made sure all contrast was good. I made sure you could click through it with only a keyboard. However, I do have a little bit of motion. I do have GIFs. I didn't pick GIFs. There were more GIFs that were, like, very in your face, so I picked GIFs that were not as, like, triggering. I made sure the font was legible and big enough in size, and I made sure that all the headings were hierarchical, so I really kept it in mind. But it's also, I wanted to be a little bit creative, so stuff that I don't do on a normal website. For example, with all this scrolling and movement and stuff, I did do a little bit more, like, cool stuff that I usually do that may be a little bit accessible. It's always in the back of my mind. Wonderful. Yeah. What's the Instagram grab account? Taxidermy. Ironic. Ironic Taxidermy. I think, I think if you scroll down long enough on my normal Instagram account, you still see my old posts. Now I try to be a little bit more professional. Yeah. Okay, thank you. Cool. Thanks.