Structure Diagram for an online-shop

An online-shop or e-commerce website is a complex web-based system that includes many functionalities. In order to design such a complex system. it is essential to think think abstractly to simplify the system we want to create and to break down the system into smaller modules.


An online shop is an abstraction, in other words a simplified model of a real life supermarket.

To define an abstraction, you need to consider which details your system will include and which details will be removed from your system to simplify it.

Online Shop Abstraction
Details to keep Details to remove
The ability to browse through different categories
The ability to pick an item and view its full description and price
The ability to add an item to your shopping basket
The ability to proceed to checkout
The ability to enter your card details and proceed to payment
The physical layout of the supermarket
The building aspect, colour of the walls, width of the aisles, type of floor, etc.
The physical dimensions of your trolley or shopping basket
The ability to pick up an item and manipulate it.
The ability to pay in cash
The need for the cashier to scan every item of your shopping trolley
The presence of other customers in the shop

There are many reasons why we would want to simplify our model:

  • A simplified model will be easier to code
  • You will be able to complete the project in a shorter timeframe
  • The system will not require too much processing power to run smoothly
  • The system will be adapted to the input and output devices available
  • The system will be easier to use

Once you have defined the scope of your abstraction (the details that your system will include) the next step is to break down this system into many sub-modules that can be tackled one at a time. This is what we call decomposition.


Decomposition consists of breaking down a complex system into smaller sub-systems / modules.

The benefits of decomposition is to:

  • Break down a complex system into smaller, more achievable sub-tasks
  • Organise your time and resources more effectively, especially when working as a team. Different team members can work on different sub-tasks.
  • Identify opportunities where you can re-use existing modules that you may already have implemented within other projects. For instance many system will require a login screen, many games will require a leaderboard. You might already have the code for these sub-modules.

Structure Diagrams

Structure diagrams are often use in computer science to help with the decomposition stage of the project. They help you break down your project into smaller sub-systems. And then for each sub-system you can break these down further into smaller modules or sub-tasks.

For instance, use the drag and drop activity below to complete the structure diagram for an online shop such as Amazon:
Structure Diagram – Online ShopOpen in New Window

Did you like this challenge?

Click on a star to rate it!

Average rating 3.9 / 5. Vote count: 25

No votes so far! Be the first to rate this post.

As you found this challenge interesting...

Follow us on social media!