TRAILMARK | 2026 | UX/UI

Designing an e-commerce checkout for Trailmark

Designing an e-commerce checkout for Trailmark

Role

Product Designer

Timeline

January 2026 - February 2026

Team

Edwin Chu
Xi Chen
Yania Zhou

Tools

Figma
Google Suite

OVERVIEW

Trailmark is a student UX/UI case study centered on creating an intuitive e-commerce purchasing experience.

Trailmark is a student UX/UI case study centered on creating an intuitive e-commerce purchasing experience.

The project explored the complete customer journey, from landing on the website to successfully purchasing a product. By conducting competitive analysis and user interviews, our team uncovered key user needs, frustrations, and behaviors. These research findings directly shaped the design of Trailmark's online shopping experience, ensuring every design decision was grounded in user insights.

THE PROBLEM

The challenge was to create an online shopping experience that met the unique needs of ultralight hikers.

The challenge was to create an online shopping experience that met the unique needs of ultralight hikers.

The project brief challenged us to design an e-commerce experience for Trailmark, a fictional ultralight hiking and camping gear brand. Since the audience purchases specialized equipment, it was essential to understand their goals, frustrations, and decision-making process.

SOLUTION

The solution is an easy-to-navigate e-commerce experience shaped by research insights, with a new comparison feature and personalized recommendations that differentiate the brand from similar outdoor retailers. The experience also incorporates familiar e-commerce patterns and features users expect from hiking and camping gear websites.

RESEARCH GOALS

To guide our research, we established two key questions that would shape the design process. These goals allowed us to investigate both user needs and business objectives, ensuring that our design decisions balanced a seamless customer experience with Trailmark's goals.

Goal #1

What do users value most when purchasing ultralight hiking and camping gear online?

Goal #2

What does Trailmark hope to achieve through its online purchasing experience?

COMPETITIVE ANALYSIS

Competitive analysis revealed industry standards and opportunities for improvement.

Competitive analysis revealed industry standards and opportunities for improvement.

We analyzed four competitors across four key categories comparing the data in a comparison chart. While features like customer reviews, product blogs, videos, and product highlights were common, we found that product weight was not consistently displayed, revealing an opportunity for Trailmark to better support ultralight shoppers.

The competitors were:

  1. Big Agnes

  2. MSR

  3. Goassmer Gear

  4. Hyperlite Mountain Gear

USER INTERVIEWS

Semi-structured interviews helped us uncover key shopping behaviours and user priorities.

Semi-structured interviews helped us uncover key shopping behaviours and user priorities.

We interviewed two groups: experienced hikers and campers with extensive gear purchasing experience, and casual outdoor users with limited purchasing experience. Using thematic tagging, we identified recurring patterns across all six participants. The most common themes were tagged:

Valuing quality of
the product.

Valuing quality of the product.

Mentioned 12 times

Researching products before purchasing.

Mentioned 11 Times

Specifically looking for lightweight gear.

Mentioned 10 Times

KEY INSIGHTS

From our research, we formulated five key insights that would inform our design. These insights were developed by synthesizing findings from conducting a competitive analysis of similar websites and identifying recurring themes in our interviews through thematic tagging and analysis. By bringing these sources together, we were able to identify common patterns, user needs, and opportunities that helped shape our design.

  1. Users value trust and credibility.

The overall experience. Like if delivery is consistent and easy returns are also important.

— Participant 4

I have knowledge of established brands in the industry who have a reputation within the community.

— Participant 5

  1. Users want to be reassured that the product is what they expect by physically seeing and touching the item.

It was a female-frame specific because the men's frame ones are very uncomfortable. I was over at MEC, and I was able to try them all on which helped.

— Participant 2

If you buy it online, you can't try things on. And even if you do, you do know if it's good until after o=you use it for some time.

— Participant 4

  1. Users like to do research prior buying products through online searches and recommendations from friends and family.

I definitely put research into buying hiking shoes beforehand, and kind of looked at what more experienced hikers recommended.

— Participant 1

All competitor websites offer ways for users to do product research including adding blog posts, preoduct features, product videos, and user reviews.

  1. Reviews of products from other customers are important to consumers and sohuld easily accessible on a product page.

I did a Google search with all the different stores showing their reviews and prices.

— Participant 3

All competitor websites feature customer product ratings at the top of product pages, and contained a customer review section further down the page.

  1. Although price is important to buyers, outdoor enthusiasts are more willing to pay a higher price for gear.

I do not care how much it costs because I would have to carry it. So every ounce matters on the trail.

— Participant 3

I do values price, but I are willing to pay more if the product is proven through product reviews and credible with strong return policies.

— Participant 4

USER GROUP

✅ Experienced Outdoor Enthusiasts

  1. Have many experiences purchasing outdoor gear.

  2. Experienced backcountry camping involving hiking.

  3. Hiking & Camping for over 4 weeks a year.

❌ Outdoor Amateurs

  1. Have few experiences purchasing outdoor gear.

  2. Never or rarely backcountry camped.

  3. Camping 0 to 1 week on average.

  4. Hike less than 1 week a year on average.

From our interviews, we grouped participants into two categories: outdoor enthusiasts and amateurs. After weighing the pros and cons of designing for each the stakeholder group and analyzing our interviewees responses, we ultimately chose to design Trailmark’s e-commerce experience for experienced outdoor enthusiasts because:

  1. More likely to purchase ultralight gear.

  2. Value high-quality products despite higher prices.

  3. Actively seek to upgrade to the latest outdoor technology.

THUS,

How might we design an e-commerce experience that helps experienced hikers easily purchase ultralight gear?

How might we design an e-commerce experience that helps experienced hikers easily purchase ultralight gear?

USER FLOW

WIREFRAMES

We then created our wireframes based on the user flow, translating the key steps and decisions into a clear page structure. This allowed us to explore different layouts and establish the hierarchy of information before moving into the visual design, while ensuring the experience supported the needs identified through our research.

KEY DESIGN DECISIONS

Blog Posts

Based on our interviews, we found that customers rely on reviews when making purchasing decisions. To address this, we added a blog section, a feature we also observed on similar websites. This gives customers access to real user experiences and insights about Trailmark products, helping them make more informed purchasing decisions.

Comparison Feature

We found that customers, especially experienced outdoor enthusiasts do research before making a purchase. To make it easier for them to determine which product best suits their needs, we added a product comparison feature within the specifications section. Users can compare the specifications of multiple products side by side, making it easier to evaluate differences and make informed purchasing decisions.

Video Showcase

Since e-commerce is entirely digital, it can be difficult for customers to fully understand a product through static images alone. Many participants mentioned that they prefer to see and physically interact with products before making a purchase. While an online store cannot replicate that experience, we addressed this by adding a video section. The videos demonstrate the bags in use, allowing customers to understand their size and functionality, in a way that goes static images.

Reviews

We decided to include was a customer reviews section. Although it is not a new or innovative feature, our research showed that customers highly value hearing from real people before making a purchase. Reviews increase the credibility and trustworthiness of the products by providing authentic customer experiences.

Payment

For the payment process, we decided to use the same checkout system commonly found on many hiking and camping gear websites. Rather than designing a new payment system, many retailers rely on Shopify's secure third-party checkout to handle transactions. Although Trailmark could implement its own payment system, we chose to use Shopify because it provides a checkout experience that customers already recognize and trust.

FINAL PROTOTYPE

CONCLUSION

This project taught me that even within a standardized e-commerce flow, thoughtful UX design can have a meaningful impact. At first, it seemed like there was little room to improve a typical online shopping experience, but I learned that effective design comes from understanding the specific needs of the target audience through user research.

By identifying what experienced outdoor enthusiasts value most, we were able to make informed decisions about what information to prioritize, where to place it, and how to create a more intuitive purchasing experience. This project reinforced that successful UX design isn't always about reinventing a product, it's about using research to make familiar experiences more useful, efficient, and user-centered.

©EDWINCHUDESIGN2026

©EDWINCHUDESIGN2026

©EDWINCHUDESIGN2026