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.
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
Deuteranopia — Common in 5% of all males
Deuteranopia — Common in 5%
of all males
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.
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.
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.
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 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.
Wireframe of old design with left and right reachability.
Proposed design with left and right visibility overlayed on top.
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.