Brandon Rechten
brandonrechten-tenba-cover-1980w-v02.jpg

Tenba

 
 

Tenba

Tenba provides high quality, innovative camera bags, backpacks, messenger bags, transport cases, and tools to ensure the safety of photography, videography and computer equipment throughout all weather, travel, and wear.

Project: Tenba was looking to replace a dated website that was built on an aging CMS with a more modern site with improved navigation and a larger emphasis on quality photography.

My Role: User Experience and Design Direction. I headed up the UX and visual design portion of the project serving as the Design Director, leading our agency partners in the creation of the initial sitemap and wireframes, creating high-fidelity mockups, as well as researching competitors and collecting insights from Tenba's stakeholders.

 
 
brandonrechten-tenba-cover-1980w.jpg
 
 

User Experience Goals

  • Provide clear user journeys for three main customer types (outlined below in the Journey Map)

  • Reduce confusion surrounding the multiple product collections by providing clearer information and usage scenarios

  • Provide a pathway between product education and the shopping experience, enabling users to easily move from one to the other

Technical Goals

  • Reduce bounce rate

  • Improve time spent on page

tenba-website-ux-goals.jpg
 

 
 

Competitive Research

I separated Tenba’s competitors into two categories: Financial competitors and Design competitors. I wanted to make sure there was a distinction between companies that Tenba wanted to compete with tonally and aesthetically, and ones who were competing in sales by either offering a better user experience or through marketing activities.

Findings

Tenba’s aesthetic competitors were leaning heavily into adventure/wanderlust style imagery. To differentiate themselves, and lean on their “born in New York” heritage the recommendation was made to utilize an urban aesthetic. Product and lifestyle imagery was to be taken in and around NYC to showcase the brand’s toughness and versatility.

 
 

 

Evaluation of Current Website

I spent time having a few users go through the current site, mapping out some pain-points as well as working with the analytics team to find trends and areas where users might be dropping off or getting confused.

 

Key findings

Analytics showed that users were getting confused with the multitude of ways to navigate the site, going back and forth between collections to figure out what they were looking at.

On the shopping page, product filters were confusing and/or irrelevant. Important filters, such as indicating whether or not a bag was carry-on compatible were missing.

User reviews were misleading, since a product with 0 reviews would default to 5-stars. Additionally, very few reviews overall was having a negative impact on perception.

tenba-website-mood-board.jpg

Mood board

I utilized Pinterest to create a mood board of the gritty, urban aesthetic that the brand was looking for.

The types of images I was looking for were based off the brand’s New York heritage, but I also didn’t want to alienate users who live in suburban or rural areas, so the search was expanded to include some more examples of “escape the city” style hiking and day trip imagery.

 

Personas

I built out three personas that captured the feedback we’d collected from speaking with users at tradeshows, discussions with the brand and sales team, as well as the demographic information provided by the analytics.

 
tenba-persona-gary-v2.jpg
tenba-persona-eileen-v3.jpg
tenba-persona-eileen.jpg

Journey Map

A journey map was created to outline all the possible pathways to purchase, without dead-ending at any point.

The user personas were then ran through these pathways to make sure various use cases were being addressed:

Power shopper: Needed a straightforward path from shopping to product to purchase.

Recreational shopper: Needed a pathway that allowed exploration of the various collections and their features and benefits.

Reluctant shopper: Needed a pathway that provided brand education and awareness.

IMG_20180730_193041.jpg

Wireframes

Wireframes were created externally by an agency partner. I was involved in defining the goals and flow of the pages as well as collecting feedback from the brand and making sure it was implemented.

Wireframes provided by Shore Digital.

 

High-fidelity mockups

Once the flows and wireframes were approved, I created high-fidelity mockups so the brand team could get a feeling of the aesthetics for the site.

 
 
 

Development

Once the high-fidelity mockups were approved, I worked with our agency partner on development by annotating the mockups and outlining interactions with the development team.

 

 

User Testing

Once development was nearing completion I ran eight user testing sessions where I brought in people with varying degrees of familiarity with the Tenba brand and observed them using the website.

 
startae-team-704142-unsplash.jpg

Key observations

Generally favorable reactions to the emphasis and use of photography

Large, full-screen hero images were sometimes overwhelming. Decision was made to reduce their max height so content was visible in the lower-third of the screen.

Filter functionality was confusing. It wasn’t immediately clear if filters were inclusive or exclusive. Single select or multi-select. I ran a separate testing session to identify pain-points and recommend solutions to development. These were implemented and re-tested prior to launch, with an overall improvement.

 

Launch

Upon launch, the site was well-received by photo dealers, representatives, and customers. The revised visuals and focus on photography were pointed-out as a major improvement. 

You can view the live site here: Tenba

 

 

Results

In the 8 months since launch, the site's bounce-rate has decreased by 14.77%, while the session duration has increased by 11%. Direct ecommerce sales only accounts for a small portion of Tenba’s overall sales, however, since the launch web sales have also seen an increase of 6%.