This site was done for a local family-owned small business that provides and installs cleaning solutions for commercial grade trucking and large diesel vehicles. Their site had not been updated since the early 2000s and was beginning to show the age of the product. The stakeholder wanted to update the site with modern aesthetics and to improve the information architecture to improve potential client outreach and marketing.

As the sole UX and Web designer for Green Vine Marketing, I was tasked with leading the research, design, and implementation of the final product for Red Arrow.

Step 1: Research

Empathize and Define

I started my research by gathering user information on the existing site in order to identify what current issues the site was having. By interviewing several people in their core user demographics using the current site, including running user tests with a potential user flow I was able to determine areas in need of focus. During this process, existing issues with the information architecture and copy came to light, as did the perception that visitors to the site had of the company. I furthered this research by looking at the trends in trucking, construction, and chemical manufacturers to have a clear understanding of the different industries their clients and partners worked in. From this data, I compiled a persona to help guide the design process.

The Personas

Step 2: Ideation

Mapping and Wireframing

I then designed a user flow to understand how the user might work their way through the site, keeping in mind that many users might not know what a truck cleaning system is or what would work for their needs.

After these had been compiled I started the initial wireframes for the necessary screens, starting with a low-fidelity wireframe.

Step 3: Prototyping and Testing

Step 4: final layout and styling.

Red Arrow had an existing site, but it hadn’t been maintained since it was launched in the early 2000s. Because of this, their styling had to be updated entirely. The original site used the red of their logo to base the entirety of their color choices, creating a burst of red, that often distracted the user and made text difficult to read. In addition, the old site used a 6 column layout, which left large amounts of white space on modern laptops and tablets.  

When designing the new site we chose to use a minimalist design, with a white and red color scheme to complement the logo and text. While the majority of the site has a white background we used red highlights on the header fonts, some backgrounds, and buttons to encourage the user’s focus. We then supplemented this with photos and video backgrounds. of the truck wash in action. This helped break up the dual color scheme and provided further information on how the system worked to the user without adding too much technical copy to the site. 

For fonts, we went with a sans-serif font, specifically Arial, to help pull focus to the copy, and to further the feel of technical proficiency. 

About 

Testimonials

In addition to bringing the desktop site through the design process, from lo-fi wireframe to mockup, I also converted pages to responsive web design for mobile devices.

Deliverables and Next Steps

This site was built on a WYSIWYG editor, which allowed me to both design and build the site as a deliverable, allowing for a quick launch. For the next steps building out the functionality of the audit application and improve the imagery. Additionally pulling more colors to user interactions would be ideal, especially in the button usage and headers.