Streamlining Multiple Frame Configuration Process in a Dealer Module Web App
Enhanced Frame Configuration in Dealer Module Web App
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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
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.
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.