Brief - We received a request from stakeholders to increase user engagement for the “Go Solar” page. This page contains the step by step process in acquiring a solar panel system and what to expect upon activating it. The bounce rate was high and as a result users were calling into our call center to get the answers they could have found on this page.
Problem - I worked with our developers to create a parallaxing hero image with title, body and CTA (Call to Action) options. Some of the design problems I discovered was the need to have the ability to use a light and dark image with opposite light and dark text. Another problem we discovered was when it was responsive. Should the copy always remain left or right aligned even when we drop down to mobile size? I decided to make the copy go full width and scroll over the focal point of the background image.
Goal - I discovered that to make this work I first needed to allow enough contrast between the image and text. Second to allow enough scroll time to be offset between the image and text. This allows more opportunities to read the text regardless of the background particulars. And third was to allow the focal point of the image to remain static when resizing the window. These things we were able to accomplish using Javascript in the JSON editor in our CMS (Content Management System).
Outcome - The new design resulted in a substantial increase of full page scrolling on all devices in compared to our old components design and layout.
