“Too Much Scrolling”

Process Instance Redesign for e-Builder

The Product

e-Builder is a construction program management solution that manages capital program cost, schedule, and documents through a world-class workflow and business intelligence. e-Builder is a complete solution designed at its core to deliver control and reduce surprises for owners of capital program.

The Challenge

e-Builder has been around for years and while it solves several problems in the owner space, it can be challenging to navigate and control. The most important job of a user is being able to start a “process”, add the required data, and monitor the overall project's health. When our highest-profile client raised concerns that this function was behind, e-Builder decided to initiate a collaboration with them which would expedite the enhancements we were planning on making to the product. Our client put together a team of professionals in the construction industry as well as their own group of user experience designers and developers. They then provided a list of interface issues along with their suggested solutions. The challenge… all of the above.

My Role

I was responsible for the end-to-end design of this initiative. While I collaborated with my UX team for feedback or to delegate some minor audit responsibilities of the existing product, I was in charge of the research, high-fidelity designs, usability testing, delivery, and development support through analysis, refinement, and release.

Part One

Understanding the Problem (really)

“Too much scrolling”

Once our product managers gathered all of the issues and suggestions from our client, they immediately requested to implement collapsible sections to address the major concern being that the page was "overwhelming” and had “too much scrolling” in addition to other suggestions such as changing the layout and updating to our new design system and meet corporate standards.

The concern was understandable and of course, modernizing the design was a given, however, the UX team felt that we didn’t have enough information to support the accordion implementation.

We needed more information and didn’t have the time or support to perform user research to validate the concern.

The decision to implement collapsible accordion sections was out of our hands in UX.

It’s important to note that our client is well-known for their user-friendly products and arguably dominates the user experience space in general. With that said, they’re still only one of the many clients that we serve and while we were extremely excited to get the chance to collaborate with them, we still wanted to start from scratch and really understand the problems we were solving.

Understanding Processes

Our users’ day-to-day varies based on the type of work they’re assigned to or need to assign. One example would be a field worker performing an inspection. Their administrator would have created an inspection workflow that lays out steps A to B for how that inspection is started and finished and each step is likely to contain a set of input fields specific to a role.

Our users don’t only perform inspections, though. There can be hundreds of processes that range in complexity and that just means more steps in those workflows can exist.

The more steps a process has, the more fields there are to be completed. It also means more people (actors) will be involved in completing those fields in addition to referencing fields completed by prior actors.

Process Instance

Research Plan

I created two research plans, one specific to the process instance (the long form page) and the project landing page (this is where users search existing processes and start new ones).

There was a lot of pressure when it came to timing, so I also created a roadmap to help communicate to our client what to expect and when. As weeks went by, I would complete each phase and link any deliverables I was allowed to share with them.

Transparency was the biggest ask from our client and their involvement with the actual design was minimal. Not that it wouldn’t have been welcome, but I was happy to say there were few design obstacles and it would later be very well received.

Synthesis

Affinity Diagram

Based on the JTBD canvases and other findings gathered from related opportunity maps, I broke down the main categories of data and jobs that would need to need to be accounted for.

Empathy Map, Prioritization & User Stories

I created empathy maps with the above information, prioritized the main jobs I was going to address (green cards) and wrote out some user stories to help guide my design paths.

Modernizing the Look

e-Builder was acquired by our parent company Trimble Inc. in 2018 and Trimble had their own style guide that we were asked to slowly implement.

One thing I had in the back of my mind at all times was that the new layout and the updated look of the input fields would likely solve a lot of the issues for how the form was digested by our users and while I was going to continue exploring the collapsible sections, there were a lot of elements that would do nothing but enhance the usability of the page.

I felt that I had a lot of information to support the design decisions I was about to apply but it was really important that whatever I did to this page would serve as a “template” for other pages that would later be enhanced with the new design system.

Using miro, my UX team and I conducted an audit of the legacy product and established what that consistency would look like across the board including main action buttons, form fields, data visualization, etc.

This also meant submitting a handful of components to the design system team and even spawned a dedicated tiger team I would later be a part of to design advanced tables (grids) with filter and view capabilities.

Part Two

Usability Study

Research and Recruiting

I started working on the redesigns while simultaneously establishing a research plan. I knew I wanted to meet with more users than usual since this was the most frequented page in e-Builder. I also decided I needed to talk to both admins and end-users. Admins are the users who ultimately set up these pages in terms of fields, layout, and even roles specific to each step of the workflow, and while I wasn’t changing how they set up the processes themselves, I was changing how they would be displayed. Their feedback was crucial. End-users needed to navigate the page efficiently. The goal was 10 total participants (5 of each type) performing 7 total tasks.

Of the 40 invitations sent to participants, I was able to complete a total of 16 studies.

I gathered both qualitative data and quantitative feedback considering the following (on a 1-7 scale):

  • Task confidence (completion of the task)

  • Ease of use

  • Usefulness

  • NPS (Net Promoter Score) Ease

  • NPS Usefulness

Of the 10 studies (5 non-admin and 5 admin), the results were as follows:

  • Task confidence (98%)

  • Ease of use (96%)

  • Usefulness (91%)

  • NPS Ease (96%, T2B 100%, 70 NPS, 7 Promoters, 3 Passive, 0 Detractors)

  • NPS Usefulness (100%, T2B 100%, 100 NPS, 10 Promoters, 0 Passive, 0 Detractors)

Part Three

High-Fidelity Designs & Findings

Part Four

Looking Back

This project was so much fun. Our client responded with overwhelming positivity with one member saying, “I want it now”. While the update is still being refined especially as we continue to learn more about our users in other initiatives such as the workflow configuration and main navigation, this was still an exciting opportunity to work with a major client and heavily lean on UX principles to influence the best solution.

Many obstacles presented themselves along the way, mostly when it came to cross-functional communications but we all eventually saw the bigger picture and found that slowing it down and taking it back to the basics was the right approach.

The project also really challenged the existing design system and opened the door to contribute enhancements supported by usability testing.

I look forward to refining this further and the overall future of e-Builder.