 Hello everyone welcome to our talk the powerful intersection of Drupal development and UX design at cyber doc It's quite a mouthful. I know but hopefully it'll give you a peek into how we work together and effectively in our agency To make some great products for our clients First of all, who are we? We're in the ward with an agency based in the UK and we also have offices in Germany Spain Portugal and the US We bring together user-centered design strategy content and technology to build Secure accessible and user-friendly platforms for our clients We've been established for over 17 years and we've worked with a wide variety of clients including some brand names like Bank of England The Commonwealth Bosch and compare the market My name is Mira I'm a lead user experience designer at cyber doc and I've been here for just over four years now I've led the UX work for a number of our key clients working across user research and strategy information architecture prototyping and usability testing and make sure we bring a research and Evidence-led approach to our projects while also ensuring that accessibility is at the core of what we do Hello everyone, my name is Enrique Vorba and I'm taking a lead at cyber doc And I've been engaged in the Drupal community for more than nine years as a software developer So I'm sure you're all familiar with the term user experience or UX by now But just so you know we can set the scene and make sure everybody's on the same page According to the Nielsen-Norman group user experience refers to all aspects of an end user's interaction with the company It's services and products and UX design is all about designing Meaningful and relevant experiences to help people reach their goals in an easy but also in an enjoyable way It's vital for websites apps or any platform to succeed and to achieve this User-centered thinking must be integrated through every step of the design and development process There are many UX frameworks out there but what they all do is provide a roadmap for designing these user experiences and They lay out steps of the UX process and give direction to the project But UX design isn't only important for the end user it brings benefits to everybody working on the build Particularly the development teams. Let's look at what some of these benefits are when the development team is involved in the UX phase You have a clear roadmap for the build the design team we use wireframes You'll be familiar with these the visual guides where designers show the different elements and components How these are laid out on the intended page and what the user journeys can look like? We use these to facilitate discussions with the project teams to test layouts layouts and screen floors with users And as the project progresses we add more visual detail and UI Elements to it and iterate on these these iterations reflect not only the user research and the testing that we're doing But also the technical discussions with the project team They provide a strong foundation for the build because they show you what you need to achieve as a developer And what you need to do to get there and so because they're backed by a research Developers can be confident that all the different elements are there for a reason Without taking a user-centric approach from the beginning Issues may be uncovered further down the line because it's not meeting the needs of your end users So for example, you may realize that the information architecture is not working or the menu is too confusing And people aren't able to find what they're looking for a complete the task Which then means that the developers need to go back in and fix things and build it Retroactively, so it's twice the amount of work in twice the amount of time With a strong UX approach from the beginning This is much less likely to happen and there are so many factors to think about when you're creating a website from responsiveness to Accessibility and if you're lucky enough to have dedicated teams in your business It's much better to rely on the specialist so everybody can work to their strengths And the UX team is there to help developers focus on their work knowing that the best user experience is also being taken care of Insights gathered from the UX process can also lead to easier and more focused conversations Because you have a solid reasoning behind every aspect of the design and build It makes it much easier to answer questions from stakeholders And clients around why is this a certain way? Why does it interact with this element? Also, if you face last-minute changes, which we all do or things that contradict what you've learned about your audience from the research, you're in a much better position to be able to push back and have those challenging discussions Collaborative environments also mean more knowledge sharing and better relationships. It provides opportunities for open communications You bring in multiple perspectives and new ideas and insights from different sites And so when the teams are blended in from an early stage Everybody can learn from each other and you develop strong working relationships that reflects on the work Which of course means a better end product So we need to remember that everybody is working towards the common goal Which is to create the best possible experience and the best possible finished product and in our case in an agency environment It means that we can deliver great results not just for the clients, but also for their end users Let me give you an example of the difference a user-centric approach can make You're familiar with a mega menu can be used to show a large amount of information That obviously needs careful consideration So here in the old USA.gov website, which by the way has been updated the categories in the menu are not laid out in a very logical way I mean they might have been a logic somewhere for example It may have been based on frequency of usage, but just by looking at this menu You don't know what this is and it's not obvious So we're forced to read through a large amount of information to find what we need a Menu should provide a good starting point to navigate the website But in this case the user might have already been frustrated before they've even begun and might leave the page In contrast the ST loader example here shows the difference when user-centered thinking has been applied Here you can see just like the previous example. There are many products. There are many categories and many Navigation options, but they're organized clearly and give the end user a number of different pathways to find the information that they need Research may have shown that when shopping for skincare people might be looking for an answer to a particular problem like dry skin So the products have been ordered here by concern Recognizing and respecting the user's natural behavior like this will help people navigate the site more comfortably and find things that they're looking for in a more intuitive way and it makes it easy for people to find and Purchase an item brings increased conversions and return on investment for the business and also it makes it more likely for the customer to Come back because they've had such a positive experience on the site But what about an existing site? Where do you start with checking the user experience? First and foremost, I mean it's in my job title But the most important thing you do is speak to your users get their feedback on the site features What they struggle with and observe how they use the website? There's so many different ways to do research whether it's through interviews through surveys ethnographic studies where you're watching how they interact with it But the goal is to see to find out what the intended audience is thinking what they're feeling what they need to do and Whether they're able to complete their tasks in an intuitive way And you need to let go of any assumptions that you might already have about how the interface is working You're not the end user and you need to let their feedback guide you You can also look at the website analytics and see which pages are being visited and which ones are not look at You know time spent on different parts of the website Drop-off rates and where this might be happening. Is there any dead weight that can be improved? And that can be removed to improve the user journey Which of course brings us to content, which is a hugely important part of your platform It's what's conveying information to your users reviewing and Auditing your website content. Do you have any outdated content that can be removed any pages that can be combined or rewritten is Is everything is all the copy readable? Is it accessible has it been checked by both subject matter experts? But also end users to make sure you're getting the widest possible range of inputs Now you may have challenges with these individually for instance Maybe the analytics tracking hasn't been set up properly or you may not have the resources to do very in-depth user research But even small attempts is a great start and can all contribute to getting an idea of what works well on the website And what doesn't? right so All these methods can help you test the UX from an existing Drupal site But for better results is very important for designers and developers to engage as soon as possible from starting the project And probably tie deadlines Usually developers don't see the design until it's handed over for the bill. However, it is vital for both teams to engage throughout the entire process Both teams won't be must be aware of any design decision being made as well as any limitation during the Drupal do during the builds stage These so we can avoid running into problems in the future Now we understand that in the real world is not always possible for designers and developers to work closely together side-by-side However doing so even in small ways can bring a lot of benefit to the projects having regular stand-offs or Having dedicated slack channels can make all the difference Working in agile methodologies can also help because if it's terative nature Help to bring to keeps everyone in the loop So at cyber though, we started bringing the developers into the initial UX and designs phase So this way we gain insight into user requirements right from the beginning The Russian we understood from the beginning the rationale behind behind any decision being made and both teams were aware of What each other was doing? After all we are working toward the same goal. So it makes sense We are delivering the best side for both our clients and then users So we have talked a lot about collaboration and how important it is. Well, how do we bring this into the real world? Collaboration has always been part of how we work on cyber doc But when we started working on Oscar kilo, we started thinking on how we could put this collaboration even for her Oscar kilo is an online hop for mental health and well-being for members of the police officer members of the police force in the UK this project involved Completely user-centered redesigned and a Drupal bill for the from the old Warped side that you can see in here as we mentioned before Developers were heavily engaged right from the beginning in the UX and design process COVID brought ex challenges in the way that the different teams communicate between each other At cyber though, we were used to work in a hybrid In every way even before the pandemic but this time means that everyone was working remote So face-to-face interaction was not possible at all To overcome this issue We use a series of synchronous and asynchronous tools to keep the communication alive We had regular stand-up and meetings over soon We use Figma and Miro to share the designs and provide feedback even in real time And we also we also share documents and files through the decade is like channels As developers we were involved right from the beginning in the UX process These men that every every board of teams we were aware of what each other was doing when the time came to build a First low-fidelity Wiframes the development team was asked to raise any red flag So we could avoid any issue that could hamper the the bill of the site We advise to the x team on how they could tweak the renal decide to make it work better with Drupal There was a constant flow of suggestion and communication between both teams and These process continue all the way through the end of the project This resulted in a very smooth process that make both themes life happier and easier this collaboration Continued even after we start building the website So if we encounter any problem We always could resort to UXers or designers to have a conversation and try to find a solution together This made the the build process much more efficient because we could focus on our product project rather than making design decisions Here you can see a high-fidelity prototype for the Oscar kilo website Which includes all the components ready for the site to be built and here? We can see an example of a particular component through all in the time cycle from the white framing UI design and the final implementation Notice how very few changes were required throughout the entire process and also notice how Individual component could be a stalling completely different way these gave designers and UXers the freedom for creativity But always doing it in the enough in a development friendly way During the Oscar kilo project the development team start thinking on this idea on how we can push our collaboration even for So we realize that during different projects We were building again and again different components that we could Concentrate in the starter key So we created what we call the component key that provide these components out of the box for all of our duper project That implements layout builder The component key is like a starter key for all the Drupal Sites that we developer implementing layout builder We use a layout builder at cyber doc because it's already in core And we believe that most of the development is going to be driven through at this direction so the Component key is a working process every time that we develop a new component in the given project that we think is interesting We can fit it back into the component key and that makes it automatically available for all of our Drupal sites Here we can see Different components. This is the live orchid kilo site and these components are already part of our component key So in here You can see a list of components that are part of the component key And so for example, you have a campaign blog. You have a content section. You have a link blog Of course, we don't use all of the components on every Drupal site that we build In fact, we have found that the fewer the components that we use the better the experience for content creators and end users the component library also chips with a Based theme that we use to build soup things and be and create bespoke front end for every Drupal site That we built for our clients And here you can see an example. This is a campaign blog that is one of the component in our starter key and it's displaying the the default theme this make it more Quicker to get something up and ready for clients to see So Oscar kilo and the component library that Enrique mentioned provided us the seed of another idea to improve this collaboration that we've been talking about It's the mother file. It's so called because it's the source and the place where our designs originate from So one aspect that worked really well on the Oscar kilo project Was that because the designs were broken down into the component parts in instead of individual pages? The conversation flowed much better between the teams. So we thought what if we built on this? Let's explore tools that would help automate this process and see if we can take this approach to other projects as well So the thinking behind the mother file has always been there at cyber duck But this was just a way to formalize it within our working processes Essentially the file is a repository on Figma It's a single point of truth where UX UI and dev teams can all work together It contains basic ready-made wireframes of around 50 different components that you might typically use In a Drupal build things that we use regularly and this way the the baseline user center thinking behind these components is already done And we've incorporated a lot of the usability best practices So we don't have to design and create a new wireframe every time Of course not everything is included in the mother file But it gives the team time to focus on Customizing these baseline elements to make sure they meet user needs and also the requirements of the project Or we can look at other unique elements instead of having to design the same basic wireframes again and again Once the initial wireframing is complete the visual designer can then go and applied The required UI elements like fonts and colors and branding and make the wireframes quickly come to life The devs can then identify the elements and components needed to make these wireframes into the final functioning site And take these out of the component kit to configure them It's easy sometimes during a standard design process to forget to include those frustrating but essential little details like Footer designs or copyright and legal notices, but all of these are contained within the mother file So they aren't forgotten and so the developers don't have to keep going back to the designers every time to request them Of course, we're looking at things in terms of individual components here But clients don't necessarily think of it that way They want to see the bigger picture the whole picture and so the mother file makes it easy for us to illustrate this for them So we designers can then create some of the key pages taking the red amade wireframes and putting in the content the Images, etc. And we can show it to the client to give them a more accurate picture of how the site will look and operate Previously we would have had hiccups handing over the designs for development, but With the mother file there is no single handover. Instead the teams are constantly collaborating throughout the entire process The UXers the UI team the devs and the clients all have access to the file And they can leave questions and comments on them. So it becomes a one-stop resource containing all the information and Updates from the entire project. So there is no us and them Everyone is collaborating throughout and working towards the same goal. The mother file is also not static We have been constantly changing and updating it so we can tailor it for each individual product our approach of constant Collaboration plus the component kit and the mother file brings benefits to everyone involved The standard set of components we UXers can concentrate on user needs rather than building endless wireframes We have more time to focus on things like research Microcopy interactions and and bring more value to the project Every component can also be styled in a number of different unique ways So visual designers can still have the freedom to be creative and customize all these components and Having access to the mother file also means there are no nasty surprises for the Development team when the project progresses from design to build If we're building every site from scratch, we just end up repeating ourselves So it's better for the development team to spend time working on what makes each site different it also makes it easier to switch between projects to To be able to train new developers and to cover holidays as well And if a client site needs a new component, that's completely fine Developers can create new Custom blocks and feed it back to the component library that you can use in the future The mother file also makes it easier makes life easier for project managers because they're closer to the detail of the project And they can work with the client and the team to build a clear development plan By improving our working processes, we also deliver better value for clients, you know, projects can progress more quickly We can stay on budget and save more budget because it doesn't need as much development And they get a solution that's tailored to their users needs and as we're working iteratively They also have a chance to be more involved, you know When we showed the mother file and they can leave questions and comments Their input is taken into account and they get an insight into how the project is being run And finally a much better user experience for the website audience They should come to the website and know exactly what to do by using some of the familiar components They see familiar design patterns and this makes websites better to use So, what have we learned? Here are some key pieces of advices that we collected during the Oscar Kilo project that we want to share with you And hopefully it's going to help you improve the relationship between the designers and the development team in your companies These are key learnings that we'll carry on in any future project that we are developing As developers, it's very important that we need what are the user needs, what are the requirements and what are the expectations This will help both to guide the build and to limit it We should be encoding for the very beginning in the UX and design process Which takes us to the next point A strong integration between designers and the development team is crucial, especially if you are remote working Using tools like Figma, Miro or our own mother file help us to enhance this collaboration between the teams Communication is one of the crucial elements when it comes to build a successful Drupal site with a good user experience Just don't assume that developers and designers they understand and they know what each other is doing Regular stand up, show and tell us that help keep both teams up to date with what each other is doing Even if you can't do this infrequently or in short bursts, that's even better than no communication at all A good handover or no handover at all from the design team A design handover should be trained like a relay race when the designers just handover the work to the developers and they just disappear If we spot some issues during the project, it's important to us so we can come to the UXers and designers And find a solution for any possible problem that we find with the development of the project Visual reference are also important This gives us a clear roadmap of what needs to be built and it's always better than just reading communication along And agile working One of the major benefits of agile is that you can iterate a solution within your internal team and we decline as well So you can spot issues and problems in a timely manner During the early phase of UX and designer, developers should give feedback to the UX team and make sure that we are making the best use of our client's budget For example, why to create a new fancy login page where we can use the gene login module But then how can designers and UXers propose such features if they don't know about it And this takes us to the final point, which is to educate everyone As Drupal developers, it's our responsibility to educate everyone in the company in the best ways to work with Drupal, greater than against it At CyberDot, we do a few things We have regular launch and learn sessions so whoever is interested can join and learn more about Drupal and how it works The development, design and UX lead, we have regular retrospectives so we can discuss how we can improve our collaboration and make it better The developers also, we run a short session to demystify Drupal that we do every Friday in our company announcement meeting And other teams within the company do the same Is it true that we are becoming increasingly, especially these days? But that doesn't mean that we shouldn't spend time to learn other areas of expertise within the company Especially where our work overlaps So these are our key learnings that we wanted to share with you And hopefully it will help you in the same way that it helps at CyberDot to improve the relationship between designers, UXers and developers Thank you very much So you have any questions? This is time Actually I have two questions The first one is about components, libraries that you showed us If I need to upgrade or change an old component If it's used on all the websites because it's centralized, like you said You have to create a new component on every page So basically what we did is that we developed this component library as a Drupal module that we are hosting in our private repository And we treat it as such So whenever we find a way, when we improve it, any existing component we just do it We do testing and when we just publish the update and it gets replicated to all of our projects So it's a centralized component The same goes with the base theme So it's the same philosophy behind it And for new components it's the same, we create a component, we publish it into the module Every site gets their update and then voila, it's there Okay And my second question, do you have a process after the delivery? Like you said you use analytics for example Do you have like content square or heat maps or things to understand how users use your websites Maybe to improve your weeks afterwards Is that a question for you? Yeah we do that, it can vary a lot by the client Some of them are far more evolved, they want the heat maps, they want everything set up And we have internal SEO teams, we have testing teams and we can set it up for them While a lot of them want to run it separately by themselves and they run the analytics But it's a standard thing that we do So we do heat maps, we do analytics But we strongly recommend qualitative research as well So ongoing testing, we say every few months go and do qualitative research Because there are lots of things that data doesn't tell you, that heat maps don't tell you People are dropping off but you don't know why So we also make sure that it's supported by qualitative research as well I have a couple of questions online from Pete Davis One of them is, my clients expect the expertise of a UX approach but don't have the budget What sort of budgets do you have to have to be able to deliver a full end to end process? Oh gosh, it's a bit of a, how long is a piece of string We are very user centered in our approach And so we rarely have projects where the UX team isn't involved at all When we start from scratch and that's why there was this one particular slide Where we talked about what do you do when you don't have the resources We mentioned small things you can do So we run a lot of workshops with clients as well We work a lot on upskilling clients as well Because we're an agency, we cost money But what we want to do is also create long term change So we might do a one-off upfront research project To build in templates and building blocks for them to then go and use in the future So we do upfront research, talk to them about how they can do this Set up templates, give them guidance on how they can use this themselves Make sure analytics are set up, show them how they can use analytics We've had client projects where it started with no UXs on that project From the client side and now they've actually got their own UX team So we work with them to upskill internally as well But the main thing is even a small start is good enough It's amazing how many clients have never spoken to their end users So you start with some baseline analytics, you start with some baseline surveys Speak to five people, even five people can It may not be statistically significant but it'll give you direction So I'd say it starts on the way And it doesn't have to be expensive if you're only interviewing five people Pete's other question was Do your clients understand and sign off on components without seeing them constructed into a page layout? That's a very good question Something that happened recently in a project that we're working on Is that the model file and all the components It was such a good tool That the client, particularly the content creator team They asked to access to this file So they could put together a prototype of how the content would look like Even before the site was already there So I think it depends on the client But we also made the effort to explain to them How it should be used And how you're going to be used in the future When it's already implemented on a triple site We detected this opportunity this time in this project And I think it's something that we're going to keep doing from now on Offering this tool to the client So they can pre-visualize how the site's going to be Even before writing the first line of code But you do that in the context of a page So they don't just sign off on like a block or a message Basically they have, we use Figma To build this repository of components It's not only the breakdown of the components We also offer to them how the different pages They're going to look like But given the access to this library It allows them to play around with the components You know, they can like a pooslet Move the different components together and see What components work better with what other components And that's going to give you a very good idea On how the final site is going to look like Okay, thank you Any other questions in the room? I have one more question of my own, actually We love Figma, we've used it a lot But we saw the other day that it's going to be Bought by Adobe, apparently Have you got any thoughts on what you might use After Figma, if anything happens to it? That's kind of a mini crisis that we have run Another crisis, but definitely we started having this conversation And I think we share the feeling in the community That it might not be for the best But right now the best we can do is to wait And see what happens I mean, it's a very powerful tool And we use it not only to interact with the clients But internally, posting things back And we use it even in real time So trying to find a new tool to replace it It might be, well, a project in itself So we prefer to wait a little bit to see what happens Hopefully it'll be okay One of my colleagues pointed out, penpot.app I don't know if you've come across that It looks quite interesting So we're going to see what that's like I think I read something about a competitor They call it Ligma So it's not Figma, but Ligma Well, you know So let's see what happens Any more questions in the room? Oh, yeah, no, we've got somebody I'm coming Thank you for asking that, first of all That's a great question I'm just wondering, assuming you continue to work in Figma Does development contribute to the actual Figma file In any way, in terms of documentation, notes About any of the components or anything like that? Definitely We don't contribute with design Because usually we are very bad at designing Me in particular, I don't know about design I can put two cores together But we use the comments And we use it as a live tool So we interact with the UXers and designers In real time So that's how we contribute And we provide feedback to these teams And try to make the design To prepare it to work better with Drupal So that's how we contribute But then, from that point on Is the designers and the UXers That own the design, if you wish Anyone else? I think we're good then Oh, yes Yes Do you put any time or work into UX For administrators of the site once after handover And how that works with how the devs Actually deliver their project? Sorry, time and what? Administrators for sites rather than end users And... You mean in the way they interact with the FITMUN file? In the way that the UX designers And the devs work together To think about the editor experience Oh, yes I think you can... We have to remember that the client Also have access to these documents And the prototype So they contribute in the same way That we, the developer team, we do We post comments, we post questions We post suggestions and the client as well And these interactions not only happen Between the design and the development team We, the developers Can also ask questions to the client On top of the design Which make it more easier just talking In a conversation, in a ticket That is just brilliant requirements It's always better to have something visual To work on top of Just to add, if I understood separately It's like the content editors And people who are actually building those pages So they're a much ignored part Of the whole thing we have to admit And it's something that we have tried To improve over time So for a number of the sites That we've been working on We make sure they're involved in our stand-ups We treat them as one of our end-users As well because they're the end-users Of the system I would say it's not... And I'll hold my hand up It's not being on par with the end-users The focus on end-users as much But over time we've made sure We've included, we've made sure it's got Better notes and better usability Of the system itself So that's something that we've definitely Been working on but Yeah, I think we can do better in that Just on top of that I think now that I got your question better When we deliver in this site Content creators don't participate As end-users during the project But we do training sessions to them So we teach them how to use Layout builder or how to create articles And those sessions are very important Because sometimes we detect issues In the process So even though we don't focus too much In the backend because we are using Drupal And we rely on it Yes, we sometimes detect Some issues that can be fixed With quick amendments And that is coming from content creators Or site managers Or the different roles that we create In the different projects that we work on Any other questions? Ah, yeah Just a quick question What tool do you use to project manage Like, you know, to track Where you are in the process What do you use? That depends on the project Sometimes because of limitation We decline, we use Jira We use ClickUp, mainly I think this is the two tools that we're using Mostly ClickUp We have found that it's very flexible Very powerful Sometimes too much We get this into a problem But generally speaking It's a tool that we The agency and our clients can understand And it's very easy to use Once you set up all the project And everything that it should be There to keep the communication with the client Any more questions in the room? No? Okay, well in that case Thank you very much, guys That was great Thank you