Skip to main content
Bulk Frames Editor

Streamlining Multiple Frame Configuration Process in a Dealer Module Web App

Feature

Enhanced Frame Configuration in Dealer Module Web App

Practices
Applied user-centered design principles and common interface practices
Users
Dealers and estimators creating quotes specifically for large commercial projects
Goal
Reduce time and effort spent on frame configurations by bulk-edit feature.
Problem

The existing workflow didn't fit well for large quotes with many frames, as each frame had to be individually opened, edited, and saved. Dealers reported that this led to repetitive work, increased clicks, and extended time on task, especially when adding similar frames. 

Our goal was to introduce an intuitive solution that allows dealers to bulk edit critical frame details (Location, Quantity, Width, and Height) while minimizing friction in the order process.

Research: User Needs & Requirements
User Research Process
  • User Interviews: We conducted interviews with dealers and customer support representatives who assist with order management. Through these discussions, we explored how they use the CPQ system, their pain points, and the context in which bulk editing could simplify their work.
  • Task Analysis: We reviewed typical workflows for configuring frames, identifying steps that involved repeated actions (e.g., cloning frames with similar specifications) and pain points related to the current single-frame editing model.
Key Findings
  • Frequent Repetitive Edits: Dealers often add frames with similar attributes across a project (e.g., multiple frames for similar-sized windows in a building). The lack of bulk-editing options increased time on task, requiring them to manually enter similar data across several frames.
  • High Volume Orders: Larger commercial projects, such as apartment blocks, require configuring dozens of frames with slight variations in width, height, or location (e.g., room name). Dealers expressed frustration with the time-consuming nature of opening and editing each frame individually.
  • Preference for Familiar Interfaces: Dealers were already comfortable with Excel-style interfaces, indicating that a spreadsheet-like table for bulk editing would have a low learning curve and allow them to work more efficiently within the CPQ system.
  • Error Prevention and Validation: Mistakes in frame details can lead to costly order errors, impacting both the dealer’s reputation and the client’s satisfaction. Users expressed the need for inline validation to catch potential errors (e.g., negative values, incorrect frame dimensions) early in the editing process.
Requirements Based on Findings
  • Cloning Functionality: An option to quickly clone an existing frame, with editable fields for slight adjustments.
  • Spreadsheet Modal: A modal window that opens a table-like interface, allowing users to edit critical fields (Location, Description, Quantity, Width, Height) directly.
  • Keyboard Navigation & Shortcuts: Since many users are experienced with Excel, enabling keyboard shortcuts (e.g., Tab to move fields, Enter to confirm) was key to improving efficiency.
  • Inline Validation & Error Prevention: Real-time validation within cells to ensure entries meet acceptable parameters.
Solution: Design & Development Process
Design Approach
  • Wireframing & Prototyping: We created initial sketches and wireframes for a table-like modal. The design focused on compactness and efficiency, with each frame presented as a row, and key details available as editable cells.
  • Clickable Prototype: We built an interactive prototype in Figma, enabling dealers to experience the modal’s look and feel and test interactions such as cloning, inline editing, and validation.
User Testing & Iteration
Through usability tests, we observed dealers using the prototype to configure multiple frames. Feedback led to refinements, such as filtering by a frame type, adding Frame Sets (user-defined groups), and adding an ability to choose and delete products from the list in bulk.
Feature Highlights
  • Table Interface in Modal: The modal opens directly from the quote page and displays a table where each row represents a frame. Users can click cells to edit values directly.
  • Cloning and Batch Editing: Dealers can clone frames in the table, allowing them to duplicate similar configurations with one click and adjust the fields as needed.
  • Error Prevention: Inline validation catches errors like non-numeric or out-of-range values, and invalid entries are highlighted, prompting users to review before saving.
Outcomes & Measurable Impact
Quantitative Results
  • Reduced Task Completion Time: After the modal’s implementation, we recorded a 35% reduction in average time spent on frame configuration for large projects (30+ frames).
  • Decreased Clicks per Task: Clicks per frame dropped by over 50% as users no longer needed to open and close each frame individually.
  • Error Rate Reduction: Error rates for frame dimensions and quantities haven't changed due to inline validation available on the regular frame configuration page.
Qualitative Feedback
  • User Satisfaction: Dealers reported significantly improved satisfaction with the bulk-edit feature, citing it as intuitive and “a game-changer for larger orders.” Many noted that the spreadsheet format “felt familiar” and helped them complete orders faster.
  • Positive Client Perception: Clients (dealers and suppliers) found the new feature greatly improved their productivity, allowing them to handle high-volume configurations with less effort.
Additional Insight Gained

During the development of this feature, we identified a related pain point: users expressed the need to apply frame custom attributes across multiple frames. For example:

  • An end customer might request changing all door handles in a project and immediately see the updated cost.
  • An end customer might want to update the interior colour of all windows in a specific house area.

This discovery revealed another opportunity for improvement, suggesting a feature that allows bulk attribute updates. This new insight became a potential roadmap addition to enhance the product further.

Conclusion

The bulk-edit modal provided a highly effective solution for our customers, particularly for high-volume configurations. By aligning with users’ preferences for spreadsheet-style interfaces and enhancing data accuracy through inline validation, we created a feature that saved users time and improved overall accuracy and satisfaction.

This case demonstrates how a well-researched, user-centered design approach can optimize a critical workflow, transforming a previously repetitive task into an efficient and streamlined process.