Daniraykova

WorkCareerCOntact
Hire Me
UX/UI Design

Peterbilt Website

Peterbilt Motors Company is an American truck manufacturer. They specialize in on-highway, medium-duty, vocational, and electric trucks. The main target audience of the website is small fleet managers of companies with less than 15 trucks, owner-operators of 5 trucks or less, and the media/press. The website is mainly used to find and download resources such as sales sheets and brochures. It won 2024 Davey Award for structure and navigation.
Client:
Peterbilt
Release Date:
August 2023
See Live Project

The Goal 

  • Drive new product consideration and sales
  • Strengthen customer loyalty and social media engagement
  • Provide information and resources for each truck model. Information should be easy to find.

‍

Process

The diagram below shows the specific process used in this project.

Peterbilt Website Design Process

‍

Problem–Solution Approach

The Problem

Google Analytics

Heuristic Evaluation

Heuristic evaluation based on Jacob Nielsen's 10 heuristics.

Jacob Nielsen's 10 Heuristics

  1. The visibility of system status
  2. The match between system and the real world
  3. User control and freedom
  4. Consistency and standards
  5. Error prevention
  6. Recognition rather than recall
  7. Flexibility and efficiency of use
  8. Aesthetic and minimalist design
  9. Help users recognise, diagnose and recover from errors
  10. Help and documentation

I selected key tasks related to top user flows I conducted a heuristic evaluation.

Task 1. Find a particular truck.

Task 2. Find the closest dealer, check when it closes and to their website.

Task 3. Find a particular resource such as sales sheet or brochure.

The severity of the issues was rated as follows:

  1. No Usability Issue
  2. Minor Usability Issue
  3. Major Usability Issue
  4. Critical Usability Issue

‍

Based on Google Analytics, Competitive Benchmarking, Heuristic Evaluation and thorough assessment, we identified the following issues:

1. Hard to find information
  • Search function to be improved
  • Information is not organized
  • Lack of filtering
  • Lack of specific information related to each truck such as class, mile range, engine, etc.
  • Resources are not organized
2. A need for a Mobile Optimization
3. Pages with the Highest Priority for Redesign
  • Home page — showing content relevant to users as well as content promoting electric vehicles
  • Trucks landing page for truck types — there is no information summary under each truck thumbnail
  • Individual trucks page — does not link to all information relevant to this specific truck model
  • Find a dealer — clunky, (example) work hours are on a separate page
  • Resource page — unorganized, no labels of resource types, no filtering, no search
  • Events — no venue, address and time information.
Peterbilt Old Website
Competitive Benchmarking
User Journey Map

The Solution

I researched and developed user flow diagrams for the most common user case scenarios - especially when a user is looking for resources.

Most of Peterbilt users are looking for a specific truck information and/or resources related to the particular model such as manuals and brochures.

User personas were developed to understand user goals and behaviors. Corresponding user flows were created to make sure persona can find their information easily.

User Personas

User Stories

  1. I am a small fleet owner. My goal is to find truck-related information and specifications so I can compare truck models and make a decision.
  2. I am a truck driver. Sometimes I look for the closest dealer to service my truck.
  3. I am a communications manager. I often check Peterbilt news and resources such as brochure for new products.
Information Architecture - Sitemap
Mobile Flow Comparison Old Vs New Website
Peterbilt Wireframes

Information Reorganization

  • All content was reorganized using card sorting. A new site map was created.
  • Improved navigation — separate for mobile and desktop. Navigation by hierarchy of truck types, added informative visuals, included truck model names.
  • Introducing tab navigation within each truck page. Different tabs contain various types of information for that truck.
  • Analyzed for content gaps. Added missing specs, descriptions, key features.
Design System
Peterbilt Website Based on Bootstrap Grid System
Peterbilt Navigation and Home Page

‍Improved Navigation

  • Truck selection dropdown overlay on desktop — showing all models
  • Truck selection dropdown on mobile — includes tabs for type and a carousel for the models. Before, the user had to go to the landing page listing all trucks to find their truck.

Special focus on high-priority pages that were important to user personas

Trucks landing page 

Made sure that the persona can quickly find the truck they are looking for: tabs plus filtering plus key specs.

Individual Truck Product Pages

Truck specs moved to the top (easy to scan key info). Page now includes all the information related to that truck model plus all resources related to the truck (manuals, etc).

Trucks Landing Page and Trucks Product Page
Resources Page

Tabs for different resource types. Filtering for resource types (manuals, brochures & sales sheets, videos, image gallery).

Peterbilt Resources Page
Find a Dealer Page

Better user experience, all the information is in one place, simplified, easy to use, filtering. We included geolocator. The user can see all dealer locations close by without searching. Before extra information such as hours was not visible in the search results.

Events Page

Before the event page only listed: event name, date, and city.

  • ‍I included date, hours, venue, booth number, speakers, event logo, event description
  • Added option to add the event to a personal calendar (Outlook, Google Calendar, Office365)
Peterbilt Events Page
Improved Search Functionality

Search is presented as an overlay (can be hidden if not needed). Search now supports French (site is for Canada).

Minimizing Load Time

Optimized videos and encoded image in the webp format (smaller size than .png with no reduction of quality).

‍

Result

The website provides a user experience with reduced cognitive load. It is both intuitive and logical to navigate. The website is visually engaging and projects the company as a forward-thinking organization.

The client was pleased with the outcome. On our first presentation meeting, she emotionally shared that she wanted to shed tears of joy for how well-thought-out the user experience was. Our Client Services Manager, who has years of experience in the industry, remarked that he had not seen such an emotional response from a client.

Silver Davey Award Winner

The design work for Peterbilt website was honored with 2024 Silver Davey Award for its structure and navigation.

Legendary Model 589 Reveal Campaign

I played a key role in conceptualizing the Legendary campaign, crafting the vision for an anticipation-driven teaser strategy for the launch of the new Peterbilt Model 589. The campaign gradually revealed subtle details about the iconic truck, building excitement leading up to its dealership debut.

Legendary Social Campaign
Legendary Reveal Event Landing Page
‍

‍

Portfolio

More Case Studies

View Case Study
Truck Kiosk App
UX/UI Design
View Case Study
Bracketing Promo App
UX/UI Design
View Case Study
CG Brand Website
UX/UI Design
About Me

I am a passionate T-shaped UX/UI designer and creative. I create beautiful and easy-to-use digital products.

Links
HomeWorkCareerContact
Contacts
I’m based in Novi, MI
+1 949 226-4286
Send Message
Follow
Dani Raykova. 2023. All Rights Reserved.