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/UI Designer

Teammates

Tim (Product Designer)

Dario (Product Designer)

Tools

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 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

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.

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.

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.

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.

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.

Retrospective

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.

What I would have done next

Another round of usability tests to test our improvements.

Bringing improvements into the live product.

More Projects

Here’s a little bit about me.