Project Overview

Objective

Building Counterdraw, a competitive, user-friendly countertop quoting solution, requires an ambitious yet strategic approach to outperform existing market solutions like Moraware. The aim is to provide an intuitive, original SaaS platform tailored for fabricators who have minimal tech experience and limited time, while working with a lean development team.

Key goals and objectives

• Deliver a Unique Solution in 12 Months Launch a completely original quoting platform within a year, offering a fresh approach that stands out from existing options.
• Create a Superior Alternative to Moraware Outshine Moraware by providing an improved, efficient quoting experience for countertop fabricators.
• Prioritize Ease of Use Design with fabricators in mind—super simple, intuitive interface tailored for minimal tech experience.
• Build as a Scalable SaaS Ensure Counterdraw is scalable and accessible, with reliable cloud-based performance for multiple users.
• Focus on High Impact, Solo Development Use strategic planning to achieve high-impact features with a single developer, meeting quality standards within the timeline.

Target Audience Persona

Countertop Fabrication Teams

Primary Audience: Countertop fabrication teams, especially small to medium-sized fabrication companies.

Demographics:

• Age Range: 30-55 years old
• Education Level: High school to some college education, often with trade-specific certifications or hands-on training
• Role: Factory workers, production managers, estimators, and installation team leads
• Experience: 5-20 years in the countertop fabrication and installation industry

Psychographics:

• Tech Comfort Level: Low to moderate. While many are familiar with specific industry tools, they are not comfortable with software that has a steep learning curve or complex digital features.
• Values: Efficiency, precision, and straightforward solutions. Fabricators are often hands-on, detail-oriented, and prioritise tools that allow them to quickly move from planning to execution.

Key Pain Points:

1. Complex Estimation Process: Estimating material usage and project costs can be time-intensive and prone to human error, impacting profitability.
2. Learning New Technology: Due to limited exposure to complex software interfaces, new systems with steep learning curves are frustrating and disrupt workflow.
3. Cost and Time Efficiency: Every project must balance material cost with time efficiency; inefficient estimates can lead to material waste and increased expenses.

Project Importance

The Counterdraw project is integral to StoneSuite’s vision of becoming the leading digital toolkit for the stone fabrication industry.

By centralizing client documentation, tracking user activity, and reducing administrative workload, Counterdraw enhances data accuracy and lays a scalable foundation for long-term growth.

This powerful tool allows fabricators to manage projects with precision, significantly boosting productivity and client satisfaction.

Beyond its functionality, Counterdraw is a strategic asset for industry partnerships.

By offering Counterdraw as a free tool, StoneSuite aims to build alliances with key players in the stone fabrication sector, fostering community and brand loyalty. This approach not only expands StoneSuite’s reach but also provides a competitive edge, as no other vendor offers such an industry-specific, user-friendly solution.

Counterdraw thus positions StoneSuite as the premier SaaS provider in this niche, paving the way for future innovations and revenue-generating opportunities.

Overview Video

Project Journey

Project Background

Counterdraw started as an experimental tool aimed at simplifying countertop layout and estimation, initially designed for internal use. Recognizing a need for a user-friendly tool tailored to teams with limited tech experience, the project began with a solo developer conducting an in-depth analysis of existing market options. This research identified opportunities to create a more intuitive and efficient solution, addressing the common pain points of other products.

The journey began with a Proof of Concept (PoC) and evolved into a Minimum Viable Product (MVP). Rather than replicating existing software, the team built Counterdraw from the ground up, guided by principles that prioritized user familiarity and simplicity:

• Intuitive UI:
  Modeled after familiar tools like Microsoft Paint, making the platform accessible to all users.
• Streamlined Design:
  Emphasized simplicity, hiding complexity to maintain a clean and uncluttered interface.

The result is a distinctive solution, purpose-built for easy use yet powerful in its estimation capabilities—setting Counterdraw apart from other tools on the market.

Key Features and Functionalities

Counterdraw offers a range of powerful features designed for efficiency, customization, and user convenience:

• Freehand Drawing Tool:
  Allows users to create accurate countertop layouts effortlessly.
• Shape Templates
  Includes templates for the most common countertop shapes for quick setup.
• Precision Drawing:
  Ensures accurate dimensions for countertop designs.
• Fastest Drawing Time:
  Provides the quickest way to complete countertop layouts in the category.
• User-Friendly Design:
  Recognized as the easiest tool in the market for countertop estimation.
• Customizable Quotes:
  Generate personalized quotes based on specific project needs.
• Extensive Stone Library:
  Access the largest library of countertop materials, including quartz, granite, and more.
• Organized Client Records:
  Keep searchable records of customers and quotes for easy retrieval.
• PDF Quote Generation:
  Produce professional, shareable PDF quotes instantly.
• SaaS-Based with Easy Setup:
  Onboard new companies and teams in under 5 minutes.
• Multi-Project Quotes:
  Create multiple variations (e.g., kitchen and bathroom) and combine them into a single quote.
• Custom Stone Library:
  Upload and manage a personalized stone inventory, including granite and other materials.
• Top-Level Security:
  Benefit from daily automated backups and advanced security for data protection.

Demo of Project In Action

📸Feature Demonstration

Development Process and Technology Stack

Technology Stack

The CounterDraw project utilized a robust selection of technologies tailored to meet complex drawing and UI requirements:

• Paper.js: Chosen for its unparalleled support for vector geometry and mathematical operations, which was crucial for creating the drawing tool. Over 6,000 lines of custom code were written to extend and optimize Paper.js for this project.
• Vue.js: Used for its component-based architecture, allowing for modular and organized UI development. Vue’s Options API was favored over React’s approach for better code management. Custom mechanisms were developed to integrate Paper.js seamlessly with Vue.js through mixins.
• Vuex: Employed alongside Vue.js for state management, ensuring data consistency and smooth user interactions.
• PHP/MySQL: Selected for the backend due to PHP’s reliability and ease of deployment on a LAMP stack, paired with MySQL for robust data storage and retrieval.
• WordPress: Leveraged as the CMS for its scalable block editor. Custom React blocks were developed to enable no-code templating for PDFs, such as invoices. The REST API was extended to support custom services, adding flexibility and advanced functionality.
• React.js: Utilized to create custom blocks for WordPress’s Gutenberg editor, enabling the creation of user-friendly no-code tools for PDF generation and other content needs.

Building the Solution

Initial Setup: The project began with a thorough research phase, leading to the selection of Paper.js and Vue.js (via CDN) for a proof of concept. Initial success in building basic drawing tools (e.g., rectangles, lines) confirmed the feasibility of the project, which officially started on April 12, 2021.

To plan features and layout, the UI was initially designed using Google Slides, providing a clear blueprint for development. This allowed the team to identify essential features early on and structure the development roadmap.

Roadblocks & Resolutions:

• Custom Tool Development: While Paper.js provided a solid foundation, its out-of-the-box capabilities were limited. Challenges arose in developing advanced tools, often requiring support from the Paper.js community and expert forums to resolve complex issues.
• Memory Management: During testing, high object usage led to app hang-ups and increased memory consumption. This was traced back to console.log() calls retaining references and preventing garbage collection. Adjustments in logging practices and thorough memory inspection resolved the issue.
• Visual No-Code Editor: A user-friendly PDF template editor was a requirement, leading to the choice of WordPress Block Editor. Custom React blocks were built, facilitating intuitive, no-code design of company-specific templates. This solution proved highly effective, simplifying template creation for both users and support teams.

Iteration and Testing

Initial user testing involved a client team accustomed to Moraware. While initial versions were met with resistance due to familiarity with existing tools and early-stage bugs, feedback sessions provided valuable insights. Continuous iteration and incorporation of user suggestions led to a significant improvement in user experience and tool efficiency.

Within a few months, the tool evolved into the primary solution for the client, with Moraware serving only as a backup. By January 2023, CounterDraw reached a stable release, solidifying its position as the preferred tool for the client’s operations.

Impact and Results

Project Outcome

Summary of Key Results: The CounterDraw project delivered impressive results, significantly enhancing productivity and operational efficiency:

• Doubled Workflow Speed: The solution accelerated the client’s process, making it 2x faster than previous workflows.
• Substantial Time Savings: The team saved approximately 40 hours per week, enabling them to focus on higher-priority tasks and strategic initiatives.
• Cost Efficiency: By transitioning from a third-party tool to an in-house solution, the client achieved a recurring savings of $6,000+ per month.
• Customizability and Scalability: The client now benefits from a fully adaptable tool that can evolve with their needs. Future plans include leveraging AI to automate layout generation, further streamlining the process.

Project Impact on Client’s Business

The impact on the client’s business was substantial:

• Enhanced Workflows: The project simplified and optimized the client’s operations, leading to increased satisfaction among team members who now enjoy a tool that aligns perfectly with their requirements.
• Strategic Partnerships: Beyond internal benefits, CounterDraw has been offered to other countertop companies, fostering partnerships that contribute to industry growth.
• New Business Opportunities: The tool played a role in securing a significant deal with a financing company, Momnt, showcasing its value as a business asset.

Timeline & Efficiency

Project Timeline: The project began as an experimental initiative without a strict timeline. However, after the initial success, it evolved into a key project with an estimated completion time of one year. The MVP was completed in approximately 14 months, slightly beyond the internal target but within a reasonable scope considering the project’s complexity.

Starting as a solo effort, the project eventually brought in additional team members to accelerate development and expand on its initial success. The incremental team growth contributed to efficient scaling and fine-tuning of the tool’s capabilities.

Reflection and Learnings

Lessons Learned

Personal Takeaways: The CounterDraw project was a significant learning journey that enriched my technical expertise and refined my development practices:

• Mastering Vector Mathematics: Gaining proficiency in vector mathematics through PaperJS was essential and provided me with the skills to apply these concepts in practical manufacturing processes.
• Value of Prototyping and Wireframes: I realized the crucial role that prototyping and wireframes play in large-scale projects. Early-stage visual planning not only accelerated the development process but also offered clarity and direction for managing over 8,000 lines of custom code.
• Deep Dive into VueJS: Starting with minimal experience in VueJS, I progressed to mastering its build tools, components, and mixins. This transition allowed me to refactor the initial monolithic JavaScript codebase into a modular structure, making it more maintainable and scalable.
• Problem-Solving and Persistence: The project taught me the importance of perseverance when facing complex challenges. For instance, handling intricate layout matching and maintaining data validity when users modified drawings tested my problem-solving skills. With the client’s patience and collaborative mindset, I developed innovative solutions to overcome these obstacles.
• Client Collaboration: The client’s understanding and willingness to allow time for exploring alternatives reinforced the importance of maintaining strong client-developer relationships and mutual trust.

Future Potential

Building on CounterDraw’s success, there is growing interest from the client and other stakeholders for expanding its functionality:

• Proposed Workflow System: I am currently designing a comprehensive Dynamic Process Workflow System to extend CounterDraw‘s capabilities. This system aims to streamline team management and process tracking, incorporating features such as:
  • Calendars for scheduling and deadlines.
  • Kanban Boards for task management.
  • Team Management and Reporting Tools to enhance productivity.
  • Communication Tools and Activity Streams for seamless collaboration.
  • Android and iOS apps for on-the-go task management and timesheet tracking.
  • Live Tracking features for measurement and installation teams to improve transparency and real-time updates.

This next phase has the potential to transform CounterDraw into an all-in-one business management solution, empowering clients to handle their entire workflow with ease and efficiency.

My Role on the Project

CounterDraw stands as my most significant solo project, where I took on comprehensive responsibilities to bring the vision to life, particularly focusing on the Layout Editor developed with PaperJS and VueJS. Initially, I single-handedly managed all aspects of the project, building it from the ground up. As the project evolved, the team expanded to include a tester, a programmer, and an intern, enabling us to move toward a full release despite the client’s limited budget. This strategic approach ensured a viable, effective solution that was widely appreciated.

My Role Until the Beta Version

• Research and Technology Selection: Conducted in-depth research to identify the best technologies and frameworks, ultimately choosing PaperJS for vector geometry and VueJS for a component-based architecture.
• Proof of Concept (PoC): Developed PoCs to validate technical feasibility.
• UI Design: Designed the user interface, mapping out layouts and features to optimize user experience.
• Core Development: Wrote the majority of the 8,000+ lines of custom code, building the primary functionality of the Layout Editor.
• Training and Demos: Prepared and delivered detailed demos and training sessions for the client’s quote team.
• Initial Testing: Managed initial tests to identify and resolve bugs, ensuring a stable beta version.
• Custom VueJS Component Library: Created BraveVue, a bespoke VueJS component library tailored specifically for the CounterDraw project.

My Role from Beta Version to Launch

• Technical Lead Programmer/Architect: Oversaw the project’s development as the lead architect, directing its technical progression.
• Team Recruitment and Management: Recruited and onboarded a tester, a programmer, and an intern to assist with development and testing.
• Project Planning: Designed structured plans to guide the team’s efforts effectively, facilitating efficient collaboration.
• CI/CD and Deployment: Established CI/CD pipelines and automated deployment processes using GitHub Actions to streamline updates and releases.

The project was met with enthusiasm and approval, proving the effectiveness of the strategic decisions and development process.