This 1-week project was a design challenge competition for a marketing agency where I had to redesign the home page for one of their clients: Graver Technologies, a purification technology company based in the US.
My required deliverables included low fidelity wireframes, and a video walkthrough (found at the end of this case study) where I spoke to my design decisions. I competed against ten other designers and my solution was selected as the winner.
Briefing and Constraints
The following slides, along with a briefing video & heatmap, were provided to guide my research and design decisions. Beyond this information, I was not allowed to ask any further questions and had to problem solve using the data available at hand.
Research
I conducted a competitor analysis of different websites in the industrial filtration industry. As I was only concerned with the home page, I limited my analysis to the competitors’ home pages as well.
As part of my design process, I also looked outside of the filtration industry for further inspiration and best practices. As gravertech.com had a rather complex navigation menu, I looked toward websites that had well designed mega navigation menus.
Competitor screenshots I gathered as part of my analysis process
Redesigning the Navigation
One of the more challenging aspects of the redesign was reimagining the navigation. After my initial research and further exploration of mega navigation best practices, I pointed out a few areas for potential improvement from Gravertech’s original homepage.
After finishing my analysis above, I proceeded to redesign the navigation. As a starting point, I felt that the primary navigation needed to stand out more visually. Here is one of my design variants.
Finalized Navigation
While my revisions did a better job of making the primary navigation stand out, I felt that they made it more difficult for our third target persona, winemakers, who would be inclined to browse by industry.
I decided to bring back the secondary navigation from the original home page, but moved it lower down below the hero section. By placing it lower down the fold, the main navigation would still stand out visually, but users preferring to browse by industry would still easily find what they need. This is my final iteration of the navigation.
My final redesign of the navigation and hero section
Mobile Navigation
As I found that my desktop navigation solution didn’t translate as well onto mobile, I took a slightly different approach and consolidated the primary navigation and Industries We Serve.
My final redesign of the navigation and hero section
Video Presentation
To conclude this case study, here is an in-depth presentation where I share my thought process behind all my major design decisions.
