0 / 20
25:00
Guard the fire of focus, for it transforms chaos into clarity.

.STUDIO

An enhanced solution to manage Project, Resource, Time, Operation & Sales for Architecture, Construction & Interior Design firms

Published: 12:30 pm · 10 Jul 2024

Project Management
Resource Allocation
User Activity Log
Lead Generation
Leed Conversion
Project Planning
Project Staging
Invoicing
Address Book
Specification Builder
Export Engine
Reporting Engine
User Role-Based
Subscription Model
Dev/Prod Parity

Banner
.STUDIO designed, developed and later assisted by Riaz Ahamed

Abstract

.STUDIO is a comprehensive digital platform designed to enhance the operational efficiency of Architecture, Construction, and Interior Design firms. Promising tool to provide solution seamlessly integrates Project, Resource, Time, Operation, and Sales management into one intuitive interface, tailored to meet the unique demands of these industries.

Project information

Maintainer: 28LightBulbs Industry:

  • Architecture & Interior Design
  • Creative Team Collaboration
  • Sales

Category:

  • Design Studio Software
  • Design Practice Operations
  • Project (Specification, Revision) Management
  • Finance and data analysis
  • Spedification builder

My Contribution Period: Sep 2018 - Jul 2024 Current Status: Live Location: Dubai Silicon Oasis, Dubai, UAE

Contribution

Position: Frontend Development, Research and Design (with secondment on backend tasks) Type: Full time


Services offered

  • Ideation: led the feature discussions meetings and sumerize the views and transformed them to fully functional feature
  • Design System: Responsible of the design system and all its elemental enhancement lifecycle
  • System Design: Responsible for the entire frontend module, which includes feature addition, enhancements, optimizations and keep the core organizational values get reflected in product
  • Integrated Systems: Responsible to create a in depth modules,
    • Reporting engine (with customizable Dashboard and widgets)
    • Specification builder which support endless amount of customization (feature protucted with templating)
    • Advanced User activity logging and Resource utilization reporting for analysis
    • Entire opportunity to lead conversion to project staging to mapping, invoicing, packging, distribution, revision to monetization lifecycle workflow created
  • Image Tagging: Developed a Image tagging model to generate product attributes based on images and mark their boundry in that image

The Challenge: Navigating the Journey of Commitment

A single system that needs to satisfy the needs of the diverse range of Architecture and interior design firms around the world, by identifying their current workflow, exploring the generalized solution suggested, and refining them to achieve the best possible workflow that can satisfy everyone.

  • Identify: Be committed to identifying the client’s current workflow and sourcing every possible piece of information for analysis (why they do it, how they do it, what the ideal output is, and the resources utilized for it).
  • Explore: Implement utility delta to evaluate the impact of every suggested solution.
  • Refine: Prototype the best solution to gather feedback and refine it further until perfection, with a performant solution evolving.
  • Streamline: Automate the processes that are common among everyone, such as (asset management, invoice overdue, etc.).

Solutions implemented

Design

  • Figma: The design phase began with creating detailed prototypes in Figma to visualize the product’s workflow and overall concept. This process ensured that all aspects of the design were thoroughly understood and approved by management before moving to development.

Frontend Solution:

  • Defined System: A well-structured project architecture was established, complete with comprehensive development guidelines. This framework ensured that the development team adhered to established protocols, maintaining high standards and consistency throughout the project.
  • Observer, Schedulers, Subjects: Implementing a state-based system allowed for efficient handling of asynchronous events. This approach streamlined event management, enabling the system to process events in a structured and organized manner.
  • Reporting Engine: An independent reporting engine was developed to aggregate data from various sources. This engine generated comprehensive reports with customized visualizations, which were then displayed as interactive widgets on the user dashboard, providing personalized insights.

Specification builder:

  • One of the primary features of the product is the ability to generate specifications. Users can export data to PDF or Excel formats without any size limitations.
  • A differential rendering mechanism allows users to download 1000 pages of well-designed datasets in seconds while running the task in the background. Users receive a notification upon task completion.

Subscribtion Model:

  • The system implements a role-based access control model. Certain users have limitations or focused access to specific modules. For example, financial data such as amounts and values are only visible to the finance or admin team.
  • Access levels can be modified through settings, providing flexibility in managing user permissions.

Quota Management:

  • A quota logic system ensures that only a subscribed number of users or logins are allowed to access the system. This is protected by a custom locking mechanism to prevent unauthorized access.

Lightweight imports:

  • As a Single-Page Application (SPA), the solution requires an extensive list of imports, which could potentially slow down the initial page load.
  • To optimize performance, components are grouped into categories such as main, light, and extra-light, improving the overall loading speed and user experience.

Backendend Solution:

  • PDF Templates: Custom PHP Blade files were created and deeply customized to enhance the aesthetics of the generated PDF documents using the dompdf library.

Testing

  • User entry forms modules are validated using Jest
  • Angular components, services, and other code units behaviours are tested using Karma
  • PHPUnit was utilized to test the changes made to the Blade files. The testing process includes over 25+ different types of PDF templates, each tested with a 1000-page mark to evaluate export performance and ensure reliability.

The measurable impact

  • Improved reporting engine to perform autonomously, reducing maintenance of the Reporting module by 50% compared to custom reporting.
  • A detailed time management system that helps individuals and teams manage their workflows efficiently.
  • Reduced the first content-full page load time by approximately 75%.
  • The combination of resource management, invoicing, and specification builder features has made sales more encouraging.
  • Significantly reduced processing and export time per document by 73%.

Technologies used


angular angular
rxjs rxjs
ngrx_store ngrx_store
typescript typescript
javascript javascript
lodash lodash
html5 html5
css css
sass sass
tailwind tailwind
syncfusion syncfusion
webpack webpack
nodejs nodejs
php php
mysql mysql
firebase firebase
karma karma
jest jest
playwright playwright
babel babel
browserlist browserlist
github github
webstorm webstorm
neovim neovim
figma figma

Competitors

1. Programa 2. Design Manager 3. Gather 4. Studio Designer