Howl

Website Redesign

overview

After introducing a new logo and style guide, we needed to update our marketing website to reflect our new brand. I created a new layout, navigation, and brand assets for our team to use throughout the marketing funnel.

role

Product Designer

responsibilities

Visual design, marketing design, marketing copy, testing, webflow development

Timeline

Testing was ongoing for several months, 2020

Context

Problem Definition

  1. The marketing website's visual language didn’t align with Howl’s new vision of a bold, safety application for families and neighbors.
  2. Howl’s marketing website wasn’t retaining visitors.

planning

Sitemap

    I used a sitemap to plan the initial pages of the site and get a better understanding of which pages would share the same template. I also used it as an artifact to present to stakeholders. It became used a tool for feedback and questions.

    Gathering information

    Competitor Benchmarking

    I compared the web-to-app flows of direct and indirect competitors, as well as those by non-competitors. I noted core competencies of these platforms, using a quote Neil Kelty as a guiding principle:

    Identify the distinctive competencies of each organization – in the buyer’s eyes. It shouldn't be to 'understand my competition', but to 'understand how to position myself to win against competitors in scenarios where we're both chasing my ideal customer.

    Having examined competitor sites and web-to-app experiences, I then looked to other, non-competitive platforms to inform my design choices also.

    Testing

    Conducting Redirect Testing on the Home Page Hero Section

    I used Google Optimize teb-to-app click-through using a redirect test with 3 hero homepage variants.The key variable in each test was the call to action. Our hypothesis was that the QR code was the most effective CTA, while the text-me-the-app service presented the most friction and encouraged resistance in site visitors.

    Left: QR code CTA, directing the user to their operating system's app store. Middle: a text-me-the-app CTA. Right: email sign up CTA which directs website visitors through our web app onboarding.

    After two rounds of redirect testing on the home page hero section, the text-me-the-app CTA competed as well as the QR code CTA.

    Website redesign results

    Bounce Rate Reduced by 65%

    The results following the redesign were clear. A more compelling brand and its continuation throughout our funnel lead to more conversions and a significantly reduced bounce rate.

    Further improvements

    Bolder Iconography

    I created over one hundred icons for our mobile and web apps, using a 2px line weight to emphasize our new, bolder visual language.

    A selection of 15 icons from a set I made totaling over 100.