Web Performance Tool Design

A New Web Performance Tool: Quick Performance Testing at your Fingertips

Overview

PerfBuddy is a tool that provides easily digestible performance and accessibility reports that your organization can understand.

PerfBuddy does the hard work for you to translate technical jargon into plain language that's approachable to everyone.

Tasks

Develop a mascot with different emotions that represent how good your site metrics are.
Incorporate the mascot in the logo design.
Design a performance report page with a list of website improvements in less technical jargon wording.
Design marketing website which is the initial step to analyze the website, and explain how it works.
Make sure all the pages are responsive for mobile devices.

Tech-stack

Solutions

Mascot & Logo

The main idea was to make a mascot that will react with different emotes on the user's website performance indicators. The mascot became the symbol of the logo that helps to recognize the brand among others.

Collection of sketches on the left side and finished robot cat mascot on the right

Perfbuddy logo on the left and mascot right

Six different poses of the PerfBuddy mascot, each representing a performance status

Initial page

For the first user's steps, we've created the initial page that has the main input to get his site report in one click and explained how it works.

Landing page displaying different web app features

Loading page

While the site is analyzed, we made a loading screen that displays loading animation and performance facts with an option to receive the report to his email after the process is finished.

Report loading page with option to receive report in email

Performance report

After several MVP iterations, we created a self-branded design that shows a performance report by the main metrics and recommendations for improvement for each one in a clear less-tech-jargon way.

MVP versus alpha version of web app

Beta version of web app

Responsive

We have considered a responsive mobile design to make the performance tool accessible from any device.

Three mobile views of Perfbuddy app

Multiple mobile views of the PerfBuddy website, highlighting key features

Outcome

The result is a useful product design that helps people to get a performance report and less-tech-jargon recommendations of their website. Clear design guidelines for further development.

Clients Success Stories

Explore Story

This Dot Client

Driving Web3 Innovation: Collaborative Success in Showcasing Chainlink Functions

Chainlink, the company behind the Web3 services platform and blockchain oracle network of the same name, approached This Dot Labs to build a showcase application featuring Chainlink Functions.

Explore Story

This Dot Client

AI-Driven Insights: Elevating the CPO Experience with AI Assistants and Data

Data-driven decision-making is paramount. This Dot Labs partnered with Knoetic, a leader in people analytics solutions, to revolutionize how CPOs leverage technology. By developing Genie 2, an AI-driven HR assistant, and enhancing Knoetic's People Analytics platform, This Dot Labs help Knoetic empower CPOs with access to strategic insights.

Explore Story

This Dot Client

Leveraging a RAG AI Chatbot for Efficient Search and Information Extraction from Video Archives

This Dot Labs developed an AI-powered solution to help the team quickly search through hundreds of hours of recorded video meetings, podcasts, and interviews.

Explore Story

This Dot Client

Load Management Platform Design

Stanza is an app which manages the site’s ups and downs, improves scalability and performance while managing multi-tenant or spiky traffic.  

Let's innovate together!

We're ready to be your trusted technical partners in your digital innovation journey.

Whether it's modernization or custom software solutions, our team of experts can guide you through best practices and how to build scalable, performant software that lasts.