Climbing on the roof has never been safer
The request
A.P.P. Kft is a company that designs green roofs as well as manufactures, installs, and audits fall protection equipment required for these roofs. The equipment can be installed or audited by external partners if they have a certified operating license that can be obtained by completing the exam requirements of A.P.P. Kft. The installation process must follow a strict protocol and has to be thoroughly monitored and documented. Our partner contacted us for assistance with the digitization of their entire process, and asked us to develop a solution that promotes an efficient workflow to their partners.
The goal
Our goal was to create a system that enables the registration (installation) of safety equipment in extreme circumstances (on the roof, on a phone, during high winds, in the rain, in the sun), where the required documentation is automatically created during the completion of the registration process. Another goal of the system is to simplify the regular auditing process, and to provide workers on the roof with up-to-date information about the last time the system was audited and its results.
Project strategy
As there were a few question marks at the outset, the first step was a UX design process where real users were involved to explore all possible requirements.
A team of 2 UX professionals spent 45 days working on this project with our client. During this time, we had 10 in-person meetings with our client and we had 3 end-user test days where we had the opportunity to ask for feedback from partners in various countries. We had 2 iteration rounds during the design process to avoid most of the critical problems. At the end of the process, we delivered a well-designed and tested clickable prototype to our client and our development team that included all processes and scenarios as well as the finalized UI and UI kit.
This was followed by a 3-month development process that was completed by our 3-person development team.
The UX design process
If we’re creating a product or a solution for people that will be used by people, it is imperative to involve people in the design process as they can provide us with feedback that gives access to an entirely different viewpoint than of a CEO or a market expert. The UX design process does exactly that.
1. Understanding goals and requirements (Emphatize)
This might be the most important part of the process. Our task is to collect all the available information from the client and the end-users.
We usually begin with a kick off meeting. The UX process requires significant commitment from the client’s side, because they have to give us their time and attention as well. Sometimes there is a bit a reservation from the client, but the first couple of meetings prove the method’s efficiency, and the rest of the process is met with enthusiasm.
With this project, Diadem’s team had a great attitude, all departments including sales, product design and IT sent representatives to the kick off meeting. It’s always exciting to see the ideas and motivation that come to the surface during these discussions, most of which were not brought up at the start of the project.
After these meetings we usually define the personas connected to the system. These help us pinpoint each user and allocate issues to them. Once we define these personas, it’s important to talk to them before starting the design process. This step is crucial, as even though they are not the client, we are creating the product for them. During the project the “House owner” persona came up at the kick off meeting, and we realized that it’s such an important persona, that we would need to develop functionality that is available to them.
Personas:
- Installer
- Site manager/owner
- Auditor
- House owner who has the fall protection equipment on their roof
- Diadem Admin
2. Defining the focus and the problems that need to be solved (Define)
The main goal of this step is to synthesize all requirements and prioritize them.
The most important conclusions and pieces of information were:
- As system registration was to be completed by different professionals, the user interface had to be intuitive.
- The system was to be used under extreme circumstances, often in bad weather and poor lighting.
- Inadequate administration of the installed systems was an issue at the company.
- They needed functionality to help with auditing that was to be used with special authorization.
- If we’re creating a system, we examine the processes that can be automated to simplify as many aspects as possible (such as installation or audit documentation).
- Information about fall protection equipment had to be retrievable, so that everybody (with all types of phones) was able to check the status of the system and the date of the last audit (an application is not a suitable for this).
- An administrative web module was also needed where fall protection equipment could be categorized into projects, documentation could be handled, and user authorization could be managed.
3. Brainstorming (Ideate)
In this phase we are working on finding solutions for the most important matters. These can include processes, interface, or technical details. Here we want to highlight the task of identifying fall protection equipment.
We had several discussions with the client about this. We examined whether product registration could be accelerated with various identifications methods. It was important not to disturb the production process, so we recommended a change in serial numbers and a hot-branded QR code solution that was an acceptable compromise for the client. This obviously raised a question about the management of old serial numbers.
We recognize the influence of the designer approach that we follow as it helps us to see beyond the process-heavy mindset and work towards realization. This requires constant communication with the development team, but at the same time it ensures that plans can be fulfilled during the later stages of the development process.
4. Prototype
The benefit of a wireframe is that it’s easy to modify it. It can also be created quickly and it lets us go through the planned processes, and helps bring out potential issues, missing pieces, and misunderstandings. The other major advantage is that various solutions can be tested quickly. The navigation structure or a wizard process is a good example of that.
Once we’re satisfied with the wireframe, we can start building a high-fidelity prototype that looks almost identical to the final product. This version is suitable for usability testing.
5. Testing
The design is not completely ready in this phase, but it’s recommended to have the typography ready, the buttons and other text in their final place as well as the final versions of the layouts.
We involved 7 people in the first round of usability testing. Usually 80-90% of issues are noticed if 6-8 people are involved in usability testing.
With this project, one thing that came to light during this phase was that some of the terminology was used differently that what the design team had thought. It was an easy problem to solve, but it was important to correct all issues to avoid misunderstandings.
6. UI
At the end of the process, we finalized the design, and delivered the prototype to the development team. Using this the developer can instantly see the properties of each UI item (color, size, rounding, etc.) thus making the sitebuild process faster.
Innovation in product identification
Apart from green roofs, A.P.P. Kft usually designs the fall protection equipment, too. Fall protection equipment consist of different products, including rails on the roof, fixed systems (e.g. wall handle), or a system with multiple anchoring points, which means the product is attached by the substances layered on the roof (ballast, insulation, potting soil, etc.).
All products are installed by specialists following the installation guide. This guide varies for each product, so it was crucial that the system helps identify which system installation needs to be documented.
To facilitate this, we came up with the idea of putting a QR code on the product labels that identifies product type and the specific product itself. As a result, if we scan the QR code with a phone, the applicable installation guide will come up. The specialist can follow the installation process step by step, and the system gives notification when the pictures required for quality assurance purposes need to be taken. These photos are taken with a simple click. At the end of the process the system provides a checklist where each item needs to be ticked individually thus proving that every step was completed in compliance with regulations. The installer then signs the document with a digital signature.
Automated label making
Although the QR coded label was implemented, the execution was time-consuming as A.P.P. Kft sent the required serial numbers to the printing company who then generated the QR codes based on that. As this wasn’t a cost-effective solution, we automated this process as an additional development. We faced challenges with this as print products had to be done in a specific format and had to contain special information such as wing or bleed box for the printer machines to work with.
Reporting
Our client wanted to create various reports from the available data with options for dynamic parameters. Creating a custom reporting system is incredibly expensive, so we recommended another solution. As Microsoft users we have access to PowerBI and after a consultation with our expert, our client decided to use it, too.
Summary
During our cooperation, we designed and developed a web application with an interface and functions that vary depending on whether it is opened on a phone or a desktop.
The 4 main modules that were developed in the web application:
- administration of fall protection equipment (installation process and documentation, installing new roofs)
- auditing of fall protection equipment (yearly quality assurance process and documentation)
- retrieval of status for fall protection equipment
- super admin functions for A.P.P. Kft
Technologies:
Angular, PHP, MySQL, AWS, S3Storage, PowerBI