![\"modular](\"https:\/\/uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2017\/01\/modular_design-ux_studio_hero.png\")
<\/p>\nLet’s see how you can make sure that new features can be added to a project without redesigning everything. How do you keep any new updates from ruining the whole navigation system and user experience?<\/p>\n
But let\u2019s not get ahead of ourselves. First let\u2019s define modular, what\u2019s modularity and how is modular design beneficial?<\/p>\n
<\/p>\n
<\/p>\n
As it appears in the <\/span>dictionary<\/span><\/a>, the definition of modular is the following: constructed with standardized units or dimensions for flexibility and variety When you\u2019re designing a digital product for a long project, two questions probably come to mind when planning it:\u00a0“How long will it last?” and “Is it scalable?”<\/strong><\/p>\n The super fast advance of technology has (of course) a huge impact on the answer. What is conventional and up to date today, tomorrow is obsolete. You don’t see an app, website or even an operating system to have exactly the same UI or even user experience for more than a year or two. It\u2019s been around for a long time now. It\u2019s basically a design approach that creates things out of independent parts with standard interfaces that can be stacked, rearranged, customized, reused, and so on. <\/span><\/p>\n In other words, this method is about taking a design and breaking it down into small parts (these are the modules). Then these small parts are created independently which later will be combined into a larger system.<\/span><\/p>\n So the point is to be able to change or fit singular elements without replacing Due to its reusability, modular design is very beneficial and sustainable.<\/span><\/p>\n Adopting modular design and reusable patterns into your design workflow We could say that the modular design fever started off in the 1970s with <\/span>Frank Ariss<\/b>\u2019s revolutionary newspaper design for <\/span>Minneapolis Tribune<\/b> that had this perfectly modularised structure.<\/span><\/p>\n It truly stood out of the crowd in the United States where at that time most daily newspapers still followed the \u201850s structure.<\/span><\/p>\n Modularity is very popular in the product industry. The use of units that can function individually eases manufacturing. It speeds up the assembling process Because they can transform based on changing needs of the consumer, these product sets were adapted by many industries, mostly for commercial needs like cars, furniture, computers, and the list goes on.<\/span><\/p>\n A well-known example is Lego toys but Ikea implements this method smoothly into their products.<\/span><\/p>\n As you can see the modularity of the design is not only in the shape of their storage furniture which allows it to be set in different directions, but also the parts that make up the piece itself, which are rectangles of different sizes repeating the same pattern.<\/span><\/p>\n This makes modular design very cost-efficient from a manufacturing perspective. Building small parts that can be put together later is much easier than building one complex piece.<\/span><\/p>\n In combination, the modules become increasingly complex and customizable, changing to fit the situation. <\/span><\/p>\n Modular web design: When it comes to web design, we refer to modules as elements you can re-use throughout your pages. <\/span><\/p>\n Good examples of modular UI design patterns consist of:<\/span><\/p>\n As you can see modules are used repeatedly in all of the examples to provide Responsive Grids<\/b> provide the structure to the web pages so the content can It consists of rows and columns. Rows are set to take 100% of the width of the screen and are used to group columns vertically.<\/span><\/p>\n Columns fit into these rows and can be configured to a set of predefined values which determines the space they should take up on the screen. <\/span>Most responsive grid sections don\u2019t guide content but instead contain content. The modules reorganize depending on the screen size. The content in these modules adapt to the new size, and this makes the whole structure responsive.<\/span><\/p>\n The Tile\u00a0<\/b>UI pattern uses a grid as a basis as well it has more dynamic layouts due to the modules which are proportional to each other. It gives a more diverse layout to the rows and columns. Also in most cases users can configure the size, or the content.<\/span><\/p>\n Card design <\/b>nowadays is a well-known trend. It consists of card containers in which are the modules. It can be displayed in different types of layouts We have to keep in mind to standardize elements at the design stage. It\u2019s useful for both designers and developers to define the purpose of the elements they have to create. At this stage it is useful to ask many questions: Developers use best practice techniques, such as Block, Element, Modifier (BEM) syntax, to create clean, maintainable code that can easily be handed off and taken over. Designers should consider specifying UI styles at the atomic level changes wouldn\u2019t affect the module\u2019s base.<\/span><\/p>\n \u2026and when it is finished all the control you had on it is lost. This is a reality for most non-in-house designers.<\/p>\n Design culture is fortunately changing and a great deal of companies are now recruiting designers who keep their products up-to-date on the long run, but what about those who don’t? Your job is to make sure that even they are happy about their product for a long time coming.<\/p>\n Recently we’ve worked on a project for a client called\u00a0VCC<\/a>.\u00a0They are a cloud-based call center software that allows the managing of different types of channels, like audio calls, emails, sms’s or chats. Their focus was initially only on audio calls and their product was designed based on that. It was working pretty well until they needed to add more functions like, for example, the email channel. And that’s where the problem started.<\/p>\n Their product was not prepared to get that new feature. They still needed to add it, so it was “squeezed” into the program and – of course – it caused severe user experience problems. Inconsistent communication, the different naming of the same functionality and important areas with difficult access were some of the issues. Their own call center support was flooded daily with questions about the service.<\/p>\n Fortunately, they realized that to scale their product it was not enough to add more features; the whole product needed to be redesigned to fit their current When\u00a0our\u00a0UX company<\/a><\/span> started this project, we were already aware of the previously mentioned functions and we knew that in the near future they Moving away from designing web pages to designing systems is the foundation of a good and effective modular design in a digital product.<\/p>\n The atomic design methodology<\/a> from Brad Frost<\/a> was a base used to define the patterns we needed to follow through the project. It’s a system that promotes consistency and scalability and that is exactly what we were aiming for.<\/p>\n The project was divided into two major parts – Agents and Supervisors interfaces – and we started with the first one which was more simple to deal with (and yes, it turned out to be more complex than we initially thought). What started to be just a facelift of the current system turned out to be a complete website redesign<\/a>. And that was the best thing that could have happened.<\/p>\n After the complete restructure of the content, navigation system, and tests over tests to make sure we fulfilled the basic needs of the Agents, we had to merge that same content to singular modules that fit different purposes and scenarios.<\/p>\n Once we defined the core elements and patterns we started to have a library. This made us think about design in terms of distinct reusable components.<\/p>\n What previously was only composed of email threads is now constitutes every available channel, agents or participants’ components. On the right side of the screen the agent can access all the elements available on the current ticket or add some new ones. All of the elements were reused in different modules inside that page or through the whole program.<\/p>\n Does the team not deal with emails or chat, just with audio calls? No problem, simply remove those modules and use the ones you need. Brad Frost writes in his Atomic Design book: The cornerstones of a good design system<\/a> are\u00a0style guides<\/i>, which document and organize design materials while providing guidelines, usage, and guardrails.<\/p>\n And that was what I delivered to the client. Although we were working on an Agile method with the development team I knew there would be a time I would have to let go of the project. This way I can assure it will ‘live long a prosper’.<\/p>\n This was just an example of a project we worked on with a modular approach to show you that it is possible to future proof your concept.<\/p>\n It’s not a simple process, but the end result makes the life of your clients a lot easier.<\/p>\n And that is what we are aiming for, right?<\/p>\n Reserved<\/b><\/a> is still one of the all-time modular design users.<\/span><\/p>\n Reserved is an excellent example of how online stores can use grids to look organized, regardless of the size of their catalog. <\/span><\/p>\n Baubauhaus<\/b><\/a><\/p>\n Even regular grids don\u2019t have to look boring, as this website proves.<\/span><\/p>\n Here is a quick sum-up of our approach based on my experience:<\/p>\n What solutions do you use to scale and persuade the healthy growth of a project you’re working on? Are you thinking about a modular approach? Please share your thoughts in the\u00a0comments below \ud83d\ude42<\/p>\n
\nin use – so far so good.<\/span><\/p>\n
\nHowever, there are interface patterns that remain untouched (\u2026 well, slightly).<\/p>\nBut what\u2019s the definition of modular design?<\/b><\/h2>\n
\nthe entire system.<\/span><\/p>\n
\ncan improve the consistency and quality of your platform.<\/span><\/p>\nHistory time!<\/b><\/h2>\n
![\"Minneapolis](\"https:\/\/uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2017\/01\/Minneapolis-Tribune-Front-fold.jpg\")
<\/p>\nModularity in product design<\/b><\/h2>\n
\nof an electronic or mechanical system.<\/span><\/p>\n![\"Ikea](\"https:\/\/uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2017\/01\/Ikea-kallax-modular-shelf-unit.jpg\")
<\/p>\nHow to implement it digitally in UI and Development?<\/b><\/h2>\n
\n
\na flexible design.<\/span><\/p>\n![\"responsive](\"https:\/\/uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2017\/01\/responsive-fluid-grid-by-XiuSue-Guo.gif\")
<\/p>\nResponsive fluid grid by Xiu(Sue) Guo<\/a><\/h6>\n
\neasily adapt to different screen sizes. <\/span><\/p>\n![\"tile](\"https:\/\/uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2017\/01\/admin-dashboard-by-subash-chandra.png\")
<\/p>\nAdmin dashboard by Subash Chandra<\/a><\/h6>\n
![\"pinterest](\"https:\/\/uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2017\/01\/pinterest_board-card-design.png\")
<\/p>\n
\n(masonry layout, stack layout) and still show scannable contents to the users. From this perspective card design is very adaptable, you can do many things
\nwith them: turn them over, reveal more content, stack them and so on.<\/span><\/p>\n
\nLanguage is fundamental to collaboration. We need to use a common design language which makes developers understand why things are designed in a certain way and as designers, we need to know-how modules are built so we
\ncan modify them without having to create a module from scratch.<\/span><\/p>\n
\n\u201cWill this module always be full width? Why? Will it always include those buttons? Is the typography likely to change? Is the image background critical
\nto the design?<\/span><\/p>\nWhat are the advantages of modular design?<\/b><\/h2>\n
\n
Imagine this: You create a product for a client that works well \u2026<\/h2>\n
When your product cannot handle more features<\/h2>\n
\nand future needs.<\/p>\n
\nare also going to implement new features, like social networking channels, according to their own client needs.<\/p>\nThis is the type of project where a modular design system comes in handy<\/h2>\n
\nThis is the one I’m going to focus on here.<\/p>\nModular design approach on the\u00a0new ticketing system<\/h2>\n
![\"modular](\"https:\/\/uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2016\/12\/OldTicketingSystem-720x450.png\")
![\"modular](\"https:\/\/uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2016\/12\/NewTicketingSystem-720x563.png\")
\nDoes a specific VCC client need a new feature implemented on their side?
\nI guess you know where I’m going with this\u2026 just add a module with those features.<\/p>\nA style guide is essential to a solid and functional design system<\/h2>\n
Some other examples we like<\/b><\/h2>\n
![\"reserved](\"https:\/\/uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2017\/01\/reserved-gb-woman.jpg\")
<\/p>\n![\"baubauhaus](\"https:\/\/uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2017\/01\/baubauhaus-main-page.png\")
<\/p>\nThere are different ways to apply a modular design principle<\/h2>\n
\n
Take the next step to improve your website\u2019s UX<\/b><\/h2>\n