Objective: Design the website (desktop and mobile) for a new digital product/service, Hailscale, which is an online tool that informs homeowners about the potential of hail damage to their home. Using NEXRAD radar, the technology provides a rating out of 10 to any address within the area (limited to the Greater Twin Cities, MN to start). A high rating warrants a no-cost inspection from one of Hailscale's Certified Roofing partners. With damage present, an insurance claim can be filed, leading to a possible roof replacement. 
Additional responsibilities:
• Defining brand direction
• Facilitating user interviews/testing
• Design marketing materials (email templates in Mailchimp, mailers, postcards, video ads, door-hangers, signage)
• Build, create content, and manage social media platforms
• Create stationary (business cards, letterheads) and lanyards
Building the brand: The team created an MVP (minimum viable product) documenting scope, requirements, features, and operations. After understanding the product concept and goals, it was important to define who the main user is and how the brand and product will best serve this audience. We spoke with homeowners to inquire about their experiences having a roof replaced, or working with insurance, dealing with ads or storm chasers, and using the internet in general for scheduling appointments. 
Utilizing a brand personality matrix helped to dial in what Hailscale is, how it is perceived, and how to appeal to the target user. This meant deciding on a color palette and the way it might be applied through the website, social media presence, and marketing materials. 
Problem statement: Mike is a homeowner who needs to check his roof for hail damage, because there was a bad storm. 
Goal statement: The Hailscale website will allow users to see the rating and know about possible hail damage to their property. This will affect homeowners by providing a free inspection leading to a possible insurance claim. We will measure effectiveness by tracking how many claims get approved. 
Brand personality matrix
Brand personality matrix
Information architecture
Information architecture
wireframe sketches on rating page
wireframe sketches on rating page
Wireframing: It was important to take into account all requirements from the MVP, along with ensuring a user is presented with answers to any questions they may have. The information architecture covers the essence of the product; but also how Hailscale works, who works with/for it, common questions, and options to stay connected at a lower commitment. Low-fidelity mockups helped the team to better understand how the website pages and content might be laid out and how everything ties together. We moved through many rounds of iterations to the homepage, rating page, and certified roofers page.
Initial layouts of main pages in both desktop and mobile formats
Initial layouts of main pages in both desktop and mobile formats
Information architechture fully built out in High-fidelity
Information architechture fully built out in High-fidelity
Certified Roofer page iterations
Certified Roofer page iterations
User insights: High-fidelity prototypes in Figma allowed us to test the product with users. Homeowners with no prior exposure to the product or concept were selected to run though the tasks of scheduling an appointment and contacting the admin. We also tested various hero text options for feedback on what users actually paid attention to (or didn't!). 
Prototyped flows for user testing
Prototyped flows for user testing
A/B testing options for her text
A/B testing options for her text
Mobile mockup of Homepage
Mobile mockup of Homepage
Early iteration of Rating page
Early iteration of Rating page
Early iteration of Appointment Scheduling page
Early iteration of Appointment Scheduling page
Feedback loops
• Adding "Home" to the navigation menu; users were not sure how to get back
• Making all fields clickable rather than just the arrows; most users tried clicking the boxes themselves and became confused/frustrated when nothing happened
• Re-organize rating page; users felt overwhelmed 
• Pare down text/make easier to digest; users often did not read all the content due to length
• Ability to sign up for monitoring at anytime; users were not ready for the full commitment of an inspection 
homepage
homepage
Bottom of Homepage
Bottom of Homepage
Monitoring page
Monitoring page
Rating page
Rating page
Check out your Hailscale rating at hailscale.com
Advertising and communications: By developing a communications strategy to utilize various forms of advertising, and leveraging the power of word of mouth, Hailscale worked toward gaining community trust and engagement. We made social media a priority to help get the name and product out in the wild. As a novel product in the home improvement/roofing industry, it was unclear what the best marketing strategy was. The team dabbled in door-hangers (hand-written and printed), mailers, video ads, postcards, Facebook/LinkedIn ads, and PR. 
Doorhanger
Doorhanger
Business card
Business card
Postcard
Postcard
twitter post - landmark series
twitter post - landmark series
Instagram post - FAQ
Instagram post - FAQ
Instagram post - Roofer highlight
Instagram post - Roofer highlight
Home Improvement show booth
Home Improvement show booth

You may also like

Back to Top