HOUSECANARY

Website

Website

hc_hero_2

Intro.

Role: | Visual Designer | UX Designer | Prototyper

HouseCanary is a real estate analytics platform that helps investors find and value properties. The need for a redesign and rebranding of HouseCanary's website first came about to differentiate it from competitors in the real estate valuation and analytics space. I collaborated with content marketers, copy editors, and developers to create an experience that would build upon and compliment the new visual direction our product was headed while educating prospective customers with digestible glimpses of our products and services. As lead designer, 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.

Problem.

HouseCanary was about to launch a new brand, ComeHome, that was aimed more at consumers and not it’s traditional investment customers. Since ComeHome was directed at a different type of customer it adopted a friendlier and less formal design language. Over the period of a year, we’d begun to explore a new design language for our brand and website, but with the launch of ComeHome we had to find a design language that could bridge the gap between the two brands.

OLD

old_hc_website

TRANSITIONAL

transitional_hc_website

FUTURE

next_hc_website

Site Audit.

One of the first things I did was to meet with members of the marketing team and figure out what pages we wanted on the website.

This would make it easier to:

  • Have a clear plan of what pages needed to be worked on.
  • Create a skeleton for the site navigation.
  • Give a good indication of which pages could make use of templates and which pages would need a bit more customization and attention to detail.
  • Get everyone aligned on priorities.
hc_site_map

Inspiration.

inspiration_images

Grids.

SETTINGS

1440PX

LARGE DESKTOP

COLUMNS: 12
COLUMN WIDTH: 70PX
GUTTER: 30PX

960PX

SMALL DESKTOP/TABLET

COLUMNS: 12
COLUMN WIDTH: 60PX
GUTTER: 20PX

428PX

LARGE PHONE

COLUMNS: 6
COLUMN WIDTH: 50PX
GUTTER: 20PX

375PX

SMALLER PHONE

COLUMNS: 5
COLUMN WIDTH: 50PX
GUTTER: 20PX

desktop_mobile_grids_1

Sketches.

hc_sketch

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.

hc_site_modules_01
hc_site_modules_02
hc_site_modules_09
hc_site_modules_12
hc_site_modules_08
hc_site_modules_07
hc_site_modules_10
hc_site_modules_11
hc_site_modules_04
hc_site_modules_03
hc_site_modules_05
hc_site_modules_06

Page Templates.

hc_page_templates_06
hc_page_templates_05
hc_page_templates_04

Exploring Visuals.

Since the reports were dense with information it made sense to pop out and highlight smaller pieces of info depending on what we wanted to highlight in a given section/module. I experimented with different backgournd background colors an textures for different product segments.

FIRST ROUND VISUALS

hc_exploring_visuals_06
hc_exploring_visuals_05
hc_exploring_visuals_04
hc_exploring_visuals_03
hc_exploring_visuals_02
hc_exploring_visuals_01

FIRST ROUND HOME PAGE

hc_exploring_visuals_08
hc_exploring_visuals_07

Revisiting Visuals.

hc_revisiting_visuals_02

One of the pieces of feedback I received was that the background textures were distracting, so I removed them. I also began to use 3D tiles to highlight the different parts of the reports/UI.

hc_revisiting_visuals_01

Another piece of feedback I addressed was that overlaying too many elements was distracting as well. I thought it through and decided that overlapping elements should only be used when showing a grouping of things or if we wanted to show some sort of progression of time.

SECOND ROUND HOME PAGE

hc_revisiting_visuals_04
hc_revisiting_visuals_03

Typography.

hc_typography_06
hc_typography_02
hc_typography_01
hc_typography_05
hc_typography_04
hc_typography_03

Navigation.

DESKTOP

MAIN NAV STRUCTURE AND HOVER

hc_nav_06

SUB NAV HOVER

hc_nav_05

MOBILE

hc_nav_01_a
hc_nav_04_a
hc_nav_02_a
hc_nav_03_a

Colors.

NORMAL VISION

normal_color_map

DEUTERANOPIA VISION

Deuteranopia vision

HouseCanary’s product relies heavily on choloropeth maps (heat maps) to visualize the data generated from their reports. Selecting colors that are more easily differentiated by people with visual differences was something that I kept front of mind when thinking about the maps we’d show on the site.

BRAND COLORS

hc_brand_colors

EXTENDED PALETTE

hc_colors_03

Iconography.

ICONS

hc_iconography_03

ICON COLORS

hc_iconography_02a

ICON STYLES

hc_iconography_01a

UI Styles.

BUTTONS

hc_ui_styles_04a

TEXT LINKS

hc_ui_styles_03

DROPDOWNS

hc_ui_styles_01

INPUTS

hc_ui_styles_02

SEARCH

hc_ui_styles_05a

TABLE STYLES

hc_ui_styles_06

Putting it together.

HOME PAGE—DESKTOP

hc_together_08d_e

 

hc_together_09d_e

HOME PAGE—MOBILE

hc_together_home_mobile

SOLUTIONS

hc_together_03

PRODUCT

hc_together_02

DNA & RESOURCES

hc_together_01

CLOSE UPS

hc_closeups_12
hc_closeups_04
hc_closeups_09
hc_closeups_11
hc_closeups_08
hc_closeups_05
hc_closeups_10
hc_closeups_07
hc_closeups_02
hc_closeups_03
Private Money Lenders
hc_closeups_06
hc_closeups_01

Takeaways.

THINKING SYSTEMATICALLY

One of the early decisions that really helped focus this project was the use of site modules. Having a few templated layouts allowed me to put together rough layouts of full pages for the marketing team so that our editors and writers could begin to fill in different parts of the site with content. Once their content was in, it allowed me to get a better sense of what visuals should be used. Overall it allowed everyone to ideate more quickly and to get to a solution a lot faster.

CHARACTER LIMITS

Typograhy can be used as a visual guide to direct the viewer’s focus and should be in used in a balanced way so that it isn’t too overwhelming. Character limits in the site modules served as reminders to copy writers to try and respect that balance. As the process of designing and buidling the site moved forward, character limits were adjusted and some suggestions even highlighted the needs for new modules.

COLLABORATION

The title of this section says it all. Being able to bounce ideas off of other colleagues is something that I really enjoy and on a project of this size was something that was necessary.

ramon_logo_light_blue

More about me

LinkedIn      |      Dribbble      |      Resumé

LinkedIn   |   Dribbble   |   Resumé