Open Belgium 2021: Success through openness in digital design

[Music] i'm not using screen sharing uh to make that large uh it would be cool to click if you can read slides and it would be nice somebody could confirm that that it's working and that you're hearing me correctly and if technical things are out of the way we can get get get started okay um the quality is perfect but um don't know what to do about it start the audio if it's very annoying so without hitting for a second [Applause] what about now this is okay what's up okay so i'm trying with the airpods maybe this is better all right okay thank you apple um so i'm going to share my screen again so it helps to click the blue button on the top right of the slide height presentation and then you can see the presentation in full and with all of those audio problems out of the way we can get started my session is called success through openness in design and my name is johan i'm a designer i work for a company called mono also known as mono company on twitter and we are a small design studio we are seven people strong and we've been around for uh seven years we designed digital products and services and um it looks like the work we do on the left side you can see a video editing application on the right side you can see a planner application for schools to plan their lessons and i sometimes jokingly say that um all i do every day is draw boxes and arrows and connect things together as a designer i'm always thinking about where should the button go what is the content of the screen how do you go from screen to screen and i find that overall the last few years uh the overall quality of um software and digital variants has has been getting much better so if you're belgium belgian and you have to do your taxes you might remember uh the screen on the left which is the eid middleware and um it um it was a terrible experience to log into the federal government your eid and now things have gone better uh through its me and i think overall the last few years there's been like a big baseline quality improvement in uh design um so um general level of things that are being put out there is much bigger and firms companies have also decided uh to share their design more so on the top left you can see ibm's carbon design system on the bottom right you can see shopify's polaris design system and these companies have decided to share their code publicly to share their um design system publicly so that anyone can access it learn from it and uh maybe use some of it in their own work either as inspiration or sometimes completely with uh very permissive uh licenses as a designer i always encounter specific problems for example a few weeks ago i was working on a system where it was about dates so i had to find a way to ask someone for their birth date and this is a similar pattern on golf.uk where they ask the question when was your password passport issued so you see that the design solution that they have is to ask for day month and year in three separate fields now there are so many ways you can tackle this problem um if you look at how other companies did it like for example linkedin they have this very complex picker where you can pick between first a range of dates and then depending on the range of dates you will also get a double date picker so the question is what is the best pattern at the right time and as a designer i'm immensely thankful to have all of these design systems out there that i can reference and check their research i'm also begun sharing myself as a designer uh on the bottom right you can see a photo from a design systems event that we held in gent you know when we could still hold real life events and on the top left you can see my github profile where i post a lot of open source projects and things that i'm playing with and i think um i i like this sharing because it allows me to learn from others it gets me into a conversation with others and i strongly believe that our work becomes better when it's discussed so when there are multiple eyes on on a problem when there are many people discussing something that's when work can get much better and there's a certain evolution in in the sharing of work we had open source code for a long time but now there's also more more and more design being shared one of my favorite apps is called figma so that's the app icon for one of my favorite design apps figma they they decided that it's um super important to uh to focus on community so figma it's an application that you can use to design things it's like photoshop or sketch you can use it to design but you can design together so it's a bit like google docs but for design if you've used middle mirror the platform it's similar but it's more like a professional design tool where you can work together but figma decided that community is so important that they made it one of their pillars for their product to design last year um focusing hugely on community and sharing of design remixing other designs work and whenever you publish something on the figma community you do it with a permissive license so creative commons license cc by attribute for those uh who know their ic license and it means that whenever you share something that others can use it as long as they credit you and we've also been publishing as a company uh some design things on uh on our admono account and uh for for now we've published mono icons we've published mono devices which are device frames and another resource and i think um the sharing of design is is is so important so maybe for those who don't know what a design system is because i'm talking design system here design system there and you might wonder what what is he talking about what is the design system it's a cohesive set of principles design patterns and guidelines that allow people to work together to work on digital experiences so for example the people at ibm so that's the top left or the people at shopify that's the bottom right they have this documentation website that uh tens hundreds of people maybe worked on together to unify what a shopify app looks like or what does an ibm app look like and it doesn't um it's not only uh private companies that do this governments uh do it as well um in the netherlands there is uh projects that's that is starting that it's about um starting a netherlands design system so if the dutch government has to make an application um what uh what does it look like how would it work um it's an early phase this is a website to promote the idea um and on this slide you can see like a previous version of the design this is not what it's gonna be in the end it's one of the projects that started the idea of why don't we take this work and why don't we share it with a wider community um what they did was set up a slide where they are discussing the design system and uh the community is quite active holding round tables and events and um and talking to each other uh to try and figure out how to do this i think that's quite interesting and it reminds me a lot of the golf.uk um design system so golf dot uk um the redesign of graph.uk is about 10 years old 2011 uh they launched this uh this website and if you compare it to uh in belgium it's a bit uh comparable to the vilandro.pe website or federal level belgium.be website uh so you go there to get information about your passport about driver's license about gathering you know live stuff and then um on the right side of this slide you can see uh the home page for the golf.uk design system so from that project a design system was born which is now used uh to um to to power uh a lot of government projects in the uk so i think um they are quite sad when it comes to implementing a government-wide design system in the uk and the theme behind this is called the gds government digital service and they have been quite prolific in sharing everything that they learn so they built up a community they have a lot of blog posts i remember a time when someone from gds came to speak in antwerp and to to promote uh what what they learned as a group about the government names of a design system about how to do this in general and um i think um the what they achieved uh is brilliant uh they unified over 2000 websites with a different look a different experience uh to to use the uh uh made a design system so the graph.uk design system and if you look a bit uh deeper it's really cool what they do so for example if you look into a design pattern or a component they have a cookie banner i don't like cookie banners so it's just an example but if you if you uh think if you look at how they do things i think it's quite mature they have a design page about the cookie banner where it says that in this case that it's an experimental component you can get the code there you can get a design for that um component there but there is also like a whole github discussion about that component so if you want to know why the design is the way it is you can read the whole discussion on github which is i took the screenshots um more than 20 pages long if you would print it out and that's all the research that people put behind this all the opinions on the page so the um if the design is effectively being tracked and this prevents people from reinventing the wheel all over again uh based on the research you get to a pattern the pattern gets validated maybe it's validated through testing usability testing user testing and through community discussion and then this pattern is ready to get shared with a wider audience but i want to bring this back to belgium um in belgium i think there are a lot of strong open source initiatives in the development world but if it comes to design there's not that many in the development world there's there's foster a yearly conference about open source initiatives there's a drupal which was founded by a belgian there are initiatives like open summer of code and apps for gent there's an upcoming initiative from the government about working with the solid and data faults but if i look at uh design or open design uh initiatives in belgium there are initiatives and i think that's a bit of a shame if you look at where things are going um where we're going with uh with uh with the review plan from europe uh where we're going um politics-wise with the plans um from the the federal government about uh making things more digital then i think uh we have a lot of work on the table so my proposal would be to um take a cue from golf.uk and also from the dutch people who already started their project and think about maybe we should create a belgian design system and one sunday i was very ambitious i think i just started uh creating it i made a proof of concept for the federal level uh brand guidelines belgium so that was the start because i thought uh we first we need the brand uh right and uh i was a bit overly ambitious i think uh i worked on it a few hours and i realized that um this is not gonna gonna be a one one was like i don't like this logo maybe we should change it and then i looked at the info coronavirus website um and i was like why is the line length so long and what is that ugly uh banner doing there uh we should really uh focus it a bit more and work on the typography and try to to take my designer's eye and and look at things and and think about uh where we could go and this is by no means um a finished work of course as you can see there's a lot of placeholders and it's really a start it's really nothing it's only a couple of hours of work but i quickly realized that this is not a weekend project this is a community effort and this is something that we will have to do together uh with the whole of belgium so um i reminded me of this proverb if you want to go fast go along if you go far go together so i believe that we need to work on putting more uh design out in the open whether it's or from private companies and this open design documentation will really help us forward to increase the level of design in belgium i want to talk about community models so that we can have a wider community that contributes to a bigger system uh like the gulf dot uk i would like that people think about reusability that we don't reinvent the wheel all the time and then we think about reusable components that are accessible that are performance that people can take from a system and that they don't have to start from scratch anymore a final point i want to make is that i think taxpayer money public money should lead to a public good where i believe at the moment not enough of the work that we're doing is being shared out in the open even though it's paid by public money so i i have a question uh for the whole audience uh next up there's gonna be some discussion where i also have some uh some questions for you but in general i think my message is what are we waiting for let's make a belgian design system and let's make it awesome thanks okay so these are my my slides and now i can invite everyone to um to connect their audio if they want to maybe astrid you have to uh to set up something for that um and i everyone should be able to connect with the audio all right cool i hope you and enjoyed the presentation um and if you want to say something uh don't be shy uh let's uh let's get the conversation started um to uh to talk about um design can we can we you can also put on your webcam if you want that's a feature right uh yes but i i will enable that right now all right cool uh so uh audio or video you can choose um and uh if you have a comment about the presentation that would be welcome or um and uh an answer to the question here how can we encourage sharing design across companies and organizations that's that's the first thing that i'm wondering like why why don't people share their designs uh more encourage that sharing in order to say something you have to unmute yourself it's the first button in the row where you have the microphone and if you are too shy you can also put your question in the chat i am wondering yuan what do you think are the main obstacles for people not share or for a belgian open design system so that's actually um my my my further point uh i think uh main obstacles for a belgian design system are that there are different levels um so federal regional level um and they have to work together so that's a belgian problem but i thought about it and actually every country has this problem um in the uk there are different parts of the uk wales england uh scotland northern ireland um so i mean they they did it um and uh then they're in in in dutch um in the netherlands there's also the rex overhead and then the local governments different levels so i think different levels are the main problem another problem i think is that people don't really value design that much so it's a bit of an unknown that we should invest in it that's also something thanks i see that connected to their audio maybe they want to ask a question hi uh i'm not sure if you can hear me right yes uh all right perfect uh first of all great presentation thanks a lot um i have a question where do we sign up um uh i am jokingly of course but no i think it's a really nice initiative um i was also i had a question um because you you know you mentioned there are a lot of uh design systems out there a lot of group big companies uh tech companies publish their own design system uh what would make a belgian design system a belgian design system for example if the uk has a great system uh maybe [Music] why not borrow their design system for example maybe it's a bit of a hypothetical question but maybe something to what would make what make belgium's design system unique in a way is perhaps my question uh i think uh if you look at it objective there are good parts to the uk design system but if you copy paste it you don't have anything yet because i think what we need to do is work on a wider community that uses the same system so the real product is the wider community that uses the system um it's not about that like i had my sunday experiment there and it's not about the perfect design file i could theoretically work on it for six months and come up with a perfect design but it's worth nothing if if it's um shared and it should also be built together um so um people in the netherlands i had a chat with someone they really thought about this and they they already went through that route of making the perfect thing on their own but they realized it's more like a community effort and they had agencies different parts of the government they they have to get on board with this community effort uh first it doesn't matter if you have a perfect system it's more about creating the system together and then then it's it's becoming a viable thing i agree um i think that's the biggest hurdle i guess thanks all right cool does anybody else want to ask a question or chime in with their question hi um hi um there's something i'm wondering and i've thought about it a lot if you talk about design systems and most of the things we see are actually like component libraries and like ui it i think it's more interesting to think about about the design system as the governance and the community um especially if you talk about uh something like a belgium design system but how would you like organize that is there somebody maintaining the community is there who's in the lead that's mostly my question um i think it's quite an interesting question it's also the most difficult question how to do it um i showed a bit of governance stuff with the github issues where the cookie banner was being discussed but i think it's much wider than opening it up code wise or design file wise there's gonna need to be community events there's going to [Music] need to be people who who are backing it up and who think within their professional position that putting time into it makes sense um i think if people realize that if over a longer period we will invest in about design system as a group or like a good flemish design system a good wallown design system then we can really go further and having those conversations talking to each other about it using it and and and perhaps already starting with sharing things more publicly when we do work can already help i think it's uh it's the the governance aspect and who's in the lead is quite a difficult one um ideally it gets decided uh top down by the government by the government themselves that they want to invest in but another uh it could happen is that it's bottom up that enough people decide that uh it's a good idea and the uh result could then uh be um uh overhead if uh how to it could be used as a base for the the real belgian design system because there was already a community effort that's the two two approaches that i'm thinking about i think that like the bottom up is interesting um yeah the community is missing i guess and i wonder how you can create it without somebody from the government leading it um because you know there's obviously some sort of design system or component library um if it's very close so maybe if you can show by example how it could be done it would be interesting um i have another question but maybe somebody else wants to maybe i'm gonna answer raphael's question first uh he says um i don't have mic access let's say we end up with a very solid system worked on by lots of designers and how easily do you think it will translate to government government use um i think it will be a real challenge um and uh not not super clear on on on on what the question is there but getting a system adopted i think that's the question we are getting it adopted uh for real uh that's gonna be the real challenge because you can make a system but you have to work on adoption and uh one difficulty is that everyone has their own needs um the maybe there are uh um already requirements in place uh that um different uh people want you have differences between local government and government and regional government and federal government and they all have different requirements uh so working together um and finding a way to maybe have variance of the same system uh that will be a challenge but i think uh if we get it started we can improve the overall quality of the websites that we visit if you now visit uh the um financials website from the federal government or the one from public health or corona virus they are all different and i think it could work if they all start from the same idea the same design system um if anybody else has a question i'm just gonna wait uh then 20 seconds and then you get your question if nobody responds if that's all right okay so no uh no new people are coming in with a question if you want uh go ahead i'll try it's a little follow-up of what rafael's question was um a call like regarding adoption of design yeah like the components um because everybody has different needs it will be difficult to align like there's lots of opinions um like how could we get along building different versions of things that still have like uh sharing those because we have somebody needs a very complex upload field for example another one it's very simple one um like size applications will change so i'm thinking maybe towards something like spotify this with their like approach on the things i wonder what your thoughts are i think there's there's different different needs uh there's content website needs there are application like needs uh there's also something in between which is like where you um maybe register for a driver's license so that's like a usable form on on a website and i think um you will need variance of your design system for those let's say the backend type of app where you have a lot of data entry and where you are working in every day it will look different than a public website which is about information and it looks slightly different from a form type website where you have to where you're interacting with a with a service online so i think all of those can be split up into different design systems if you look at shopify they realized pretty quickly that they have a design system for the back office of the shops but they also have a separate design system for the point of sale for mobile um so i don't think uh one one design system um is the answer but sharing of design systems definitely is the answer so if it's close to a closed source if it's locked behind doors then nobody can remix it nobody can take inspiration from it so i think to to make it more like a natural evolution let's say somebody makes a an app for the federal government and they happen to make a design system while creating it why don't they uh put it online publicly and share that idea with other people who are working with uh federal government it's maybe a bit idealistic that uh they could merge the two code base or use the same uh design as design logic as a base but i think maybe if people start doing it it could uh something good start that's uh what i'm thinking um all right um thanks so um that's all about belgian design system um maybe i want to take it a bit broader and talk about how open design could help in belgium maybe people are working in a specific field where it would help if there is more open design so if anybody has a comment on this one feel free to to let me know and then we can discuss it for me personally the the icons that you published with mono uh were already super interesting um and i use um i forgot the name of the of the tool for for icons um but these guys yeah yeah with these kinds of um open design is really useful for at least my work with an open knowledge belgium and as a non-designer so that's more like free assets that you can use uh which are helpful right um so torah has a comment um a non-design example uh on the bottom um on the bottom up approach right okay very interesting i'll definitely read a written article so maybe people are working in different fields medical fashion government um something else and uh if you have any any idea about maybe how design is opening up within your space if you have a comment about it feel free to put it in the chat um if there's a general question about uh the other three topics um how can we make belgium design system a reality or the one that has not been on the screen so far much how can we encourage sharing and design across companies and organizations they are welcome we'll be closing the session in eight minutes or if there are no more questions uh we will just uh stop it here so i'm just gonna give it a few moments if somebody wants to say something i will take that as a no um so i want to thank everyone for attending the session i hope that i'm inspiring a little bit uh to start uh this idea of a belgian design system i hope that people will maybe think about okay i have this project here why don't i put the source code on github i have this design file here in figma why don't i share it on the uh on the community page on figma um a street if you want to you can also uh take over and and talk about open belgium and the coming sessions um but um if um if uh we're closing it down i hope people will get some inspiration from this to maybe if we can get back together physically maybe we should have a hack day uh anthony asked how can we sign up um there's no sign up yet but i hope that the idea becomes something that people start thinking about thank you johan and i can just refer to our website openbelgium.pe where you can see the full program and you can still sign up for all the other sessions and thank you everyone for for joining this session and i hope to see you at a later one as well scene of that recording you