The Problem:

 

Blueroof360 has their own site builder that our sister company and clients use to manage our client sites. There's a lack of functionality when it comes to working with our blocks which tends towards a less than great user experience. There are many limitations when it comes to customizing a site to fit exact needs, since a lot of it needs to be coded. Yet, we feel the builder has a lot of potential and could be fully functional with as little custom code needed while still providing flexibility and a great user experience. 

​

The Process:

​

We started this very large project by going through different user scenarios and figuring out what the clients would need or want when trying to customize specific blocks. We started with the header block which is the most complex due to number of possibilities and is the most widely used. 

​

Once we figured out how the settings should generally function and what we want our clients to be able to control, we moved on to designing specific categories of blocks. Once we designed the blocks, we moved on to creating those settings, keeping in mind the overall look of what our settings should be.

​

The Solution:

​​

We created one main tab that can change the elements and background of the block. The custom settings we created are compatible with our current and much older settings, until we re-design those settings in our second phase.

​

See our Figma board to see our header settings!

​

​