SNAPTRUDE
SNAPTRUDE

Design & Product Strategy Consulting

Design & Product Strategy Consulting

Collaborative Building Design Platform on the Web - Powered by Automation and Intelligent BIM

About COMPANY

Snaptrude eradicates the time-consuming and tedious manual procedures involved in 3D modeling and visualization, allowing architects to concentrate on the true essence of architecture. Snaptrude is a cloud-based conceptual design tool created from the ground up to bridge the gaps present in current design workflows, providing users with the power of Building Information Modeling. Emphasize the benefits of Snaptrude as a brand and a unified solution for architects, focusing on driving conversions. A revitalized design system can entice customers to choose Snaptrude over existing legacy software, expediting their ability to develop and implement new features more swiftly.

About COMPANY

Snaptrude eradicates the time-consuming and tedious manual procedures involved in 3D modeling and visualization, allowing architects to concentrate on the true essence of architecture. Snaptrude is a cloud-based conceptual design tool created from the ground up to bridge the gaps present in current design workflows, providing users with the power of Building Information Modeling. Emphasize the benefits of Snaptrude as a brand and a unified solution for architects, focusing on driving conversions. A revitalized design system can entice customers to choose Snaptrude over existing legacy software, expediting their ability to develop and implement new features more swiftly.

A Snapshot of previous version of Snaptrude

About the PROJECT

A Redesigned Experience. Snaptrude enlisted my help to revamp their current user interface with a Modern and Scalable design, as their existing experience falls short of meeting consumer expectations. They feel their present strategy for UX enhancements is too gradual and sluggish.‍ Prioritize a conversion-focused experience that highlights Snaptrude's brand value and the advantages of a unified tool for architects. An updated design system can entice customers to choose it over established legacy software, ultimately reducing the time it takes to develop additional features more swiftly.

About the PROJECT

A Redesigned Experience. Snaptrude enlisted my help to revamp their current user interface with a Modern and Scalable design, as their existing experience falls short of meeting consumer expectations. They feel their present strategy for UX enhancements is too gradual and sluggish.‍ Prioritize a conversion-focused experience that highlights Snaptrude's brand value and the advantages of a unified tool for architects. An updated design system can entice customers to choose it over established legacy software, ultimately reducing the time it takes to develop additional features more swiftly.

The Result

The Result

The Result

THE REDESIGN PROJECT

After the revamp, the firm's user acquisition simplified onboarding, resulting in an 84% increase in clientele compared to the previous year and attracting worldwide clients like Charles Diel Architects, Max Asset Management, and countless others. I developed a scalable design system employing an atomic design methodology and created custom icons within 2 months (3 design sprints). The entire process was conducted remotely.

THE REDESIGN PROJECT

After the revamp, the firm's user acquisition simplified onboarding, resulting in an 84% increase in clientele compared to the previous year and attracting worldwide clients like Charles Diel Architects, Max Asset Management, and countless others. I developed a scalable design system employing an atomic design methodology and created custom icons within 2 months (3 design sprints). The entire process was conducted remotely.

I developed 4 personas representing the prospective customer base and mapped out user journeys. We identified 8 critical touchpoints to prioritize in phase one. Smart spaces and storeys, Labels, Intelligent BIM, Site data, Automated BOQs, Auto Dimensions, Parametric design & Libraries.


To drill down specific actionable goals, I analyzed various flows of the product to find pain points and opportunities and map existing workflows. Conducted stakeholder interviews with a few of their core users to understand how they use the product.


User interviews were vital to understanding how their current users use and see the product for various Jobs to be Done.

The current product was alright to use but the team had to make tutorials for every small detail and were always over boarded with questions on how to use something. The learning curve was tedious.

Disorganized

Modules felt broken and disconnected from each other, often away and scattered

Disorganized

Modules felt broken and disconnected from each other, often away and scattered

Disorganized

Modules felt broken and disconnected from each other, often away and scattered

Disorganized

Modules felt broken and disconnected from each other, often away and scattered

Hard to use

Needed rigorous run through as connected workflows were hard to discover and use

Hard to use

Needed rigorous run through as connected workflows were hard to discover and use

Hard to use

Needed rigorous run through as connected workflows were hard to discover and use

Hard to use

Needed rigorous run through as connected workflows were hard to discover and use

Not Scalable

Overlapping components and Inconsistent styles across the product

Not Scalable

Overlapping components and Inconsistent styles across the product

Not Scalable

Overlapping components and Inconsistent styles across the product

Not Scalable

Overlapping components and Inconsistent styles across the product

Empathic

Guiding

Clear

To create a flexible and customizable design for Snaptrude, I adopted an atomic approach. This allowed us to create modular blocks that could be combined in different ways to meet the diverse needs of our users. We carefully planned our information architecture to ensure that each block would serve a specific purpose and help our users accomplish their tasks.


To further enhance the flexibility of our design, we used card sorting to plan our design system. This allowed us to create a set of components that could be easily combined and customized to create a wide range of user interfaces. By adopting this approach, we were able to create a design that is both effective and easy to use, ensuring a seamless experience for our users.

Design systems

Design systems

Design systems

It was easy to feel the pain of a disorganized approach to design. Every page you touched had different breakpoints, different button dimensions and colors, and different font sizes.

I documented these inefficiencies and advocated the idea of establishing shared styles to stakeholders. As I discovered more about implementing Design tokens and making figma as a source of truth, I proceeded to setup a framework which could cut down engineering time.

Layers

To make the design process easier, these structures are often organized into floors and blocks. By using this approach, architects and engineers can quickly and easily create detailed plans for a wide variety of building types.

Libraries

Users can quickly and easily create detailed architectural models using an extensive library of materials, furniture, and interiors. Whether you're an architect, engineer, or construction professional, Snaptrude can help you make your presentations stand out and impress everyone.

Automated Bill of quantities

With Snaptrude, as you make changes to your design, the software automatically updates the BoQ to reflect the new quantities and costs. This allows you to see the impact of design changes on the project's budget and schedule in real time, allowing you to make more informed decisions and avoid costly errors.

Automated Bill of quantities

With Snaptrude, as you make changes to your design, the software automatically updates the BoQ to reflect the new quantities and costs. This allows you to see the impact of design changes on the project's budget and schedule in real time, allowing you to make more informed decisions and avoid costly errors.

Learnings & Takeaways
  • Engineered intuitive UX patterns for complex 3D operations (e.g., extrusion, Boolean operations) using progressive disclosure techniques

  • Pioneered a "design-dev pairing" methodology, fostering real-time collaboration between UX designers and WebGL engineers

  • Optimized UI/UX for performance in computationally intensive applications

  • Created a flexible design system with Storybooks, documenting stories for components

  • Architected a modular design system using Storybook, incorporating components with interactive documentation

Learnings & Takeaways
  • Engineered intuitive UX patterns for complex 3D operations (e.g., extrusion, Boolean operations) using progressive disclosure techniques

  • Pioneered a "design-dev pairing" methodology, fostering real-time collaboration between UX designers and WebGL engineers

  • Optimized UI/UX for performance in computationally intensive applications

  • Created a flexible design system with Storybooks, documenting stories for components

  • Architected a modular design system using Storybook, incorporating components with interactive documentation

  • More Works SEE ALSO

  • More Works SEE ALSO