Procore Mobile Redesign

About Procore Technologies

Procore Tech provides cloud-based construction software.

Procore understands the complexity of construction and is passionate about creating a streamline frictionless process that will help drive efficiency in the construction industry.

Products: Web application, mobile app for iOS, Android, Windows, and Procore Sync.

Procore’s mobile app acts as a bridge between the office admins and the workers out in the field. Creating seamless interaction between General Contractors and Subcontractors.

Web users 

Companies: General Contractors.

Where: Office

Roles: Project Managers, Estimators, Project Engineers, Superintendents, and Architects.

Mobile users 

Companies: Subcontractors.

Where: Out in the field.

Roles:  Superintendents and Foremen.

Design goals
Bring consistency to the app, create design system,
and modernize.

Why?
It was difficult to introduce new designs and we had
a poor mobile experience.

Business goals
Apple mobility partnership program

Why?
It would increase Procore’s visibility and companies
associated with Procore could lease apps.

2015 redesign

Previously, I had lead Procore's desktop redesign. The redesign was purely visual and consisted in minimizing the amount of color, removing gradients, and standardizing UI components across the web experience. 

The next step was to introduce the new styles to mobile. This would unite all their products look and feel.

Navigating between projects

Poor use of space.

Unnecessary branding.

Outdated colors.

Awkward placement of log out.

Consumption Pages

Disorganized layout.

Lack of information hierarchy.

Outdated UI.

Old brand colors.

Inconsistent labeling of headers.

Poor use of iconography.

Odd use of text styles.

Inconsistent layouts for every page.

Project Dashboard

Poor use of space.

Inaccurate data.

Poor representation of data.

Unnecessary branding

Outcome 

The inconsistencies in the mobile app arose during the visual update. At the time the design priorities weren't focused on a full redesign and only color, icons and font styles were updated. Throughout the redesign I pushed for more time to modernize the app, but there were other priorities.

Apple partnership

Between 2015 and 2016 any redesign efforts had faded and been forgotten. During this time the Android team had decided to focus their attention of creating a better mobile experience and redesigning the app. The UX Designer at the time, Juan Ramirez, and I worked together to design the new layout and navigation for Android. 

At the end of 2017 Procore was approached to join Apple's Mobility Partnership Program. Procore was required to modernize the app and meet Apple design standards to become a partner. This was the opportunity to fix the iOS experience.

Problem

When a new tool would be added to the mobile app a different design and layout would be implemented. This created an inconsistent app.

Problem

At the time Android and iOS were using incorrect design interactions, UI components, and weren't respecting their platform guidelines.

Problem

There was no design style guide. Designers and developers would use different UI components and layouts as new features were released.

Solution

One of our top priorities was to design a consistent experience that was scaleable and adaptable to each tool.

Solution

The first step to improving the mobile experience to have Android respect Material Design Guidelines and iOS to respect Human Interface Guidelines.

Solution

Creating a style guide and design system that would help minimize inconsistencies, maintain platform guidelines, and encourage collaboration to improve the app.

Challenges and backlash

The few designs that had been introduced in the 2015 redesign had significantly improved the app and yet inadvertently added more inconsistencies.One of the greatest challenges every redesign faces is the backlash due to change from users.

For our users having a reliable app to preform their work activities is a must and though the app had confusing layouts and poor interactions, they had become accustom to them. Our strategy was to slowly release the redesign in chunks.

Creating a design system

During this time I would plan and sketch out the components and start determining
the colors, size, and dimensions for Procore’s UI elements. I had a limited tie to explore and I needed to start determining the styling for these assets so I could start handing off work to my engineering team.

Taking the role of project manager

For this initiative I also took on the role of project manager, our product manager had to take a step back for personal reasons, therefore I on took the role as pm. My team needed to take my designs and implement them onto 12 Procore tools and we needed to have constant communication. We also needed to work closely with the designers and engineers of other squads to update their tools. I made sure we had daily communication and that we were meeting our weekly goals.

Old navigation

The iPad is the most used device out in the field and its essential for our users to have the ability to easily navigate between tools and multitask while in the app.

New navigation

We introduced the nav bar for a fullscreen experience and we added the Dashboard, Tools, Drawings, and Settings in the nav bar.

The #1 used tool

The Drawings tool is the #1 used, our users heavily depend and rely on us to provide the best experience possible. This is why we decided to add Drawings in the nav bar. 

This would improve the experience of the user by allowing them to have quick access their drawings and the ability to jump between different tools.

Tool page improvements

• Tool icons were designed to have a stronger and bolder look.

• Changed the weight of the tool titles to bolder look.

• Switched the list of tools to a grid.

Why?

• The tool icons felt weak, they needed to have a stronger presence.

• Transitioning the list to a grid layout improved the cognitive load of items and put more focus on the new icons.

List page improvements

• Increased cell height.

• Added font weight to the title and added more distinction between primary and secondary information.

• Item status was updated to a pill with the label.

• Date was chnaged to Mon, 00, 0000.

• Increased the subheaders background and made the font semibold.

Why?

• Increasing the cell heights and adding more visual distinction between the sub header, title, and secondary information alleviated the user from visual clutter and improved scannability of information.

• Adding the label of the status reduced the risk of users misinterpreting the color's meaning.

• Expanding the date reduces the time the user has to read and think about the information displayed.

Detail page improvements

• Designed a default page and new organized layouts

• Consistent headers

• Organized the placement of the action icons

• Removed unnecessary icons

Why?

• The app is clearer and more concise with the new consistent layout and UI

• The default design can be applicable to all tools already in the app and can easily be adapted for new initiatives

• New tools can easily be implemented

Evolution of the app icon

 Marketing consistently used the letter C with a centered hex to avoid using their full logo. When I arrived to Procore, Android and iOS used the exact same app icons. To create more visual distinction between our mobile app I designed new icon that distanced itself from the skeuomorphic C and transition to a cleaner, more contemporary look.

Increase in mobile adoption
For the past 5 years Procore a total of only 30% of
Procore users were mobile. After modernization we saw the number increase from 38% to 40%.

Improved CSAT
Out in the field we were hearing positive feedback
from our users. In the image the woman is saying how everything is so clean and clear.

Apple Partnership
In order to join the Mobility Partnership Program we needed to modernize the app. The Apple team was very happy with the outcome and Procore was able to partner.

Learn more about Procore’s mobile user

The modernization created consistency and the first mobile design system. After the redesign the mobile team’s focus was to learn more about our main persona, the superintendent, and mobile’s collaborator experience.