Modular Design: Creating flexible UX with reusable blocks.

Transcript

okay let me share this screen just maybe not [Music]

yes yes so let me try to share it again foreign yeah let me see it works okay uh can you can see my screen

all right it's all right so um hello everyone my name is pelino i'm the lead ux designer of cleros so today we're going to talk about modular design basically how it has influence on science systems so but before we get more deeper into the subjects i'd like to bring uh interesting curiosities for everyone so uh let's imagine for example we have a simple brick like a four by f uh two two by four bricks with eight studs on top and we have six pieces of it so

let's try to imagine how how many combinations we can make with these six bricks well uh the answer for this of course was not calculated by me i just designer but some danish mathematicians try to calculate that combinations and the number is absolutely astronomical their calculation said you have to be possible to make nine nine hundred fifteen thousand fifteen million a hundred and three thousand seven hundred sixty five different combinations with just these six pieces it's really interesting to to note here

uh how simple breaks like this can create some complex sophisticated things for example just variating the combinations and these calculations didn't consider uh different calls just considering the same color so you can have an idea how modularization can create some complex things uh for the ones that are more interesting this this these calculations and the specifics of it there's an interesting paper called the legal counting problem by sorry idlers from university of copenhagen uh there they explains a bit about the controversy

how they get to these numbers how they calculate the variations so if some of you are interested for that it's a nice reading but uh the point of of modularization here is to note how one simple brick can create something very complex very sophisticated very useful for mankind like for example colorful dinosaurs so of course it's a joke but the point here is to mention uh the importance of specific modules specific atoms and how they can combine together

to bond new things well but what what does it have to do with products there's an interesting paper from mit from professor cary bridge called fundamentals of product modularity in this paper the professor explores and discussed about modularization and also defines a few types of modularization which are going to explain here for example the six main types of modularization so we have for example component sharing modularity when different products he use the same modules we have component

swapping modularity where we have the same products using different modules depending of the use case depending on the user journey part of the process we have sectional modularity where the different modules combine itself to bond the new thing we have both modularity where different modules get together using a common platform we also have petrofit modularity where to have a single product or single platform a single module but this module is

somehow adapted or adjusted to fit specific needs and specific purposes and as long as that they also have a mixed modularity which is basically when you have two different modules and we blend together to form a third one like the analogy for colors for example we have yellow and blue mixing them together to get green so that's our this the main types of modularity explained in this paper by professor cary rich and it's interesting to note that from ancient times and a century ago also people from manufacturing have been

using modularity for for many reasons and one important thing to should note is that how modularity can be beneficial to creating complex things so i here i'm going to give some examples in practice of these types of modularity for example here we have two different products on the left you have lingual which is a translational product made for a retail uh ecosystem and on the right we have escrow both products uh allow a connection on our system with cloud's arbitrary so in case there

is a dispute between translator and the translational requester the disputes are sent to clerus in case you have disputes on an escrow transaction for example the disputes are sent to clarence to resolve it so it's a perfect example of component sharing modularity two different products different audiences different purposes but sharing the same common components in this case the fds modules which are the modules that allow people to add evidence in case there's a disagreement on the contract of the disagreement on translation as long as that i also have here an

example for content swapping modularity this is another tab called tokens so here as i mentioned we have a single product but these pro products make use of different modules depending on the phase of the process you are the the phase of the user journey the user are are in for example so as the user progress through the to the products there's some time where it needs to display to hand some specific module like the appeal module or exchange for another modules as the progression happens so that's that's an example for contact component swapping modularity

here i have a cut to fit modularity example so we have the same products the same components but this component is slightly changed to to to address a particular target or particular purpose depending on the use case you have or the target audience you are trying to address so we have the same pro the same 10 products same module this module is likely changed to display different information depending on the phase of the process or display different combinations of of of information that needs depending on

the time so let's talk a little bit about the benefits modularity can bring gains in speed and productivity you can say develop the development of effort and time you can leverage quality it can better respond to change in case of disruption so all the benefits can make it more stable more flexible more usable more testable so you can you can ask yourself why why what not everyone using modularity then so there's some some drawbacks of course

everything has advantages and disadvantages uh the advantage of using modular systems and modular products are much higher than disadvantages but just to mention the main disadvantage of using a modular system probably is the complexity in terms of creating it as for example if you create a system that's modular you can you can basically rely on creating independent modules independent components but we also need to make sure they all bond together to form a concise system a consistent system so it's not so easy at the first first moment you can

define specific rules specific attributes since the beginning of the process so we can achieve that result but also to make a good user experience you need to to rely on the shared meaning so i would like to ask you to to reflect a little bit on the few questions i have to so here we have uh two items let's see on the left we have a component some people call it the different names so some people can call it maybe fish or switch

or toggle the components on the right people can call it collapse expansion panel accordion so what's what's the what's the real name what's what's the right what's the wrong actually there's no right or wrong here you can see i put some examples of design systems and also some frameworks that that call it different names so we can compare for example the component on the left material design system bootstrap framework and design system and ibm carbon design system call it different names

ibm cargo design system called toggle material design system bootstrap in its design system called switch for the component on the right anti-design system called collapse material design system called expansion panel and bootstrap and ibm carbon design system called accordion so there's discrepancies on how different teams and different different design systems call and use these terminologies but the point to to to mention the really important point to mention here is not there's no right or wrong uh the point is that uh

the important point to to to highlight is that within your own team you need to create a shared a shared system so the importance not if you are calling different names so some people use it more descriptive names some people use my more contextual names but uh what uh what a tip i give is for example try to use the same names the same terminology semanthology for your components within your own team at least this if you can create a shared meaning shared system where your developers your designers your team members all can can

adopt a similar uh terminology it can save a lot of time in the future when the products and the systems start to scale so that's the main point to mention regarding this and there's a few things uh they're like they call essential things to create any design system so i start talking about them now one of them is creating a consistent visual language and a patterns like library so a little talking a little bit uh in continuation of the previous topic uh defining the components you are using

defining the terminology the ontology you are using so we have structure all the components of the atoms organisms all the elements you are using or your design system is important from the beginning so we have a structural assistant to rely on also important and vital i can call the dna or the core of any design system are the principles the personality of of of your design system so thinking in advance about what the principles what the the branding needs to communicate

what the personality of your design system how you can communicate that to the users it's important to create that strong structure so you can continue creating and developing your system also extremely important is the definition of the typeface and time scale here's just an example of claire's design system so we kind of decided to use a very narrow range in terms of type scale but at the same time create a variation that facilitates our usage and creates something that we can

use for different applications but without creating some excessive number of type scales and typefaces so it's easier to use it's easier to communicate both sinus developers so everyone can rely and follow quite easily uh so another point it's really important in this five structural uh core things from design systems and modular design are defining a spacing scale so we also decided here to to define a spacing scale based on the 8 pixels units which facilitates the communication as well so we have a

number of uh different spacings that are used for sizing icons sizing components paddings margins all spaces from other products we are constructing basing on our design system rely on this space spacing system so it's easy for everyone for designers to create a new product a new module for developers to to rely on the specific uh spacing paddings and margins so we don't need to to guess what the spending is what this margin is or create some alleratory things like

71 11 pixels or something you basically rely on multiples of 8 so 8 16 24 32 48 64. so it's easier to chew to manage that also uh on the structural point of the design system model design rely on a grid in this case we use uh uh 2x fluid 24 grid so basically to structure our design to a responsive framework and color we have defined since since since the beginning but with some adaptations through the

process as we address very strong color schemes so our branding calls for purple at the core blue on the tails so we have this strong purple uh focus and we what we create here apart from the a simple color scheme is create a pair of colors so i have for example primary purple and it has a version for light mode a version for dark mode and all the colors have this pairing so it's easier to identify how you can switch from a product using a dark mode or light

mode without much hassle so it's also an important thing for these essentials to score the cna part of structural things of design system modular design now i'm going to enter something very interesting which is the atomic methodology atomic methodology is a methodology for creating design systems and documenting it created by bread frosts is basically an analogy with chemistry so brad thought about the idea that both solids liquids gas complex stains simple things all rely on atoms

how are created by atoms so we have atoms that bond together to formal molecules that combine together to form organisms and then move until you get to the pages to more complex things so that's the analogy used by breadth force for tonic methodology and the same can be can be used for products for example where you have our components that bond together to form more complex components more more complex organisms until we get the pages the products and ecosystems so that's the main idea

uh bringing together the analogy of our dinosaurs pages are dinosaurs here so from simple things to the most complex things all can be created following this structure and the idea is quite simple so i bring some examples here are some examples of atoms so we have the most simple components that can work to work alone for example we have the search bar we have drop down selectors buttons like primary button a secondary button two tips tabs radio checkboxes switches cards so these

are good examples of atoms in this atomic methodologies purpose and for example when atoms start to combine together like we have here the drop-down selector the search search bar and a button so we start creating molecules and when this creates some more strong bonds and creates more complex things we have our organisms so this is an example of uh a module for talking selection that we have so here you can see different atoms

combining together to form a module we have the cards we have the tabs on the top the search bar the selection we have the secondary button on the left to return the primary boot on the right to move forward and that's a perfect example of organism and that's that's that's quite simple straightforward methodology it's extremely useful in terms of constructing a system constructing a design system that many products can rely on and from from that one have also templates which are basically a structure

and the script for how it will create a product final product and we have our dinosaur the final product the final page or screen will combine all this atoms molecules and organisms to form something that has some meaning for the user so that's basically uh the the idea of the atomic methodology i try to to explain the more simple way possible and for that i also want to share with you guys the claris design system uh i just have published a public version of it if you guys want to

take a look on figma communities so there's a public file there that if you want to check it out the structure how you create our components how we organize them into atoms molecules organisms templates and pages how you want everything together to create this language this concise science system feel free to take a look on the link on the bottom it's a file that's open it's basically use the different components you have from different products from claros claps court lingo tokens dispute resolver and so on so if we're interested to look feel free to

look you can duplicate the file remix it modify and play a little bit with that i hope it's it's some kind of source of inspiration for for everything to start creating your own size systems and before we conclude i want to recommend some some more design systems for inspiration basically sorry we have ibm carbon design system it's quite interesting complex and complete design system if we want to take a look for example how they structure the components the visual language the styles the guiding the pattern the it's quite interesting source of

inspiration github primer is also very interesting design system to take a look shopify polaris is very complete especially in terms of user experience it has a different approach from the rest of the design systems bringing some more contextual things in terms of how to use how to adapt and combine the components material design system that i think everyone know or have heard about it apple humor interfaces guidelines which is a very complete interf design system in terms of guidelines and some ideas and structuring the things

in the legion design system as well so just uh some recommendations some things i think it's interesting to looking if you are more interesting design systems so that's it for for my site so thank you very much yeah that's a good question uh actually

i see this the ecosystem is is improving a lot in this this sense for example but uh i think uh what what you have to to get on is mostly uh evolve the idea that creating systems taking systems into instead of taking pages let's say so uh in terms of ux uh things are how to all bond together into different different ways different scents and different perspectives so it's important to try to spread the word for the ecosystem in terms of trying to think more in terms of systems in terms of

complex things rather than just creating a simple page or simple screen and this makes a huge difference in terms of user experience because a very interesting important point of user experience are consistency and consistency is only achieved by a strong and consistent consistent system consistent and concise thing so i think uh the the ecosystem probably will keep evolving uh it takes time i think for for everyone to to to see that but a very positive i think everyone is already knowing and understanding

the importance of ux and and how the ux is not just the final uh layers not just a visual thing it's also a part of how it works and how it behaves how people react to the product so i think a very positive the ecosystem will keep evolving very fast i'm fine

okay yeah yeah i think the the main points of of how to better address the users is trying to understand better the user so making some user research and also trying to understand what's the the reason behind user's behavior trying to better let's say capture what's the real intention of the user when using your products so i think it's a matter of trying to get deeper into research especially user research and

market research so you can understand the products perspective from the point of view of the user and to adapt that basically you have to to understand what the user what really wants it's not necessarily what he said he wants but through proper research you can identify what the user really wants to achieve using your products so that make a huge difference in creating adapting your product to address this intentions thank you

you