A story of a new approach to defining and inspecting modular design architectures of web-based products.

  • Concept Design
  • Research and Development
  • Print Design

Modular design architecture, together with modular product architecture, enables companies to design, iterate, and push their products faster to the markets. Since the building blocks for agile product design and development are readily available, approximately all robust products are modular nowadays.

Finding the line between time investment in pre-designing product architecture instead of creating it only when needed is complex; if the foundation is rashly defined, it results in a high chance of failure. On the other hand, strict planning means time away from production, and thus, the postponement of a product launch. Moreover, a restricted foundation can make responding to future changes challenging.

This thesis addresses and inspects how modular design architecture can accelerate product design and development processes when creating new web-based products. The researched literature presents insights and theoretical frameworks regarding modularity, software development, and product design. It additionally addresses teamwork and best practices found in product development. The research was conducted based on the grounded theory methodology. Its primary data collection method was benchmarking, and it applied the grounded theory data coding methods to scrutinize and categorize the acquired data. This thesis coins a novel framework based on the research findings to address interrelationships amidst various definitions, elements, and categories found within modular design architectures.

Chapter introduction and overview
“Product design is a process by which a product is conceptualized, designed, and created.”
A common perception between components, modules, and systems.
A general theory of modular systems adapted from Melissa Shilling’s work.
A breakdown of a “design system”
A typical structure and content of a visual language.
A quick introduction to component and pattern libraries.
Four different coding phases and methods applied in grounded theory.
Menu – export or print data or compare this journey against other journeys
What defines a good website?
Testing a web-based product’s modularity.
The open coding process was conducted using paper and writing materials.
The axial coding phase.
A collage of notes, source codes, and layouts that guided the research process.
The research findings discovered four levels of modular design architecture: foundations, formations, categories, and themes.
Personal insights based on research findings.
Summary and final words.
Scrutinizing major UI structures.
Works cited
A close-up of SoundCloud’s wireframes.
A close-up of Deezer’s structure and wireframes.