Delivering rapid & consistent experiences
This is a modal window.
The media could not be loaded, either because the server or network failed or because the format is not supported.
Formal Metadata
| Title |
| |
| Subtitle |
| |
| Alternative Title |
| |
| Title of Series | ||
| Number of Parts | 40 | |
| Author | ||
| Contributors | ||
| License | CC Attribution 3.0 Unported: You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal purpose as long as the work is attributed to the author in the manner specified by the author or licensor. | |
| Identifiers | 10.5446/54404 (DOI) | |
| Publisher | ||
| Release Date | ||
| Language |
Content Metadata
| Subject Area | ||
| Genre | ||
| Abstract |
|
openSUSE Conference 201933 / 40
7
11
12
13
15
16
17
18
19
20
23
25
26
27
34
38
40
00:00
Philips CD-iSystem programmingOpen sourceProduct (business)Computer virusMultiplication signComponent-based software engineeringFront and back endsSoftware developerProjective planeMögliche-Welten-Semantik2 (number)Entropie <Informationstheorie>Flow separationInheritance (object-oriented programming)Sign (mathematics)Food energyWordForcing (mathematics)Computer animation
02:06
System programmingMIDIMaizeSoftwareContent (media)System programmingContent (media)SoftwareTask (computing)Product (business)Software developerInformationVirtual realityCore dumpGoodness of fitFacebookData managementDatabaseMereologyAugmented realityMultiplication signSurface of revolutionDesign of experimentsGraph (mathematics)Noise (electronics)Summierbarkeit40 (number)Different (Kate Ryan album)CASE <Informatik>Video gameComputer animation
05:03
Electric generatorVideoconferencingProcess (computing)Lattice (order)Web crawlerTime zoneSurface of revolutionKey (cryptography)Medical imagingBitGenerating set of a groupDifferent (Kate Ryan album)Product (business)Computer animation
06:08
Product (business)Task (computing)MaizeNatural numberProduct (business)SoftwareDirection (geometry)Pattern languageElectric generatorInterface (computing)Expected valueSign (mathematics)SurfaceFrequencyProjective planeServer (computing)Group actionComputer animation
08:01
Office suiteProduct (business)Task (computing)Cartesian coordinate systemGoodness of fitOpen sourceKey (cryptography)Meeting/InterviewComputer animation
08:29
Latent heatOrientation (vector space)Enterprise architectureExpert systemSoftwareDifferent (Kate Ryan album)Interface (computing)Multiplication signMilitary baseOpen sourceGoodness of fitTerm (mathematics)Pairwise comparisonSpherical capMeeting/Interview
09:25
Office suiteMaizeScale (map)Spherical capExpert systemSoftwareProcess (computing)Enterprise architectureTerm (mathematics)Pairwise comparisonOpen sourceSystem programmingPoint (geometry)
10:13
MaizeCohesion (computer science)Product (business)Open sourceInformationSoftware developerSystem programmingConsistencyScalabilityData structureRight anglePoint (geometry)System programmingCentralizer and normalizerSign (mathematics)Open sourceInformationSoftware developerDifferent (Kate Ryan album)Cartesian coordinate systemLine (geometry)Product (business)WordComponent-based software engineeringGroup actionMultiplication signCASE <Informatik>CollaborationismGodProcess (computing)Term (mathematics)Free productDebuggerData structureSoftware testingMereologyPlanningCohesion (computer science)State of matterComputer clusterTemplate (C++)Normal (geometry)Streamlines, streaklines, and pathlinesService (economics)Interface (computing)SpacetimeGreatest elementConsistencyElement (mathematics)AreaInteractive televisionOffice suiteFerry CorstenComputer animation
15:49
MaizeSystem programmingAreaInteractive televisionTranslation (relic)Component-based software engineeringOpen sourceSystem programmingFeedbackLevel (video gaming)Element (mathematics)HypermediaProjective planeComputer animation
17:05
MaizeSystem programmingInterface (computing)Database normalizationScalabilityOpen sourceHidden surface determinationSoftware frameworkOpen setLevel (video gaming)Proof theorySystem programmingUser interfaceOpen sourceSoftware developerFeedbackDifferent (Kate Ryan album)Forcing (mathematics)Proof theoryTranslation (relic)Term (mathematics)Level (video gaming)Product (business)Component-based software engineeringProjective planeRepository (publishing)Online helpLine (geometry)Open setQuicksortRule of inferenceInterface (computing)Self-organizationElement (mathematics)Software frameworkView (database)Enterprise architectureCASE <Informatik>Set (mathematics)Scaling (geometry)ConsistencyBuildingContent management systemThermische ZustandsgleichungData managementWeb 2.0Library (computing)MassScalabilityContent (media)CloningUniform resource locatorDemo (music)Computer animation
23:28
BuildingView (database)File formatWindowThermische ZustandsgleichungSystem programmingSheaf (mathematics)State of matterImplementationMenu (computing)Different (Kate Ryan album)InformationCloud computingCartesian coordinate systemComa BerenicesMultiplication signDifferent (Kate Ryan album)Component-based software engineeringLatent heatState of matterWeb applicationQuicksortSoftware frameworkFrame problemBootstrap aggregatingContext awarenessCASE <Informatik>Type theoryDescriptive statisticsGroup actionCodeProgram flowchartComputer animation
25:44
Computer fileView (database)WindowOnline helpBookmark (World Wide Web)Interface (computing)Element (mathematics)InformationSet (mathematics)Latent heatComputer animation
26:08
Online helpView (database)WindowRule of inferenceHill differential equationProduct (business)Internet service providerElectronic mailing listDrum memorySummierbarkeitInternet forumLink (knot theory)MIDIStatisticsDefault (computer science)Green's functionContrast (vision)Link (knot theory)Slide ruleRule of inferenceError messageTerm (mathematics)CASE <Informatik>Variable (mathematics)Message passingProjective planeGraph coloringElectronic program guideSet (mathematics)Interface (computing)QuicksortExpert systemGraph (mathematics)Product (business)Interior (topology)Process (computing)Service (economics)Computer animation
28:45
MaizeOpen sourceTwitterTouch typingOffice suiteSystem programmingTable (information)Multiplication signLink (knot theory)Figurate numberOnline helpPresentation of a groupUniform resource locatorProduct (business)BitOpen setComputer animation
30:28
Videoconferencing
Transcript: English(auto-generated)
00:06
Okay. Hello, everyone. Hello. There's a lot of people still coming. Yeah, we're going to start in 30 seconds, actually. Well, welcome to the Open Source conference.
00:21
This is our very first time here. It's actually our very first time at any conference at all. EOS design system is a very new product in the open source industry. So, yeah, this is why we are introducing it to the world here, actually.
00:42
Hello. Hi. Hello. Yes. Hi. So, yes, welcome to this presentation. As Cynthia said, now we're going to introduce ourselves, actually. It's our first time we present this to the world. So, let me introduce myself. I'm Jesus.
01:02
I'm UX developer and Scram Master for the EOS design system team. I live in Barcelona. I was going to make a joke about the weather, Barcelona being very sunny, not here, but it's super sunny here, so no jokes. Very nice weather today. And, yeah, I work designing and developing components for the design system
01:28
that ensure that products at SUSE and other open source products have coherent user experiences. My name is Cynthia.
01:40
So, I worked for SUSE for six years, more or less, and actually I started with this project of creating a design system for SUSE initially. I'm actually the product owner of the EOS design system. I'm also a front-end developer, UX designer. I do a lot of things here and there.
02:02
And here, well, today actually we're going to start here. Today we want to take you into a little journey so that you understand how we actually understood, we found out that design systems are the solution to providing good experiences to our customers.
02:23
So, software is it in the world. There was a phrase that was published in the Wall Street Journal in 2011. And it was a phrase that actually was making a lot of noise out there because by that time a lot of our industry had to start to adapt
02:41
and understand that software was becoming a core part of our lives. And today actually we cannot do a lot of things without software. And actually this phrase is reality. Without software we cannot really do our daily tasks and not even work at all.
03:04
And we can see that one of the things that happened when this phrase was actually published in the Wall Street Journal, a blockbuster was actually kind of collapsing right then and Netflix was eating the blockbuster.
03:22
So the industry was really being disruptive and that actually happened. But something else is happening right now and it's the design is eating software development. At the same time there are some other revolutions that are happening out there as well. So one can say that virtual reality is also eating software development
03:42
and one can say that augmented reality is also eating software development. A lot of things are disrupting the way that we do software today. But one of them today we cannot focus on design. And why is this? It is because a lot of companies in the industry actually realized and we understood today that in order to make better software
04:04
we actually have to provide better experiences. And design and UX experience is actually what helps us to deliver a good quality of experience of products to our consumers. So we have a lot of companies in their consumer world
04:21
that actually understood this, that they started investing a lot of money into creating good and better experiences. Some of them, I just mentioned a couple, Facebook, Uber, Airbnb and so on and so forth. A few examples here. For example, the way that Facebook is one of the biggest content managers
04:45
or content databases in the world, they actually don't create anything. The consumers are creating it for them. And that's because software and the experiences that they provide to us allow them to gather all that information. The same happens to everyone else.
05:04
And this is another reality as well. So this is a generation, this is two years old. And this is a video that the father made in which actually he's showing the kid is trying to zoom an image.
05:22
This video actually became very viral. It was seen everywhere. And the thing is we actually have to pick up the pace a little bit with this revolution and how we enhance experiences and how we make our products better.
05:41
Because today, so there was a lot of different generations and every generation is known for different things. For example, the millennials are known for being very good at multitasking and we understand processes maybe in a different way than it was for the baby boomers as the previous generation.
06:05
Now this generation, which is the generation set is called, they were actually born with all the software that we have today. So there's another reality here. And it's when you create software, when you design software,
06:21
design products, there's one essential thing that we have to look into. And we have to fulfill user expectations. So the more that we use software, it's more that we can use the certain patterns for software and the more that we expect to see those experiences from one product,
06:45
let's say from Google Maps. Google Maps has a certain way of showing us direction and if you use another product for taking directions to come to this conference, for example, you kind of expect the same patterns and experiences.
07:03
That's because it actually is wiring your brain. These experiences, these interfaces are getting to you. And like I said before, there's a new generation coming as well. We should never forget the new generations.
07:20
They disrupt our markets. They disrupt the way we do things. And we should pay close attention to this generation that's coming. And actually it's not so far away from us because if we consider people that were born in 1996, they're 21 years old, more or less.
07:41
And they're already among us. And they already are more experienced than we are. And that is true. We have to understand that the young people may know things sometimes better than we do. So we have to invest in our experience. We have to improve the way we deliver experiences to our customers.
08:02
But then, okay, maybe it's not so hard to understand that we have to implement and deliver good experiences, deliver good UI in our applications. But there's another reality. And this is another reality that came straight into our faces.
08:24
Oh, it's not playing. Yep. So we got this face lab. And we are in a very specific industry,
08:42
open source and enterprise software. It works in a very different way to the companies that I was showing before, Facebook, Uber, Google, Airbnb, anything else. Anything that is consumer oriented. They have some priorities and prerogatives that we don't have. We don't have the time normally to deliver things
09:03
and we have to just ship it as soon as we can so we don't lose customers. We have different customer bases as well. We have people that are more experienced and sometimes we tend to think that we don't have to deliver such good experiences or such good interfaces
09:21
because they're experts and they know what they're doing. But that's not really the reality today. So that's how it was a long time ago. One would say that enterprise and open source software was far, far ahead in terms of user experience in comparison to consumer oriented companies.
09:44
Now today the cap is closing. We have a lot of companies out there that are investing a lot of money. They have the money to hire thousands of designers and UX experts and all that. But there is also a better way to do this.
10:01
And like I was saying, a lot of companies have the money, they have the budget to hire people but actually scaling design through hiring is not really the only way to do it. You can also improve your processes. And this is why design systems are so hot right now, like it says here. Design systems, I'm sure that you all heard at some point
10:22
a lot of companies are investing in design systems. So yeah, we are one of them. And what is a design system? So a design system is a centralized source of information. But a lot of people tend to think that because it has a word design in it, it means that it's for designers.
10:41
But that's not really true. A design system helps developers and designers and to be really fair, it helps more developers than designers to provide and deliver cohesive experiences. So that's the whole point of a design system. It has all the tools that you need to provide an experience
11:00
that is consistent throughout all of your product portfolio. Let's show you a little scenario of a company with free products in this case, how they work without a design system and with a design system. So basically this would be more or less a setup of a company
11:23
that has different products and you would normally have a designer product working with the developers directly. But then as you see here, so I just made a very basic example of a closed button. That is actually what happens in the end. When you have groups of people working isolated in this way,
11:46
the outcome tends to be the interface and the experience for your consumers because we always have to think about the customer and the consumer of the application. It's different.
12:00
So we have this red, the black, and the blue button. This is just a silly example, of course. But bottom line is what we get is growing in consistency, is more expensive to test because in this case what we had to test, we had to test the first one for this product, the second for the other products.
12:20
We are testing each time the same component for every product. It actually becomes expensive. It's not collaborative because every designer is working isolated in different ways. So if you actually try to fix that, when we try it, it's a lot more complicated
12:41
and it's really frustrating for designers to have to try to align when you have different use cases in different products and you have different agendas in different products. So that's what you get. Something else I was almost forgetting to say is it's not reusable.
13:03
So that's one of the main ways of money, I would say. So the company is creating something for one product, like for example the first one. Why didn't we just use this and the other products? Well, maybe because the agendas were not the same,
13:20
maybe because the use cases were not the same. God knows. But with the design system, everything goes to the source first. And this is how we save money somehow. Because in the end we are saving development time, we are saving testing time. But what we really need to focus is the consumer
13:42
has the same experience in all of the products. And like I said before, this also streamlines the collaboration between designers and developers, because everything goes to the source, there's not so much to discuss really. It has been tested, it has been discussed previously
14:01
before it goes into the product. So it's a lot of money and time saved. The structure of the design system, just so you have a rough idea, is composed of assets, icons, typography, components, templates,
14:23
modules, guidelines, how we talk to our consumers, how is our brand interpreted by the consumer. And like I was saying before, this is not for one or the other, it's not just for designers, not just for developers, for both.
14:41
And normally what we get out of a design system is we get the components that the developers need and normally it's just the front end part, backing is never included. And we get all of the same pieces, because designers also need to continue growing their products and the design system as well.
15:01
But everything is in one place and everything is tested in just one place. Actually I'm going to give it to my colleague. So as Cynthia well explained, the design system is a great way of actually breaking away with the silos,
15:21
where we can't really ensure that there is coherence between different teams in terms of UX and UI. But it's also true that developing a design system takes time and money.
15:47
There's a whole process of research and development behind a design system. Initially there's a step where components are defined, where we try to identify areas of our interfaces,
16:02
where we need to ensure that interaction with our users is meaningful. And then of course once we identify these issues we want to solve with a design system, there's a whole side of research where feedback is gathered,
16:21
where we speak to our users, where we look at analytical data, and we define different elements that will compose our design system. And that of course translates into money, it's costly.
16:41
And it's clear to us that many projects, many open source projects, organizations, small and medium sized businesses, probably don't have the resources at the human and financial level to actually build their own design system. And this is why it's not working.
17:04
Okay, sorry. And then there's of course the whole issue with scalability. Let's say you're building your own design system, you want to have a set of rules that actually make sense for your interfaces and break away with these silos we mentioned before.
17:22
But then of course your interfaces evolve, new features are added. Even you may pivot the whole purpose of your project, and that means revising again your design system, going through them and making sure that you don't define components redundantly, that everything is reusable.
17:41
And that's something again that's not probably easy to assume, it's not something that you need resources for, to actually be able to handle and to maintain this design system.
18:03
And probably many organizations don't have these resources. So why do we build EOS? What's the reason behind it? We want to build a design system that's customizable, which means that you just can go on our repository,
18:22
you can clone it, fork it, and easily apply your brand to it. Your brand, your project, colors, whatever. The idea is that it's easy to customize by anybody. We want it to be scalable, we want to be able to actually add features to it easily,
18:43
and we of course want it to be open source, which is to us what makes us different from other design systems. Our idea is to be the first open source customizable design system.
19:01
We use open source technologies on our daily basis, as we all do, and for us at EOS, we think it's important that we give back to the community and encourage everybody to actually collaborate and help developing an open design system.
19:23
We strongly believe in the idea that UX is for everybody, not just big enterprises. As Cynthia mentioned before, there are big enterprises who have massive amounts of resources and tons of designers and developers working on a design system, but that's not the case for the majority of us,
19:41
so we want good UX for open source. Any project you may be working on, you can just leverage our design system, EOS design system. We also want to encourage you to go beyond the framework. What do we mean by this? Usually if you build your web interface,
20:02
you use technologies like libraries such as frameworks such as Bootstrap, for example, which already provides you with a set of components and different UI elements, but what it doesn't give you is really an understanding of how do you use these components,
20:22
how do you interact with your user, what does work, what doesn't, and how do you communicate with your user. And that's what actually makes a design system different. What actually is the added value of a design system.
20:43
And of course, as I said before, we want it to be open to everybody. We think that there's a lot to give and a lot of feedback to take from the community, and this is why we already have contributors on our project,
21:00
and we take feedback from them, and we sort of collaborate closely with them. Yeah, that's great. So what have we done so far? How far did we get with this? We are at an early stage of customization. What do I mean by this? So our idea was to,
21:21
so we, EOS is the design system for SUSE. So the main purpose of it initially was to actually ensure that there's coherence and consistency between EOS products. So as Cynthia, the example she gave before, if you have different silos,
21:40
different teams that develop a button, for example, it translates into different styles of buttons for products that actually are from the same company. So that's something that we managed to do. And then we wanted to prove that this is, that EOS is customizable, and this is how we actually also deployed
22:06
the OpenSUSE design system. So basically it's a fork of ours, of EOS, but with the branding of OpenSUSE. And the proof of concept is there. We proved that it can be done. You can just customize the design system for your needs.
22:26
Now the idea is to take this beyond proof of concept. What we want to do is we want to be able to customize it completely, which means adding a content management system, for example,
22:42
where once you start using EOS as your design system, you can easily add new components to it, and it also makes it accessible to designers and everybody who may actually work with it.
23:02
And what does it look like? So as I said before, I'm going to do a quick demo now. I'm going to show you a couple of components, but I encourage you to also visit this URL so the EOS design system is, let's say, the main design system,
23:22
and then of course we also have the OpenSUSE flavor of it, yes. Okay, so let me just leave this here. So I'm going to demo EOS mainly because this is, let's say,
23:44
so we work on different features, and I'm going to give you a few examples of how it works, what makes it different to a framework like Bootstrap, for example. And I think a good example of this would be, for example, alerts.
24:02
So basically, many UI frameworks actually come with these components, so you have alerts defined, how they look, the states, et cetera. But what they don't do is they don't tell you how to use them, where to use them, and you sort of be aware of the different contexts
24:22
where you can use them, and then ensure that they are meaningful to the user. So an example would be, so there are different alert types, so there's a global alert, and a global alert is something that will appear at the top of your web application.
24:43
And then basically what you see is there's always a short description of how to use them, what kinds of actions they can include, whether they can be dismissible or not, things that actually do matter, depending on the context of each case scenario.
25:02
And then, of course, what you see is that, as I said before, we are actually using Bootstrap as a base, so it's not like this isn't a framework for UI only. So the idea is that using Bootstrap, you can also sort of use this on top to actually just simply copy the example
25:26
and just add it straight to your application, so that this is an example. So you see this different. So if you, of course, something I just forgot,
25:41
these are code examples, but then at the same time there's also specifications for it. I mean, the idea is that this is used not only by designers, not only by developers, sorry, but also by designers. So in the end you have a full set of specifications, the information you need to actually be able to implement these elements
26:03
in your interface. I'm just going to give you another example. But it's not all about design. It's also about things like how we communicate with our users. So for example, we have writing guides. So what are these writing guides?
26:22
When you have an interface that actually speaks to the user, let's say you have an error in a pop-up or whatever, any kind of message that you send to the user, it's important that you define a voice. Are you knowledgeable? Are you too aggressive when you speak to your user?
26:42
So what these guides provide is actually a sort of set of definitions of how, for example, this is for Suze, so how you should sound when you speak to your user. So for example, in our case what we defined,
27:00
this is something we researched on and we spoke to different teams too, and this is the outcome of it. So we are experts, not too bossy, we're friendly, but we're not informal. That's the idea. And then once you define your voice, it's also about the tone. And then we have conventions and rules.
27:22
You can drill down to things like acronyms, for example, how you use acronyms. And this is something that we work closely with other sides of a product, for example, branding, marketing, for example. And then the idea is that this is something that you don't need to define
27:41
for your project because it's already here. And it goes on and on. There's other great examples and colors would be another one. Here we define a color palette and we also give a guideline on how to use these colors,
28:02
what works in terms of contrast, for example. And this is great because it means that you already have, in this case you have variables for a preprocessor, a CSS preprocessor, but you get an idea of what works and what doesn't, so you don't have a dark text over a dark background, for example.
28:26
So, yes. And then there's, should we show perhaps icons? We have only three minutes. So, yes, that would be it. I mean, please, I encourage you to have a look.
28:43
Just access the links on the slides and that's it. Yeah, well, this is all for the presentation that we have. I'm also sure you've managed to see actually all the time we have the links down there in the folder.
29:04
So, if you want to get in touch with us, if you want to try out what we have, you have the links there. eosdesignsystem.com, that's the URL. We have Twitter, we have a lot of other things. Just get in touch with us, get in touch with Jesus and myself if you have any questions.
29:25
But we really encourage you to collaborate with us because we're not just building the SUSE design system as many thought actually, this is open source and we are helping as well the open SUSE design system
29:43
and we kind of need a little bit of help there, so the more help that we can get the better that this product is going to become. So, yeah, I think that's it. Please come over to our table. We have some really nice stickers too, so please come and grab one. Yeah, so thank you very much for coming.
30:03
It wasn't so bad. Thank you. We don't have time for questions, just so you know, because there's another talk we're starting right now,
30:21
so if you have any questions just come to our table. Thank you. Thank you. Bye.