To build an organistional webapp, there are a number of standard steps that you need to go through to understand the structure of an organisation. Once you understand the organisational structure you can look at better organisating it's supporting information requirements and thus the design of the webapp.

It's best to do a first pass through all the design steps outlined below to get a sense of the organisation, and then keep looping back through them to get a clearer more detailed understanding.

It works best if you do this as a collaborative group session with the approriate members of the organisation.

There is a online sheet that can be used as a template when collecting your organisational information.

Example Design Sheet Example Relationship Overview Slide Example Design Document

Using a restaurant as an example organisation, we will now step through the design process ...

Roles (User Types)

The first step is to identify the key roles you have within the organisation.

The roles will become the user types within the webapp and key to creating the best user experience.

User types for an example restaurant;

  • Customer
  • Customer service
  • Chef
  • Admin
  • Management

Activities (Processes)

Now that you've identified the key roles, you can start to identify each roles's key activities (processes) and location of the activities.

Again using the restaurant as an example;

Role (User Type) Activities (Processes) Where
  • View menu
  • Check availability
  • Reserve a table
  • Eat food.
  • Give feedback
Anywhere, out and about.
Customer service
  • Check availability
  • Reserve a table
  • Check in guests
  • Take order
  • Take payment
  • Create menu
  • Share menu
  • Check reservations (for planning)
In the kitchen, occasionally anywhere
  • Pay suppliers & staff;
  • Reconcile customer payments with bank account.
In an office, occasionally anywhere
  • Direction;
  • Compliance;
In an office, occasionally anywhere


Now that you've identified the key roles and their key activities we need to identifiy any relationships and interactions between the organisational roles or external roles/services; and data needs.

For the example restaurant the interactions and data needs are;

Name Interacts with Roles (User Types) Needs this Data
Customer Customer Service Availability
Customer Service Customers, Management, kitchen Customers
Chef Customer Service, Management, Uber Eats Menu
Admin Customer Service, Management, Chef Sales, Bank,
Management Customer Service, Chef, Admin Sales, Expenses, Budgets

Data (Objects)

Using the information collected in the Organisational Relationships section; identify what data this organisation needs to support the roles, processes and relationships?

Later we will map these data needs to existing objects available within the service.

Contact details, reservations, payments
Date, time, number of people, status
Items, Eat In/Eat Out
Contact details, employment details, activity
Employee details, date, time
Contact details, orders, payments
Products (menu food ingredients), location, quantity, supplier
For menu items, food products, quantity
Customer details, amount, date
Supplier, amount, status
Description, value, actions
Restaurant Layout
Document table layout

Bring it together

Now that you have gathered the key organisational information and can start to bring it together for each role, which will form the basis for the structure of the organisational information webapp.

Using the Customer Service role as an example;

Customer Service
Responsible for taking reservation bookings
Activities (Processes)
  • Check availability;
  • Reserve a table;
  • Check in guests;
  • Take order;
  • Take payment;
Interacts With
  • Customers
  • Management
  • Kitchen
Uses Data (Objects)
  • Customers
  • Reservations
  • Staff

Repeated for each of the roles.

Building The webapp

Now that we have a clearer picture of the organisation and how it works, we can to think about the user interfaces based on each of the roles (user types) you have identified and their assocaited summaries of what they do and what information they need and who they interact with.

At this point we are now potentially needing the help of a user interface designer to help with the layout. But for your understanding we will continue through the process.

Look & feel

The user interfaces will be different for each of the roles based on their needs and where they use the webapp - ie if need access to the information "anywhere" then a small user interface for use on a Smart Phone is best. If in the kitchen then may be designed for touch screens on a larger monitor.

To make it easier to build the user interface we recommend using the bootstrap framework; it has lots of templates that can be used as a starting point - like INSPINIA.

We also recommend taking screenshots of user interfaces you come across or browsing sites like

Data Storage

Once you have the interface designed and coded - ie you can click through it and see it in action. We can start to add the functionality that will retrieve and save the organisational data using the service.

This is where all the value of the service comes it as it will securely store all your data and make sure only the users that should have access do have access along with it's included organisational data objects.

Next step is map to the organisational data needs to existing data object ... using the restaurant as an example again...

Organisational Data mydigitalstructure Object
Customer Contact Person
Reservations Activity with Type equal to "Reservation"

What next?

Need help to build the webapp you've designed or find out what it will cost to build it, then email us @

Or if building webapps is your thing or you would like to find out if it's your thing,
then head to the mydigitalstructure Quick Start guide!

Also check out our webapp build quick start guide.