Establishing Trust and Authenticity in Product Reviews
I helped shape Better Trail's new outdoor gear review site, tackling content organization and helping to build user trust in a competitive market.
Project Overview
Better Trail was a new outdoor gear review website designed to provide serious adventurers and casual consumers with trustworthy, in-depth, high-quality reviews of outdoor gear.
My Role
I was the lead UX designer collaborating with a Visual Designer, Developers, and a PM. I was the sole individual responsible for User Experience and I personally created the deliverables that you will see in this case study, excluding visual design and developmen (though we worked very collaboratively throughout). From kickoff to launch, I worked closely with the team to define the platform's structure, user experience, content, and features.
Research & Discovery
The visual designer and I collaborated on running a series of discovery meetings with the client's key stakeholders. We spent time understanding their goals, any prior work they'd done, and any other specific requirements. I believe for any project that getting to know the team, building trust and learning more about how they operate is very important to the process.
"On top of a mountain is not the best time to find out your jacket isn't really waterproof"
I then conducted competitive research on leading gear / product review websites and other adjacent content sites, identifying usability gaps and opportunities to improve our content strategy. Through user research, including surveys and interviews with outdoor enthusiasts, I uncovered key pain points, such as difficulty comparing products and finding trustworthy products and reviews.
These insights confirmed our belief that a user's trust of a site like this is an important factor for both the content and the products themselves. We applied this insight as a guiding principal throughout the design process.
Information Architecture & Navigation
Their IA and Nav was not well established yet, they were still working out exactly what kind of content they'd create and how they might want to organize it. I helped them to define the content templates we'd need and how best to organize everything from both a navigation and also a back-end CMS perspective.
Initially they were thinking that grouping content by type would make sense as users might not have a single goal in mind, they might want to just browse all reviews for example. I suggested grouping the content by activity, which serves at least two purposes. First it informs users exactly what it is that Better Trail focuses on by listing the types of activities they cover. Second, a user might not understand the difference between a gear guide and a review, but they are likely here in relation to a specific activity or two.
We also accounted for the quantity of content they'd have at various stages of the site's lifespan. Early on there wouldn't be as much written and so the content catalog depth and breadth would be shallower. For this first phase we simplified the navigation, later they can grow into a nav that divides the site into larger sections by activity.
Content Strategy
Better Trail had various types of planned content: Gear Guides, Individual Product Reviews, Opinion Articles, and might add more types over time. We wanted to ensure that the site had a consistent look and feel but was also flexible to meet each content types' needs. I created layouts and a content component system that would allow each type of content to stand alone, and also feel cohesive.
This was a reasonable enough initial plan, however we ended up changing the way the individual product reviews were laid out. We found that they needed more differentiation to fulfill their purpose more effectively.
Gear Guide
The Gear Guide content type would be a category level collection of products, such as all "Hiking Boots". Curating all of the individual reviews of a given category to rank and compare them against each other.
Better Trail had a rough idea and wireframe of what they were looking for with this template. I helped further define and refine the content and how we would present all of the detailed data and analytics they would produce.
Gear Guide Product Cards
These product cards are the core element of this page. We needed to house a variable amount of products with a variable amount of content. They needed to be both a concise summary of each product for quick browsing, we also added additional expandable content so users could dive deeper. The reasoning for this was to allow users to explore the category at a higher level without needed to visit multiple individual review pages.
Reading Length Feature
This little feature allows users to control how in-depth each product card will be depending on their desired approach. We established three different levels: Skim - short, preview, Medium - a little more content, All In - everything we have. These would each serve a different amount of content on each card depending on the user's preference.
Product Comparison Tool
This module allows users to more directly compare products together. I thought this would be an important tool to have further down the page as users have now browsed a few of the products. They now might have a short list they're interested in and want to compare more directly.
Our Ratings Explained
One way we sought to build trust and express Better Trail's methodology to users was for them to include a section that goes into depth on their testing practices and methods. We're building user confidence through expositing some of the back-end practices and also further defining why and how each rating is produced.
Individual Product Review
For the individual product review pages, we initially thought we wanted to match the format of the gear guide for visual consistency. But, in practice we found that differentiation was not only helpful - allowing users to understand what kind content they were on, but also to allow the presentation to be more tailored.
We tried a few layouts, but ended up with a template that mimics an ecommerce PDP. Their reviews are not just text content, they create their own incredible photograph from their field testing. And at the end of the day the user is in the mode of "shopping" for this product. We thought that this new layout would serve the text content, photos, and data best.
Visual Design & Iterations
I worked closely with my visual design partner throughout the design process. I like to work very collaboratively, continuously iterating and refining features and functionality. There are always elements that are well defined in the wireframe stage, then when they start being built out in higher levels of fidelity they need some tweaks. Also, as all of this was entirely new to the Better Trail team, they were figuring out exactly what they needed along the way.
The example below of the gear guide progress shows how we refined the content on product cards. This gave users a better visual preview of the ratings and shortened the height of the minimized card to improve browsing. We also added a few small elements such as the overal guide summary and product summary carousel to preview what the guide has to offer.
Development Handoff
I collaborated with the visual designer to create a development handoff document. They compiled all of the final designs and I annotated important elements describing intended functionality, details, and open questions. We then walked the development team through everything, answering questions, adding documentation as we worked through the finer details.
Our documentation helped support a smooth development process, I was involved along the way continuing to clarify, answer questions, and create additional design iterations as the site was built.
Impact
I helped Better Trail refine their strategy and platform with research, UX best practices, and design iteration. My work made it easier for users to navigate the platform, find relevant product reviews, understand complex product analysis, and make an informed purchase decision. These improvements led to high user retention and positive feedback from the Better Trail community.
Final Designs
The designs as they stood as of development hand off can be found below, you can also check out their live site for more.
