I N T R O D U C T I O N
For some reason, websites for industrial brands tend to be sterile, plain, outdated, neglected, or difficult to use. But they don’t have to be.
A project with a niche audience doesn’t mean that design and experience aren’t as important as they are on other projects. In fact, a project with a smaller audience probably demands that design and experience work harder to make sure users engage and convert. At least, that’s how we approach them.
So while the audience for a company that makes indestructible desiccant breathers might not be as large as a contest for Premier League fans, it’s still our goal to create a memorable experience and a positive impression.
At the end of the day, the challenge is not much different than any other project: make sure the brand is represented clearly, that value is shown, that products are easy to find, and provide a meaningful experience for the user. So that’s what we did for Des-Case.
Honestly, though, we can’t figure out why so many industrial websites are so bad.
T H E C H A L L E N G E
Now we can admit it: first we had to figure out what a desiccant breather was and why it was important. We didn’t know that desiccant breathers prevent lubrication contamination in machines or that lubricant contamination was such a large cause of failure in heavy-duty machines. So we did some research and went through roughly the same process users would also have to go through learning about their own needs. Along the way, we discovered that, more than just showing products, an emphasis would have to be placed on education. Even for those who were familiar with Des-Case’s entire line of products, solutions needed to be customized to fit the customer’s inventory. Product pages couldn’t be created like they are for typical off-the-shelf retailers; we needed to create an experience tailored to the specific customers who would be visiting the site.
D E F I N I N G T H E S T R U C T U R E
The first thing we had to do was turn the site’s large structure upside down and figure out the best way to organize it and connect all of their products, offerings, and resources. We started with a navigation consisting of fly-out menus, which helped us accomplish organization. We separated the three main product types here, with their overview pages easily accessible.
We discovered that services and resources go hand-in-hand and we were able to combine them into one dynamic hub. Des-Case also needed a place to show their rich heritage so we organized that alongside their mission and leadership into a separate section. Lastly, their blog had been maintained off-site with a different identity. We seamlessly integrated it into the new website with a fixed category bar for clearer navigation.
A M E M O R A B L E F I R S T I M P R E S S I O N
The next thing we tackled was the homepage, specifically focusing on the best way to introduce the hero header and the three main product types. We went back and forth on the design more than a few times, trying to decide what the best introduction to the site would be. Ultimately we went with this really cool animation of oil filling the Des-Case logo, like one of their oil visualizers. This was a striking, unforgettable design to grab the user’s attention and keep it. Nobody else in the industry greets users the same way.
T H E D E S I G N
Really high quality design requires having really high quality assets to work with. That’s exactly what we got with Des-Case: clear photography, dynamic video, and a distinct style that we integrated into the new site design. We were able to be creative and use different aspects of their branding — like the tan outline we wrapped site elements in — to give the site a unique feel, even in areas that don’t typically make an impression, like borders outlining blog posts or separators dividing the header and footer from content areas.
We also incorporated iconography to touch upon the various industries Des-Case makes products for without needing to account for different jargon and language used in each. No matter what industry you serve, you can tell right away whether or not a product is for you. Icons became a common theme elsewhere throughout the site in the blog categories and resource categories as well.
P R O D U C T P A G E S
The meatiest part of the project was designing the dynamic inner product pages. This isn’t a traditional e-commerce site. In fact, it’s not an e-commerce site at all. You can’t buy anything directly, you have to go through a distributor. We needed to build product pages that were extremely thorough because almost every solution Des-Case provides is tailored to the customer’s machine. So each product is dependent on a number of specs, applications, and environment. Users can customize their own based on their situation and then approach distributors. A distributor locator and set of related resources was integrated directly into every product page for ease of access.
Customers don’t always know exactly which product they might need in this case, though, so in addition to direct links from the navigation, the section pages included overviews and specific details about each product.
P R O J E C T T A K E A W A Y S
The best visual isn’t always the best solution.
There were many instances in this project where something was nicely designed and thought to be what would work best, but was discovered to be better as a simpler solution. Every time we thought we had something figured out, we tried to break it down into an even simpler form, sketching out how the experience could be made more efficient before committing to a design.
For example, an attractive bar featuring industries and associated icons under the homepage hero header had a nice harmony but we discovered it wasn’t going to be a priority for users and didn’t necessitate such a prominent spot on the page. Although it looked great, it was better turned into a simple list of industries further down the page.
