Programming an interactive furniture builder
Background
Fringe studio offers a kit of modular furniture for interior designers to design custom furniture builds. The studio needed to define a process for handling custom orders.
Goal
Improve how Fringe studio’s clientele submit orders for custom furniture builds.
My Role
End-to-end design and development, which entailed:
- Understanding the problem
- Examining project constraints
- Designing a solution, and
- Programming a working application.
Outcome
Whereas before clients would scan or fax hand drawn sketches of their custom builds, the tool created a standard document that was easy for the studio to understand visually. After review, the studio would submit the list of parts to the fabricator without worrying that something might have been lost in translation.Process
- Interviewed the studio to understand order fulfillment
- Made recommendations on how we could work around project constraints
- Designed mockups exploring how clients would create furniture orders.
- Interviewed interior designers to understand:
- How they thought about putting together a furniture configuration
- What the average configuration might look like
- What their expectations were around ordering
Constraints
Order fulfillment was complicated, to say the least. Standardizing shipping for the custom builds was near impossible, since each order usually needed to be palletized. To add insult to injury, the studio’s CMS gave little in the way of configurability and database access.
We considering spinning up a separate virtual private server. After running into Cross-Origin Resource Sharing Issues, we were forced to reassess our timeline and budget. We decided the best way forward was to build a client-side only application.
The workflow would allow clients to visualize their custom build, generate a PDF, and then submit it to the studio for pricing.
Development
Due to the limitations, deploying the application required manually updating the page. To make this easier, all the assets were bundled into a blob and dropped into a custom HTML element on one of the studio’s webpages.
Project Scaffolding
Gulp was used for preprocessing and bundling, including preparing image assets.
SVG format was used for the images, which could be easily inlined as text into the distribution code. Another benefit of SVG was that the application could programmatically change the colors and background patterns through CSS styles.
The Gulp pipeline was built to prepare the images. It would stream the SVGs as raw text through a helper function (addClass) which would locate target colors and replace them with a CSS class. These classes were then targeted by the application JS to change the furniture color in synchrony with the dropdown menus.
Assigning multiple colors was done through two separate properties: one through the CSS color property and the other through the SVG currentColor property.
Recording data
Each piece of furniture and its relative position were stored in a JSON object. When a client would go to print the cut sheet, the data object would be iterated through, generating a list of parts that the studio could itemize for the fabricator.
Result
