Category: Technology

The development of modern web applications is a complex process that requires the coordination of many different specialists working to achieve a common goal. One might think that all you need is a developer and some code in order to make a webpage work. And one would be correct to some extent, however, there are other aspects that have to be taken into consideration, such as quality, which is possibly the most important example.

“Quality is not an act, it is a habit” Aristole

 How to define quality in terms of web applications? This is a very wide term covering everything from the basics and particularly the importance of testing: functional checks, usability tests, requirements testing or performance testing to more in-depth subjects like accessibility testing, security tests and fully-automated tests.

To examine the subject further let us have a look at the most common test areas.

Types of Web Application tests

Manual tests are the cornerstone of each successful project, each functionality has to be tested –and often for many devices/browsers – whether it meets the specification requirements, each edge case needs to be tested thoroughly to prevent an end user from exploiting any security threats or causing a web page crash. Many of those manual tests can and should be automated in order to reduce the amount of time required for testing. Test automation is a development branch that requires special tools and frameworks where each test is fundamentally a script, so a skilled automation engineer should also follow all good code practices and standards.

Another area are performance tests which can be divided into several subareas and strategies. A very common approach is to just test the application response times, however, more detailed tests check things like: How does an application respond if there is high traffic? How many users can enter the page simultaneously before it crashes?

Does application performance degrade over time which implies some memory leaks? What is the page load time in Hong Kong in comparison to Atlanta? Thorough performance tests can provide answers to those questions and help find potential problems and bottlenecks.

Security tests are meant to find as many potential security issues as possible. They are conducted in order to locate and fix security vulnerabilities which could result in hacking the site, sensitive data being stolen or crashing the servers. They usually consist of the use of various automated tools that check for the most common threats but may also need some manual tests which require the tester to think as a hacker and predict possible issues.

There are some other testing approaches as well, accessibility testing focuses on adjusting the application so it is usable by people with issues like hearing impairment, color blindness, infirmity and old age or other problems; usability testing focuses on testing how easy and intuitive the page is; and regressions tests which constantly ensure that none of the already existing functionalities breaks and that quality does not deteriorate.

Requirements for successful Quality Assurance

As you can see testing web pages consists of many areas that often require a specialist to be able to prepare and conduct a valuable set of tests. In order to test application security one has to be up to date with current threats, be an expert in the area of system architecture and proficient as a developer as well. In order to provide a successful test automation a skilled developer with test experience and devops knowledge is a must.

Finally the testing requires effort from the whole team in order to be successful. This is very often overlooked and people think that simply adding the testers to the team is enough to improve application quality. However what everyone needs to be aware of is that it also slows down the development process due to the fact that it now incorporates testing.

So every new feature has to be manually tested, all defects need to be documented and fixed, also the automated tests need to be recorded and maintained as well as regularly updated to match the latest changes in order to produce benefits. Any additional testing activities will also usually require new testing environments and will further delay the release date. However, there is a huge advantage of doing these kinds of tests and I will discuss this in the next part of this article.

The Benefits of Testing

So what are the actual benefits of testing and should it be done? Well, let me give you an example. Let’s say that you have ordered a brand new car that you expected to be the best in all areas and you have just received it. At first glance everything looks fine but after one day of using it you notice that the top speed and acceleration is actually much worse than with your old car.

Moreover the door only occasionally locks which makes it very prone to theft. There are also a few issues inside the car, the gear box does not work properly, the radio is broken and in order to use the turn-signal you need to press 2 buttons that are located on the backseat of the car because someone thought that this may have been a good idea despite of what the standard is.

In fact this is not an extreme example, because some web pages look more like a car that could never even start its engine, never mind drive and yet there they stand, proud members of the online community. The benefits of testing affects both the team and the business-side. Testers will increase the team’s confidence before release and test automation constantly ensures the developers that their code changes do not introduce new issues.

Testers also make sure that the new functionalities are consistent with requirements and make it much easier to introduce all kinds of bigger changes in the application (technology stack updates or application changes) due to automated tests. From the business perspective the end-product is of higher quality, the risk of introducing a defect into the production environment is much lower, which is the same as the possibility of weak performance or security issues.
 

Summing up

If you don’t have time to do it right, when will you have time to do it over?

Without proper tests development costs rise over time as many features have to be done again or completely changed due to bad design decisions. Moreover software becomes more bug-prone, the usability suffers and the overall quality deteriorates which in some cases may lead to huge exodus of the application users.

To sum up quality assurance is crucial in web application development and it has been present in the industry almost since its beginning and is growing each year, being present in all informed companies development processes.

See also:

• Is web application an expense or saving?
• Test automation tips: everything you need to know before running application automated tests
• TOP 5 analytics tools to measure App success
• Best ways to measure Mobile App success

The standard design process divides the product preparation period into various phases, which (depending on what methodology was adopted) separate interface design and its implementation. The combination of both phases and the creation of the one team working in Agile methodology allows us to save time, speed up the implementation process and improve the quality of a product’s usability. This occurs when the collaborative team is competent in both design and implementation.

Not sharing either knowledge and/or experience during the completion of tasks in both these categories may result in the preparation of an interface whose implementation will cause unnecessary problems for programmers — this is the most likely and easy to avoid the problem. Similarly, the need to modify the accepted requirements of a project (due to the change in the scope or mode of application operation) increases the number of iterations and corrections at every stage of the process.

After identifying such issues in previous projects, the importance to include people with project competencies and experience in Agile methodology in the development team is obvious. Working on UX and UI applications in the scrum formula and its appropriate synchronization with the ongoing implementation at that time guarantees an immediate increase in the success of implementation and improved quality control in the visual layer.
 

Scrum methodology in product design — how it looks in practice

The length of the product design sprint is usually adjusted to the length of the standard development sprint. Using the same tools to manage tasks, each planning session defines project goals, their priority and amount in a given sprint for a given number of people in the project team (usually there are one to three teams, depending on the complexity and development of the project, with competences in analysis, UX and UI design and independent work organization).
 
The most important assumption is to plan the work of the product design team at least 1 sprint in advance to that of the development team – to which the planning and backlog grooming is most often used. Thanks to this, everyone gains a wider perspective than just their current tasks, developers gain the possibility to take an active part in the process of usability and interface design, while designers get clear feedback in the context of the feasibility of the developed projects and their usability.
 
Depending on the complexity of the project, the demo takes place with the help of a clickable prototype or presentation of individual components or views in the presence of the whole team. Tasks that have not been accomplished pass to the next sprint. The main goal is always to provide developers with the materials to work well in advance, including usability testing and gathering feedback from users and customers.
 

Client-centric design process

Synchronizing the adaptation of Agile methodology to the design process and collaborative work with the development team (but with appropriate methodologies), automatically changes the perception of the entire project. The common definition of a backlog, a lively discussion about functionality and people with different competencies focused on achieving the same goal – providing the best possible quality of implementation – is definitely a recipe for success. This unusual approach allows us to focus on details and individual components of the project at hand, and also ensures that throughout the implementation the main assumptions are remembered and a wider perspective maintained.
 
The use of Agile methodology in the Product Design process also has one additional advantage, which is the need for close cooperation and frequent testing of the prototype with target users. This is due to the fact that we mainly work on the creation of a UI system that will be easily adaptable for different functional scenarios, and that concentrates on understanding users to solve and satisfy their problems and needs. This approach that focuses on users guarantees that the system we develop will also be easily adaptable in other, alternative applications should there be a need to develop them (a good example here is LindaAI).
 
One of the interesting and most effective exercises that should be used in the analysis phase is User Story Mapping – this is regardless of whether we are working on a new product, where we focus on solving real problems of users, or we are working on a new instance of an existing project, where our goal is to make sure that our changes and introduced features have a positive impact on business indicators and user behavior.

This exercise allows us to define:

• Who is the intended user/recipient of the product?
• What needs to be done with the product that is being worked on?
• What is the implementation of key scenarios?

The whole is done with the help of whiteboard, sticky notes and the joint work of the entire team. The actions performed by the user of our application are divided into the next steps of the project so that we get accurately mapped functional paths in the product, with selected MVP, the division into releases and the ability to easily transfer data from the analysis phase to the backlog. What is more, the effects of our work can also be used to determine the conversion hopper (by identifying the most important activities on the site), control before extending the scope during work (thanks to easy migration to the backlog) and guarantees clarity in the common understanding of the product throughout the team.

Cross-functional teams

It is worth noting that project competencies between the development and design teams are purposely reiterated throughout the duration of the project. In the phase of analysis and research, the technical insight of developers is undoubtedly a great value, which at the start limits the number of potential problems. Most often, immediately after the analysis phase, the level of project work increases, so that the development team has already started with a specific number of ready and tested design solutions and that thanks to the aforementioned synchronization throughout the implementation, the designers can deliver further modules and components for implementation. The intensity of design work usually decreases at the final stage of implementation, where designers can take care of quality control. The whole cycle is repeated for each subsequent release of the product.
 
We must always be ready to change priorities. The ability to analyze the visual layer and support in improving usability often requires additions to the standard scope of work in a given sprint of time, which will be used to help the development team solve current problems during implementation. Designers and analysts very often have the widest view of the project, so their competences can naturally expand – but we should always be focused on the goals defined within the sprint.

In Espeo we use the following set of tools:

• Slack as a basic communication channel inside the team (except for project meetings)

• inVision as the main tool for building prototypes of interfaces and testing them with users

• Zeplin as the main tool for the transfer of materials for the implementation of the development team

Summing up

The adaptation of the project team to Agile methodology and the creation of a collaborative work environment, where there is the smooth exchange of information, had a positive impact on the quality of implementation (not only in the visual layer).
 
Improving this process is the key to building a complete set of competencies in a team that is able to efficiently deliver well-prepared solutions, focused on meeting the goals set by business and solving problems faced by users.
 

See also:

• Our product design workshops – how to quarantee the most effective application development proces.
•  The five mistakes startups make when developing first App.
•  How to effectively start application development project. Check our project starter checklist and find out why we’re successful!