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.
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.
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.
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.
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.