Check it out!
Background
The Flood Risk Evaluator (FRE) is service powered by Smart Vent Products, Inc. Aimed at lowering the cost of flood insurance for homeowners, FRE provides customers with flood mitigation options that have reduced premiums by 83% on average.
The Problem
The existing website did not reflect the credibility necessary to prove the service is legitimate and that the savings are real. FRE contacted me to help redesign the site, specifically asking for a modern and professional look.
Existing FRE Website
The Process
To start, I began dissecting what was working on the current site, and what needed to be reimagined. A lot of the ideas were solid, but they needed a new treatment and better visiual heirarchy.
Second, there needed to be a way to get the users engaged early; for them to have a clear indication of what they were on the site for. Creating a small form on the home page allowed the user to enter some basic information. Without intimidation, they are now urshered onto the page with more in-depth questions.
The mobile user was considered before any other user. Constraints of small screen sizes pushed relevant content to the bottom of the page, interrupted by nice-to-have marketing copy. By planning for the mobile user first, we were able to put the most important information first, and then rearranging the content on larger devices.
Colors
The current brand was already blue, and it's an obvious choice for any company dealing with water. I used a deeper shade to help differentiate it from Smart Vent Products, Inc. which uses a royal blue for their construction product.
Reds and oranges were also chosen to add warmth to the page.
Iconography
The existing site had images of the forms customers would need to submit, which were exact copies of official documents with sensitive information removed. Overwhelming amounts of detail paired with large, oversized paper-clips was more of a distraction than an asset. The message could be communicated with generic patterns that captured the most distinct details of their real-world counterparts.
The existing icons (left) were too literal with distracting embellishments.
Exaggerating the important details in the new icons (right) have a greater effect.
FRE Icon
The FRE logo features a stylized e that looks like a magnifying glass. I wanted to incorporate this element, but the design of icon didn't fit with the other letter forms of the logo.
Carefully, I recreated the e to match the stroke of the rest of the font family, removed tension points. I also skewed the letter for a more natural look, where the handle is at the bottom of the glass.
The original symbol (left) had a good concept, and was already in circulation for other FRE branding.
A few minor detail changes, and the new magnifying glass (right) is still recognizable.
Video
A huge trend on the internet is the use of large, over-sized images. Just about every site, from start-ups to financial institutions have selected an image that best represents their message. Aside from pictures of people with smiles and handshakes, I thought a video would better illustrate the story. It was important to use imagery that wasn't distracting and served as an ambient backdrop.
Having a view into a rainstorm reaches the widest audience. Additionally, we all know what rain looks like, we all have windows and the location shown is nondescript. The trees in the background are out of focus and lack of architecture could have these scene anywhere between Miami and Seattle.
The video was colorized help re-enforce the brand and create extra contrast between the picture and website content.
