Procore Technologies — Mobile Filters

Year: 2016

Client / Company: Procore Technologies, Inc.

Role(s): User Experience Designer

Contributions: General Feature Concept, Main User Flow and Story Map, Contextual Inquiry, Usability Calls, Wireframes and Mid-Fi Mockups, Clickable Prototypes.

Final Result / Deliverable: Final design pattern with all the development requirements. The new feature was developed and released in the iOS and Android Native Apps resulting in a 40% time improvement in data searching.

Problem

The Procore Mobile App is used by thousands of Construction Field Workers to capture issues, track progress and measure quality/safety. Procore Mobile is widely used by superintendents, project managers, foremen and other on-field workers.

One challenge that appeared with the growth of the product and the addition of more comprehensive issue capturing tools, was the cumbersomeness around finding specific groups of issues.

As a construction project move forward thousands of items are collectively recorded by different workers and stakeholders. Those items need to be referenced in later stages to be effectively addressed. Procore users were having an sub-optimal experience when it came to find and reference previously created items.

I was tasked with creating an scalable and re-usable UX pattern to solve this problem…

What kind of solution can provide an agnostic filtering pattern and an fast way to find specific groups of items with easiness?

Process

The first step I took to solve this problem, was to analyze anecdotical and quantitive data, in order to build an insight around the problem. Anecdotical data was gathered from 3 main sources: User Feedback Tickets, Customer Support Tickets and User Sessions Recordings.

Quantitive data was gathered from our analytics software (Google Analytics and AppsSee). I extracted pertinent information from the main events dataset and analyzed sessions that mainly occurred in our specific tools lists views. I analyzed funnels and focused in understanding the behavior behind the available filtering methods (Segmented Controls and String Search).

After gathering all the data and analyzing the general user requests, the problem became evident: Users wanted more granular control to filter down the items lists, but they had an special interest in filtering items by two specific properties (Assignees and Locations)

Before I could create new UI controls for the requested filters, I had to overcome the challenge of working with limited real estate.

To solve this, I explored several solutions using virtual real estate (drawers and sliding views) as the baseline of the design. After several explorations I created a semi-realistic prototype of the filters view and functionality.

I then went through a formal design critique process in which I got feedback from other UX designers and major stakeholders.

Finally, I performed a series of usability calls to validate the new real estate paradigms and did two onsite interviews in which I put the prototype on the hands of our customers. The calls and interviews proved that the paradigm was usable, easy to learn and highly functional.

The new filtering paradigm also was huge improvement in the use of screen real estate. The main two optimizations I did to achieve this were:

1) Segmented Controllers were deprecated giving extra room for the list elements and other potential UI elements.

2) A complete new view for filters was adopted, taking advantage of the virtual real estate that until now was rarely used in Procore.

Here is a view of first the prototype against an old view without the new filter paradigm:

Old Segmented Controllers vs New Filter Paradigm (1st Concept)

Solution

Since the initial design iterations proved to be successful, I decided to move into creating the production ready design.

After discussing the feasibility of the design with the engineers I started re-working the User Interface elements. At this point it was clear that we wanted to stay close to the Apple Design Guidelines, so I created a new view using only UI-Kit elements.

The new designed contained all the required filters. I also took the decision of going with a full height view and rely on the slide-in animation to keep the users in context.

I did a new round of testing and interviews with the updated design and got a hugely positive response. After polishing some details, I created the final specs for the feature and the interactions. Here is the final full with design for the filters view:

Final Design Filters View

Results

The Mobile Filters Initiative brought to life a very demanded feature that was needed to keep the mobile platforms in parity with the web app.

Before releasing the feature I gathered time duration data for actions like closing items, issue navigation and search.

I watched more than 4 hours of user sessions that happened mainly in the views that were getting the new filters. By doing this I was able to detect hundreds of user navigation bottle necks. Since I was confident those blocks were going to disappear with the new feature, I manually created a list of the top issues and used it as a baseline for measuring success.

After releasing the feature and getting and overwhelming positive response from our mobile users, I did a new round of data gathering and user session exploration. It was clear that the feature was a success.

The filters reduced the navigation time (within the item lists) by 40%. They also reduced the amount of n0-action sessions (sessions in which users navigate within a tool but don’t perform any workflow related action) by 20%.

Here is a video demo of the filters functionality:

Observations Filter Demo

Interested in more case studies, process and design research? Feel free to continue reviewing my portfolio or shoot me an email if you want to talk more about my work.

Contact Juan J. Ramirez