Website visitors often make the decision to leave a website within seconds. To make a quick, positive impression with the viewer, this means taking into account technical items like load speed as well as the visual appeal and user experience when the viewer first interacts with the site. We thought about this while brainstorming the design for our site’s homepage. We wanted something simple, bold and on-brand that would create some interest in the website viewer.
A lot of thought went into the branding of 15 Finches. The finch is (a reference to evolution)-link this to first article post and represents our company’s adaptability to the evolving needs of our clients over time. It made sense to use the finch as prominent imagery at the top of our site, but we felt that a static image on a very clean and minimalist design wouldn't create significant engagement in the crucial first few seconds of a page visit. After looking at some sketches of the finch in different positions, the idea dawned on us - why not animate the finch to interact with the user? The symbol of our company could welcome the user into our site in a fun and playful way.
Our first idea was to simply animate the finch icon in different positions as a gif. This didn’t seem ideal, as a high quality gif could lead to massive file sizes and slow load time. Our minds wandered to the idea - what if the finch interacted with the user? What if it tracked the user’s mouse position with its head so that it feels like the finch is alive, alert and watching the every move of the mouse.
We determined that we’d need to think about screen real estate differently, so that we could engineer a finch that would react to the visitors mouse movements. We created nine finch images to correspond to the eight directional coordinates (north, northeast, etc) and a straight-on image looking at the user when the mouse hovers directly over the finch.
Our developers figured out the conditional statements required to determine mouse position relative to the finch icon and corresponding image.
Creating a diagram of the screen breakdown made the problem relatively straightforward. The mouse position would fall within one of nine regions, as depicted in this image.
To implement this in our React-based website, all we need to know is the mouse position relative to the position of the finch icon. To determine this, our developers attached a ref to the finch icon and calculated its position relative to the viewport. Then we could compare the position of the mouse in the viewport with these values and update the state to store the corresponding finch image. As the mouse moved around, the render function would update with the appropriate image, and the finch would appear to track the mouse around the screen.
We found value in our interactive finch as a playful and engaging entry to the 15 Finches website. The animation feature creates a memorable brand moment and gets the viewer in the mindset that this company is different. It encourages them to explore our site and find out more about what’s behind this little funny bird and the company that decided to put it on their homepage. Always take advantage of those first few seconds and do something unique and either educational or in this case, eye-catching.