Home Services Projects Our Team The Lab Blog Contact Jobs
screaming frog logo

The Challenge

With years of experience within the world of digital marketing, Screaming Frog is a search-marketing company whose Spider tool is used by top SEO agencies worldwide. Their website was fairly outdated, and due an update to reflect the split between their agency services and SEO tools. Coupled with their requirement to retain as much of their content and links as possible, in order to maintain their search ranking, this project was certainly a challenge. However, streamlining content and making it beautiful and useable is what we love to do, so we were keen to get started.

screaming frog old website

The original Screaming Frog site had a distinctive logo and colour scheme, but was in need of a refresh

Discovery

During the discovery stage of the project we researched direct competitors and other websites that are doing similar things in the industry. This allowed us to get an idea of what’s working (or not) for other sites, and see where we could apply new ideas to the redesign process. The discovery stage also included researching the on-boarding process of a user visiting the website, consideration of the site analytics and understanding the user experience by creating visual user personas and user flows. We began working on some visual design concepts using Screaming Frog’s existing branding, and produced a few unique options and design styles in the form of style tiles, to provide potential ideas of how the new website could look and feel.

wireframes

Design

Before delving into the high fidelity design of a new website, we produce wireframes to demonstrate the layout of each page, based on our initial sitemap discussions. Working with Screaming Frog meant that we had access to lots of content, which is always extremely useful when it comes to preparing wireframes. It means that we know what’s going to be on the page, so we can focus on arranging the content in a way that is both visually pleasing and, more importantly, easy to use.

To ensure we are moving in the right direction we create working, clickable wireframe prototypes using Invision. This process means that without writing a single line of code we can show the client how the website is going to work, with a clear idea of the hierarchy on each page, and how they all link together.

Once the wireframes were agreed, we began work on the UI overhaul of the site. We introduced bright yellow and blue highlights to contrast with the widely used ‘Screaming Frog green’ throughout the design, staying with a clean and flat style. We also designed new animated icons that represent each of the SEO services that are offered, in place of the generic images previously used. Invision also allows us to create full colour prototypes, so at this stage the client is able to really get an understanding for how their site is going to look and function. These are also incredibly useful for the developers, who can get a clear idea of where each page fits and links throughout the site.

new site design

Story page

The main visual design challenge of this project was redesigning Screaming Frog’s unique ‘Story’ page. Previously this was an illustrated, full-page infographic featuring a huge tree littered with frogs and spiders (representing the branding and tools respectively). We were quite surprised to find such an illustrated page hidden inside the website. However, this felt like an opportunity to do what we do best - build unique, responsive and engaging user experiences. We transformed the unconventional story page into a beautiful, expandable timeline showing the story of how Screaming Frog started, grew and rose to the top of the industry.

A UX issue we discovered when building the story page was that previously users were automatically scroll-jacked to start the story from the bottom of the page. We felt that this wasn’t the best way to go about things; being automatically scrolled to the footer of the page might make a user think the content for that page is missing, or that the site is broken, so they may not read any of the content and even potentially decide against making a purchase.

Our version of the story page can be viewed by scrolling down naturally, or by clicking a call to action which will then scroll you to the bottom (start) of the story. The reasoning behind this was due to the nature of the illustrations - the story follows a frog being born, growing into a tadpole and then leaving the water, only to grow and progress (naturally) to flying to outer space. This process simply wouldn’t have made sense if we began the story at the top of the page.

The previous story page was static, bar some clouds moving in the background. We spent a lot of time planning what would be animated, keeping file sizes and performance in mind. The majority of the animations on this page were created purely using code.

animated story page design

Developing the animations

We knew development of the story page was going to be one of the biggest challenges for us. Our developers worked closely with the design team to outline each animation and their trigger points. Although previously we have incorporated GIFs alongside CSS transitions in animated pages we’ve produced, we decided against using them for the Screaming Frog story page. With the large gradient background, the limitations of transparency around GIFs didn’t make them a viable option, so we had to come up with other creative ways to produce the animations. We wanted to make sure the animations looked as fluid as possible. This required us to slice up individual elements of the static images to animate them independently.

In one of the initial meetings with Screaming Frog, they explained that they wanted an interactive game in the footer of each page. Their idea was to have a fly moving around that could be clicked to trigger a frog’s tongue to shoot out and catch it. We knew that we wouldn’t be able to produce this with CSS transitions and keyframes alone, so we decided to introduce SVG animations. We used a JavaScript library called Snap.svg (http://snapsvg.io/), which is a clean and powerful API that allowed us to manipulate elements easily to create the desired effect.

SEO Spider Page

The Screaming Frog Spider tool is a small desktop application which crawls websites from an SEO perspective. It is used by agencies and SEO professionals around the world, including Screaming Frog’s main competitors. Our goal was to further increase conversions on this page, by encouraging visitors to download the tool and purchase the relevant licences. The existing page was very text heavy and littered with download buttons, the difference between the free and premium versions was also not completely clear.

We decided to streamline the process of purchasing and downloading by minimising the number of clicks required between landing on the website and purchasing the software. By introducing a comparison table between the free and premium versions, as well as adding visual representations of the features of the tool, it became a much clearer interface.

We hid the numerous operating system download buttons, and replaced them with a single download modal which detects the OS of the user instead. The heavily populated FAQ and user guide sections now also have search capabilities to allow for quicker troubleshooting.

seo spider tool

In Summary

The Screaming Frog site was one of the first projects we were able to test throughout in our UX Lab. Users testing the redesigned pages responded well to our simplified licensing, FAQ and download pages. The improved user experience we observed in the Lab has continued following the new site going live, leading to lots of positive feedback from new and existing clients. We loved having lots of freedom, as well as a wealth of content to work with for this redesign, and are very proud of the clean, simplified site we have produced, especially the awesome ‘Story’ page (if we do say so ourselves!).