GTmetrix is a tool to help people optimize and improve the speed of their websites. It analyzes a website's page load and uses Google PageSpeed and Yahoo YSlow to report inefficiencies and shows you how to fix problem areas.
This is a version 2 redesign of the website, currently in development.
GTmetrix's home page brings the analysis tool front and centre. Taking a cue from Google, a large input field was placed as the focal point, encouraging users to enter a URL and analyze a website.
The GTmetrix redesign required immense planning due to the numerous displays of different types of data. High-fidelity wireframes and frameworks were developed to showcase exactly how content would look and feel.
In addition, with responsive design being added, extra care was put into laying out widths to ensure the highest accuracy in development.
The job of the report page is to turn numbers and data into something meaningful, and most of all - actionable. Scores are averaged result in a letter grade, while colours indicate how well the site is performing compared to the other page being analyzed on GTmetrix.
Various tabs show additional information related to the page performance and give a very illustrative idea of how well the page loaded. From historical graphs, to waterfall load graphs and even video playback of the page contribute to a developer's understanding of the page load.
Since users analyze multiple sites with GTmetrix, a control centre needed to be created with the ability to sort, filter and perform new analyses with ease.
The GTmetrix dashboard displays all recently analyzed pages in it's All tab, and allows for users to filter through their reports instantly. Users can also create new tabs with pre-defined filters for easy reference.
A major feature of GTmetrix is the ability to compare the reports of multiple pages. GTmetrix allows for up to 4 pages to be compared. The first page is compared against the rest, and colour coded numbers with differences show whether or not the compared page is better or worse.
The original design of the site was fixed width, but with the increase in mobile users in our analytics, it made sense to make version 2 fully responsive. This was a difficult task since a lot of the data was tabular.
A design was implemented that focused on the core features of the application and also the mindset of those visiting on mobile devices. What were they trying to do on GTmetrix while visiting on a phone or a tablet? - Most likely just getting a report and score.