My Role
Senior Product Designer, Platform
Product
Responsive Web App
My Contributions
Strategy
Research
Design
Testing
Challenge
Buildertrend provides a large suite of over 20 tools for residential general contractor companies, including sales, project management, financials, and communication.
Being on the Platform team, I turned my focus on a problem we had heard from years of customer feedback and testing. New users consistently struggled to navigate the web app, feeling overwhelmed and needed training to get started. We hoped to make the navigation to be completely intuitive and inviting without the need for training.
Researching the Problem
To better understand the problem, we planned various research methods. Conducting workshops with experienced designers I learned of the problems they experienced consistently.
Feedback Workshops: In collaborative workshops, I learned that other experienced designers often saw users struggle especially with switching projects.
User Research: Searching our user research repository we found that users often felt overwhelmed by the number of features.
Data Analysis: Partnering with a data analysis I learned that users often changed features 3 times more than the changed projects.
Iterating to a Solution
With a clear idea of the problems, I knew that to make such significant changes in the system we needed a thorough process. involving team members.
Ideation: In collaborative workshops with designers from across the organization, we collected ideas from other systems, particularly with many features. We noticed that many used left-hand navigation as well as allowing personal customization.
Wireframes: With those insights, I sketched wireframes for many possible variations.
Insight: I realized that much of the problems with the existing navigation was the visual hierarchy. It was organized in a way that didn't match the mental model of users.
Prototyping: Through many iterations, I prototyped various options and tested them.
In prototyping these key concepts emerged as important.
Prominent Feature Navigation: Features were shifted to the left side giving them the prominence users need.
Customizable: Users can customize their navigation to match what features they use most often, reducing the overwhelming feeling and providing focus in a large system.
Project Switcher: Knowing how infrequently users changed projects, selecting projects was shifted to a dropdown popping in and out of your way.
Consistency Across Devices: While our initial focus was web, by adapting the pattern to tablet and mobile forms we presented users an intuitive, predictable pattern on all devices.
Measurable Results
To understand the potential impact of these changes, we first tested it from a quantitative standpoint. I created an A/B test with the existing navigation versus the redesign with the same workflow and tested them with sample users. We were delighted by the clear improvements.
22% faster to navigate features
36% faster to switch between projects
13% increase in System Usability Score (SUS)
Next, to more closely understand how would customers emotionally react, we scheduled tests with customers and positive feedback.
“This seems very user-friendly. It just feels intuitive.”
"Sometimes the other stuff clogs up what they really need. With this, one click and I'm able to get to where I need to go"
"We might be using 40% of the program. It'd be great to display what we're using as a team or organization"
Before this feature could be build and released I left the company, so I'm not sure of the status of the project or the eventual impact to customers.
Keara Buckle
Director of Product Design, Buildertrend
"When I joined the company, Nathaniel was already an integral part of the design community at Buildertrend. He was an accomplished system designer from his experience at CoConstruct, and a respected subject matter expert within the Product Engineering and Marketing teams. During our time together, he solved complex design problems with an analytical and systematic approach, and a keen attention to detail. He played a key role in reimagining the settings page, and the entire site navigation. He was a crucial link between a future vision of the platform, and working with designers and developers to standardize the building blocks."