Sarper Erel, Product Designer - Designing for video with TwentyThree

All right, so my name is Sarpur. I'm a product designer at TwentyThree. Doesn't mean I'm twenty-three years old. I work at a company called TwentyThree. And TwentyThree is a Danish company and the company has been around for almost like ten years now. And in the beginning, the company was started by Steffen Christensen and Thomas Madsen-Mygdal. And basically they were doing this like photo blogging, photo sharing thing. And then that eventually actually pivoted into this like video sharing product called TwentyThree Video. And that's actually our main product today. And I'm actually, yeah, product designer there. And other stuff about the company. We are based here in Copenhagen, down at Nuremberg by the lakes. In this wonderful office and feel free to stop by and have a coffee with us. I work with more than thirty wonderful people and twelve of them are here doing livestream right now. And we are a very multinational company. Like maybe around eight, nine different nationalities in thirty. And we are business to business. So we have around three hundred customers, a bit more than that. Mostly Nordic and mostly Danish. And I think all, what do you call it, big Danish companies you can imagine are our partners. And what we do, like very briefly, we have a platform for video marketing. And what that means is that we don't produce videos, but actually we help you to produce everything else. Online creating. We craft about video. So we help you, like, we help you through that. And then we provide you with a platform online where you can host your videos, distribute them, or like, we are white label so you can brand your players or brand your site. And once you do that, you actually want to distribute them, right? Like you want to go out to social and put it on Facebook, put it on Twitter, put it on YouTube. Like do all the impressions there because that's where people watch videos. And then basically our platform also lets you track how they perform. Like not only who watch some when they watch, but also like they tell you when people stop and also try to argue why people stop watching it. And hopefully we also like instruct you a tiny bit about how you can optimize. So we try to make meanings of what those, like what you call user behavior means for your videos. And we let you optimize them. And eventually, like, convert to your goal. And I think in the marketing sense, converting means something like sell something. But it doesn't have to be that it can be any user goal that you want to accomplish. And then we lastly, like, released a live product where you can actually make live streams like we are doing today. And then basically start back to the wheel again. But yeah, enough with that. That's our product and our company. Today I'm just going to tell you about or talk a bit about like video online because we believe that like video is the single most overlooked. Like design craft or design aspect on the web. And to be completely honest, like I think when they started doing this product in 2009, they were still thinking the same thing. Like video was this like lost bastard or whatever. Like, you know, kid that's online. It's not really designed. It was this little box in the corner. You didn't really mess with it. Like you were just designing everything else. Yeah. And there are like pretty good reasons why you should be designing on video or should think about video when you are designing things. Right? So I have one up there. Like people simply stay on your web page two, three, four minutes longer if you have video. And then people are like tend to click on your links on your newsletters if your video like unfolds. And then there's a generation like younger than I am, like generation who are 20 and younger. They only watch video. They don't Google things. They go to YouTube and look for things. So that's why like you should actually be considering it and designing with video. So that's that. So today I'm just going to run through six things that we can design or we can design better around the video. And they are briefly like we would like from more specific to more general. Like your design players. And I'll just show you a few examples what we should do and what we shouldn't do maybe. And the player interaction. And how does your web presence, maybe not only your website, can interact with your video. Because now video can speak the native language. It can be HTML and CSS and JavaScript. So it can actually tell your web presence to do things. And then ambient video. I think AVMV guys are actually like the ones who are doing it really, really good nowadays. And there was a question about that. And then I will just wrap it up with video section of your website. That little videos tab you click on and get all the video universe. And what it means to have a video website. Like a whole website that is running around your videos. So let's start with this one. Right, design players. I think, it's a very crowded slide that I have here. But I think we all know, everybody knows that Kickstarter is right. I actually love their videos. And I think when you, I've been working with 20M for three years. So when you work with video that long and also like videos for that long, you get real sense about the design of it. And this one of the examples why I really like their video. I think they are doing really great. Because what they do here is. They don't really. Put any name or logo or anything that's actually connecting to Kickstarter per se. But what they are doing really good is that they are using their iconic green and their curvy branding in their videos. To a level that you know like when you see it somewhere else like on Facebook. You just know that it's Kickstarter. And another example like this is kind of old. Now they have a new website but they didn't show it a bit. They didn't show it all together. What they are doing is a bit different. Like they are basically borrowing cues from the video. They are basically borrowing cues from YouTube. Like white on red. And then put it together actually like this. The kind of red that they have. So they kind of create this like fusion thing. Which becomes a part of their identity, right? So once you see them on the biggest Danish newspaper. Even though they don't have a brand here. They know that it's the Danish Royal Theater. And I think like these two are like really good examples. Because suddenly the UI, like not only your UI but your video player's UI becomes part of your identity, right? It becomes something that you can actually like put in places and make people know that it's actually you. Next up is the player interaction. I don't know if you know of this one. Like I said, I think it's very popular in the US. It's called Funny or Die. And Funny or Die is this like platform for comedians. They can be like very well established comedians like this. Is Leonard Dunham here? Or it can be up and coming comedians. Let's see. But they are basically ideas that people upload their videos. And you basically say, yeah, it's really funny. Or just go die somewhere. And what they're doing here that I think is very interesting is that like they basically put their brand together with their player. So like the player, like you know, when they embed this video somewhere else, that thing also comes there. So that player actually becomes part of their identity or strategy or whatever it is, right? Or like the other way around. And I think like talking about these interactions that companies define for their brands or for their like business strategy, right? This is the one that I really, really love. I think for all of us, like for most of us, this almost feels natural if you are watching things on Netflix. So I think like I'm just going to run through because so I think everybody expects to find, like expects videos to play in this way on the web. Like if you are watching like related videos, of course they play one after another, right? It's a no-brainer. But I think that's something that Netflix defined because it's their business strategy that people actually sit down, binge watch videos, and you don't even do anything, right? If you don't press anything, they just play your video. And yet it becomes such a like, you know, prominent UI or like prominent UX pattern that now we all want to see it everywhere. Like we just actually do it without even thinking about it. And I think like I can tell you like one funny thing about this. Okay. Like the guys who are really, really, really good at like defining those UX patterns and they don't get any critical credit for it. It's like, no. Whether you like it or not or agree or not with what they are doing. But it's porn because like porn is a like they're like seriously what they are doing in terms of interaction design is like very like out of the box for them because like they have different user goals. And like imagine this like, you know, they've all seen this YouTube post. They've all seen this YouTube thing. On the scrubber when you hover, you see thumbnails, right? Like you see like, you know, you just see the thumbnail that is that part and they click on there and you go there. It's basically like those companies that we mentored so you can skip forward to the good parts of it. Right? So, there's actually like a pattern that those guys defined and we just borrowed and nobody gives them a credit to. Yeah. That's a nice gag. Oh. Okay. Okay. I think like there was like a bit like funny bits because when we talk about video, like people usually think about, okay, the player, what happens in the player. And also my examples there were like, you know, interaction patterns in the players. But the good news is that like the videos can speak like the language, right? I told you that. Like we just are basically part of the native web. And what we see is our like really good Swedish friends called The Conference. That's an amazing conference and they do amazing content and put online. And I think this is like the most novel example. But what they do is that they basically bring their brand and identity to different websites. In this case, like Samaritan Life with their videos to bring back people to their content. Because if you're on Samaritan Life, you're seeing this content, you're most likely to like their content too. So, it's of course they are doing that way. And it's like a very basic call to action marketing example. But what more you can do is that like this is a project I worked on. It's a Danish music festival called Northside. And they have a lot of long, amazing concert videos. They're like two hours long, one hour for 20 minutes long. And what's happening here is that as you watch the video, it's a very long, like it's a whole show of Arctic Monkeys. As you watch the video, the tracks of the, the tracks bit of the website updates, right? So, this is not my player. And this is not part of my player. But also like my website is not my player. But yet my website tells me what's going on. And for the user, this is just no brainer, right? This is tracks. Of course, I see what song is playing. And also the other way around. Like my favorite song is here. Like do me a favor. When I click on it, of course it jumps that place. So, that's actually like, you know, that's why the things get a bit funnier. And I think this is a bit more complex. And I don't know if it's like we're going to have to see. But let's take this case, like the conference case. Conferences are very like unique because they happen in a place and at a time. And when you have online audience, maybe you want to design the experience for that. What really matters is what's happening right now. And maybe you want to give a bit of context. Where is this happening? Who is speaking? And maybe some highlights. As opposed to like the static video or video on demand where it's just a video. And then like you can design a very unique like specific experience for this one. And then you can actually. Also design an experience for people who are coming afterwards. Because you don't want to hear 25 minutes talk about online video. You just want to see the good bits. And maybe you can create clips on it. Or you can actually make it so that people can glance over the highlights of it. Or if you are doing it really, really well. Maybe you can also convert people to buy your tickets or sign up for the next conference. And in the other hand, like if I'm there too early. Maybe you can count it down. Also like, you know, tease the conference a bit. Or maybe just have a little bit of the website. That gets my email address and reminds me that this is going to happen. So like, you know. Like these are just like, you know, opening up what you can do with the modern web technologies. With video in the center. So now that like we are on your website. I think like this is the one that's the most subtle. And basically turns everything around a bit. Because a lot of times you imagine that. Imagine that there's going to be a video and design everything else. And the video comes there. Right? And I'm going to show you the obvious example here. What's happening here is that like. Okay, what these guys are. What these guys know is that. I'm going to design this. And I'm not going to really communicate anything with this video. This video doesn't carry any information. But I'm just going to use this video to amplify the motion right. Which is already written there. Welcome home. And this video only serves to. Amplify that. And the designer here knows that this video is coming there. And I think like this next example is my absolute favorite website. And it's very subtle. And they do the same thing. And I think in a more artistic way. Let's see. So this is the Dutch of R.M. Ballet. And what's happening here is that. That image is moving in a very subtle way that you actually don't even see. And again, it's the same thing. Right? So the designer is actually designing the website. And the video is produced to fit in that design. Yeah. And the video section. And I think like. What I mean with that is. You know. When you go to your text office. Like Scott or whatever. Wherever you are from. When you click on that little tab called videos on top. The user. Really expects. As certain behavior. Or like. Certain paradigm defined by. Like YouTube last year. Right? And I think you. In here. It's a bit similar to the. Branded player. Like you need to kind of deliver that. User experience. But then you can actually like. You know. Succeed up trying a bit by. Your own brand. Your own color. And I think the design goal here is to keep user in your brand universe. Right? Or in your messaging universe. If you are a. Text office. Maybe your goal is to. As a designer. Your goal is to make that user find that video. And make that. Make him download that form. And watch the video. And make him do right. Right? If you are a. Charity organization. You just want to make sure that. People are in your universe. And. See. You see your message. And becomes a volunteer. Or helps you. Or. If you are a company like us. Right? It's the same thing. We are following the same pattern. And our goal is to keep people in the same universe. And deliver the same message. And if we did this on YouTube for example. What will be on related videos. Is probably going to be. Myles Cyrus video call 23. And that's not really. You know. What do I design for? Let's see. Yeah. So I think like the main point here is that like. When we come to here. Like it's more about. Repeating the UX pattern that people are used to. Designing topics your goal. Like companies or business or whatever. Design goals. And then giving it. A. Couple of. Nice touches that actually makes it. Yours. And then lastly. I'm going to drive up with the. Video website. And I think. We should also keep in mind that like. There are those cases. This works really really well. And I think. These are the guys who invented this. It's basically having your entire video universe. Around. Let's say. Let's call it a niche. Or a particular topic. And most of the time. A topic that's like too complex. To communicate. Or too boring. To. Attract people's attention. Somewhere else. But we see here. Is a. Danish website again. It's called. Underground channel. And that's. A collaboration between. Four different. Danish universities. Geoscience departments. And a Danish geoscience. Authority. Something. And what they're. What they're. They're doing. Is that like. They are applying. Like very nice. Aesthetics. To. Something that's. Like. No. Something. That's. This works really really well for them. Because. Suddenly. They can get their message through. To young people. For example. Who wanna. Work in this. Or. Who might consider to work in this field. Or you can actually. You know. Attract attention. Or like. Public attention. On what they are doing. Like. And the last example about that is. It's a bit different. This is Copenhagen. Documentary. Festival. very professional narrative, right? Even though the story is very wild, just like stories like anybody else's stories. And they want to turn it around, they want to design this website, which is extremely easy to maintain, extremely easy so that people can understand, but yet still tell the same extraordinary stories. And I think that also makes a really good case around why you should have a video universe and your videos. And yeah, basically those are the two things that I went through today. These are the six different aspects we maybe start thinking about what we can design around video, or which video, or the video first. Yeah, that's it. Please stay. And we would like your microphone. Yeah, Kim from Dwarf. I just want to hear what your thoughts about the very homemade video format you have at YouTube, and on the other hand, the very well produced videos. What can you use for different occasions and stuff like that? So like in terms of the formats, or in terms of? More like, do people in general accept low quality because they're used to YouTube? Yeah, absolutely. Yeah, absolutely. Like I think, I think like it goes both ways. Like one of our, like one of my favorite cases in that is like a Danish company called Orstedane, or Orstedane. It's basically organic food boxes that deliver your home. And what these guys, and they're farmers, right? What these guys learned is that they only, like only way they can sell more boxes is that they have to teach people how to make, how to cook with these boxes. So what they are doing is that they are popping up an iPhone on a like tripod, like you know, 20 bucks tripod, and I'm doing this like, 20 bucks. Like do it yourself cooking, what you can do with these videos. And I'm putting it online. And it's like a very low production key. They don't even a production company. And they've been like basically making those kind of videos and they've been like very successful around it. And I can also like, I know the Swedish teachers union. They are doing the same thing. So I don't think like, videos have to be like really high quality for affecting people's attention. I think like, once you nail the content that your audience wants to hear, I think it just works. So, yeah. Any more questions? Okay. So you said that like 88% of, of, of, you know, traffic or whatever you use or time on the website goes up because of video. Is it really like, based on your experience working with, you know, also your older people, like, you know, I don't know, Novo Nordisk or something like that. People that have real jobs that are not trendy anymore. Is video for everybody now? Oh yes, I will say so. Because like, for example, like big corporate companies, those big companies who actually use video to internally communicate. So I think the problem becomes the other way around, right? Like, they have too much communication going on and they receive real long memos very often. So what we see is that like, for example, executives or the CEO of their company pops up again on an iPhone or whatever, maybe a bit more professional crew this time around. And they send us a message, like, just in the video instead of sending an email. And like, we are seeing it actually like, it's like very popular in Denmark especially, but it's definitely like, working in Denmark. Like, working in Australia, like among all the people. Okay. Yeah, one last. Yes, you got it. Otherwise I have one, so. Of course. No, no, we'll take him. Hi, I'm from Clubs and Partners. I just want to ask you, what do you think the future is of videos on web design? Because now it's like, full content videos. What's the next thing's gonna be? Do you see a trend? There's definitely a trend. Like, I think what I'm seeing actually, like, first of all, more and more people are making videos, right? I see like, Shep of like, for example, normal like, Rene, occasionally going on Periscope and just putting on Instagram and saying, I'm doing this video and does that. And I think more and more people are going to do that. Like, more and more people are going to put videos on social media and I think they're going to communicate more and more with videos. So, I see, we think there's a trend and I think we are just in the beginning of it. I think it's just going to, like, we think it's going to peak and I think it's going to peak too. But you think it's gonna be more interactive on the website? You're gonna have sort of a channel of its own? So, you have a website and you have your place for your videos? I think like, I think it really depends, but I think it's going to be more interactive with your, rest of your content, whatever it is on your website. But I think, I think we are still in the beginning of this, making this interactive website, right? Like, the Northside example, for example, like, when I say interactive video, people are thinking of this like, really complex and your solutions that you pay millions of crowns to get. But like, that was, for example, something that you can hack in two days. I think like, we are getting, like, we're going to see more and more of those things that are just going to feel natural when you're watching it or when you're interacting with it. Okay, thank you. Yeah, no worries. Excellent, thank you very much, Sarwar. Yeah. Thank you.