The path from the idea to a high-performance web application

 

In a time of rapid digital change, participatory applications are playing an increasingly important role in the planning of smart cities. The design of sustainable, urban transport concepts requires the involvement of those affected in the decision-making process, as does the redesign of public spaces in general.

In this context, we would like to present the development process of a web application for digital citizen participation that we have developed in collaboration with CoTown. This process is an example of how we develop methodically inspiring software products at our company.

Specification analysis

The essential prerequisite for starting a development is always the specification analysis. In the specific case of the design for a citizen participation platform, various requirements must be met in order to be easy to use, effective and inclusive. In addition to the general objectives of involving people of all age groups in urban design and collecting, evaluating and comparing the wishes and ideas of those involved, the following requirements are also important.

  1. User-friendliness: The platform should be intuitive and easy to understand to enable people of all ages and technical abilities to participate. Design and functionality must be barrier-free to enable people with disabilities to use it.
  2. Scalability: The platform should remain stable and performant even with an increasing number of users. Possibility to add new functions and modules in order to be able to react to changing requirements.
  3. Responsiveness: The platform should function flawlessly on various devices such as smartphones, tablets and desktop computers. In view of the increasing use of mobile devices, optimised display and operation on smartphones is essential.
  4. Data protection and security: Compliance with the GDPR in particular is essential for platforms in the EU. Implementation of security measures to protect against unauthorised access and data leaks.
  5. Transparency and traceability: Clear presentation of how ideas are evaluated and decisions are made. Users should be informed about the status of their contributions and the progress of the projects.
  6. Integration and networking: Possibility of integration with other municipal or communal platforms and databases. Promotion of networking and exchange between users.
  7. Analysis and reporting: Comprehensive analysis functions to evaluate the collected data and gain useful insights. Possibility to create meaningful reports for decision-makers and the public.
  8. Design libraries for the design of public spaces: A key element of a platform for digital citizen participation is the provision of an extensive library of design elements. This enables users to create and visualise their own designs for public spaces such as pedestrian zones or playgrounds.


What kind of design elements are necessary?


To enable the effective design of public spaces such as pedestrian zones, parks or playgrounds, the design library should include the following elements:

Landscape elements: Trees, shrubs, green spaces, flower beds to integrate natural aspects into the design.

Street furniture: benches, rubbish bins, lighting, bicycle racks to ensure functionality and comfort.

Play equipment: slides, swings, climbing frames for playgrounds to design child-friendly areas.

Path design: different paving, pavement widths, accessibility to consider accessibility and mobility.

Art and decoration: Sculptures, murals, water features to create aesthetic accents.

Infrastructure elements: Bus stops, information displays, wayfinding signs to improve urban infrastructure.

 

Why are design libraries important?

 

Encourage creativity: A selection of design elements allows citizens to visualise and present their ideas.

Simplifying the design process: A user-friendly library with drag-and-drop functions makes it possible for non-experts to create designs without prior knowledge of design or architecture.

Standardisation of proposals: Prefabricated design elements ensure that the designs remain realistic and realisable.

These design elements should be easy to use and applicable in various combinations to enable flexible and realistic planning. By integrating such libraries into the platform for digital citizen participation, users can actively and creatively participate in the design of their urban environment.

Implementation: Agile development of a web application

The implementation was agile in order to be able to react quickly to user feedback and continuously improve the app. The agile development method, in particular the Scrum framework that we use, is ideal for the dynamic and flexible development of software projects such as a platform for digital citizen participation. Here are some key elements of the agile method in the context of implementation:

Iterative development

Development takes place in fixed time periods (sprints), usually 2-4 weeks long, during which a certain amount of work is completed. After each sprint, the product is reviewed and the plan for the next sprint is adjusted based on the feedback and the results achieved.

Continuous feedback

Short daily meetings are scheduled to discuss progress and identify obstacles. At the end of each sprint, what has been achieved is presented and the team reflects on potential improvements, documents them in a suitable form and incorporates them into further sprint planning.

Customer focus

Regular involvement of stakeholders to ensure that development meets user requirements.

Product Backlog 

A list of all desired functions (product backlog), which is prioritised and continuously updated.

Software architecture: cornerstones of the application

The software architecture of our application is designed to provide a seamless, secure and efficient user experience. We have chosen a modular structure that makes it possible to integrate various functions such as design visualisation, voting modules and feedback systems.

For this application, which needs to consider usability, scalability and security, we opted for a microservices architecture in combination with a front-end framework that enables a reactive user interface. Here we present the proposal for such an architecture:

Frontend 

Framework: React or Angular, depending on the team’s preference and the complexity of the application. React is well suited for dynamic user interfaces and, together with Redux, offers strong state management. Angular is ideal for more extensive applications with more complex requirements.

Responsive Design: Ensure that the application works well on different devices (desktop, tablet, smartphone).

Accessibility: Implementation of accessibility standards to make the app accessible to all users.

Backend 

Microservices architecture: By using microservices, the backend can be divided into smaller, independent services that fulfil specific tasks. This increases flexibility, scalability and facilitates maintenance.

Technology: Node.js or Java, depending on the processing speed requirements and preferences of the development team.

API gateway: An API gateway as the central interface for communication between the front end and the various microservices.

Database and data storage

SQL vs. NoSQL: A combination of relational (SQL) and non-relational (NoSQL) databases, such as mongoDB, to efficiently manage both structured and unstructured data.

Data encryption: Ensuring that personal data is stored in encrypted form in order to comply with data protection regulations such as the GDPR.

Security and compliance

Authentication and authorisation: Implementation of robust security mechanisms for user access, e.g. OAuth.

Data protection: Compliance with the General Data Protection Regulation (GDPR) and other relevant data protection standards.

Scalability and performance

Containerisation: Use of containers (e.g. Docker) for microservices to increase portability and scalability.

Load balancing: Use of load balancers to efficiently distribute high user loads.

This architecture provides a solid foundation for the development of a modern, robust and user-friendly platform for digital citizen participation. It enables efficient and flexible development and scaling of the application to meet changing requirements and user numbers.

Prototype: The first step towards user interaction

An initial prototype of our app was tested in a pilot phase in which participants were able to virtually redesign a riverside promenade. This process provided valuable insights into user needs and laid the foundation for further iterations.

The software prototype in our beta version generally has some key features that are important for both developers and test users. These features help us to effectively test the product and gather feedback that is crucial for the further and final development of the product. Here are the most important features:

Functionality

Core functions: The beta prototype contains the core functions of the software that demonstrate the main purpose and use of the product.

Limited functionality: Not all functions are fully implemented, but the most important ones are functional and representative of the final product.

Stability

Basic reliability: The beta version is stable enough to allow basic testing and use without frequent crashes or critical bugs.

Known bugs: Some bugs are normal and are documented so that testers know what to expect.

User experience

Intuitive user interface: Even though the design is not yet finalised, the beta version already has a user-friendly and intuitive interface in order to receive valuable, realistic feedback on usability.

Feedback mechanisms: Built-in functions for feedback and bug reporting are therefore very important in order to receive direct feedback from the testers.

Security

Basic security measures: While detailed security features may still be under development, a beta version should include basic security measures to protect user data and functionality.

Data protection: Compliance with data protection standards, especially when personal data is processed or tested.

Documentation 

Instructions for testers: Documentation or instructions are provided to help testers understand and use the software.

Known issues and limitations: A list of known issues and limitations is provided so that testers know which aspects are already known

Performance and optimisation

Acceptable performance: The performance is sufficient to test the functionality, even if optimisations are still pending.

We use monitoring tools: Integration of monitoring tools to collect performance data and user behaviour.

Our beta software prototype serves as a bridge between internal development and the final market launch. It has proven to be robust enough to enable realistic use, yet flexible enough to learn from user feedback and make improvements.

Testing: Quality assurance and user feedback

Testing a web application, especially in an agile development environment such as the digital citizen participation platform, is crucial for ensuring quality, functionality and usability. Here are some typical testing methods we use in such projects and reasons for choosing them:

Unit Testing 

Individual components or functions of the software are tested in isolation from each other. The unit test is used to ensure that each individual function of the app works as expected. This is particularly important in the early development phase in order to identify errors at an early stage.

Integration testing 

This test checks how different parts of the application work together. It is important for checking the interoperability between different modules of the app, e.g. how the user feedback module interacts with the main application core.

Functional Testing 

Evaluates the functionality of the application and whether it fulfils the defined requirements. This test is used to check whether the app fulfils the specific requirements of digital citizen participation, such as the submission and evaluation of proposals.

Usability Testing 

This method focusses on usability and end-user experience and is carried out to ensure that the app is intuitive, easy to navigate and accessible to all audiences, which is crucial for engaging a wide range of citizens.

Performance Testing 

This tests the performance of the application under various conditions. It is important to ensure that the app remains stable and reacts quickly even under high load, which is crucial for credibility and acceptance among citizens.

Security Testing 

This identifies vulnerabilities and security gaps in the application. These tests are essential to ensure the confidentiality and security of user data, especially in the context of processing personal information.

Regression Testing 

It ensures that new code changes do not have a negative impact on existing functions. They are carried out regularly, especially after each development sprint, to ensure the stability of the app during continuous development.

The choice of these test methods for the web application for digital citizen participation is based on the need to develop a robust, user-friendly and secure platform. They make it possible to thoroughly test various aspects of the application and ensure that the software fulfils the high requirements for such a citizen participation platform.

Zusammenfassung

In the development of the digital citizen participation platform, a high-performance design method is crucial to ensure an efficient, scalable and user-centred application. By combining agile development practices with careful planning and implementation, we can realise software solutions that not only meet the technical requirements but also ensure a high level of user satisfaction.

The agile methodology allowed us to respond quickly to feedback and changing requirements while continuously improving the core functionalities of the platform. Through iterative design and development in short sprints, we can regularly deliver working versions of the software, which enabled early and continuous user engagement.

The architecture of the platform is designed with a focus on scalability and performance. By using microservices and modern front-end frameworks, we can create a high-performance, responsive and flexible application that can react quickly to different user numbers and requirements.

A key aspect of our approach is the comprehensive consideration of performance aspects in every phase of the project. From initial architecture planning through development and testing to final implementation, we always prioritise performance and efficiency. This enables us to develop software applications that are not only functional and user-friendly, but also remain stable and performant under various loads.

In conclusion, our powerful design methodology is a key element in the success of this digital citizen participation platform. It has enabled us to develop an attractive, user-oriented and future-proof solution that will revolutionise the way citizens participate in shaping their cities and communities in the future.

Success Story CoTown 

View success story

Contact us to find out how we can support your city on the path to an inclusive, digital future.

Contact us

Ähnliche Beiträge

Strategie Strategy

Bulgaria: The rising star in Europe’s IT and software industry

A look at the growing potential of an often overlooked European...
Strategy

Analysis of nearshoring strategies for companies in the DACH region

Economic growth in Western Europe is increasingly stalling and omnipresent cost...
Development methodology

Modularity and specialisation: AUTOSAR

At first glance, the development of web applications and software development...