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.
April - June 2014
UX Designer, UI Designer
Tim Bader (Product Designer)
Dario Iannone (Product Designer)
Methods and Tools
Heuristic Analysis, Card Sorting, Wireframing and Prototyping
Axure RP, Adobe Illustrator
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 usability test revealed a number of issues.
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
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.
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.
We collected those drawings and made a survey with more participants to see which icons were most universally understood.
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.
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.
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.
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.
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.
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.
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)
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."
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.
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.
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.