Client Case Study: eCommerce Redesign

Becoming the client expert and designing a customer-focused online business strategy

In the fall of 2018, Teton Sports hired Fuel Marketing to help redesign their eCommerce website and because of my help while an intern, I was hired to help the developer design the site more strategically and smoothly.

As the principle designer and UX specialist, I worked alongside the internal account manager and web developer. I also participated in all meetings with the client’s head of marketing and creative director.

The Challenge

Teton Sports is an outdoor brand that makes great quality products—like sleeping bags, tents and backpacks—at a great price. They have several of the best rated products on Amazon and are a top seller at Sportsman’s Warehouse locations and had an active community across social media and their blog.

Pictures from when I camped out at the local Sportsman’s Warehouse and clips from Teton’s top products on Amazon.

Where Teton had the most opportunity was in better ownership of their customer relationship through their website.

TetonSports.com had a nice looking design but the underlaying build was difficult to work with, it had several places with Lorem Ipsom placeholder text, and navigation was awkward and lead to many dead ends with no way back. Product was also listed twice on the site—one where you could buy product and one where you couldn’t.

Navigation with four unique destination pages with placeholder text and dead-end links.

Getting to Know the Product and Company

When talking with the client they had some great ideas and really wanted to simplify the site and keep a clean minimal look. Teton’s extensive social media and blogging strategies were also a part of the project and in need of some clarification.

To get to know Teton Sports, I spent time researching the third parties that sell the product—even spent time hanging out at a local Sportsman’s Warehouse location. Although the site analytics weren't very helpful, I did get access to customer support tickets and found some common trouble areas that we could improve through the site design. I also scheduled a visit to Teton’s warehouse to learn how the employees talk about the products and what their internal culture was like. I really wanted to make sure we built something that fit them and would accommodate new efforts as they grew.

During my visit to Sportsman’s Warehouse, there was a Boy Scout and his mom at a table out front selling coupons for a fundraiser. As I thought about that later, that seemed like a great core persona to use for the site. I’ve spent a lot of time working with Boy Scout troops and the quality and price of Teton’s products seemed like a great fit. These are often people who aren’t willing to spend on the high-end gear but still need something that will work well and hold-up through multiple kids. They also don’t keep up on the latest features and trends and could benefit from good advice and help when making a decision.

Designing the site with features to help an entry-level audience quickly make a solid decision seemed to fit both Teton’s goals and their current market. Designing the look of the site to feel more upscale would reinforce product value and not alienate the enthusiast customers who care about and were willing to pay for higher-end features.

Primary Persona: Boy Scout mom who was looking at buying equipment for their teenage sons.

Eventually, we invited the project leaders over for a User Story Map exercise. I wanted to share some of the things I was learning to get their feedback (especially on the Boy Scout family persona) and get everyone, from both Teton and Fuel, on the same page with where we were and what the project path looked like going forward.

While that meeting definitely didn’t go as planned (user story mapping needs more than just an hour and a half) the Teton folks opened up a lot more on what they already knew about their customers and how they design their marketing. I don’t think we would have gotten that info from them without this meeting and I was still able to use it to build a strong strategy for the site.

Building Strategy and a Site Map

The company’s main goal was to help everyone “Get Outdoors and Enjoy Life.”

This was obviously not an idle goal. Teton supported this beyond making high value and price-accessible products. They also have a strong warranty and provides repair parts through an online storefront. They also were very committed to supporting a community through their blog, social media campaigns, and even live events.

Because of this, I broke down a three point digital strategy to guide decisions and features and built a site map to show how these goals could be applied to the website.

Product Details

Before I got too deep into wireframes and design, there were still some important details to figure out. We were looking at around 120 products that we needed to both organize on the site and import into the new WooCommerce backend. While our developer built a spreadsheet with the fields he would need, I worked on standardizing the categories and product spec details.

For the categories, I created a card sort exercise. Standardizing and organizing product details for a spec sheet required time and effort digging into all the details I could find on each product to find commonalities and weird outliers.

A guide for the card sort activity and the very helpful product spec chart study.

Initially, Teton was very open to providing a few employees and customers to go through the card sort, but we were never able to make it work out. In an effort to help alleviate concerns, I build an activity guide to show exactly what the process was and what questions and used it with a few people I found. Although I had hoped for more, I was able to get a variety of backgrounds and gathered some good insights from them. Ultimately, however, Teton’s marketing department chose to go with a fairly standard product organization and categories that should work fine.

The effort from building the spec charts proved very valuable and sparked good conversations about the products with Teton. By really understanding the products and culture, I was also able to help work through many of the little challenges that came up throughout the build and while working with the developer.

Final Design and Lessons Learned

This project was a larger digital project than either Teton or Fuel had taken on up to this point and there was a lot that we learned along the way. Most importantly, I wish our first move was to fix the navigation of the original site. There already was a functioning online store and if we had made some initial fixes to what already existed, we could have been driving value and revenue to the client from the start.

Eventually, poor communication between the companies and pressure to ship the new site forced us to put aside many of the details I was working on and rush through a much more generic build than I had hoped. I personally learned a lot about the difficulty in designing for screens as fluid as the web. I had several features that looked good in design but had to make adjustments once we looked at putting it into code.

Working directly with the client, researching the company and building the strategy were my favorite parts. Because of the unexpected rush in the end, the final build wasn’t quite what I had envisioned, although, it does work much better than the original and is a great platform for future iterations and improvements. As this is a long-term client, we will have many opportunities to analyze feedback and make adjustments down the line.

The official website should be going live soon at TetonSports.com but in the meantime, you can see my final prototype built in Adobe XD here.

You can view the final prototype built in Adobe XD here.
The typography on this style guide version ultimately proved too simple but in the final rush to finish, so many changes happened during the build that a comprehensive guide wasn’t used.

User experience and design thinking professional. Curious—with a love for technology, the social sciences and understanding nuance in counter-intuitive ideas.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store