Revolutionizing Structural Engineering Workflow - Transforming SPEC Toolbox from v2 to v3

Following a $3M seed funding round and a major rebranding from CLT Toolbox to SPEC Toolbox, the company expanded its reach into the USA, Canada, and Europe. This growth necessitated a more professional interface capable of handling complex design variables across international standards like AS1720 and Eurocodes.

My Contribution as UI/UX Designer

As the lead designer for this transition, my responsibilities included:

• Diagnosing the User Experience (UX) failures of the v2 layout.

• Leading the iterative prototyping process, including evaluating the failure of the initial 3-panel design.

• Designing the new v3 system featuring horizontal tabs, visual material iconography, and a real-time output panel.

Design Process

UX Audit: Analyzed the excessive scroll depth in v2 that hindered efficiency.

1. Audit
   Identified that the v2 layout required excessive scrolling to reach results.

2. Research
   Found that engineers need to see the "Live" impact of input changes on structural safety.

3. The First Iteration (Failed Prototype)
   Attempted a 3-panel "L-Shape" layout.

4. The Final Pivot (v3)
   Shifted to a 50:50 side-by-side layout.

5. Future Integration
   Planning the AI-driven "Auto-Solve" roadmap.

Problem Analysis: The Failures of v2

In v2, the interface utilized a single vertical column layout.

• Linear Flow
  Inputs were at the top, but the "Output Summary" was at the very bottom.

• The Issue
  Engineers had to scroll down hundreds of pixels just to see if a small change in load resulted in a "FAIL" or "OK" status.

• Dropdown Dependency
  Material selection was buried in text-only dropdown menus, which was slow for rapid identification

Pain Ponts

• Navigation Friction
  Wasted time constantly moving between the top (input) and bottom (results) of the screen.

• Lack of Live Feedback
  Engineers could not instantly monitor how small changes in loading data affected the structural utilization status.

• High Cognitive Load
  Users were forced to memorize input parameters while trying to analyze detailed calculation tables at the bottom of the page.

The First Iteration: The Experimental Failure

Before developing v3, I attempted a 3-Panel "L-Shape" Layout to address the feedback for more visibility.

• The Layout
  Input on the left, 3D Preview on the right, and a wide Output panel at the bottom.

• Why it Failed (The Double Scrollable Conflict)

  • The long input list on the left required its own internal scrollbar.

  • The detailed output tables at the bottom also required scrolling.

  • The Result: This created a "Double Scroll" conflict where users often scrolled the wrong area accidentally. The "L-Shape" movement of the eyes (Left to Right to Bottom) was also found to be mentally exhausting for data-heavy tasks.

The Final Solution: The v3 Optimized Layout

Learning from the failure of the first iteration, the final v3 design (see v2) adopted a 50:50 Split-Screen Layout:

• Unified Left Panel (Action Area): We combined Inputs and Previews. Horizontal Tabs (Product, Steel Plate, etc.) were used to categorize data, effectively eliminating the need for internal scrolling in the input area.

• Dedicated Right Panel (Live Output): The entire right side is dedicated to results. Every change on the left updates the right panel instantly, providing true Live Feedback.

• Visual Iconography: Replaced text dropdowns with visual images of materials (Glulam, LVL, Sawn Timber), allowing for 2x faster material recognition.

User Testing & Key Insights

I tested the v3 prototype with structural engineers to compare it against the failed 3-panel iteration and the original v2.