HouseCanary

Website

Website

hc_hero

Intro.

Roles | Visual Designer | UX Designer | Prototyper

The need for a redesign and rebranding of HouseCanary's website first came about as a need to differentiate it from competitors in the real estate valuation and analytics space. Our goal was to create a website experience that would bring together new ideas, easily digestible analytics, and a bit of fun. As lead designer, I treated the site as if it were another product. My role was to research and create a new visual language, conceptualize new ways of displaying data and analytics, and to create a good user experience for site visitors.

intro_1
intro_3
intro_4
intro_2
intro_5

Typography.

type_left
type_right

Colors.

colors_left
colors_right

Finding color steps that work to display values on heatmaps.

Finding color steps that work to
display values on heatmaps.

Our site and products rely heavily on colors to differentiate different data sets and their meanings. One of the places where this was top of mind was when selecting colors for our choropleth map (heatmaps). After doing some research, I learned a lot more about how color deficiencies affect people's color perception and found some great tools to help me perceive what that looks like. From there I was able to design better colors steps for our heatmaps.

Normal Color Vision

normal_color_map

Deuteranopia — Common in 5% of all males

Deuteranopia — Common in 5%
of all males

color_blind_map

Site Modules.

Site Modules.

Site Modules.

In order to create a more systematic design and development process, we decided to design reusable site modules. I started off by taking inventory of the different possible types of modules and sketching them out, followed by wireframing for structure and layout, then moving onto typography and light visual styling, allowing developers to get a better sense of sizing, spacing, and treatment of certain elements such as box shadows and images.

Examples of site modules with light styling.

module_1
module_2
module_3
module_4
module_5
module_6
module_8
module_7
module_10
module_9
module_13
module_14
module_12
module_11

Iconography.

Iconography.

Icons

Full Color

icons_color

Single Color

icons_gray

Putting it together.

Once I had figured out the UX and visual language of the site, I was ready to begin putting everything together. The first page we thought was a good place to start was a page explaining what HouseCanary does. Internally we called the page "What is HouseCanary?" and all of the content on this page served to answer this question. 

Desktop

what_is_desktop

Mobile

what_is_mobile

Animations

Re-thinking our
mobile nav

Re-thinking our
mobile nav

After removing, adding, and shuffling pages around our nav menus for both desktop and mobile needed to be re-designed as well. The desktop nav menu was simple enough to figure out but our mobile nav now needed some love. Our old design met the functional requirements of a nav, it had all the links that the desktop nav had, but it did not address the fact that phone screens have gotten larger and have made reachability more difficult. To solve for this I researched, ideated solutions, and then prototyped and tested my solutions to see which worked best.

Old Design

old_mobile_nav
L_R_Reach

Left and right thumb reachability.

I looked at what ideal reachability looks like so I could get a better idea of where to place elements. I used the dimensions of an iPhone X as that was the device most used to visit our mobile site and was also close in dimensions to the next most used device. 

old_design_reach

Old design with left and right reach.

Our old design with the left and right visibility overlayed to visualize the difficulty a person would have reaching links at the top of the screen.

proposed_reach

Wireframe of old design with left and right reachability.

Proposed design with left and right visibility overlayed on top.

  • The hamburger and "X" were moved to the right side.
  • Primary links were made larger to make tapping them easier.
  • Sub-links were broken out underneath primary links to save people from multiple taps to access them. 
  • 'About us', 'Careers', and 'Press Resources' were made less prominent but still easily accessible.
  • 'Log in' and 'Schedule a demo' were both moved closest to the bottom of the screen as these were our two main calls to action on the nav.

In Motion

In Motion

Once the UX was worked out, I set off to styling the mobile nav. At this point, I also built a prototype using InVision Studio so that my devs could have a good idea of what the interaction should look like. This gave me the opportunity to test out the nav on a device and to make a few final tweaks.

More projects

MOTION & ANIMATIONMotion Design

BASIS AN INTEL COMPANYVisual Design | UX Design

ramon_logo_light_blue

More about me

LinkedIn      |      Dribbble      |      Resumé

LinkedIn   |   Dribbble   |   Resumé