 Hi. Hi everyone. I'm hoping this is going to work. So when I was asked to do a talk or given a nudge to do a talk about design, I've talked about design at Meetups and it kind of inevitably comes down to theme builders and themes and content layout and all of that sort of stuff. So I wanted to kind of challenge myself when I was doing the research for this. So I haven't actually done this talk before or come across this material before. So it's all new to me. So forgive me if I stumble and forgive me if I can't answer all of your questions because this is a conversation that I have sort of just started. And I think in light of what Luke was saying about Gutenberg and the story starting quite effectively with the design team and the user experience team, this is a nice timing to start talking about how other people can affect and help build the WordPress ecosystem and the WordPress software as we know it. So just in case this is all really boring, lots of people have been showing pictures of their dogs and their cats and their animals. So this is my crew, this is my son Felix, this is me, this is my friend John who photobonders and this is my cat Desi who sits on my lap for half the time that I'm doing work because she likes the warmth and she likes to steal my warmth bit. The other thing I wanted to just show was today I'm wearing the dinosaur in an astronaut suit just which I love and I bought specifically for this event which has nothing to do with my talk whatsoever except that I liked it. All right, cracking on in. So WordPress is a unique product because being open source, being around for so long, it spans a much bigger, it spans a lot more people than just small business owners. We've got DIY is starting at WordPress.com as a free platform just doing a blog and it goes up to enterprise level with the team at say XWP and Human Made making really large websites for large corporations and really turning WordPress on its head and using it as a content management system for really large projects that are exposed to everybody. So I wanted to have a talk about how you make a product that caters for all of those people and how we can continue to make it better. And so to do that I've had a talk with a bunch of the team who actually make WordPress but we'll get to that. So we're going to talk about just touch on the basics of good design and what that means for software. We're going to take a little time history lesson through the WordPress interface. We're going to talk a little bit about what goes into the behind the design of WordPress. We're going to meet some of the team. We're going to hear some of their insights into the future and I'm going to talk about how you guys can get involved. So before I move on, have we got designers in the room? Can I see hands of designers? Sorry that this isn't a straight talk on design. Apologize in advance. Have I got anyone whose time is donated or who contributes to the WordPress product at any part? So we've got Maeve, we've got other people. Obviously Luke. I can't... Is that... Ross? Ross, hi. I haven't seen you in a while. Okay. So we're going to talk a little bit about that as well. So good design is invisible and this is something I believe firmly, particularly when you're talking about apps and products that we use and that we need. And there's a few principles around that. We want it to be easy to use and the learning curve is slight. We want the interface to be consistent and intuitive. We want the design elements to equal or rival current trends and expectations. And this is kind of talking back and swinging back into the idea that there's lots of kind of peer products for WordPress. We've got the Squarespace and the Wix and the Weeblies and all the other ones. And these things do tend to influence how our customers expect to experience WordPress. And we have to make sure that we're keeping up with that. It works the way that you need it to. And you want to be able to forget about the software and just use it. And most importantly, it gets the job done. Okay. So before I get to into things, I just wanted to... I was sent this little snippet of a snap, a Slack channel with the design team. This was back in January, I believe. And they were talking about this little dude here. And they're saying, can we call it the dotted hamburger menu? And someone said, has it already been renamed to that? And someone said, well, what about the kebab menu? Because it looks a little bit like a kebab. And I'm not sure where this all went. Someone said it's a vegetarian. And I'm pretty sure the kebab menu is off the menu. But this, to me, pointed out quite a lot of things we take for granted with our designs and particularly with product design. We want it to be intuitive and we need to know how to use it before we even need to know how to use it. So when we're thinking about Gutenberg and the learning curve that is involved in that, throwing people in the deep end and just seeing how they use it and how they understand it based on their other understandings of products that they've been working with in the past. So I thought I would just take you quickly, I'm not going to talk about everything, through the WordPress Interface history or timeline, if you like. WordPress was born on May 27, 2003. I remember the May 27 bit because that's my birthday as well. And it looked a bit like this. And I'm just going to step through how it's changed a little bit. In 2005, WordPress 2.0, it looked like this. And we started to have a little bit more on the interface. So we ended up with things like the page templates and the post-author and the page order and these kind of things. Moving forward to 2008, big jump. And we're starting to look a little bit like maybe some of you would have experienced it. For me, this is actually what WordPress looked like when I'd seen it the first time and gone, nah. Like nope. When we jump forward a little bit further, this is what I came to know as WordPress when I first started working on it in 2010, 2011. Incidentally, I installed WordPress, promptly forgot about it and ended up selling Viagra a few months later, learned a big lesson in that as well. But this is what WordPress looked like when I first got to it. All right. And then we started jumping forward and you can see that the interface is changing significantly already. We're starting to think about the people that are using it and we're starting to cater for the people that may not have seen WordPress or know what it's for. This was also when WordPress started moving quite sort of significantly from being known as a blogging platform to actually being more of a content management system that could be used on websites. And we started calling it WordPress websites, not just blogs. And we started to introduce the idea of people being able to customize things a little bit more right from their first experience of the installation. So I'm going to jump forward a lot, I believe. 2013, Oscar. And now we're really starting to look like the WordPress that you guys would be more familiar with as well. So it's simplifying and it's bringing in what we expect design to look like in the other applications that were being used in 2013. The aesthetic had changed and so WordPress and the people behind WordPress have been making little subtle changes that you may not even realize that are happening, but they are to make sure that the people who are using WordPress for the first time are experiencing a product that matches what they're used to with other kinds of applications. So 2013 also had a brand new interface release with the ability to tailor the dashboard to your own decision on some colors. We also ended up with this new look that is very similar to what you guys would be seeing about now. And that's back in 2013. They made that big change. And in 2015, we introduced the customizer. So not much looks like it's actually happened between 2013 and 2015 on the interface as you see it, but there's so much going on behind the scenes in order to enable feature enhancements and content enhancements. And so as we're working towards Gutenberg, it's really important to notice that, you know, know that this kind of dramatic change isn't something new in WordPress and it's always pushing forward and we should be embracing it. So Gutenberg, you guys got a really good demo from Luke yesterday and if you didn't catch that, I highly recommend you try and see the replay on WordPress TV. It's going to be good. And WordPress kind of says a new publishing experience for WordPress. And I think that it is a great step forward and I was really interested to learn that the design team was really heavily involved in this one because it is such a huge, huge change, but it's also a massive change in the interface from a development perspective as well. And there's lots of changes that are happening in regards to how plugin developers allow their products to be visible within that new interface. So I wanted to talk a little bit further about this and so I contacted, I went on to the WordPress Slack channel and I put a call out for some, if anyone would like to talk to me about what's going on behind the scenes with the WordPress design team and I was lucky enough to get a few hands up. So I'm actually going to play a little snippet of those interviews. They were exciting to me. I spoke to each of them for at least half an hour and I've kind of dissected and took out a little snippet of each of their thoughts on what's happening and hopefully this will give you a little bit more insight as to how things are going and who's working on the team at the moment. So my audio is not working. Can someone help with my audio? Because the rest of it's audio and that would be really bad if I don't have audio because I don't remember what they said. When you go and you try and create a WordPress talk on a subject that you don't really know well, it takes a whole lot longer and if you try and put video in it when you're not a video editor and you don't have video tools, it takes longer again. I'm not surprised I've got technical difficulties here. That's Joshua Wald. He works with the XWP Luke's team in the design team. I really want my audio. No. So there's audio. A lot of people don't realise this. To start. Talk amongst yourselves. It does not surprise me. A lot of people don't realise this. We're nearly ready to go again. Do you want to do the jazz hands, the dance that Robi spoke about yesterday or showed us yesterday? I don't have any jokes to tell. Sorry. We're about to hear from Joshua a little bit more about the team but there's some stats up there. Particularly interesting is that and what I didn't know about is that it's mostly made up of people and businesses who donate their time to the project. I'm getting a little thumbs up that we should be ready to go. A lot of people don't realise this. There's not that many people working on the board. In the design team you have two people full-time, automatic, they're being sponsored by automatic and then XWP, and the rest are volunteering their own time. I think that's it. For something that represents 30% of the internet to have so few people working on it, so my call and Tammy's call and Monique and everyone else is let's get some more people in there. Let's have 10 more people working on this and then see where we can take that in six months or a year. I think what I'd love to see is let's make this team bigger. That was Joshua who works with XWP and we'll hear a little bit more from him shortly. What are they working on? They're working on the core interface and design elements. They're working on feature design. They're working on plug-in design. They're working on feature themes for the core and the special projects such as the WordCamp themes and the WordFrest default themes. They're working on interface bugs and glitches and they're working on a cool little thing like it's like a official WordPress icon set and there's a whole bunch of them and it's quite cute. If you actually wanted to get involved in the Dashikons, if you just wanted to have a little play at something and be involved in the WordPress design just in a little way, you can actually head over to the Dashikon style guide and it gives you some instructions on how to get involved with that and I thought that was kind of cute. So, the next person I spoke to was Tim. Now, I can never say his last name correctly. Tim's from the Netherlands and he works with Yoast and he is a UX designer at Yoast. He started as an illustrator with Yoast. He joined when they put a call out for illustrators and he got really involved in learning about the conversion of their products and actually somehow weaved his way into helping them found a UX team. So, he spends around a third of his time working on the WordPress project and at the moment he's been working on Gutenberg and he's a great example of where a business or company or their products rely on WordPress. They've invested time by putting their staff into the front line of the WordPress development and design as well. So, we're going to hear a bit from Tim hopefully or not. There's Tammy. I started mostly in the Gutenberg side because I wasn't really doing much with core at that point. I think I was in the WordPress flag design team. I didn't really grab any from this contribution I can make here that this work that needs to be done. So, I was just kind of observing. But then, we were looking at making our plugin compatible with Gutenberg and the source to be in as a first scout to see what the situation was and it was pretty nice. Oh, really? Yes. I spent about a month hanging my head against how we could integrate because there was a lot of stuff that wasn't there. That was made a year ago. So, this to do with the current user interface that we have for the backend of WordPress with the WordPress editor versus the new Gutenberg editor that is kind of stripping back the actual type. Those are lots of fun. So, you need to have that in your face and that feedback tool that isn't any good with Gutenberg. Yeah. The big meta box below the content right now and the director at the start was very much clear to move everything to the sidebar. Yeah, and that was going to take out this much space. Yeah, and it was a very time to see what we were used to. So, we had to have lots of our interface to work with that. We didn't integrate and they weren't there yet so we started suggesting those and... Oh, I've lost your sound. Ah, there we go. Yeah, sorry. I was thinking that you said... Internet connection is a little unstable. So, yeah, so... Real people. Basically, I started working on Gutenberg full-time in my sort of slots, dedicated to working on court to just get it up to par Yeah. In working on it, I got to know the design team very well and sort of made a name for myself and my community. Now, I'm working on it with Tammy who's looking at the design issues that are there and Gutenberg still. Can you see back on this and sort of keep on going back and forth trying to get everything better? So, how did the... Well, the one I can ask about what solution did you end up using for the interface for ghost? And I guess this is probably solving not just a ghost problem but a whole bunch of theme and plug-in problems because they always just digsword onto that main case like, how is that now? How does that work now? What did you come up with for the ghost plug-in? So, that's actually a good example of what we did is that when they said you have to move to the sidebar like, they had that little box there now, you know, standard sort of sidebar sections that you could mask out as well, but there was no way for a plug-in stage crate. So, you built the possibility that you could select from many of them the justices here sidebar and for the plug-in to look into that as well and make their own blocks in there so that whole sidebar at their disposal and after that we used the possibility to also add a model that you contribute from that sidebar so you have a little more space to put them in. I'm just going, all the things, all the things, yeah whether or not there's like a little tool bar at the top that just drops down the little icons to make sure that they think the cover is hiding a little bit. So, you ended up with the modal solution? Yeah, so we have the sidebar in now for a while and the modal is sort of an alternative that you can change to that. So, I hope you can hear me as since we've returned back. So, that was Tim, he's a lovely guy I spoke to him quite extensively and I have to say actually talking to all these guys and gals, you'll hear from Tammy next, they all have these really great backgrounds working remotely so they don't actually work in an office I think Tim actually does work in the office with Yoast a little but they have these beautiful backgrounds that they've made for their videos I'm really impressed. Alright So, the next person that I spoke to was Tammy and now she is the experience designer employed by Automatic who is the team behind WordPress business company behind WordPress and as you can see if I'm going to use all the things again Tammy is pretty much that so I don't need to go through her resume there but she is just going to discuss with me something I prepared earlier a little about how the design team has changed over the last few years and even the last few months I hope I really hope Oops So the design team has been around for quite a long time I don't know how many times it has been around I would say in the past year and a bit we've had quite a new generation of that team we now have five design reps so it's a weapons basically to make sure everything changes over time so for a long time there were just a few people coming in and out there's a design team now as a level 4 guy it's difficult this year so we've had a trailer board we have two meetings a week we have a UI and UX triage we only have half an hour for that because we have a short triage session just by regularly having that we've got through a lot of court tickets and doing that as a group so that actually helps people who are new designer coming to track a lot so we've been able to go through a group that really helps people on board it can you also have a weekly meeting I was just going to ask you so you mentioned the triage and the tickets are they coming from internal? are they internal? or are they coming from just community moments like how so everyone's community so basically if you find a criminal worker what you do if you were involved in a bug and you look at a track ticket for that we actually had an interesting situation where if you had a criminal you would not be able to get help so we have a case that's split between four people currently until we choose who the criminal was so if you find a criminal worker who was making a track ticket and that is how they would find a criminal worker so those are the problems that you're solving along with the core goals that you have so those are bugs and enhancements we also have phoenixes which we do a lot of which is editae being considered by the group so we also have each person on the design team and some of them are campaigning on training so they have a personal interest and they also probably have personal interest we think they want to work on so we have designed kind of the whole project so we have some designers who really want to work on metal projects like wordpress.org so they want to help with about pages or they want to help with dashboards which is our icon hack maybe their thing is wordpress and they want to help with the wordpress thing so they don't just have designers that want to work on core which is like the product of wordpress we have a whole week of this and that's kind of the interesting thing designing, expanding a lot of different to design the big word and designers will have that own thing that they want to do so that kind of is reflective in the design team Tammy's amazing and she's very focused and she's a very clever, clever woman and she has been working really hard on putting some structure into the design team which I imagine is pretty hard when people are volunteering and have limited time and limited availability and don't know where to start so she touched on new designers or new people coming in to contribute and kind of being overwhelmed at where to start and so they're working really hard to make that a lot clearer so if you do want to get involved and just give something ago work with the team to see how it all works they're trying to make it easier for you so the next person I spoke to was Joshua from XWP and he is a designer and UX designer now I actually asked Joshua quite a lot of things and he covered off some of the stuff that we were talking about just now but I wanted to get an idea of what his insights to the future were and snip it from him now again hopefully there's a nice little excited screen grab nope nope please just sort of stepping back what are your sort of thoughts on design and the WordPress base in general how do you feel that it's moving and how do you feel the theme the talk I'm doing is beyond the theme so I think that well themes are important like I guess it's like those core themes that get developed by WordPress itself how far are they going to be pushed that kind of stuff I'm curious about that my personal perspective on this and I've been trying to do this out myself because I want to see where WordPress can go as a system things in the early days that were fundamental to making it unique and helpful for a lot of people and I built my career on building websites around WordPress in some way or another I feel that in the last couple of years WordPress is starting to lag behind other systems but there's actually there's a reason for this the CEO of this wrote a long article a couple weeks ago about his experience building an open source CMS and all of the CMSs if it's open it's inherently going to be more flexible it's closed it's going to be a better user experience but you're going to be locked on those long articles for what that closed CMS allows WordPress is the biggest CMS out there and it's extremely flexible so it's always going to be harder to ramble a good user experience in something that has to be flexible for a lot of different projects so the observation I had from the CEO of this was he was trying to build a flexible and perfectly integrated system of life so he realized that was a joke he couldn't do both so my perspective is we need to continue to embrace the flexibility of WordPress while trying to add a bit of design structure around that but not bringing into the other path staying a flexible path so being more practical I think there's ways we can make the ability to extend WordPress better and alive Thank you Joshua so I've got five minutes left and I wanted to talk a little bit about how you can get involved I have spoken about how I can get involved because I'm really interested now after doing my research and talking to the team how I can have a little bit of a thumbprint on this product I've been using WordPress for five years consistently getting more and more excited about it every time they release something new I'm probably overly positive about all the new things because thankfully nothing's broken in my time of new features with WordPress but thankfully WordPress and the team that make it have also got a really great easy path for you and if you ever wanted to put something in WordPress that isn't there because it's open source and because it's built with so many people involved you actually have an opportunity to get in there and have a say it doesn't necessarily mean that your ideas will be picked up but they'll never be heard if you don't tell them and the fact that you might actually get an opportunity to then build that and know that that little icon that little button was your idea I think is a nice little legacy to leave if you are working on this awesome software product so I'm going to put all the links I've got my slides have been uploaded to the website so you can go and get all of these links as you need them but this is the make.wordpress.org and you can actually go straight to the design straight to the design channel if you're interested in that there's also many other ways to get involved and many other channels you've got development which are the other ones so this is a great opportunity to say something about that so obviously you guys have all come to WordCamp and are from a great variety of backgrounds be it design, content people marketing types, maybe just a user at this point maybe a hardcore developer so if you want to get involved and contribute then head to make.wordpress.org there are different groups that work on different aspects of WordPress so you might be on the meta team that deals with actually like the make WordPress website maybe you would like to contribute some translations if you speak more than one language there's design team there's a community team which is a really good way to start as well because you can just devote like an hour a week or an hour a month or whatever time you have with other users helping to push along community activities like meetups and WordCamps and that kind of thing and of course there are the developer topics as well but I think especially people who aren't from a development background have this sense that contributing to WordPress is all about contributing to core or plugins that's not the case so no matter your background there is definitely a way that you can contribute if that's something you'd like to do I appreciate that it's an updated edition so that's me come and say hi that's where I am that was me yesterday taking a photo instead of attending one of the talks because I needed a bit of time out and my references are on my slides which you can download or go and have a look at at that address thank you for having me thank you so much we've probably just got a few minutes for questions so wave your hand if you've got a question about design on WordPress great you've probably covered very well the Gutenberg sort of path in a way and most recent developments without actually trying to bring in a negative idea I know there was a recent decision of a jet pack to go into WordPress.org and has raised a lot of issues in terms of how is it designed and how the solution has been bolted together do you have any insight on that and say it must have been quite a bit of a discussion and leading into that decision that created quite a bit of design concerns I actually can't answer that question I did preface this with I may not be able to answer that question because I've just started researching how the team works and what those discussions are but there is heaps and heaps and heaps of information available. One of the places that you can go to learn a little bit a bit more about those conversations that are happening is if you go to github.com there's like a kind of an archive of all those conversations and how it's actually affecting the deployment of the features into WordPress based on the feedback I hope that helps Any other questions? Hi Kath, thanks for the talk. Really interesting seeing peeking behind the curtain I think my question is unrelated to your talk but it sort of harks back to our I like a skim cap that we made harkens back to our broader Gutenberg conversation and this might not be the forum to ask you but as a designer you know that we have a fairly similar work base and client base etc with Gutenberg in mind what would you think that would change your tech stack in any way in response to Gutenberg what would your tech stack be going forward with Gutenberg? So look I have installed Gutenberg on a whole bunch of sites so we're built and for those who don't know me well I'm not a developer I use a as Judith says a stack of tools in order to get the job done with a developer and a number of people who help me on the jobs that need real development work so what I have found so far is that it's not affecting the actual the bones of your site it's not changing your themes the only sort of significant impact that I have considered and we did touch on it during the panel is that there should be more items that are more visible to our clients when they're putting things on their content pages that may need to be styled or get some attention from from your team whether it just be simple CSS changes and overrides to make sure that your styles that you've set up in your themes particularly if you've done them custom do actually accommodate those new blocks and items that are there that are not too difficult so when I design websites one of the things my team does is we have this kind of HTML file that we whack into the text into a text page so a page and we use the text editor and we throw it in there and then we see what it looks like and it's got every heading everything that sits on the page every picture, every caption all of those kind of pieces that is available in what we now call all of those are covered off so we know that they're styled we know what they're going to look like so if the client decides they want to use an HR it matches their theme if they decide that they want to put an image on the page and they want a caption the caption actually looks decent because a lot of people don't cover that stuff off so I think it's just going to be a case of slightly adjusting the styling of your theme to accommodate different opportunities it's not going to be changing your overall design of your websites and I don't think your stack is going to change much does that answer your question? Cool. Is there anybody that has a quick question to end on? One back here and then we'll wrap up Well it's not a question but it's an invitation to join the support aspects of WordPress where I participate now I do a little bit on the Slack chat but a lot more on the WordPress org slash support and there's a little bit of everything people come up saying how can I do this or I've been I've been hacked what do I do and well you help people out and there's lots of levels there and you needn't be an expert but there's and I learn a lot doing it Thanks Ross I might just finish up by saying that I have built my business and my bread and butter for the last five years on WordPress and it has been such a beautiful and generous community to be part of and the opportunity to actually give back is exciting and if you guys do have any time that you want to see how a process gets moved along and put into a mainstream software product well you've got a really good opportunity to see that. Thank you