1. Introduction
In recent years there has been a growing trend towards Smart Cities involving the use of wireless devices along with the Internet of Things and other devices to improve the quality of life. The means for more efficient city management are, above all, modern information and communication technologies, enabling the collection and evaluation of data that increase the quality of city services and support interactivity between local government and city residents. At the same time, computerisation can increase efficiency and help optimise processes in key areas such as transport, energy, water supply, waste management and healthcare. There are still many opportunities in digital space; however, its potential has not been fully used for the benefit of European citizens and businesses because a comprehensive approach to this issue is still under-applied in some countries [
1]. The collection and analysis of data from different areas are enabled by the effective management of the Smart City, as the municipality and other actors have a large amount of useful information at their disposal [
2].
The basic elements of the Smart City include terminal devices similar to the Internet of Things. Information and communication technologies intersect with the entire infrastructure of Smart Cities in the areas of intelligent mobility, energy, and services; enable the efficient operation of other technologies; and create opportunities for their mutual synergy [
3]. At the same time, they represent a tool for information and communication between city or municipality management and citizens [
4].
The Smart City includes mobile applications that allow citizens to use available data more appropriately than via Internet browsers [
5,
6]. A high-quality mobile application can facilitate and streamline the day-to-day activities associated with a given city. However, creating an application that is sufficiently interactive, informative, and at the same time attractive to the user requires the creation of a suitable graphic design. This design requires knowledge and implementation of user experience (UX) design elements and user interface (UI) design [
7,
8]. At the same time, adherence to the general principles of design and preservation of elements related to a particular product or brand are required. UX design is concerned with designing various solutions to best serve users. It considers the feelings and experiences of a person interacting with the system, as well as research on the target group of users, interaction design, creation of prototypes and wireframes or scenarios [
6,
9]. UI design focuses on what users may need to do and ensures that the interface contains elements that are easily accessible, understandable, and enable these tasks. It combines concepts from interactive and visual design and information architecture [
10].
In the future, the proposed application can also apply to other cities, where it would only be necessary to adapt the services offered to suit the specific requirements of the city and the colour scheme, which is designed depending on the typical urban colours [
11]. The proposed mobile application is intended to represent a two-way connection between the city and its citizens and would primarily reduce physical interaction with public administration bodies and increase efficiency and comfortable access to the services provided by the city.
The UX (user experience) and UI (user interface) processes were chosen to create the design of the mobile application. After a detailed study of several sources, the general steps of UX and UI design were defined and then implemented in creating this design [
12,
13]. These are the seven steps: problem definition, research, analysis, information architecture, wireframe and interactive prototype, UI design, and validation. The aim of the paper is to provide the design of an urban application focused primarily on the compilation of information architecture, along with its interactive (controllable) prototype, which also represents a design proposal [
13,
14].
Testing of the application begins after the preparation of a prototype that captures all relationships and interactions. Identifying deficiencies at this stage can save a lot of resources, and testing should be carried out between stakeholders and end-users using a series of prepared tests or scenarios [
15]. In testing, it is appropriate to use a combination of selected methods to achieve a better result [
16].
To validate the created prototype, the methods Eat your own dogfood and User testing sessions were used in the form of testing with users by entering tasks and answering the SUS questionnaire. The Eat your own dogfood method was a test of the created application by individual team members who participated in its creation. The method of User testing sessions is based on user testing, which provided verification of the created design based on real users [
13,
17].
The Eat your own dogfood method was tested in two steps. The first step involved downloading the Axure Cloud mobile app, which provided an interactive prototype. The second step was the work with the prototype itself, where it was necessary to follow the correct hierarchy and interconnection of pages and subpages, the appropriate display of individual elements, typography, font size, colour, and determine the level of responsiveness of the application [
14,
16]. User test sessions took place in two phases: the first was pre-testing of the prototype on a sample of students who represented one age group. The second phase focused on respondents who represented five age categories (identical to the research phase). The decision to include more than one age category in the testing was based on the assumption that age can affect a user’s digital skills [
18]. When testing with task assignments, users had to follow the list of assigned tasks, and then we evaluated whether they performed them correctly without any problems. At the beginning of the testing, the mediator presented the purpose of the project and explained how to proceed. Before working with the prototype itself, users assessed their digital skill level for better evaluation of the results and filled out a short questionnaire to find out their relationship to mobile applications [
14,
19].
They were then given access to the prototype. While working with the prototype, users shared a screen with a mediator, which recorded the entire workflow and guided them as needed. After completing each task, users rated its difficulty of completion on the Single Ease Question (SEQ) Likert scale [
19,
20].
The Concurrent Think Aloud (CTA) method was used for testing to encourage users to comment on their experiences during the test, which were noted by the mediator. If the user could not continue the task, the mediator could help him or her by sharing clues or precise steps, depending on the specific case [
20].
Finally, users evaluated their experience and opinions in relation to the prototype through the System Usability Scale (SUS) questionnaire. The questionnaire consisted of ten set questions evaluated by a number from 1 to 5, where the number 1 meant “strongly agree” and the number 5 meant “strongly disagree”. The appropriate score was calculated according to Brook’s instructions based on the responses and then evaluated according to a set standard. Users could also share additional feedback before submitting the survey. Before concluding the usability session, the mediator noted the experiences and suggested improvements that users mentioned during the open discussion [
21,
22].
4. Results
The Smart City application is one of the best available solutions for keeping residents in contact with the city. Some Slovak cities already have applications designed for citizens. These are mainly informative applications and applications focused only on a specific area. Therefore, the intention of the paper was to design an urban application that would represent a comprehensive platform for most of the services offered by the city for its citizens. The entire process consisted of seven steps, which are defined in the Materials and Methods section. The main goal was to determine which services and functions citizens were most interested in and subsequently implement the obtained results into the application design in the form of information architecture; therefore, not all phases of UX/UI design are evaluated in this chapter. After completing all phases of the process, an interactive prototype was created along with design elements, which was tested in the last phase.
4.1. Research Results
Prior to the start of the primary research, a brainstorming method was used to generate a larger number of ideas on the basis of which the questionnaire was developed. Ten people participated in the brainstorming, two participants from each age category (up to 15; 15–30; 31–45; 46–60; over 60 years). The first brainstorming question was: “Which aspect in the city needs to be streamlined or improve?” and most of the ideas concerned streamlining the communication between city management and citizens. The second question was: “How could this communication be made more efficient?”, where the most common answer was through a mobile application. The question was: “In which areas in the city is it possible to streamline this communication?”, where many ideas were offered, which were concretized by the following question. The last question was: “What services and features should the application include?” All answers were included in the questionnaire. The questionnaire examined the respondents’ interest in individual services. The questions were designed in such a way that all services were listed, and the respondents decided whether they would be interested in them or not. The research also included identification questions, based on which respondents were, for example, categorised according to age or the extent of their digital skills.
The aim of the research was to find out the respondents’ interest in the functionalities and services that users could access through the application in connection with the obligations to the city. The respondents were categorised using identification questions, which comprised gender, age categories, place of the residence, level of education, and whether they would use the application as a legal person (LP) or a natural person (NP). In total, 52% of women and 48% of men answered the questionnaire. Respondents were categorised into five groups according to age category, and the share of respondents under 15 was 7%, from 16 to 30 years was 35%, from 31 to 45 years was 30%, from 46 to 60 years was 17% and over 60 years was 11%. The percentage of total respondents was 13% categorised by the place of residence: 27% in the wider centre, 22% in the housing estate, and 22% in the suburbs. In all, 23% of respondents had the highest apprenticeship education, 29% university education and 48% secondary education; 32% of respondents would use the application as an LP and 68% as an NP. It was clear from the results (
Figure 1) that the respondents were most interested in important information from the city and in the interactive services that would allow them to perform municipal duties. Based on the respondents’ answers, we made a final selection of the functions of the mobile application, which were included in the proposed UX design.
4.2. Design of Information Architecture
The proposed information architecture (
Figure 2) captured the hierarchy and complete overview of categories and functions of the designed application together with interrelations represented by individual lines, where the blue line represents internal relations and the green line represents external relations, and through the notation (*) category “Notifications”.
4.3. Test Results according to the Eat Your Own Dogfood Method
The authors of the article prepared the product to the point where it was usable through many interactions. During the subsequent testing, they paid particular attention to the hierarchy, the distribution of elements, their mutual relations, and whether all the designed components were incorporated. Initially, they downloaded the Axure Cloud program, on which the prototype was stored and where it was possible to work with it.
Minor errors occurred in terms of the hierarchy and links of individual pages and their subcategories, along with their respective functions, because some links were not defined correctly and the user did not arrive at the right page in the correct way. From the point of view of UI design, the elements used and execution were evaluated as suitable, i.e., simple, clear and sufficiently intuitive. Deficiencies identified by team members during testing were resolved before further testing. Subsequently, it was again determined whether the errors were corrected and the prototype worked correctly. When no further errors were detected, the prototype could be tested with impartial users based on their own experience.
4.4. Test Results according to the Method of User Testing Sessions, Phase 1
The aim of the first phase of testing was to obtain the preliminary evaluation of a prototype of an urban mobile application. A total of 15 participants in the age range of 23 to 32 years participated in the testing of the prototype, of which 33% were men and 67% were women. Participants provided feedback on the interaction with the prototype and, where appropriate, a specific suggestion for improvement. The purpose was determining how users with more advanced digital skills worked with the prototype and at the same time evaluating the interest of the younger generation in the urban mobile application, especially in terms of offering features and services through open discussion.
At this stage of testing, it is sufficient to test with only five users, but it is appropriate and always desirable to test with as large a user sample as possible, revealing up to 98% of usability issues and gaining wider feedback. To support the purpose of the project, users were asked to complete a questionnaire prior to testing about their attitude towards the use of the proposed application. In all, 86% preferred to use mobile applications over Internet browsers. In choosing their preferred form of communication with the city, 80% preferred the online form of communication. If the proposed application were placed on the market, up to 93% would be interested in its regular use.
At the same time, participants evaluated their digital skills, as this aspect could significantly affect the user experience. It was found from the results that 40% had digital skills and abilities at the expert level, 47% at the advanced level, and 13% at the intermediate level. Based on the results, the participants were considered a suitable sample to obtain useful information and suggestions for further optimisation of the application, because they had sufficient digital and technical skills and practical experience with similar applications.
If a participant found a problem or technical limitation, he notified the mediator who guided him through the next step. These tests were useful for identifying and subsequently solving specific problems before the second phase of usability testing. Testing revealed some of the shortcomings of the prototype. Among the frequently discussed problem was the use of green and yellow, which together had a very contrasting effect on some aspects of the application and interfered with the readability of the text. According to their common opinion, a possible solution would be choosing only one of these colours as the basic colour of the application. After a joint discussion, they preferred the colour green as, supplemented with a darker shade of green and the use of white or light fonts, a suitable contrast would be created and the text would be legible. There was a second problem with readability, which was the choice of an inappropriate font size. To meet their needs, the application was designed to allow users to change the font size to suit their needs. They had no major reservations in terms of hierarchy and overall layout and linking.
The feedback was generally positive, especially regarding the purpose of the application, implemented functions, content, and usability. According to the results of both SEQ and SUS questionnaires, the technical aspects of subsequent tests with a representative sample of a strong colour were improved in various tasks.
The results of the SUS questionnaire ranged from 70 (B) to 78 (B), with this value being the highest. The scope showed that even though the user experience was at a very good level, there was still room for improvement. Obtaining a sample of students with intermediate to expert digital skills and abilities contributed to a set of concrete improvements. Regarding the results of the first phase of testing, it should be noted that they did not reflect older age groups who have problems with the use of digital media. Therefore, the necessary improvements were implemented to ensure that the mobile application was as accessible as possible.
At the end of the testing, the lack of a language choice other than Slovak was identified. Another common observation was that people now liked to use the dark version of the site, especially in the evening, when the white background contrasts too much with the environment; this is also a less energy-intensive form of the application.
4.5. Test Results according to the Method of User Testing Sessions, Phase 2
The second phase of usability testing was conducted online in November 2020. The test involved 10 users of different ages, genders, occupations, and digital skill levels. Users were divided into the five age categories set in the research phase: up to 15 years, from 16 to 30 years, from 31 to 45 years, from 46 years to 60 years and over 60 years.
Table 1 lists the characteristics of the users who participated in the testing.
The user meeting and testing took place via video conference in the MS Teams program over one day. Before testing the prototype, users filled out a questionnaire to evaluate their interest in using the application in real life. It was found that 70% would be interested in its regular use. At the same time, 60% preferred to use mobile applications before accessing them via an Internet browser.
When choosing their preferred form of communication with the city, 70% preferred the online form of communication. About 80% of the respondents said they did not like the current way of communicating with the city when applying, paying local fees, voting, and visiting institutions, so they would welcome a comprehensive system through which they could carry out these activities from one place.
At the same time, they assessed the level of their digital skills to better evaluate the results. The data obtained were assigned to individual users and are shown in
Table 1. Completion of each test took approximately 30 min in addition to working with questionnaires and discussions before and after the test. Data collected through observations, comments, questionnaires, and open discussion provided an understanding of how suggestions in the first phase of usability testing improved the user experience. Close collaboration with users led to the further identification of possible usability improvements that were not previously considered. These included changes in design and the implementation of other functions according to the feedback and the results obtained. Based on the answers obtained through the online questionnaire, the SUS score was calculated according to the set standard. The results of the second usability test are shown in
Table 1.
Based on the achieved SUS score, it can be stated that the ideas and comments of users from the first phase of the usability test helped to improve the user experience. It turned out that working with the prototype was more pleasant and without major problems, although the different levels of digital skills and abilities were taken into account. The achieved score ranged from 70 (B) to 90 (A), so the total score was above 68 (C) in all cases, which was considered a positive user impression, while results above 80.3 (A) were considered most favourable. The average score was calculated at 77.9 (B), so the prototype could be rated as very good. The results were still not at an excellent level, however, so it was necessary to detect further errors and then implement appropriate solutions to enhance the user experience.
The most common problems were the colours used, which were typical for a particular city. Almost half of the test participants preferred neutral colours, for example, shades of grey. A possible solution can be adding a feature where users have a choice of two page colour options. The error found in the previous phase regarding the font size was not identified at this stage, so it was concluded that the option to change the font size was an appropriate solution. Users also stated that placement of the button to return to the previous page (bottom left) was not intuitive enough, and they expected to find it in the upper left corner as a priority. In terms of hierarchy, link and content page, users had no major reservations.
Finally, users had the opportunity to express their observations and ideas for further improvement in an open discussion. A good idea was expanding the application with information and possible interaction with other smart solutions implemented within a particular city. In particular, users should have the necessary information on their proper use.
4.6. The Resulting Prototype of the Application
This section presents a change in design based on written and direct feedback, as well as the conclusions from the SUS and SEQ questionnaires. After evaluating all comments and suggestions for improvement, additional elements were incorporated into the final prototype.
In terms of colour, a dark green colour was used in contrast to the white colour. The background changed from yellow to white. The layout of some pages was also changed based on usability, such as within the “Main Menu” page. It is expected that the “News” page will be accessed on a daily basis, through which users will be provided with the latest news about the city. The least frequent use should be of the “Settings” page, as frequent resetting of functions is not expected after the initial setup. The final layout of the main pages of the application within the “Main Menu” page can be seen in
Figure 3a.
The first section presents the header and the second section presents a list of the main application categories. In addition to the above categories, the user also has the opportunity to use the “Chat” function, where he or she can easily and quickly communicate with an assistant who will help solve any problems and ambiguities within the application. The assistant represents a real person who communicates with the users of the application when needed. It is also the only element marked in yellow for sufficient emphasis. The third section includes information about the current weather and who has a name day on a given day (
Figure 3b).
In terms of navigation, the main problem with placing the button to return to the previous page was solved. It was moved from the lower left corner to the upper left corner in the form of a simple arrow, the final form is shown in
Figure 3c, with a button for submission on a white background.
Most of the features that the prototype was supplemented with, based on user requirements and suggestions, were placed within the “Settings” subpage. The final version of this subpage offers the user the opportunity to change the language, run the wizard, set notifications, change the desired font size, switch to dark mode or change the overall colour visual of the application.
Overall, the user experience was very positive. All implemented design changes based on user suggestions were made after the test was completed. They were not necessarily related to usability issues because each user was able to complete the assigned tasks. In conclusion, the results of user testing confirmed that prototypes must be tested on real users in order to gain an overview of problems that have not been previously addressed in order to become familiar with prototype design.
4.7. Limitations of the Resulting Prototype of the Application
The underlying project for the paper has several limitations. The prototype of an urban mobile application was created based on a detailed study of the literature and theoretical knowledge acquired during university studies. However, the authors are not experts in the field, so the final product may have several shortcomings. The presented application model, including research and design processes, should therefore be confirmed with experts who have sufficient theoretical and practical experience with the UX/UI design process. In addition, the Axure program does not offer as extensive options as other similar programs, where it would be possible to work with more modern elements and the final prototype could then make a more modern impression. The difference is that Axure is free, compared to the other programs.
The validation was dominated by some participants during the open discussion, which may have prevented others from expressing their views. The sample size of the test users may have been insufficient, so it would be appropriate to carry out testing with a larger number of users after expert discussion. In contrast, the profile of the participants in this study may well represent a possible profile of users of different ages with different levels of digital skills. Our main goal was to get feedback from people outside the project and our university. The created proposal should serve as a basis for creating a real application that the city needs. The whole process identified the requirements and needs of citizens for such an application, which were then incorporated into a specific proposal. Despite these limitations, the authors believe, based on personal communication with other project developers and the test result, that the results provide an accurate representation of UX.
5. Discussion
Factors and indicators are related to the success of Smart Cities’ last period, stated Aldegheishem [
53]. The construction of application systems is very important for the creation of an intelligent city. These authors included in the application systems a wireless city, smart public services and construction of social management, medical treatment, green city smart home, transportation, urban management, and smart tourism [
54].
The role of cities also includes their responsibility for the comprehensive and balanced development of the managed area to improve the living conditions of citizens. The comprehensive enhancement of spiritual and material values, including property, is one of the most responsible and demanding duties of cities. A prerequisite for the functioning of cities is civic activity and the development of citizens’ creative abilities [
55,
56].
The design of the mobile application can be implemented in any city, but it will be necessary to adapt the offered services and the final appearance to the needs of a specific city. Before adopting the application and implementing it in practice, it will be necessary to consult with experts. As it is a comprehensive mobile application that includes all urban services for citizens, there is a presumption that the data and information necessary for the correct and efficient functionality of the mobile application are stored in different databases and come from different sources. It will be necessary for IT specialists to examine the design and requirements of the mobile application and assess the real possibilities of connecting individual databases, then determine the appropriate method of implementation and security, as the application design does not address the technical side of modifying the application.
The challenges and issues related to UX/UI intelligent applications have been addressed by several authors [
57,
58,
59]. The findings of these and other authors are consistent with our results.
The aim of the mobile application is to simplify and streamline the activities through which city residents interact with city services. The mobile application should be designed to motivate city residents to use city services more often and to communicate with city authorities. However, it should be noted that users may use it for finding the operating hours of local facilities, public services or other public service telephone numbers, or a calendar of upcoming events. Therefore, it will be necessary to regularly monitor, update, and ensure that all information is accessible through the application and does not have to be searched in other sources.
Availability is an important factor. One of the basic preconditions for the creation of an urban mobile application is that as many citizens of the city as possible have access to its use. The application should be available free of charge within the application stores for individual operating systems. The actual creation of a mobile application and its content depends on the city’s goals regarding Smart City concept and on the financial resources that can be used to create a mobile application.
It is necessary to identify other sources of information from social media. The features that social networks commonly offer for marketing purposes are a serious and important advertising channel through which marketing activities can be targeted very precisely. The possibility of precise targeting based on relatively precise socio-demographic parameters offers space for very effective advertising campaigns. It is necessary to ensure that the city has created a unique information channel on the social network Facebook, Instagram, or other information channel that informs citizens in real time. Then the content of the application can be optimised through the involvement of the community on social networks.
Nowadays, because mobile applications are used for all activities, it is appropriate for cities to consider the same approach towards their citizens. One-way and two-way communication can be provided by a suitably designed application; an example is the proposed design of the platform. Cities already provide more services via the Internet, but these are mostly sites that only address a certain range of services. However, the aim of this proposal was to unify all services into one application, within which all services, activities, and functions would be interconnected and at the same time increase the interaction of citizens and users with the city. The application platform could also be used in foreign cities, where it would be adapted and optimised for the needs of a specific city with the main difference being the change of language.
6. Conclusions
Smart governments or regions are driven by effective communication, partnerships, and the cooperation of key, interested, affected entities and groups. These entities and groups have different roles and different levels of responsibility and can stimulate multiple sets of activities. However, it is necessary to comply with the requirement for better coordination of activities in order to achieve better results and a more positive impact on the development of the city or municipality, and therefore the city government plays a key role. The principle of Smart Cities is to facilitate and streamline as many everyday activities as possible, mostly through the implementation of modern technologies that can communicate with each other and exchange the necessary data. To improve the interaction between citizens and the city, it is necessary to ensure effective mutual communication. In order for the city to know exactly what its citizens need and use the most, a mobile application can serve as a suitable tool. After gathering all the information from the citizens, the city will then know exactly what it can further improve to make the city more intelligent.
The basic tools used in Smart Cities include mobile applications. They can ensure effective communication between the city and the citizens. At the same time, the popularity of their use is constantly growing compared to Internet browsers, which represents people’s interest in performing activities through their smartphones, so it would be appropriate for cities to offer their citizens quality mobile applications.
The aim of the paper was to design a mobile application for citizens of Smart Cities to streamline two-way communication between the city and themselves. However, the aim was not to deal with the specific development and programming of a mobile application, but to address the design of specific functionalities that it should contain. The design was realised in the form of UX design and UI design, which are generally important parts of creating all applications. The creation of the given designs took place through individual steps that were specific to them. After the final design and testing, it should be possible to easily program and distribute the mobile application through mobile application stores within smartphones.
The design of the mobile application intended for the citizens of the city was created in sufficient detail, and all the set goals were met. Cities should create mobile applications as soon as possible, through which citizens can implement activities not only of an informative nature, but also of an interactive nature. The creation of a given application would, for example, minimise the need for a physical visit to the city office, facilitate life in the city, and enable participation in the decision-making processes of the city, which would lead to greater citizen satisfaction. A suitable solution is to use the presented design of a mobile application, which could serve as a quality basis for the creation of a real application.
Creating an application is possible for cities in different specific environments, which can be taken into account in a specific design. The presented design is flexible, universal, able to incorporate special requirements according to the socioeconomic system and practice. The application can respond appropriately to the relationship between the management of cities and citizens, etc. Local design experience is possible in a broader context.
After creating the design, there will be solved programming and creation of the real application. Once created, it will be placed in application stores. Once the application is made available to citizens, the aim will be to monitor its use and resolve any errors and problems that may arise. After its optimisation, the application platform would be offered to other cities to streamline the services provided and their communication with citizens. Then it will be necessary to specify requirements with city management and supplementary services and functions according to the needs of a specific city. If the platform optimisation is successfully tested, it can also be used globally, as it should not be a problem to change and expand the content of the application, especially if the city precisely defines its requirements. Using this application in cities will help to transform them into Smart Cities, because, as mentioned, cities will be able to identify the specific needs of citizens, and the application will also combine several smart solutions, such as online voting; filing applications and complaints; paying taxes, fees, and electronic tickets; directly communicating with the necessary city authorities; smart parking or traffic management, among others.
A mobile application is even more justified during the current coronavirus pandemic. People spend time in quarantine, and in some cities there is a curfew and access to city services is limited to prevent the spread of the virus. Citizens of individual cities often do not have an easy and safe way to communicate with the city and use its services in the current situation. Cities are currently forced to look for ways to deliver their services and communicate with citizens through the online environment as efficiently as possible. Cities have a unique opportunity to create an urban mobile application that the city and its citizens can use not only during the current situation, but also in the future.