Equipment Dealer

Website  |  2016
Skills Used
  • UX Design
  • UI Design
  • Art Direction
  • Responsive Web Design
  • CSS3, HTML5, Sass, jQuery
  Back to Work

Challenge

This client came to us in 2016 looking to update their old website with a new design/structure that would accomplish a few goals:

  1. Stay true to their brand while modernizing the site’s aesthetics;
  2. Improve the site’s overall usability, with particular emphasis on their new and used equipment catalogs; and
  3. Make the site responsive across all devices;

Solution

1. Planning and Research

As the lead designer for this project, I performed a competitive analysis, consulted on wireframes, and led a design intake meeting with the client to get a feel for their brand and needs. With this information in hand, I developed style guidelines and a high-fidelity homepage design that spoke to their brand.

2. Initial Design

The new site design was light and bright, incorporating their brand’s gold color as an interactive cue throughout the site. I used subdued gradients and shadows throughout to create subtle interaction effects and lend the site greater depth. The site’s new typographic style introduced greater contrast, more white space, and shorter line lengths to improve overall readability. We also took this opportunity to update the site’s imagery, increase the number of images site-wide and using photos of real employees and customers wherever possible to give the site a more personal feel.

3. Front End

I implemented the design in front end, using HTML5, Sass/CSS3, and jQuery, ensuring that it was responsive and cross-browser compatible. I built a comprehensive, interactive style guide, then moved into the other site pages. I also worked to design and develop content modules that could be repeated throughout the site, helping to uphold overall design consistency.

4. UX and Mobile Considerations

The site navigation and product catalog pages received special attention for mobile. The navigation remains clear and easy to use across devices. It provides large touch targets on mobile and keeps the number of clicks required to navigate the site low. For the smaller-screen version of the site’s equipment pages, equipment cards show in a two-up row to keep information density high. The long list of product filters is placed above the product list, collapsed but accessible by clicking a toggle button, which reveals all filtering options without taking the user out of context.

Recent Work

Get in Touch