Keywords

1 Introduction

Computer science allows new working methods and with the growth of IT, commercial and business activities have completely changed. These changes did not only happen at a technological level, Internet transformed the means by which products and services are bought and sold, which caused organizations to be reformed in order to incorporate electronic commerce [25]. As a result, the consumer today has the ability to purchase anything at any time with the click of a mouse or the tap of a finger [28].

Electronic commerce (e-commerce) can then be defined, according to Dimitrios Buhalis, as the secure trading of information, products and services via computer networks and the exchange of online value, as well as the support of commercial transactions over a digital infrastructure [7].

The number of e-commerce websites and mobile applications have increased considerably, becoming an increasingly competitive environment where value streams become the basis of business models and strategy development, but what about the user’s satisfaction? The acceptance of the user, in addition to the economic impact, plays a fundamental role in the widespread adoption of e-commerce applications, so it is important for users to interact with usable, safe and reliable applications and websites that are not affected by factors such as the time it takes to find the desired information, efficiency and security when carrying out the transaction, reliability of the delivery service behind the website, etc. [8, 9]. Concepts as usability and user experience become into essential quality attributes and the user centered design (UCD) works as the approach applied to achieve a good level of usability in web or mobile software development [12].

In this paper, we aim to analyze usability and user experience in order to provide a model that can carry out an innovation process to solve a problem and need presented in society using the approach of User centered design (UCD), specifically in the construction of a mobile platform related to the commercial sector that allows the comparison, purchase and delivery of pharmaceutical products. Current fundamental research considers the model used based on traditional and agile software product design methodology necessary to achieve a quality process that meets the requirements of end users in all stages of development. Finally, the results obtained are shown and discussed for future work.

2 Background

2.1 Concepts

Usability:

It is the efficiency, effectiveness and satisfaction by which specific users achieve a set of specific tasks in particular environments [16]. These three components cannot be evaluated independently; while the effectiveness is related to the accuracy and completeness, the efficiency is given by the speed by which users can complete their tasks that may cause or not the satisfaction of the user [3].

In mobile development, the concept of usability according to Nielsen has as its main point that “When you are writing for mobile users, focus on the essential content.” This is because the small screen reduces comprehension and usually people do not want to deal with secondary texts but only with the main points [19].

Nielsen in [20] mentions the following stages as part of the lifecycle model of usability engineering: Know the user, competitive analysis, set goals (establish performance levels for usability attributes), parallel design (different designs of an interface in a parallel process), participatory design (involve the user in the design process), coordinated design of the entire user interface (consistency of the entire interface), guides and heuristic evaluation, prototyping, empirical tests and iterative Design.

However, the development of a mobile application, which cover a social necessity and has not a specific client who could delimit the requirements, cannot cover all stages mentioned above. The participatory design, either through surveys or a direct intervention of the users, will always remain as a small group of people, and this perspective will not always be the best option to make decisions, this is called the coverage error in surveys in [26]. In this situation, an approach like finding experts can facilitate the process, because they do know their fields and trends to achieve the goals without neither continuous user validation processes nor massive. This is called the heuristic method of usability [18], which is different from an empiric one that requires the participation of users.

The concept of usability becomes independent of our platform, since Ionic (app platform) was used instead of making a native application. Fling B. states that native applications are not viable in the long term, since the loss of incrementally improve the application, loss control and therefore decrease profits, as well as adding the problem of device fragmentation. Besides that, for the first time the device manufacturers are all working to achieve the same standards [13].

Importance of User-Centered Design (UCD):

The term UCD was born in the Donald A. Norman Research Laboratory at the University of California, San Diego [21] and it has allowed developers, innovators and more to make products that the end-user can understand and feel confident using them. Ritter, Baxter and Churchill define in [23] that User-centered design involves paying particular attention to the user’s needs, allowing to carry out an activity/task analysis as well as a general requirements analysis, performing early testing and evaluation, and designing with iterations.

It is important to take into account the interests of the wide range of stakeholders. This does not mean they must be in the design team, but should be considered in order to design an effective and suitable product [2]. A set of questions thus are provided in [10] as a road map in the development of product and services

  • Who are the users of the product?

  • What are the tasks and objectives of the users?

  • What is the level of knowledge and prior experience of users with technology?

  • What is the user experience with the product or with similar products?

  • What features do users expect from the product?

  • What product information may users need? In what way will they need it?

  • How do users think the product works?

  • How can the product design facilitate the cognitive processes of the users?

These questions allow a clear focus on what shall be done, so the obtained product may satisfy the user’s needs, limitations and/or solve their difficulties [10], and lead to a vital reduction in development time and costs. by doing so, the user experience will be pleasant and generate confidence and efficiency allowing a growth of users who make use of the product.

2.2 Case of Study

Problem to Solve:

In search for specific medications or products related to hygiene and personal care the consumer finds itself disorientated about prices, places of purchase, available stocks and more, in addition to the time and money that imply all above.

Nowadays the pharmaceutical system works independently. Some pharmacies have their own mobile platform and delivery, but limit the consumer to a small offer and variety of products. Furthermore, the quality standards are low and the interface is slow, confusing and does not inspire confidence to the user.

Px Pharmacy:

It is the name of the application that seeks to centralize the service and facilitate the acquisition of products through a virtual payment system and cash post acquisition.

The application allows to identify possible nearby pharmacies according to geographical location or other point of interest, choose the best monetary amount among a large variety of pharmacies, make a delivery order and manage the payment.

3 Adopted Model

In order to develop an application, is very common to find traditional and agile methodologies concepts. The stages of the process of a traditional software development, described in the waterfall model and the agile method, explained in an iterative cycle, are shown down below in Figs. 1 and 2 respectively.

Fig. 1.
figure 1

Software development life cycle - Waterfall Model

Full size image
Fig. 2.
figure 2

Software development life cycle - Agile Methodology

Full size image

Traditional methodologies are based on planning with an intense stage of analysis and design before the development, which leads to a low risk management [22]. Based on this, Abrahamsson mentions that the challenge of a dynamic environment must be confronted, with frequent modifications in the needs and expectations of the client, (…) with approaches oriented to relatively short development cycles, typical of agile methodologies for software development.

On the other hand, an agile methodology is defined by being incremental (incremental advances), cooperative (between client and developers), simple and adaptable (allows changes in the last moment) [1].

In our case, both traditional and agile methodology, did not meet the criteria. As an innovation, it is required to respond to changes. This opposes to the strong planning of a traditional method, and not having a client to consecutively cooperate with during the development of the software is different from the definition of a “Product Owner” (The one who defines what must be done) in the agile methods. From this analysis, a model was defined to integrate the best of both methods. Figure 3 introduces us to the approach of the adopted model.

Fig. 3.
figure 3

Software development method adopted in the project

Full size image

This model is divided into seven stages:

  1. 1.

    Analysis

  2. 2.

    Requirements Engineering

  3. 3.

    Design

    1. a.

      Oral flow travel

    2. b.

      Retrospective

    3. c.

      Flow on the blackboard

    4. d.

      Functionalities mapping

    5. e.

      Standards

    6. f.

      Flow on software

  4. 4.

    Development

  5. 5.

    Test

  6. 6.

    Deployment

  7. 7.

    Use & maintenance

Each iteration from 2 to 4 stages could work as a release of the application. In the Design stage, another iterative cycle is defined and concepts as user-centered design and usability are critical. A bad definition of them leads to a launch destined to failure, which is why a transversal element is present: the experts, who function as the equivalence of a “Product Owner” of the agile method. These are the ones who determine a level of acceptance to continue with the development stage.

It is important to mention that in this study we only focus on the first four stages of the model previously presented:

  1. 1.

    Analysis: Establishes the user’s profile.

  2. 2.

    Requirements Engineering: Settle what is needed and priorities each requirement obtained.

  3. 3.

    Design: Defines the standards and structure the solution through a diagram or scheme of the interface.

  4. 4.

    Development: Implement the design as software product.

In addition, the questions previously defined for a “User-centered design” were taken as a reference in the Analysis and Requirements Engineering stages. It should be stressed that by adopting part of both methods (traditional and agile), unique aspects incorporated can be applied in similar projects that aim to solve a society problem through innovation (development of an application) considering a user-centered design and the usability it entails.

3.1 Analysis

This stage make use of the “persona” technique, which implies identification of a user profile for the app (choose the pharmaceutical products, compare prices and make a delivery order) by means of information search. This profile must be precise, to identify what the flow expected by the user will be like.

Ming-Hui Wen, quoting Nielsen, reaffirms that the main factor to define a profile is demographic, which includes, according to him nationality, race, age, date of birth, blood type, gender, education, income, occupation, family patterns, geographical location, urban living, family life cycle, marital status, and other variables [27].

In addition, some of the previously defined questions for UCD were taken as a reference:

  • Who are the users of the product?

  • What is the level of knowledge and prior experience of users with technology?

  • What is the user experience with the product or with similar products?

3.2 Requirement Engineering

At this stage, the first thing made was a brainstorming over the functionalities that the developer team should consider necessary, then a survey was conducted with a sample group of people who fits the profile obtained in Analysis, to validate the proposed main functionalities.

The survey was divided into three sections: basic data, about the service and testing (Table 1).

Table 1. Survey questionnaire
Full size table

It is necessary that the result of this stage meets certain characteristics defined by Arias Chaves in [4]: Concise, complete, consistent and unambiguous. These allow the developer to focus on clear and fixed objectives, in such a way that they do not incur in steps or processes that may cause delay or confuse them in the software development.

Moreover, part of the UCD questions used were:

  • What are the tasks and objectives of the users?

  • How can the product design facilitate the cognitive processes of the users?

  • What product information may users need? In what way will they need it?

  • What features do users expect from the product?

  • How do users think the product works?

Based on the results of the brainstorming, the survey and the solution of part of the UCD questionnaire, a software requirements specification (SRS) was proposed, divided into functional (software) and non-functional (hardware) requirements and an assignment of priorities. It is worth highlighting that if there were a bad definition of priorities, too much time would be invested into functionalities that would not be used or would not be necessary costs to assume on launching. Part of the process of developing through innovation lies in saving time, since human resources are limited [6].

3.3 Design

The purpose was to define the functioning of the application. The iterative stage has the following sub stages:

  1. 1.

    Oral flow route: A complete interaction of the steps the user will make from the beginning of the session until the end of the purchase order was mentioned aloud. This step is important to avoid inconsistencies.

  2. 2.

    Retrospective: All points in favor and against the result obtained were mentioned to reformulate and adapt the flow.

  3. 3.

    Flow on the blackboard: The idea was diagrammed and the flow was indicated through arrows between buttons or links and mobile views.

  4. 4.

    Functionalities mapping: A detailed writing of the components of each mobile view was made and therefore new features were discovered to be detailed.

  5. 5.

    Standards: Color, iconography and typography were defined.

  6. 6.

    Flow on software: Mockups were made using designing tools (Justinmind and Sketch).

The first iteration defines the base flow and the next iterations will try to give a detailed solution to the rest of functionalities that will be discovered in step 4.

3.4 Development

The early definition of a good architecture will enable the idea of innovation to achieve the general and functional purpose of the software [17]; in such a way that the abstraction in the first iterations of the proposed model does not limit the software development to a single functionality, but that it may grow over the time [24]. A scalable database and an ordered code allow innovation not to be more complicated as it grows (more iterations). If not it will leave a legacy-code with time and cost losses to solve or improve functionalities.

Over time some technologies become obsoletes and new ones appear with better results and easier use when working. For this reason, an analysis must be done to identify which of them are best suited. The technologies we used allow an abstraction of Front and Back End. These were:

  • Ionic (Front End): Framework that allows the development of hybrid mobile applications, which means that it is not restricted to an operating system. It is based on HTML5, CSS and JS and optimized with Sass and TypeScript.

  • NodeJS (Back End): Uses Javascript (JS), same as Ionic. Express was used as its application framework.

  • PostgreSQL: Open source object-relational database system.

  • Gitlab: Version managing system.

4 Results

4.1 Analysis

The objective of this stage was to define the profile of the user of the mobile application by seeking specific information, understanding the demographic factor and integrating the concept of “User centered design” through a set of specific questions.

The user age of the mobile application ranges from 18 to 60 since is necessary to reach the legal age because of the responsibility that implies the purchase of pharmaceutical products, besides it has been constrained to the age of 60 approximately due to elderly people fear and rejection over e-commerce and that only the 9% of them make use of internet, according to the INEI [14].

It is worth highlighting that Ipsos Apoyo sets that the predominant online consumer age ranges from 25 to 35, with average age of 31. This one is constantly active in social networks and more than the 50% is already banked.

On the other side, it is claimed that the online consumer profile belongs to A (High), B (medium high) and C (Medium) socioeconomic levels. Furthermore, the last report of the world bank (WB) defines that medium socioeconomic category perceive incomes from 10 to 50 USD per day [5]. People in this or a higher socioeconomic level have the acquisitive economic power to buy through electronic media [11, 15].

It should be pointed out that due to available information limitation at first stage, the use of the mobile application was restricted to a local framework: Lima, Peru. Likewise, the answers to the first part of the questionnaire of User-centered design are shown below:

  • Who are the users of the product?

    Consumers who seek to purchase pharmaceutical products through mobile devices.

  • What is the level of knowledge and prior experience of users with technology?

    People who use and handle mobile applications and are familiar with e-commerce.

  • What is the user experience with the product or with similar products?

    Use of mobile applications for sales and delivery.

With all above Table 2 was defined:

Table 2. User profile
Full size table

4.2 Requirement Engineering

The purpose of this stage was to establish a set of requirements and priorities for the app. A brainstorming and a survey based on a test group were carried out. Furthermore, the second part of the User Centered design questionnaire was answered and finally the software requirements specification (ERS) were made.

Relevant results from the survey, shown in Fig. 4 and summed up in a set of graphics, served to validate the proposed functionalities by the development team.

Fig. 4.
figure 4

Survey’s results

Full size image

In the other hand, the answers of the second part of the User centered design questionnaire are shown below:

  • What are the tasks and objectives of the users?

    • Search medicine

    • Buy medicine

    • Seek offers/discounts

  • How can the product design facilitate the cognitive processes of the users?

    Easier, faster, safer and more organized processes. Simple and understandable flow.

  • What product information may users need? In what way will they need it?

    A tutorial presented by videos or slides.

  • What features do users expect from the product?

    • Search system

    • Catalog of products

    • Product information

    • Offers/discounts search

    • Real time tracking of the order

    • Request delivery service

  • How do users think the product works?

    Search and add products to the cart according to the consumer’s preferences. Verification of the order, select payment method and add localization for the delivery service.

In our case, we just made one iterative cycle in accordance with the model presented in Fig. 3, which means that the requirement engineering was made just once. Some of the functional requirements and the non-functional are shown below (Tables 3 and 4).

Table 3. Functional requirements
Full size table
Table 4. Non-functional requirements
Full size table

4.3 Design

In this stage, we determine the mockups of the mobile application through a set of sub stages raised in the model proposed. The documented results belong from sub stage 3 to 6 of the flow of the model:

Blackboard Flow:

Draw of the main views that compose the base flow (Fig. 5).

Fig. 5.
figure 5

Base flow

Full size image

Functionalities Mapping:

List of the considered views and their components: buttons (B), fields (F), lists (L) and inputs (I) (Table 5).

Table 5. Description of components on each view
Full size table

Standards (Tables 6 and 7):

Table 6. Font standards
Full size table
Table 7. Color standards
Full size table

Software Flow:

Table 8 resumes some results of the last iterations of the design stage compared to the last participation of the experts.

Table 8. Results comparison
Full size table

From the results, we can observe that the experts/specialist perspective contributes to a vision toward the standard.

4.4 Development

The architecture developed for the mobile application directed to final users is shown in Fig. 6.

Fig. 6.
figure 6

Px pharmacy mobile application architecture

Full size image

The abstraction of the Front and the Backend have been observed along with the integration of technologies mentioned before.

  • Mobile client: Mobile device by which the user access to Px Pharmacy mobile application.

  • Platform: Front End, Interface by which the user interacts.

  • API/REST: Back End, which defines methods and functions that access the database.

5 Conclusions

Traditional and agile methodologies did not adapt well in the development of this project. Although their use is the most common and sophisticated for different software developments, a new model was established in order to integrate the best of them. From this approach, it was possible to continue progressively and effectively with an innovation process through the project, which sought to find a solution to a problem of the society considering the user-centered design (UCD) that helped in the definition of several stages of the model presented.

The first stage, Analysis, made use of the “persona” technique to define a user profile, taking into account the demographic factor. Based on it, the development of the next stages was focused on achieving a personalized, simple and enjoyable user experience. Requirements Engineering defined a guide to follow. Concise, complete, consistent and unambiguous characteristics of requirements allowed their subsequent prioritization to avoid the incorrect or overuse of resources. Design was the main stage to consolidate the achievement of the requirement goals. Following the sub stages on it, we were allowed to design a coherent flow that was optimized with each iteration and the participation of the experts.

It is interesting to know new tools of programming, which are increasingly better and more revolutionary. Managing these tools, in Development stage, allowed to build an architecture with simplicity, flexibility, extensibility, maintainability and efficiency in the use of resources.

6 Future Works

Although the results, there are still many aspects to cover. Related to the mobile application development process, it would be proper to complete the stages of testing, deployment, use and maintenance, since they all require an specific treatment and research and they results would help in the consolidation of the proposed model. In regard to the system, the first step is to build the web platform for pharmacies that will work as a means by which products will be entered and inventories, handled.

Nowadays, the analysis of information allows to take actions, based on the user’s behavior and preferences. This is the reason why data mining with the collected data, through the application, is planned, but considering all privacy aspects and conditions. In addition, we will seek to establish a financial projection, to know the different growth scenarios and therefore know how to direct the economic focus of the business plan and what adjustments need to be done.