The ask

Grunt Style is a patriotic lifestyle brand with a mission to deliver the highest quality products and bring patriotism to every home in America. American Grit, a publication of Grunt Style, produces digital content specifically for military veterans, patriots, and anyone who loves America. The publication features articles, videos, podcasts, and other forms of media that cover a wide range of topics, including hunting and fishing, sports, military news, and lifestyle.

We designed and developed Grunt Style's news and culture site, allowing them to offer digital content to their audience through an engaging experience. In addition to product design and website development, we organized the 4,000+ articles American Grit currently had on their site.

The process

A 16-week timeline allowed us to perform the required research to make their website stand out through a clean and efficient user experience (UX), user interface (UI), and interaction design. This research would involve content modelling using tags, search engine optimization (SEO), keyword research, and how to make the website easy to navigate. We would enhance the user experience further through a standout ‘trigger me’ button, adding a unique way to identify new content. 

Clean and efficient user experience

The goal for our UX design was in line with what the company was looking for — making an easy-to-navigate website with accessible buttons and a simple filtering system.

Moving into UI design, we applied visual design principles to create an appealing and engaging interface. The team carefully selected colours, typography, and imagery to align with the brand's identity and enhance the user's overall experience.

Tags

Working on a website with an enormous amount of content, we want to ensure users can quickly scan, scroll, and find what they are looking for.

The 30+ categories identified during content mapping presented us with a problem we knew we wanted Material Design to solve. 

Tags gave us the level of scannability that would bring order to the chaos, that is, 4,000+ articles. It’s a visual way of organizing and having effortless control over a ton of information. The user can quickly find content related to their interests using this design.

Our tags are unique because we use them as inline, expandable accordion menus. This is made possible by incorporating both leading and trailing icons, which indicate the number of selected elements and denote expandability.

“Further to the dog tags, we wanted to start categorizing by series, similar to Netflix or other popular streaming apps. There are many podcast and video series by American Grit, so we included a feature page per series that filters by season. These series filters also helped with marketing campaigns related to the series.”

Shan Dhaliwal, Product Manager

Discovering controversial articles through the trigger me button

Another of the new website's standout features is the "trigger me” recommendation button, which mimics the "I'm feeling lucky" button on Google. It allows visitors to randomly browse through American Grit’s more controversial articles on the website, adding an element of surprise to the browsing experience.

By analyzing traffic and ongoing reporting; we would ensure the content was organized and easy to find, improving the project's overall effectiveness and proving that our system was delivering the results we anticipated. 

The outcome

Immediately upon launching the website, we received an outpouring of feedback from team members expressing their approval of the new design. The American Grit team was excited to see their content come to life in a contemporary way — the way it deserves to. From the first showcase of our chips to the final product launch, the project received a positive response. Within the first three months of the relaunch, the new American Grit site had generated nearly 100,000 pageviews beyond our expectations. We continue collaborating with the client on future projects that aim to enhance the user experience.

Through extensive research and user testing, our team established a cohesive design language that informed the brand, provided the necessary UI scaffolding for scalability, and, along with the implementation of user feedback and suggestions, contributed to the success of the American Grit website.