Project Overview

The Company

The Company

The Company

Best Fleets to Drive For® is an annual survey and contest that identifies the for-hire carriers providing the best workplace experiences for their drivers.

Project Duration

Project Duration

Project Duration

October 2023 - December 2023

Roles

Roles

Roles

Jane Jazrawy: Project Management

Berenice Zepeda: UX UI Designer, Creative Direction
Alex Pineda: Illustrator, Designer
Kostek Voi: Web Developer
Mark Murrel: Marketing/ Copywriting

Goal

Goal

Goal

Redesign the existing website to facilitate a simple, straightforward platform where drivers can nominate the fleets they work for as the best in Canada and the United States. The redesign will prioritize user-friendliness, ensuring drivers can easily navigate and interact with the site to submit nominations and engage with related content.

User Personas

Personas' Designed by : Jenny Tieu

User Pain Points

Difficulty Navigating
Technology:

Difficulty Navigating
Technology:

Difficulty Navigating
Technology:

Many truck drivers might find it challenging to navigate through digital interfaces, leading to frustration and incorrect data entries. Simple and intuitive interfaces are crucial to alleviate this issue.

Limited Access to
Devices and Internet:

Limited Access to
Devices and Internet:

Limited Access to
Devices and Internet:

Truck drivers may not always have access to a stable internet connection or the latest devices, making it difficult for them to participate in online surveys. Solutions should consider offline capabilities and compatibility with older devices.

Time Constraints
and Workload:

Time Constraints
and Workload:

Time Constraints
and Workload:

The demanding schedules and long hours on the road leave truck drivers with little time to engage in additional tasks like filling out surveys. Survey programs need to be quick, easy to understand, and respectful of their limited free time.

Information architecture

UI Design

Objective:

Redesign the current website to present a more simple, neat, and elegant interface that reflects the themes of awards, trophies, gold, and podiums. The goal is to create a user-friendly and visually appealing experience that communicates excellence.

Design Elements

Color Scheme:

Gold and White: Utilize gold as the primary accent color to symbolize prestige and achievement. Pair it with white to maintain a clean and modern look.


Navy Blue: Incorporate blue to contrast with the red and white for call to action.

Primary Text:

Secondary Text:

Call to Action

Iconography:

Typography:

Brand's Fonts: Use bran's typography for consistency: Impact & Anton.


Readability: Ensure body text is clear and easy to read with appropriate spacing and font size.

Headline Text - Anton

Text - Lato

Imagery and Icons::

Award Imagery: Incorporate high-quality images of awards, trophies, podiums, spot lights and ceremonies to visually reinforce the theme.

Custom Icons: Design custom icons in gold tones for various functionalities like navigation, awards categories, and user actions to maintain a cohesive look.

Default state:

Default state:

Hover state:

Hover state:

Layout and Navigation

Simplified Navigation

Create a streamlined navigation menu with clear categories and subcategories to make it easy for users to find information quickly.

Responsive Design

Ensure the layout is responsive, providing an optimal experience across all devices, including desktops, tablets, and smartphones.

Wireframes Hi-Fi Prototype

Homepage

Hero Section

Feature a prominent hero section with a stunning image of a award sign, accompanied by a tagline that captures the essence of program.

Menu

The menu should be simple and understandable for user, as well as with iconography support for accessibility.

Content Sections

Past Winners

A dedicated page to showcase past winners by year.

Resources

A full resources menu to learn, know more or get to know more about the program

User Experience (UX) Enhancements
based on pain points

based

Quick Access Links

Quick access links to the most visited sections, such as "2024 Results" and "Nominations open".

Interactive Elements

Incorporate interactive elements like hover effects on buttons and links, providing a tactile and engaging experience without overwhelming the user.

Readability & Accesibility

Improves the readability by using a more legible typography and making sure color scheme has enough contrast.

© 2024 Berenice Zepeda | Design with ♥ and passion

© 2024 Berenice Zepeda | Design with ♥ and passion

© 2024 Berenice Zepeda | Design with ♥ and passion