Hero Overlay

The ask was for a new block where they could upload full-width images and have somewhat of an overlay to make text stand out. There were to be multiple variations of this block, where users will have the option to include sub-header and calls to actions. This would give site visitors more information as soon as the landed on the page along with clear call to actions to increase conversion rate.

‍

Designs were focused around the desktop, tablet, and mobile experiences with mobile being the most challenging. Due to mobile's limited space, it took some time exploring different design ideas that keep consistent with the rest of the designs while displaying all the information needed. There was also consideration for with use a transparent navigation and use as mid-page block. The goal was to keep the hero overlay as flexible for uses so that it can be used in a variety of places as well as with a variety of backgrounds.

‍

‍

‍

‍

The original hero block was very limited and didn't tell users anything about where they were and no call to actions to take. For many users they would have left the site before scrolling down and learning more about where they were. There were no call's to action till the bottom of the page meaning users were less likely to interact and buy the product.

‍