This client came to us in 2016 looking to update their old website with a new design/structure that would accomplish a few goals:
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.
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.
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.
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.
