DuraBull Trailers Responsive Website

DuraBull Trailers

UX Design • Wireframes • UX Research • Competitive Analysis • UX Writing • Flowcharts

Project Overview

Team

UX Designer (My Role)
Office Manager
Stakeholder

Timeline

August 2021 (1 Month)

Tools

The following are the tools used throughout the project:
Wix • Google Analytics • WCAG • WebAIM Contrast Checker • UI-Patterns

Goals

1.) Increase dealer application conversion rates and total website visits
2.) Improve accessibility throughout website while maintaining brand guidelines

Problem Statement

The website violated three primary disabilities, causing users to leave the website without exploring or applying to be a dealer

01. Research

Research shows that about 8% of males (1.5% of females) suffer from color blindness, 6.3% from cognitive disabilities, and 3.3% from vision impairment. These were the three primary disabilities violated on the DuraBull Trailers website. Because inaccessible products can limit up to 20% of a business's potential, I conduct an accessibility audit on the website to find the main accessibility pain points.

Old DuraBull Trailers home page on website
The original DuraBull Trailers home page

Accessibility Guidelines Violated

vision impairments

  • Inadequate color contrast on buttons and active / hover navigation elements

  • Improperly labeled elements for screen readers

cognitive disabilities

  • Distracting visuals - unable to pause or mute banner video

  • Inconsistent styling and navigation for forms and buttons

When researching the problem to determine which accessibility guidelines were violated, I started by using Google Dev Tool's Lighthouse to conduct an accessibility audit which reported that the accessibility score of the desktop website was 76 out of 100. After reviewing their recommendations, I used WebAIM's Color Contrast Checker to check the ratios for the skeptical color combinations. As I went through the website, I noted the design inconsistencies that affect cognitive disabilities and kept the sound on to note which videos I could not pause through my experience.

Due to the short project timeline, I could not conduct additional research. However, if allowed more time, I would have completed a usability test with individuals with temporary, permanent, or situational disabilities to gather insight from real users.

02. Process

After spending several days gathering insight into which accessibility guidelines the website went against, I began to review them and find ways to improve the accessibility. There were restrictions on how much I could accomplish within the timeline and customizability with Wix templates. If allowed more time, I would use Webflow for more customization options or add custom code to Wix.

03. Results

Without conducting usability or user testing, I wanted to ensure the users were completing tasks with ease on the website. I did this by monitoring the website through Google Analytics and Wix Analytics. I made several changes to create a universal experience for users throughout the process.

When comparing 30 days after the redesign to the previous 30 days, the website's usability had significantly increased in comparison. The following are the results of the redesign:

23% increase in site sessions
20% increase in unique visitors
43% increase in average session duration

04. Recommendations

This project had a one month timeline and budget constraints that limited my ability to improve accessibility and complete the UI design. I could not conduct user research or usability testing and used Wix to update the website because it is the original platform. Unfortunately, Wix doesn't have fully responsive design capabilities, so I had to move everything to the center of the page to stay within tablet guidelines. If allowed more time to work on the project, I would improve the following:

Switch hosting platforms to a more responsive one such as Webflow
Add captions to videos for hard of hearing individuals
Use more animation to keep users engaged
Narrow down the number of input fields on forms to reduce steps
Conduct usability and user testing to design the optimal user flow
Reduce JavaScript code to increase performance on both mobile and desktop