This cost calculator was a departure from the previous trades. Instead of customizing one aspect (roof type, for instance), we wanted give the user the ability to customize multiple components and have the price reflect those changes. Essentially, let the user build their own bathroom remodel.
The process for this calculator was slightly different, in that the content manager (our primary stakeholder) performed the initial research and came to me with a rough idea of how they wanted it to work. I created wireframes based on their direction using a stock bathroom illustration.
One of the biggest challenges was creating the modular illustration so that individual components could be swapped out and still fit the context of the scene. This was done by exporting multiple component svg’s that are the same size, so that they can be layered and shown or hidden depending on the user’s selections.
