GTmetrix
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.
planning and wireframing
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.
turning data into a visual report
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.
organizing your reports
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.
comparing reports
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.
responsive design
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.
