Helping to guide users to better decisions & data with a fast-paced San Francisco startup.

Front-End Development & custom WordPress theme for Betterview

Introduction

Betterview is a fast-growing San Francisco startup that uses drones, AI, and their insurance industry experience to analyze risk. As a part of the team at Elevate, we were called on to define their brand and deliver product & pitch deck design along with a new website. The majority of my time on this project was spent building & delivering the website, but I was also involved throughout the brand, logo, and design process.

Web Layout Examples
Layout examples from the Home & Platform pages

Front-End Development

Layout builds & Responsive design

As defined in the information architecture, I built 10 front-end layouts using HTML/CSS/JS with reusable components to be integrated with WordPress on the back-end. I also adapted the designs to be responsive across all screen sizes and designed the Events & Press page layouts as those had not yet been defined during the design phase.

Home & Platform Page Examples
Layout examples from the Home & Platform pages on smaller screens

The team layout uses connecting lines throughout the page to give the page some hierarchy while still connecting all of the team members to a final CTA to the careers page. It automatically adapts to different screen sizes and also to adding new team members within WordPress.

Team Page Layout Detail Example
Detail of the Team page layout

Motion & Animation

The home page uses a touch of parallax & a fade-in animation to add some feeling to the hero section, while the platform page introduces a video animation of their commercial & residential offerings. Custom timeline reveal & button hover animations have been added throughout for a finishing touch.

Custom Functionality

To provide users with some initial ROI information and generate leads, I built an ROI calculator that uses javascript to make the calculations, and integrates with Ninja Forms on the back-end to send the lead information to the appropriate Betterview team members.

ROI Calculator Layout
Detail of the ROI Calculator layout

The event entries in WordPress allow for a custom field to specify what the company’s involvement in the event will be. I designed the page & created a basic filter mechanism to allow for easy sorting of the events on the front-end.

Event Layout & Filters Example
Detail of the Events layout & filters

Back-End Development

WordPress Integration

Keeping a WordPress installation as lightweight as possible is always one of my primary goals for any website. In my experience, this is best for performance, and makes for the most future-proof solution by minimizing the reliance on third-party software.

Using the default content editor, featured images, and Advanced Custom Fields, each layout type is separated into modules to allow for easy editing by the client. This gives them the flexibility to edit any piece of content they need without worrying about disrupting the design system.

Advanced Custom Fields Example
Advanced Custom Fields example as used on the Team page

Custom post types were created within the theme specifically for Solutions, Events & Press entries. This allows these content types to be used throughout the site & called upon for whichever page needs to display them. It also keeps the posts, pages, and other areas of the WordPress admin from becoming cluttered with entries that wouldn’t naturally be grouped together.

Betterview Custom Post Type Example
Custom post type flow for Solutions

Ninja Forms is a WordPress plugin that the client had already been using in previous site versions, and I integrated it throughout the new site design & with zapier to power the necessary forms while also holding on to their existing data.

The client’s hosting choice for this project was WP Engine, which provides a great managed solution, with caching, regular backups, and a staging area that we used while preparing the new site.

Brand

Ideation & Process

The Betterview website has seen several iterations throughout the years. In 2017, a company re-brand was set in motion to eventually produce the website that was built above. I participated in a Brand Workshop to help define the future of the company and to put in place a foundation for the future. Being involved in this process, and also participating in the creation of the logo mark provided me valuable insight for the remainder of the project. Below you can see some initial sketches that ended up heavily contributing conceptually to the final mark.

Betterview Logo Early Sketches
Final logo overlaid on my initial sketch concepts