Web Performance Tool - Easily digestible reports - To showcase how PerfBuddy provides performance and accessibility reports that are simple and easy for everyone in the organization to understand
Project 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.
Tools
Figma
Figma
Adobe Illustrator
Adobe Illustrator
Adobe Photoshop
Adobe Photoshop
Adobe After Effects
Adobe After Effects
Solutions
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.

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.

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.

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.

Mascot & Logo - Design process - To illustrate the design process behind creating a mascot that effectively conveys the brand's personality

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.

Mascot & Logo - Design process - To illustrate the design process behind creating a mascot that effectively conveys the brand's personalityMascot & Logo - Unique brand identity - To represent the unique brand identity achieved through the combination of the mascot and logo, making it easily recognizableMascot & Logo - Emotional engagement - To highlight the emotional engagement created by the mascot's reactions, making the brand more relatable to users

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.

Mascot & Logo - Design process - To illustrate the design process behind creating a mascot that effectively conveys the brand's personalityMascot & Logo - Unique brand identity - To represent the unique brand identity achieved through the combination of the mascot and logo, making it easily recognizableMascot & Logo - Emotional engagement - To highlight the emotional engagement created by the mascot's reactions, making the brand more relatable to users

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.

Initial Page - Clean and intuitive layout - To illustrate the clean and intuitive layout that helps users understand and use the page effectively
Initial Page - Clean and intuitive layout - To illustrate the clean and intuitive layout that helps users understand and use the page effectively

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.

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.

Initial Page - Clean and intuitive layout - To illustrate the clean and intuitive layout that helps users understand and use the page effectively

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.

Initial Page - Clean and intuitive layout - To illustrate the clean and intuitive layout that helps users understand and use the page effectively

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.

Initial Page - Clean and intuitive layout - To illustrate the clean and intuitive layout that helps users understand and use the page effectively

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.

Loading Page - User retention during loading - To represent the strategies used to retain user attention and interest during the loading process through engaging animations and facts
Loading Page - User retention during loading - To represent the strategies used to retain user attention and interest during the loading process through engaging animations and facts

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.

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.

Loading Page - User retention during loading - To represent the strategies used to retain user attention and interest during the loading process through engaging animations and facts

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.

Loading Page - User retention during loading - To represent the strategies used to retain user attention and interest during the loading process through engaging animations and facts

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.

Loading Page - User retention during loading - To represent the strategies used to retain user attention and interest during the loading process through engaging animations and facts

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.

Performance Report - Real-time data - To highlight the inclusion of real-time data in the performance report, ensuring users get the most up-to-date information
Performance Report - Real-time data - To highlight the inclusion of real-time data in the performance report, ensuring users get the most up-to-date information

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.

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.

Performance Report - Real-time data - To highlight the inclusion of real-time data in the performance report, ensuring users get the most up-to-date information
Performance Report - Interactive elements - To showcase the interactive elements within the report that allow users to explore detailed information on each metric

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.

Performance Report - Real-time data - To highlight the inclusion of real-time data in the performance report, ensuring users get the most up-to-date informationPerformance Report - Interactive elements - To showcase the interactive elements within the report that allow users to explore detailed information on each metric

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.

Performance Report - Real-time data - To highlight the inclusion of real-time data in the performance report, ensuring users get the most up-to-date informationPerformance Report - Interactive elements - To showcase the interactive elements within the report that allow users to explore detailed information on each metric

Responsive

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

Responsive - Optimized load times - To showcase the optimized load times on mobile devices, ensuring a smooth and fast user experience
Responsive - Optimized load times - To showcase the optimized load times on mobile devices, ensuring a smooth and fast user experience

Responsive

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

Responsive

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

Responsive - Optimized load times - To showcase the optimized load times on mobile devices, ensuring a smooth and fast user experience
Responsive - Consistent performance metrics display - To highlight the consistent display of performance metrics across various devices, maintaining clarity and readability

Responsive

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

Responsive - Optimized load times - To showcase the optimized load times on mobile devices, ensuring a smooth and fast user experienceResponsive - Consistent performance metrics display - To highlight the consistent display of performance metrics across various devices, maintaining clarity and readabilityResponsive - Mobile-friendly interface - To showcase the mobile-friendly interface designed to ensure accessibility of the performance tool on any device

Responsive

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

Responsive - Optimized load times - To showcase the optimized load times on mobile devices, ensuring a smooth and fast user experienceResponsive - Consistent performance metrics display - To highlight the consistent display of performance metrics across various devices, maintaining clarity and readabilityResponsive - Mobile-friendly interface - To showcase the mobile-friendly interface designed to ensure accessibility of the performance tool on any device
No items found.

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.

Linkedin

I've worked with WebFolks for years and their work always exceeds my expectations! I highly recommend them for everything from UI/UX to illustration and concepts.

Linkedin
Tracy Lee
CEO at This Dot Labs

More works

Looking for an expert?

Let's discuss how WebFolks can help!

Contact Us
WebFolks logo outline