Onsite

Improving a construction management app through usability testing


Objective and Overview

This project was part of a research initiative at UseTree. Human factors students from worked together with product design students to test and improve the software of 5 Berlin startups.

The startup my team worked with had recently developed a tablet app for their building management platform. They had just landed their first big client and needed to quickly solve the usability issues of their app to make the first real-world test of their software a success.


Timeframe

April - June 2014


My Role

UX Designer, UI Designer


Teammates

Tim Bader (Product Designer)

Dario Iannone (Product Designer)


Methods and Tools

Heuristic Analysis, Card Sorting, Wireframing and Prototyping

Axure RP, Adobe Illustrator


Analysis

Me and two fellow product design students were paired with four human factors students. The human factors students carried out usability tests to identify the ease and intuitiveness of user interactions within the app. The main indicators for usability would be the number of errors and the time users needed for a given task.


The tester (VP) sits in front of a computer and tests the software. They are instructed by the moderator (VL). The note-taker (Protokoll) sits a little farther away and observes the tester.
Setup of the usability test lab

Issues

The usability test revealed a number of issues.

Issues that were identified: Users overlooked the project structure, Status buttons were hard to understand, Couldn’t find priority buttons, Misinterpreted the "save" icon
More issues that were identified: Status change for groups was overlooked, Search bar disappears on some screens, Couldn’t find or understand the attachment button

Based on those issues, the human factors students made proposals for improving those areas of the app.


Proposals For Improvements

  • Redesign the icons

  • Highlight the project structure

  • Mark the priority filter as such

  • Onboarding for first-time users

While the human factors students carried out the tests, us designers sat down and tried using the app ourselves. We conducted an expert review and a heuristic analysis to identify any weaknesses of the product. We also talked to the startup team, finding out what their pain points were and where they wanted to go with their app and their business.

We took the proposals of our human factors experts into consideration and adapted them in a way that made sense to us. We also came up with a number of additional tasks we wanted to take on.


The Improvements We Decided To Make

  • Design clear, understandable icons

  • Reduce the number of steps in the project structure to make it easier to grasp and highlight it visually

  • Include the priority filter into the menu

  • Try to make the software so intuitive that no onboarding is needed

  • Redesign the photo feature: Use the tablet camera or browse the library instead of only saving the photo number

  • Add a home screen giving an overview over the weather, task list, statistics and last changes made

  • Add statistics about the building progress to give a broad overview

  • Add overview over last changes made to be able to trace back any changes and errors

  • Add a welcome screen with project selection and login

  • Make the visual design match the Sablono desktop application and the brand colors to create a coherent visual language

  • Add QR code scanner to identify rooms

  • Add a comment feature


Research


Understanding The Context of Use

We talked to a person from the startup team who had first-hand experience with the construction management process. This helped us understand how the product would be used.

Basically, the purpose of the app is tracking progress at big construction sites. Even today, that is mostly done by hand. One person walks around the construction site every day, inspecting the site and writing down the progress and any problems on a notepad. Those notes are then transferred to a computer and into the management system.

The startup aimed to make this process easier by developing an app that let people track the building progress on a tablet. All changes are then directly transferred to the management software, making the process a lot faster and more efficient.

Two construction workers talking. One is holding a tablet, the other one a building plan.

Exploring Design Patterns

We looked at other websites to learn how we could make our design conform to user expectations. The idea was that by conforming to standards, our users would be able to intuitively understand the complex interface of the app. We looked especially at the navigation structure, search features, filters and icons.


Experimenting With Icons

To develop icons that would be better understood, we tried to find out about spontaneous associations people connected with certain words. So we conducted quick guerrilla testing sessions. We approached people around the university and asked them draw the images that popped into their heads when they heard the word "save" or "attachment" among others.

Multiple sheets of paper with sketches of icons drawn on them.
The results of our guerrilla testing sessions

We collected those drawings and made a survey with more participants to see which icons were most universally understood.


Ideation


Card Sorting

Since users had big problems with the navigation of the app during the usability test, we wanted to make sure the navigation was as clear as possible. We wrote down all components on individual cards. Then we conducted a card sorting session to figure out the structure of the app and the placement of primary buttons and modal windows.

Two people discussing cards that are laid out on a table. The cards are labelled as UI elements and together, they form the interface of the app.
Card sorting session
The cards on the table form the outline of a complete interface now.
Result of card sorting

Crazy Eights

Then we brought our research results together to create a coherent interface. We used rapid sketching to collect ideas and determine which ideas we want to continue with for our main user flows and the icons. We split up responsibilities among the three of us. I was in charge of navigation. Now that the content of the navigation was clear, I had to figure out a way of representing the navigation that would make the mental model behind it clear to users.

A notebook with sketches of the app's navigation structure.
Sketches of navigation elements for the app

My teammates were in charge of icons, the home and welcome screen and he photo and comment feature. After some iterations, we brought our ideas together to create digital wireframes.



Prototyping

For wireframing and prototyping we used Axure RP. At first, we focussed mainly on the layout of the elements on the screen. Later, we added a coherent branding that fit the brand image of the startup.

A screenshot of the redesigned interface showing the new welcome screen. We made the room navigation more prominent by tinting it a dark grey, for instance.
The changes we made: Welcome screen
A screenshot fo the room overview screen. We changed the icons for priority, status and inspection.
The changes we made: Room overview screen
A screenshot of the screen that displays the works to be done in a certain room or section of the building. The “Save” button was changed into a symbol that means “Upload”, because data is uploaded into the cloud and transferred to the main management system when saving.
The changes we made: Works to be done screen

We presented a clickable prototype to the startup team and exported the code so they could implement the changes. We were working closely with the developers of the team and they were able to update the app practically over night. Then, the human factors students used the updated software to run a second round of user tests.


Re-Test

The tests were carried as moderated usability tests in a lab environment, just like the first round of tests. Participants got the same tasks as the first time around, so the metrics could be compared.

Compared are the percentages of participants that gave up, and of participants that had a wrong result for each scenario. Time on task is compared as well.
Comparison of the results of the first and second usability test

Positive Results

  • Participants were able to orient themselves better in the app, because of our redesign of the navigation structure (Scenario 1)

  • The new icons for status, priority and inspection were understood well by all participants (Scenarios 1 to 4)

  • Filters were easily found and understood now, because they had succinct test labels instead of confusing icons (Scenario 1 and 3)

  • Photo feature was identified and found by all testers and was easy to use (Scenario 5)

Negative Results

  • Testers were confused by "Inspect"-button, because it didn't work properly (Scenario 1 and 3)

  • QR code scanner didn't work well (Scenario 3)

  • Search field wasn't found, because it didn't have a clear outline and there was no placeholder text (Scenario 4)

  • "Save"-button was not found by some participants, because they were expecting a different symbol, the classic floppy disk (Scenario 6)

Altogether, we managed to make improvements in the areas that we set out to improve. But during the usability test, many new issues cropped up. However, user satisfaction definitely went up, mainly because the navigation and icons were more easy to understand now.


To quote one of our testers:

"The software is like an intuitive checklist."

Takeaway

A lot of the negative results in the test were due to bugs in the software. We could have avoided that easily, if we used our prototype for the test instead of the actual app.



Reflection


What went well

This was my first proper UX project and I was amazed by the power of usability testing. While I was a little disappointed I couldn’t carry out the tests myself, the results we got from them were immensely helpful and guided our redesign into the right direction. In the end we were able to make great improvements to the product, resolving all major issues that had come up in the first round of tests.


Next steps

If we could have worked on the project longer, we would have made another round of improvements based on the results of the second usability test.